Module 09 · 20 min
Layout, spacing, and alignment
Layout is how things sit on the page. Good spacing and alignment make a screen calm and easy to scan.
Use a spacing scale
Pick a small set of gaps — for example 8, 16, 24, 32 — and reuse them. Random gaps make the UI feel messy.
Align and group
Align edges to a grid. Put related items close together. Separate unrelated groups with more space.
- One clear column or grid, not floating boxes.
- Related fields share one block.
- Breathing room around the primary button.