The six layers of visual design

I think you can divide visual design into these layers. Each layer builds on the previous layer but visual design doesn’t always happen in this order.

Content

Textual and visual elements that deliver the message of the interface.

Layout

Layout is the spatial structure/relationships of interface elements.

Typography

The style of text content, including typefaces, spacing, and typographic scales.

Colour

Colours in the interface. In this case shades of grey are colours.

Polish

This layer includes elements and techniques that are not necessary to “complete” a design, but that are used to change how it looks. Usually these efforts are supposed to do one of the following:

• 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 changes

Animation is movement of elements. Visual changes include e.g. a field that is highlighted when focused.

← anthonyhobday.com