| name | dec-gestalt-principles |
| description | Gestalt principles of grouping — proximity, similarity, common region, continuity, closure, figure/ground, common fate, prägnanz, uniform connectedness. The visual logic behind how the eye assembles elements into wholes. Use when laying out a screen, deciding what reads as related, designing cards/sections, or diagnosing why a layout feels disorganized. |
| tags | ["gestalt","visual-design","layout","perception","ux","always-on"] |
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.
