UX6: Visual design: type, colour, space and motion
Space, grids and alignment
🎯You'll be able to
Use a spacing scale and a simple grid so that screens look calm and consistent, and so developers can build them exactly.
🏠The everyday picture
In a well-laid table for a meal, plates are evenly spaced and cutlery lines up. Nobody measures it, but everyone notices when it's off.
📘What it really is
-
A spacing scale is a short list of allowed gaps, usually multiples of 4 or 8 pixels: 4, 8, 12, 16, 24, 32. Designers and developers choose from the list instead of inventing values.
-
Why multiples of 4: most screen sizes and densities divide well by 4, and a small list keeps spacing consistent.
- Proximity: related items close together, unrelated items further apart. A label sits closer to its field than to the field above.
- Alignment: a few strong edges (usually the left edge of the content) instead of many slightly different ones.
- Grids: a single column on phones; on larger screens, a grid of columns with fixed gaps (gutters).
- White space isn't wasted: it groups things and makes the main action easier to find.
📝A worked example
Input: the starter's spacing tokens.
"space": { "1": 5, "2": 10, "3": 15, "4": 20, "5": 30 }
Steps:
- Check each value: 5, 10, 15 and 30 aren't multiples of 4.
- Replace with a scale in steps of 4:
{ "1": 4, "2": 8, "3": 12, "4": 16, "5": 24, "6": 32 }. - Run
npm run tokens, thennpm run test:system.
Expected output: test 4 passes, and prototype/tokens.css contains --space-1: 4px; to --space-6: 32px;.
🌍Where it's used
- Design systems in large companies define spacing scales so many teams produce consistent screens.
- Print and newspaper layout use grids for columns.
- Developers use the same scale in CSS, so designs and builds match.
📝Case scenario
A shopping app had 23 different gap sizes across its screens. A designer reduced them to six tokens; developers replaced hard-coded values with the tokens over two sprints, and the app looked tidier without any visual redesign.
🖱️Try it
Measure the gaps on one screen of an app you use (screenshot and count pixels, or use developer tools on a website). Success: you list at least five gaps and say whether they follow a scale.
⚠️Common mistakes
- Random gaps. Sign: 13 px here, 17 px there. Fix: use the scale.
- Everything equally spaced. Sign: labels as far from their fields as from the next section. Fix: closer for related items.
- Many slightly different left edges. Sign: content looks jagged. Fix: align to a few edges.
🛠️For your project
Project 3's test 4 checks that every spacing token is a multiple of 4 and that steps grow in order.
✅Quick check
Why use a spacing scale?
Show the answer
So spacing is consistent and designers and developers choose from the same small set of values.
What does proximity mean in layout?
Show the answer
Related items are placed close together, and unrelated items further apart.