Composition · 02 of 04
Use space to show relationships
Keep related elements close enough to read as a group.
The idea
Readers use distance to infer which pieces of information belong together.
A caption should feel connected to its image; a field label should belong to its input. When every gap is equal, those relationships can become harder to see.
Choose a small set of reusable spacing values and test them with real content. Borders and backgrounds can strengthen grouping, especially in dense interfaces, but they should agree with the spacing. The right balance depends on the component; inner padding does not always need to be smaller than every outside gap.
How to see it
Terms used in this lesson
The parts
- Proximity
- The distance that helps related elements read as a group.
- Padding
- Space inside a component's boundary.
- Gap
- Space between items or groups.
In practice
- Keep labels close to their controls
- Use a reusable spacing scale
- Add boundaries when they clarify grouping
Avoid
- Equal gaps between unrelated and related content
- Nested boxes without a clear purpose
- Treating one padding ratio as universal
The test
Remove decorative borders temporarily. Can you still tell which labels, controls and descriptions belong together? Restore boundaries where they add useful clarity.
Use the Markdown to PDF to preview a real document and inspect how headings, paragraphs and lists are grouped on the printed page.
Sources
- Max WertheimerLaws of Organization in Perceptual Forms 1923
- Rudolf ArnheimArt and Visual Perception 1974
- Josef Müller-BrockmannGrid Systems in Graphic Design 1981
Reviewed against all forty, on your product.
The audit is the cheapest thing we sell, and it regularly concludes that you do not need the project you came for.