The layers of user interface design

To help people structure what they learn about user interface design, I've divided it into these layers. Each layer builds on the previous layer but UI design doesn't always happen in this order. If you prefer to define user interface design in another way, that's brilliant.

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.

Non-content imagery

Some imagery is part of the interface but is not part of the content. One example is background shapes/motifs that add to the branding, but aren't intended to be noticed.

Polish

This layer contains techniques that aim to improve the interface as follows:

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.