Pipeline & Workflow
Key question
How do you keep design consistent across multiple applications?
The more applications a brand has, the more essential a system becomes: reusable rules and building blocks that ensure consistency and save time. For digital products, this system is called a design system.
Learning objective: You will be able to explain the structure of a design system, define design tokens, and prepare a handover to development.
A system is faster than a hundred individual decisions.
5.1 / Structure
From small building blocks to full pages.
A design system consists of several levels:
01
Tokens
Base values for colours, font sizes and spacing.
02
Components
Reusable components such as buttons, cards, and forms.
03
Pattern
Combinations for recurring tasks, such as an ordering process.
04
Documentation
Rules, examples and rationales.
Brad Frost describes this structure in Atomic Design using the analogy of atoms, molecules, and organisms: small parts are combined into larger ones.
Small parts, big impact.
5.2 / Design Tokens
Design decisions as values.
Design tokens store design decisions as named values: colours, font sizes, spacing, radii. If a value changes, it changes everywhere.
A spacing system based on 4 or 8 pixels and a fixed-ratio typographic scale ensure rhythm and order.
Name instead of copying.
5.3 / Handover to Development
Collaborate rather than throw it over the fence.
Handing over to development requires more than just images: dimensions, states such as hover or error, behaviour across different screen sizes, and all assets in the correct formats.
It is best for design and development to work together early on. A shared understanding of the components saves queries and prevents the end result from deviating from the design.
Talking early saves correcting later.
Exercise
A small design system
Task: Build a small design system for a brand, such as Gartenglück.
STEP 1
Define colours, spacing and font sizes using the tool.
STEP 2
Design three components with all states: button, card, input field.
STEP 3
Documents when each component is used.
STEP 4
Design a new page using the system.
Evaluation: How quickly can a new page be designed using the system?