Gestalt Principles
A set of perceptual rules describing how the eye groups discrete elements into wholes before conscious analysis begins.
Gestalt principles are a set of descriptive rules from early-20th-century perceptual psychology (Wertheimer, Koffka, Köhler) explaining how the visual system groups separate marks into unified shapes and structures automatically, before any deliberate interpretation. The name comes from the German for "shape" or "form," and the founding claim — the whole is perceived before, and differently from, the sum of its parts — is what makes the principles useful for interface design rather than just visual art: layout can be read as structure without a single word of labeling.
The most load-bearing principles for UI work are proximity (elements placed close together are read as related — this is why whitespace between a form's sections does more organizational work than borders do) and similarity (elements sharing color, shape, or size are read as the same category, which is why a design system's buttons all look like buttons). Common region groups items inside a shared boundary — a card — regardless of their internal spacing. Figure-ground determines what reads as content versus backdrop, and it's the principle a modal dialog exploits when it dims everything behind it.
The practical failure mode is accidental grouping: putting a label closer to the wrong field, or giving unrelated controls the same color, silently tells users those things belong together even though nothing was ever said explicitly. Because these principles operate below conscious attention, they can't be argued away with better copy — the fix is always structural (spacing, alignment, grouping), never textual.
Gestalt grouping is the perceptual substrate that a Design System's spacing scale and component library are built to exploit consistently, and it's also why a well-structured Grid System reads as ordered even before anyone examines its content.
See also5
Typographic Scale
A constrained set of type sizes and their paired line heights and spacing.
Design & Interface17 connections
Affordance
A property an object's design communicates about how it can be used, before any instruction is read.
Design & Interface12 connections
Hick's Law
Decision time rises with the number and complexity of choices offered, roughly logarithmically — fewer options decided faster.
Design & Interface13 connections
Tabs
A row of labels that switch between panels of content occupying the same space, borrowed from paper folder tabs, suited to parallel sections viewed one at a time, and governed by a specific keyboard pattern.
Design & Interface12 connections
CSS Grid
The CSS layout mode for rows and columns at once, which brought the designer's layout grid into the browser and lets responsive layouts adapt with no breakpoints at all.
Design & Interface10 connections
Linked from10
- AffordanceDesign & Interface
A property an object's design communicates about how it can be used, before any instruction is read.
- CSS GridDesign & Interface
The CSS layout mode for rows and columns at once, which brought the designer's layout grid into the browser and lets responsive layouts adapt with no breakpoints at all.
- Fitts's LawDesign & Interface
The time to hit a target shrinks with its size and grows with distance to it — so make frequent targets big and close.
- Grid SystemDesign & Interface
A shared set of columns, gutters, and alignment lines that constrains where content can sit, so unrelated layouts still read as one system.
- Hick's LawDesign & Interface
Decision time rises with the number and complexity of choices offered, roughly logarithmically — fewer options decided faster.
- IconographyDesign & Interface
The design and use of small symbolic images in interfaces and signage, which are quick to recognize when familiar and surprisingly ambiguous when not.
- SignifierDesign & Interface
A perceivable cue that tells people what action is possible and where to take it, the visible half of an affordance and the fix for doors that make everyone push the wrong way.
- TabsDesign & Interface
A row of labels that switch between panels of content occupying the same space, borrowed from paper folder tabs, suited to parallel sections viewed one at a time, and governed by a specific keyboard pattern.
- View TransitionsWeb Platform
A browser API that animates between two states of a page, or between two pages, by snapshotting the old and new views and morphing between them.
- Visual HierarchyDesign & Interface
Arranging elements so their visual weight matches their importance, telling the eye where to look first, second, and last.