An introduction to all of visual design

I gave a talk at UX Camp Brighton 2022 where I introduced visual design as a whole. Here it is in case it’s useful.

Some notes to start

  1. I want to hear from you if you disagree with any of this. I aim to map all of visual design, so the more I’m challenged, the better.
  2. The goal of this post is that you leave with a comfortable understanding of visual design. I don’t want you to have any “unknown unknowns”.
  3. I don’t believe that everyone should or should want to learn visual design. It’s not suited to everyone.

Some things I’ve discovered about visual design

  1. Some of visual design is tacit. You can’t write it down or easily share it. You learn it by doing it.
  2. Some people who learned visual design mostly by doing it, believe that it’s 80% tacit. I learned through research and believe it’s 20% tacit.
  3. Good visual design relies on care and attention to detail. They’re important. Not everyone has the patience for it.
  4. You might believe you need natural taste or artistic talent to be a good visual design. You don’t. You learn those things as you learn visual design.
  5. 66 of the 1448 principles on principles.design are about visual design. That’s 5%. Visual design feels like it’s more than 5% of UX design.
  6. Good visual designers rarely talk about their work in detail. Or they tell you everything about their work in a course and charge you thousands of pounds.
  7. Lots of respected UX designers don’t talk about visual design much.
  8. If you want to learn visual design it’s hard to know where to start. There are no obvious, cheap resources.
  9. Lots of design jobs, especially generalist jobs at startups, expect visual design skills.

Here’s what visual design is

First the layers of visual design:

  1. Layout
  2. Typography
  3. Colour
  4. Content (e.g. copy, illustrations, photos, icons)
  5. Non-content imagery (e.g. patterns, textures, little squiggles)
  6. Polish (e.g. depth effects, gradients, rounded corners)

Then some general concepts that are split into eight topics:

  1. Approach to work (e.g. importance of inspiration, consistency, iteration)
  2. Context of use (e.g. understanding your audience, cultural visual associations)
  3. Interaction design (e.g. signifiers, visual organisation for clarity)
  4. Aesthetics (e.g. classical vs. expressive aesthetics, fashions and trends)
  5. Qualities of the design (e.g. timelessness, variety, subtlety)
  6. Things to be aware of (e.g. more elements is harder, small visual issues catch the eye)
  7. Rules of thumb (e.g. there are rules you can safely follow, odd numbers are more interesting)
  8. Self-improvement (e.g. how to develop good taste, copywork)

Here’s what visual design can do

  1. Attract people (“I want to use that”)
  2. Communicate with people (“I learned something”)
  3. Express abstract things (“This feels energetic”)
  4. Identify the designer (“Was this designed by Jony Ive?”)
  5. Display interactive elements (“Here’s something I can press”)

Here are some ways to get better at visual design if you want to

To improve tacit knowledge:

  1. Apprentice with, watch, or copy good designers
  2. Collect good design
  3. Look closely at good design

To give yourself a better chance to create good design:

  1. Design with purpose (e.g. what should your design communicate?)
  2. Get better at the three pillars (i.e. layout, typography, colour)
  3. By systematic
  4. Use less stuff
  5. Use quality ingredients (e.g. good typefaces, good photography)
  6. Obsess over details

To build a library of knowledge

  1. Seek out the knowledge that experts have been able to write down
  2. Learn patterns and techniques
  3. Learn rules you can safely follow every time (e.g. never use pure black)
  4. Learn why design looks good (e.g. good design has uniform elements)

If you want to get better by tomorrow, here’s my six-step shortcut to good visual design

  1. Put less elements on the screen. Visual design is easier if there are less visual relationships to manage
  2. Use less colours, and only for a specific purpose (e.g. yellow for calls to action)
  3. Prefer classical aesthetics (e.g. straight lines, orderly layout)
  4. Learn the simple starting rules of good typography: line height, line length, type scales
  5. Use a spacing scale for coherent layout
  6. Finally, add just one thing to grab attention (e.g. a big image, a huge headline, something wacky)