Gestalt Principles
The perceptual laws that govern how users group, organize, and interpret visual information — essential for layout, hierarchy, and composition.
What is it?
Gestalt principles are a set of laws describing how humans perceive and organize visual information. Originating in early 20th-century psychology, they explain why we see patterns, groups, and wholes rather than isolated elements. In UX, they are the science behind layout, hierarchy, and visual composition.
Why it matters
Every layout decision you make activates Gestalt perception. Items placed close together are assumed to be related. Items that look similar are assumed to serve the same function. Understanding these automatic perceptual processes lets you control how users interpret your design — and avoid sending unintended signals.
Best Practices
- Proximity: Group related elements close together and separate unrelated elements with whitespace. Labels belong near their fields — not floating in the middle of a form.
- Similarity: Use consistent visual styles (color, size, shape) for elements with the same function. All primary buttons should look identical.
- Continuity: Arrange elements in lines or curves to suggest continuation. Users' eyes follow implied paths — use this to guide attention.
- Closure: Users will mentally complete incomplete shapes. This allows for subtle design elements that don't need to be drawn in full.
- Figure-Ground: Create clear separation between foreground (active content) and background (supporting context). Modal overlays exploit this principle.
- Common Region: Enclosing elements in a container communicates they belong together — even without similarity or proximity.
- Focal Point: One element should dominate visually on every screen. The eye needs somewhere to land first.
- Uniform Connectedness: Elements connected by lines or common fate (moving together) are perceived as related.
Common Mistakes
- Placing form labels far from their inputs — proximity violation that confuses which label belongs to which field.
- Using similar visual styles for elements with different functions — creating false equivalences.
- Overcrowding layouts with no whitespace — eliminating the proximity signal entirely.
- Placing multiple visually dominant elements on the same screen — no clear focal point, user attention is scattered.
- Inconsistent button styles across a product — similar-looking elements imply similar behavior.
Checklist
Research & Theory
Gestalt Psychology (Wertheimer, Köhler, Koffka)
Early 20th-century German psychologists who established that perception is more than the sum of individual stimuli — the brain organizes sensory input into meaningful patterns.
Why it's relevant
The six core principles (proximity, similarity, continuity, closure, figure-ground, common region) are directly applicable to UI layout.
Pre-Attentive Processing
Certain visual attributes (color, size, orientation, motion) are processed before conscious attention — in under 250ms.
Why it's relevant
Gestalt principles operate at the pre-attentive level. Users group and parse your layout before they start reading. Get this right first.
Real-World Examples
Linear
Masterclass in proximity and similarity. Issues, cycles, and projects are visually distinct groups. Within each group, consistent styling signals function.
Notion
Blocks are contained in a clear common region. Sidebar uses proximity to group pages. The slash command uses figure-ground with a card overlay.
Stripe Dashboard
Whitespace is used aggressively to create clear groupings. Charts and their labels are tightly proximate. Actions are visually separated from data.