In short
The Gestalt principles, from early twentieth-century perceptual psychology, describe how people automatically organise what they see into groups and wholes: elements close together are seen as related (proximity), elements that look alike are seen as related (similarity), elements in a shared boundary belong together (common region), the eye follows lines and curves (continuity), incomplete shapes are completed (closure), and we separate a figure from its background (figure-ground). In interfaces they explain why spacing groups things better than borders, why consistent styling signals consistent function, and why hierarchy comes from contrast.
Where they came from
In the 1910s and 1920s, psychologists including Max Wertheimer, Wolfgang Köhler and Kurt Koffka studied how people perceive patterns and found that the mind organises visual input into groups and wholes automatically, before conscious interpretation. "Gestalt" is German for shape or form; the principles describe the rules that automatic organisation follows. They have been confirmed repeatedly and they operate whether or not a designer knows them, which is why an interface that ignores them feels wrong to users who could not say why.
The principles, in the order they matter for layout
Proximity. Things close together are perceived as a group; things far apart are separate. This is the single most useful principle in interface design. A form label sits nearer its own field than the field above; items in a list are closer to each other than to the heading of the next section; the space between sections is larger than the space within them. Almost every grouping problem in a layout is a proximity problem, and spacing fixes it more cleanly than lines or boxes.
Common region. Elements inside a shared boundary, such as a card, a panel or a background colour, are perceived as belonging together, even if they are not especially close. This is why cards work, and why a background tint groups a form's fields. It is stronger than proximity when the two conflict, which is why a card can hold elements that are spaced apart.
Similarity. Elements that share colour, shape, size or style are perceived as related and, importantly, as having the same function. All links look the same, so a visitor learns once what a link looks like. All primary buttons look the same. Breaking similarity has meaning: the one different button is the one to look at, and the one differently styled link is assumed to do something different. Inconsistency is not neutral; it is a signal, usually an unintended one. This is the perceptual basis for consistency in product UI.
Continuity. The eye follows lines, curves and alignments and assumes elements along a path are related. Aligned edges make a column read as a column; a row of icons on one baseline reads as a toolbar; a misaligned element breaks the line and draws attention, for better or worse. Grids exist to produce continuity.
Closure. The mind completes incomplete shapes. A circle with a gap is still a circle; a card whose edge runs off the screen implies more content that way; a partially visible carousel item signals that the row scrolls. Used deliberately, closure tells users that more exists without showing it.
Figure-ground. We separate an object of attention from its background. Modals dim the page behind them to make the dialog the figure; contrast and size make a call-to-action the figure against the page. When everything competes to be the figure, nothing is, which is the crowded-page problem.
Common fate. Elements that move together are perceived as a group. Animation that moves a set of items in unison groups them; a menu that slides in as one unit reads as one thing.
Symmetry and simplicity (Prägnanz). The mind prefers the simplest, most regular interpretation available. Symmetric, orderly layouts are read faster and feel more trustworthy; an irregular layout costs effort, which is fine when it is deliberate and tiring when it is not.
Focal point. A distinct element attracts attention first. One accent colour on one button is a focal point; five accent colours are a fight.
What they mean in practice
Group with space before you group with lines. Reserve borders and boxes for when proximity alone is ambiguous, and use common region, a background or a card, rather than an outline where possible; outlines add visual noise and cards add hierarchy.
Make identical things identical and different things different. A design system is, in Gestalt terms, a commitment to similarity: every instance of a component signals the same function.
Align to a grid so continuity does the structural work. Check any element that breaks alignment: is it meant to stand out?
Use figure-ground to direct attention: one focal point per screen, supported by contrast, size and isolation, with everything else receding.
Let closure and continuity hint at hidden content, with partially visible items at the edge of scrollable rows.
The mistakes that break them
Labels equidistant between two fields. Related controls separated by the same gap as unrelated ones. Links styled inconsistently across the site. Elements that align with nothing. Every element boxed and bordered so grouping is lost in outlines. Several elements competing to be the focal point. Each is a case of the design fighting perception, and the test for all of them is to squint at the screen: the groups and the focal point that survive blur are the ones the eye will see.
If a layout feels cluttered and nobody can say why, it is almost always a Gestalt problem, and a design audit that checks these principles screen by screen finds it quickly. Book a call if you would like one run.
Common questions
What are the main Gestalt principles in UX design?
Proximity (close elements are seen as related), common region (elements within a shared boundary belong together), similarity (elements that look alike are seen as related and functionally the same), continuity (the eye follows lines and alignments), closure (incomplete shapes are completed), figure-ground (an object is separated from its background), common fate (elements moving together are grouped), and the preference for simple, symmetric interpretations.
How is the proximity principle used in UI design?
By making space express relationships: a label sits closer to its own field than to the neighbouring one, items within a group are closer to each other than to other groups, and sections are separated by more space than their contents. Proximity groups elements without borders, which keeps layouts clean; most grouping problems are fixed by adjusting spacing.
What is the difference between proximity and common region?
Proximity groups elements by closeness; common region groups them by a shared enclosure such as a card, panel or background tint. Common region is the stronger cue when the two conflict, which is why elements spaced apart inside one card still read as a group. Use proximity first and common region when closeness alone is ambiguous.
Why does the similarity principle matter for consistency?
Because people assume elements that look the same do the same thing, and elements that look different do something different. Consistent styling of links, buttons and controls lets users learn the interface once; inconsistent styling sends unintended signals that something is special. A design system is a commitment to similarity across a product.
What is figure-ground in interface design?
The perception that separates an object of attention from its background. Dimming a page behind a modal, giving a primary button contrast and space, and keeping one focal point per screen all use figure-ground to direct attention. When many elements compete for figure status, none achieves it and the screen reads as cluttered.
