The Law of Proximity
Put two things close together, and the mind ties them into one — no line, no box, no label required.
Before you read a screen, you group it. In a fraction of a second, with no effort at all, your eye decides what belongs with what — and the very first thing it goes on is distance. Things that sit close read as one thing; things with space between them fall apart into separate ones. This is the oldest law of perception, and the cheapest tool in design.
It is so quiet you rarely notice it — until it’s wrong. A caption drifting between two photos, a label stranded between two fields, a price sitting nearer the wrong plan: every one is a proximity bug, and every one makes a person hesitate. You’ll feel the law switch on in three quick labs, and learn to wield the space, not just fill it.
- Use spacing alone to make things read as one group — or clearly apart.
- See why a label stranded between two fields belongs to neither.
- Feel proximity beat colour, borders and boxes as the cheapest grouping tool there is.
- Catch “crowding” bugs, where unrelated things look related just because they landed too close.
Same dots. Different picture.
Here are twelve identical dots. Nothing about them will change — not their size, their colour, or their number. The only thing you can touch is the space between them. And yet, as you do, you’ll watch them fall into rows, then columns, then nothing at all.
That flip happens below thought. Your visual system groups whatever sits close together, long before you decide what you’re looking at. That reflex has a name — proximity — and it is the first and strongest way design tells the eye what belongs with what.
Whose label is this?
Proximity isn’t decoration — it carries meaning. Here is a sign-up form with every label floating in the middle of its gap, equally close to the field above and the field below. Read it: does “Email” belong to the box over it, or under it? You genuinely can’t tell.
Now bind each label to its field by nudging it a few pixels closer. Nothing else changes — no colour, no line, no box — yet the whole form clicks into place.
The same card, twice
Real layouts are just proximity at scale. Here’s a card with a category, a title, its byline, a line of body text, a button and a footer — the exact same six pieces in both states. In the first, every gap is identical, so nothing groups and your eye has to sort it by hand. In the second, related pieces move together and unrelated ones apart.
No borders are added. No colours change. Only the whitespace is redistributed — and the card goes from a flat wall of text to something you read in a glance.
Whitespace is a control, not a leftover
Every lab here is one law wearing different clothes. Name it, and you stop filling space and start using it.
Things that belong together, put together.
Proximity is the first grouping cue the eye reaches for, and the strongest — it can quietly overpower colour and shape. That gives you a rule you can carry into any layout: the space inside a group must be smaller than the space around it. Not a fixed number of pixels — a relationship. A label eight pixels from its field and twenty from the next reads as bound; make both gaps equal and it belongs to no one.
This reframes whitespace entirely. It isn’t the leftover after you place your content; it is a control you set, as deliberate as a colour or a font. Crowding — the failure mode — happens when unrelated things land too close and fuse into a group they were never meant to form. The fix is almost never a border or a box. It’s air: widen the gap between the things that don’t belong together, tighten the gap between the things that do.
So the working test is quick: on any screen, squint until the words blur. Do the clusters you see match the meaning you intended? If two unrelated blocks huddle as one, or a heading floats free of its text, proximity is lying — and a few pixels of space, moved on purpose, will tell the truth.
Which one groups better?
Five face-offs. Same content, two spacings — one makes the relationship obvious, one makes you guess. Pick the clearer, then see why.
Grouping by distance, everywhere
Once you can see proximity, you catch it doing quiet work everywhere — on every screen, and on paper long before screens existed. Five places you rely on without a thought.
No lines divide one search result from the next — only a wider gap between results than within them. Proximity alone tells you where one answer ends and another begins.
Ten digits are hard to hold; three little clusters are easy. The grouping isn’t in the numbers — it’s in the spaces you put between them.
Each price sits directly under the plan it belongs to, tight as a pair. Nudge the number a little sideways and buyers start reading the wrong price for the wrong plan.
Bold-italic-underline huddle together, alignment sits apart, lists apart again — three jobs, split by nothing but the gaps between them. You reach for the right tool without reading a single label.
The digits huddle in one tight block; the operators keep to their own column. You never confuse a 7 with a plus sign, because proximity has already sorted them into two jobs.
Proximity groups by distance — but sometimes things can’t move closer: a legend scattered across a chart, rows locked to a grid. When distance is fixed, the eye falls back on the next cue: likeness. Same colour, same shape, same size — and suddenly the scattered things read as one set. That is similarity, and it’s Module 2.
The real references
This law isn’t ours — the Gestalt psychologists named it a century ago, and the field has tested it ever since. Five worth your time. (Opens in a new tab.)
The Proximity glossary
Six words that turn “this feels cluttered” into a precise, fixable diagnosis. Tap a card to flip it.
Questions you actually ask
What people get wrong
Read the grouping
Ten questions in seven formats, tagged by thinking level — each with layered hints: a nudge, the reasoning, then a deeper connection. A wrong answer opens a door, never a dead end. Served from the question bank, never hardcoded.