Back to blog

The layers of user interface design

I've always been interested in how people can learn more about user interface design. By "user interface" I mean everything the user can see while interacting with software. To help guide people's learning, I've come up with the "layers" that I think make up user interface design. Each layer generally builds on the previous one.

This list is ordered, but of course UI design doesn't always happen in this order. I'd also like to stress that this list is here to guide learning for people who are new to UI design. Experienced UI designers will have their own way of thinking about the "layers" of UI design.

This post doesn't cover senses other than sight, such as sound effects. This post is also not about the wider skills involved in UX design like research and ideation.

If you want to learn about any of these layers, I've written another post which links to books and online resources for each layer.

Content, including imagery

In many cases the majority of content is text, but this also includes photos, illustrations, or any other imagery that is relevant to the content. This also includes 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 catch-all layer includes techniques that aim to improve a user interface but do not sit in the other layers. This includes techniques that add depth to the interface, increase contrast between elements of an interface, or increase visual interest/variety.

Animation and other visual interaction feedback

Animation is when elements move in some way. This category also includes changing states for elements, like highlighting a text field when it's active.

Back to blog