What the law of proximity says
Objects near each other are perceived as a group. It is one of the Gestalt principles described by psychologists in the 1920s, and it holds up in every interface test since. The practical consequence: spacing is information. A label 4px above its field belongs to it; the same label 24px above belongs to nothing.
1. Group the elements that belong together
Put a field's label, input and help text closer to each other than to the next field. Put a product's image, name, price and button in a tight block with clear space around it. Put a heading nearer the paragraph it introduces than the paragraph above. If the spacing scale allows 8px inside groups and 32px between them, most layouts organise themselves.
2. Use background colour to separate sections
A change in background is a strong proximity cue: everything on the tinted panel is one thing. Use it for cards, sidebars and alternating sections, sparingly. Too many panels and the page becomes a patchwork where nothing is grouped because everything is.
3. Use white space instead of lines
Borders and dividers are what designers reach for when spacing has failed. Try removing them and increasing the gap instead. White space separates without adding visual noise, and it makes the page feel lighter. Lines are for tables and for places where space is genuinely unavailable.
Where it goes wrong
- Equal spacing everywhere, so nothing is grouped.
- A button placed nearer the wrong form.
- Footnotes and legal text closer to the heading than the content is.
- Cards with more padding inside than the gap between them, which merges neighbours.
Common questions
- What is the law of proximity in simple terms?
- Things placed close together look related; things placed far apart look unrelated. Designers use distance to show which elements belong to each other.
- How does proximity affect conversion?
- When the price, the benefit and the button sit together, the decision is easy. When they are scattered across a page, visitors hesitate or leave. Fixing grouping is often the highest-return change in a redesign.
- Is the law of proximity the same as white space?
- White space is the tool; proximity is the effect. You create groups by varying white space: less inside a group, more between groups.
