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
- 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.
- 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”.
- 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
- Some of visual design is tacit. You can’t write it down or easily share it. You learn it by doing it.
- 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.
- Good visual design relies on care and attention to detail. They’re important. Not everyone has the patience for it.
- 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.
- 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.
- 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.
- Lots of respected UX designers don’t talk about visual design much.
- If you want to learn visual design it’s hard to know where to start. There are no obvious, cheap resources.
- 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:
- Content (e.g. copy, illustrations, photos, icons)
- Non-content imagery (e.g. patterns, textures, little squiggles)
- Polish (e.g. depth effects, gradients, rounded corners)
Then some general concepts that are split into eight topics:
- Approach to work (e.g. importance of inspiration, consistency, iteration)
- Context of use (e.g. understanding your audience, cultural visual associations)
- Interaction design (e.g. signifiers, visual organisation for clarity)
- Aesthetics (e.g. classical vs. expressive aesthetics, fashions and trends)
- Qualities of the design (e.g. timelessness, variety, subtlety)
- Things to be aware of (e.g. more elements is harder, small visual issues catch the eye)
- Rules of thumb (e.g. there are rules you can safely follow, odd numbers are more interesting)
- Self-improvement (e.g. how to develop good taste, copywork)
Here’s what visual design can do
- Attract people (“I want to use that”)
- Communicate with people (“I learned something”)
- Express abstract things (“This feels energetic”)
- Identify the designer (“Was this designed by Jony Ive?”)
- 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:
- Apprentice with, watch, or copy good designers
- Collect good design
- Look closely at good design
To give yourself a better chance to create good design:
- Design with purpose (e.g. what should your design communicate?)
- Get better at the three pillars (i.e. layout, typography, colour)
- By systematic
- Use less stuff
- Use quality ingredients (e.g. good typefaces, good photography)
- Obsess over details
To build a library of knowledge
- Seek out the knowledge that experts have been able to write down
- Learn patterns and techniques
- Learn rules you can safely follow every time (e.g. never use pure black)
- 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
- Put less elements on the screen. Visual design is easier if there are less visual relationships to manage
- Use less colours, and only for a specific purpose (e.g. yellow for calls to action)
- Prefer classical aesthetics (e.g. straight lines, orderly layout)
- Learn the simple starting rules of good typography: line height, line length, type scales
- Use a spacing scale for coherent layout
- Finally, add just one thing to grab attention (e.g. a big image, a huge headline, something wacky)