UX & UI Design
What does an interface consist of?
Interfaces are made up of recurring building blocks: buttons, input fields, cards, navigation. Designing them once as components with all their states ensures the product remains consistent and can be developed further more quickly. A collection of such components along with guidelines is called a design system.
Learning objective: You can plan components with variants and states and build a small component library.
First the building blocks, then the pages.
One building block, multiple variants.
A good component is clearly defined and can be customised using just a few properties:
01
Variants
Primary, secondary, text: varying levels of importance.
02
Sizes
Small, medium, large, from the distance scale.
03
Content
Text, icon or both, controllable via properties.
Atomic Design organizes components by size: atoms like buttons, molecules like a search box with a button, organisms like an entire header. These terms help keep things tidy; they aren't set in stone.
Fewer variants, clearer roles.
Normal is just one of many.
Every interactive component has several states: default, hover, focus, pressed, disabled, loading, error and success. During the design phase, people often only design the pretty ones. The others then just happen by chance in the code.
Pages also have states: empty, loading, partially filled, full, and error. A good empty state explains what belongs here and offers the first step.
A component is only finished once all states have been designed.
Tokens, building blocks, rules, documentation.
A design system connects three layers: tokens for colours, fonts and spacing, components that use these tokens, and documentation explaining what to use and when. Design and code draw from the same source.
Starting small pays off: colours, a type scale, spacing, and five core components are enough for many projects. The system grows as new needs arise, not just in case.
A system grows with the product, not before it.
A small library
Task: Build a small component library for Velowerk.
STEP 1
Define tokens for colours, fonts, and spacing.
STEP 2
Design button, input field, card, navigation and notification.
STEP 3
Design all states for each component.
STEP 4
Write two sentences for each component: when to use it, and when not to.
Evaluation: Which component required the most states, and would you have known them all beforehand?