Law of Proximity

Things placed close together look related. Spacing shows what belongs with what.

Objects near each other are perceived as a group. Spacing communicates relationship.

Group a form with nothing but space

A sign-up form mixes account and delivery fields, all evenly spaced, with no boxes, lines or headings. Drag the fields into order and open the space between them until the eye sees two clear groups.

How to apply it

~8px within a group, ~32px between groups. Aim for 3–4 clusters of 3–5 fields.

Law of Proximity in practice: a concrete example

Pricing cards that read themselves

Put a price too far from its plan name and it drifts toward the neighbouring plan. Is that $29 for “Pro” or for “Team”? Tighten the spacing so each plan's name, price, feature list, and button hug each other, and the grouping is obvious without a single divider line. The whitespace does the work borders used to.

Common Law of Proximity mistakes

Drawing boxes and lines to create groups that spacing alone would make. That's clutter where whitespace would be cleaner.
Uniform spacing everywhere, so nothing groups: a field label ends up the same distance from its own input and the next one.
Placing a label closer to the field above it than to the field it actually describes.

When Law of Proximity doesn't apply

Proximity can fight other signals. A legal disclaimer tucked right under a “Buy” button gets read as part of the button, so sometimes you deliberately want separation. And in dense data tables, tight grouping can merge rows; alternating background bands often group better than spacing alone.

Practise it on a real challenge

Signup Form — 14 fields, 31% finish

A signup form lists 14 fields with equal spacing. Completion is 31%.