Visual design exercises

  1. Set up a horizontal/column grid, add some elements, and make sure every element is aligned with the grid in some way.
  2. Design at least ten alternative versions of the same block of content. You cannot change the content.
  3. Set up a type scale and a spacing scale. Make sure the two relate to each other. Find some existing content (e.g. a news article), and use the type and space scale to style and structure the content.
  4. Create a visual hierarchy with only one spacing size.
  5. Create a visual hierarchy with only one type size.
  6. Design a website or app with only shades of grey (including black and white).
  7. Use the design from the previous exercise. Decide how you could use colour for the most impact, then add just one colour throughout the design.
  8. Design a website or app where only layout, typography, and colour are used to improve the visual design of the content. No extra elements.
  9. List some content in priority order. Now design a website or app which makes the priority of the content clear.
  10. Design a “boring” website or app. Now make it less boring, but don’t add any new elements. You can only change existing elements in some way.
  11. Design a “boring” website or app. Now add one big expressive element that makes the design stand out.
  12. Design a block of content that you might find in a website or app. Now iterate on it at least 15 times to improve the visual design. You can change the content.
  13. Design a view-only widget which shows your upcoming busy schedule in a small area (e.g. 400px wide by 200px tall).
  14. Set a ridiculous arbitrary constraint (e.g. only use type sizes over 50px). Design a website or app.
  15. Pick one central idea (e.g. "scary", "luxury"). Design a website or app where every visual design decision supports that central idea.
  16. Find an existing website and redesign it using the brand guidelines for another company.