The six layers of visual design
To help people structure what they learn about visual design, I’ve divided it into these layers. Each layer builds on the previous layer but visual design doesn’t always happen in this order.
This list only covers things that a person can see while they use an interface, so design elements like sound are not included.
Content, including imagery
This includes text, photos, illustrations, icons and any other imagery that is used directly to communicate the meaning or message of the interface. This also includes interface text like field labels.
Layout
The layout is the structure that the content on the page follows. This includes white or negative space, as well as containers for content.
Typography
The style and appearance of your text content, including the typefaces, spacing, and typographic scales.
Colour
The colours that you use in your interface. A greyscale interface has had no colour added, but a colour choice has still been made.
Polish
This layer includes elements and techniques that are not necessary to “complete” a design, but that are used to improve how it looks. These techniques will be used to achieve one of the following purposes:
- Add visual interest
- Improve visibility
- Separate content
- Connect content
- Guide attention
- Reinforce visual hierarchy
- Reinforce layout
- Reinforce brand
- Reinforce a theme
- Soften the interface
- Signify affordance
- Signify state
- Simulate reality
Animation and other visual interaction feedback
Animation is when elements move in some way. This category also includes changing states for elements, like visually highlighting a text field when it’s active.