Gestalt Principles of Grouping

How the eye assembles individual elements into wholes — the perceptual logic behind layout. Spacing and grouping communicate relationship before any label does.

• Proximity — near things are perceived as related. The strongest, cheapest grouping tool: spacing *is* meaning.
• Similarity — alike things (color, shape, size) group together.
• Common Region — a shared container = shared meaning (cards, panels).
• Continuity — the eye follows lines and curves; aligned elements read as a sequence.
• Closure — the mind completes incomplete shapes; you can imply form with less.
• Figure/Ground — separating subject from background; ambiguity here causes visual strain.
• Common Fate — things moving together are seen as a unit (animation as grouping).
• Prägnanz (Simplicity) — ambiguity is interpreted in the simplest possible form.
• Uniform Connectedness — visually linked elements (a line, a border) read as connected, overriding proximity.

How to apply

• Group related controls by proximity before reaching for borders or boxes — whitespace is the first tool.
• Use common region (a card) only when proximity alone isn't enough; borders add visual weight.
• Check figure/ground: the primary content must clearly sit above the background, especially on glass/translucent surfaces.
• A layout that "feels off" usually violates proximity or alignment (continuity) — measure the gaps.