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.


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


Layout is the spatial structure/relationships of interface elements.


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


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


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:

Animation and other visual changes

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