Space is the design
The gaps carry the grouping. Get proximity right and a page explains itself before anybody reads a word of it.
Things that belong together sit closer than things that do not. That single rule does more visible work than any other in layout, and violating it is why a form with uniform 16px gaps between everything reads as one undifferentiated column rather than four labelled sections.
The corollary is that space inside a group must be smaller than the space around it. A card with 24px padding whose sections are 24px apart has no internal structure. Halve the inner value or double the outer and the same content suddenly has an anatomy.
Generated layouts fail here almost universally, because each component was spaced in isolation and nothing negotiated with its neighbours. The fix is not more space, it is differentiated space, which usually means removing some.
You should now be able to
- Group elements by proximity rather than by boxes
- Explain why inner space must be smaller than outer space
- Diagnose a layout that reads as a soup of equal gaps
Loading…