03.3 · Capability in Experience

UI design

The visual layer: hierarchy, type, spacing, color and the systems that keep them consistent across a product.

Map6 skills

Not startedLearningComfortable

6 skillsClick a hexagon to set your status

03.3.1Visual hierarchyMaking the most important thing on a screen the most noticeable.
03.3.2TypographyChoosing and setting type so text is readable and the hierarchy is clear.
03.3.3Spacing and layoutArranging elements with consistent space so the structure is easy to read.
03.3.4ColorUsing color for meaning, emphasis and brand, with enough contrast.
03.3.5Responsive designInterfaces that work across screen sizes and input methods.
03.3.6Design systemsReusable components and rules that keep an interface consistent.

Mark all 6

Where to start

3 resources

articleStart here
Applying UX principles to the visual design of graphical artifacts ↗
NN/g · 2021 · 9 min
A worked example of building visual hierarchy with size, scale and color, checked with a squint test.
bookStart here
Butterick's practical typography ↗
Matthew Butterick · free online book
Start with the ten-minute summary; it covers most of what an engineer needs to set type well.
bookGo deeper
Atomic design ↗
Brad Frost · 2016 · free online book
The book that shaped how teams build design systems, free to read online.

2 tools

ToolFreemium
Figma
figma.com ↗
Collaborative interface design and prototyping in the browser, the industry default.
ToolOpen source
Penpot
penpot.app ↗
Open-source design and prototyping tool, self-hostable, built on open web standards.