Jun 08,2026 
A designer who picks a spacing token of 16 instead of 32 between two elements is deciding if those elements group into one unit, which is the law of proximity at work, and almost certainly without thinking the word. That gap between doing and naming appears in nearly every interface.
The Gestalt principles describe how the eye groups what it sees, and modern design systems have absorbed the two that matter most into tokens and components so thoroughly that designers apply them by default. The names become useful later, at the moment something looks wrong.
The Resistance to Naming the Principles
Gestalt psychology began in 1912 with Max Wertheimer’s paper on the perception of movement, work that grew out of a moment on a train when he became curious about how a string of separately flashing lights merges into one moving light. He named that illusion the phi phenomenon, and it is the same effect behind a marquee, a neon arrow, and the loading spinner a person watches a hundred times a week. Wertheimer’s two test subjects, Wolfgang Köhler and Kurt Koffka, went on to co-found the school with him.
Even the field’s own slogan resists being stated correctly. Nearly every design article quotes the line that the whole is greater than the sum of its parts, and that is a mistranslation. Koffka wrote that the whole is something else than the sum of its parts, and he corrected students who substituted greater for other, since Koffka meant something qualitative, that a grouped configuration has its own existence in perception that none of its parts hold alone. The word Gestalt does not translate cleanly into English either, which is why it stays German. A field built to explain how people group things into wholes cannot quite name itself, and the designers who use its findings every day are in the same position.
The Two Workhorse Principles in Design Systems
Among the principles, proximity and similarity do the most work in a layout, and they are the two most completely hidden inside design systems. Place elements close together and the eye treats them as a group that shares meaning or function. That is proximity, and a spacing scale encodes it as numbers. A system that keeps tight spacing within a component and looser spacing between components makes grouping happen on its own, so the spacing choice sets the relationship before the concept ever comes up. Pulling groups apart while keeping their contents tight is how spacing alone builds hierarchy, no borders required.
Similarity is the companion principle, the tendency to see elements that share a color, shape, size, or style as related even when they are far apart. Design tokens encode it directly, so a primary button component guarantees that every primary action across an app looks identical, so a person learns the visual vocabulary once and carries it everywhere, knowing that this particular blue means a real action. Breaking similarity on purpose is how you signal that one element is different, which is why a single filled button among outlined ones pulls the eye. The principle stays invisible because the system, not the hand drawing the screen, enforces it on every use. Working designers usually lean on a small handful of these, mostly these two, rather than running down a checklist of all of them.
Accent Principles for Specific Situations
The remaining principles behave less like the backbone of a layout and more like accents a designer applies when a specific situation calls for one. Draw a shared boundary around several elements and they group into one unit. Common region is that principle, and the Card component is it made into a reusable part. A card groups a thumbnail, a title, and a price into one unit through a border or a fill, and it can override proximity entirely, which makes it powerful and also heavy, since every container adds an object to the screen. Figure and ground, the split between a focal object and a receding background, is productized as the modal-and-scrim pattern and as elevation tokens. A dialog over a dimmed overlay becomes the unmistakable focus while the page behind it recedes, and Material Design’s elevation is simply figure and ground formalized as a z-axis.
Closure, the way the mind completes a recognizable shape from incomplete information, is the logo principle, the reason the WWF panda resolves into a whole animal from disconnected black shapes and the striped IBM mark resolves into solid letters. It is sometimes mapped onto skeleton screens, the gray placeholder blocks shown during loading, though that connection is arguable, since the real effect there is that attention slides onto the structure of the content arriving rather than the wait, and people recall an identical load time as shorter. Common fate, the tendency to see elements that move together as one group, only exists in motion. When a person multi-selects files in a drive and drags one, the rest follow as a cluster, and the grouping is wordless and immediate. It is the one principle that cannot appear in a static mockup at all. Continuity does its work through alignment, where the eye follows a smooth path down a tidy column, and a ragged edge makes a layout look wrong even when a viewer cannot say what broke.
Common Grouping Failures
The principles matter most in the moment they are violated, because a grouping failure is usually invisible in a mockup and surfaces only when a real person hesitates over the screen. Two failures account for a large share of everyday friction, and both come down to proximity.
The Equidistant Label and Loose Settings
The most common proximity error in forms is placing a label exactly midway between the field above it and the field below it. Because nothing signals which field the label belongs to, the user has to stop scanning and start analyzing, a small pause that does not show up until someone fills the form and stalls over which box a label means. Most designers reach for a divider line, when the fix is a rebalancing of space, pulling the label tight to its own field and adding a gap above it. The same failure breaks settings panels, where toggles spaced too loosely or an unrelated option placed too close lets a label appear to govern the wrong control, and people flip a setting they never meant to touch. The research on label placement is worth holding loosely, since an often-cited 2006 eye-tracking study favoring labels above fields was contradicted by a 2008 study that found no speed difference. The durable rule is closeness and easy association, not a fixed position.
Updates and Errors Placed Far From Their Cause
The same principle governs feedback. In checkout usability testing, when selecting a new shipping method updated a cost shown in a different column more than half a screen away, test subjects either failed to find the new total or never registered that anything had changed, finishing the task believing the price was the same. An error message shown only at the top of a page, far from the field that caused it, produced an even stranger result, where people saw nothing wrong with the fields and simply submitted again, assuming the page had not loaded properly. The information was present on the screen in both cases. Distance from its cause made it functionally invisible, which is why the working rule is to apply a change immediately and close to the input that triggered it.
The Diagnostic Value of Naming the Principles
What the practitioner literature keeps having to restate is that the Gestalt principles are not laws. Later researchers, including Irvin Rock and Stephen Palmer, preferred to call them principles of grouping, stressing that they are probabilistic tendencies the visual system learned from regularities in the world rather than guarantees. They describe what happens without modeling why, which makes them descriptive rather than predictive. For a designer, the practical meaning is that a principle tells you the default a user’s eye will reach for, not a certainty about how a given screen will be read.
That is exactly why the names pay off at the edges. The live version of this is the running argument about white space against borders. White space is the lightest grouping tool there is, a structural pause that separates content without adding a single object to the screen, while a reflex toward borders and dividers can give every item its own box and line until the layout looks busier rather than more organized. The recommended order is to fix hierarchy first with spacing and grouping, then add a divider only where it genuinely earns its place. In Gestalt terms that is proximity competing with common region, and proximity usually wins on cleanliness. A designer can make that call by instinct, but a team cannot critique it together without the words.
This is the real value of naming the principles. You can design a good screen by feel, nudging spacing until the grouping looks right, and many strong designers do exactly that, while the names do their work in diagnosis, when something already looks off. When a layout looks wrong, knowing it is a proximity violation lets you fix the cause instead of moving pixels at random, and it lets a reviewer say something more useful than that they do not like it.
A label sitting equidistant between two fields, or a cost update placed far from the control that changed it, forms one group in your mind and another in the user’s. A predictive persona, the kind Evelance generates, can walk the layout before launch and mark where the grouping it perceives diverges from the grouping you intended, and a live session afterward settles how much any divergence costs. The earlier that mismatch surfaces, the more likely the fix is a single spacing value, the same kind of token decision that set the grouping in the first place.
Frequently Asked Questions
What are the Gestalt principles in UX design?
They are perception principles describing how the human visual system groups elements, including proximity, similarity, closure, continuity, common region, figure and ground, common fate, and symmetry or Prägnanz. They let a person understand an interface at a glance. They originated in 1912 Gestalt psychology and now underpin layout, spacing, and component design.
How many Gestalt principles are there?
There is no fixed count. Sources commonly list five to seven core grouping principles, such as proximity, similarity, continuity, closure, and common region, plus figure and ground, common fate, and the umbrella Law of Prägnanz, which covers simplicity. Working designers usually rely on a few of them rather than all.
Who created the Gestalt principles?
The Gestalt school was founded by Max Wertheimer with his 1912 paper on apparent movement, alongside co-founders Kurt Koffka and Wolfgang Köhler. The three are considered the founding trio, and Köhler and Koffka were the two subjects who first reported the motion illusion Wertheimer studied in Frankfurt.
What is the law of proximity?
Elements placed close together are perceived as belonging to the same group, because the brain reads closeness as a sign of relationship. In an interface it groups form fields, the contents of a card, and clusters of menu items without any borders at all. It is the single most-used grouping mechanism in design and is encoded directly into spacing scales.
What is the law of similarity in design?
Elements that share a visual trait, such as color, shape, size, or style, are perceived as related even when they are far apart. This is why every primary button shares one color and every link shares one style, so a person learns the visual vocabulary once. Breaking that consistency is how a designer marks one element as different.
What is the law of closure?
Closure is the way the mind fills in missing parts to perceive a complete shape from incomplete information. It is the principle behind logos like the WWF panda, which resolves into a whole animal from separate black shapes, and the IBM mark, which resolves into solid letters from horizontal stripes. It also explains icons drawn with small gaps the eye completes.
What is figure and ground in UI design?
Figure and ground is the brain’s separation of a focal object from its background. In interfaces a modal rests on a dimmed scrim so the dialog becomes the unmistakable figure while the page behind it recedes. Elevation and shadow tokens use the same idea, lifting an element off the surface so it appears closer and more important.
What is the law of common fate?
Common fate is the tendency to perceive elements that move in the same direction at the same speed as a single group. It appears in drag-and-drop, where multi-selected files follow the cursor together, and in coordinated scroll and list animations. It is the one principle that needs motion to exist, so it never appears in a static mockup.
Are Gestalt laws really scientific laws?
Most modern researchers call them principles or probabilistic heuristics rather than laws. Irvin Rock and Stephen Palmer preferred the term principles of grouping, and critics note the theory describes what happens without explaining the underlying processing. For a designer this means a principle predicts the default the eye reaches for, not a guaranteed outcome.
Is it “the whole is greater than the sum of its parts”?
That popular line is a mistranslation. Kurt Koffka said the whole is something else than, or other than, the sum of its parts, and he corrected people who swapped other for greater. The point is that a grouped whole has its own qualitative existence in perception, which is different from being merely larger, since it is not a principle of addition.
Do borders or white space group content better?
White space is usually the lightest and cleanest grouping tool, and it often beats borders, which can add clutter and give every item its own box and line. The guidance is to fix hierarchy with spacing and proximity first, then add a divider or container only where it earns its place. White space groups without adding any new object to the screen.
Do designers need to know the Gestalt principles by name?
You can design well by feel without the names, but naming gives you a diagnostic and critique vocabulary. It turns a vague sense that something looks wrong into a specific proximity violation you can fix on purpose, and it lets a team review a design with shared language rather than personal taste. The names help most when debugging and teaching.