A reaction against breaking things into parts
The context. In the early 20th century, the dominant theories — structuralism and behaviourism — tried to break human experience down into isolated sensory inputs.
The breakthrough. In the 1920s, German psychologists Max Wertheimer, Kurt Koffka and Wolfgang Köhler rejected that reductionist view. They observed that the brain naturally organises visual chaos into meaningful patterns.
The philosophy. They coined the term Gestalt — German for "unified whole" or "form." The mind automatically groups, simplifies and fills in visual gaps to make sense of its environment.
The whole is different from the sum of its parts.
How psychology became design
The Bauhaus connection (1920s–30s). The concepts migrated quickly from psychology labs to the Bauhaus school. Artists and architects realised that if they understood how the brain grouped objects, they could engineer layouts that were universally easy to understand.
Formalisation (1940s–60s). As the creators fled Nazi Germany, the theory spread globally. György Kepes published Language of Vision (1944); Rudolf Arnheim published Art and Visual Perception (1954). These texts turned Gestalt from a lab finding into a standard part of design education.
Ten principles, applied
Users scan a screen in seconds. Designers use these shortcuts to make a screen legible at a glance.
Proximity
Elements placed close together read as a single related group.
In the interfaceForm fields sit beside their labels; cards bundle an image, title and body into one unit.
Similarity
Shared colour, shape or size signals shared function.
In the interfaceEvery primary action button uses the same fill and shape — teaching what's clickable without instruction.
Closure
The brain fills in missing information to perceive a complete shape.
In the interfaceIconography, loading animations, and carousels clipped at the edge to imply more content.
Figure-Ground
The eye separates a focal object from its background.
In the interfaceDrop shadows and darkened backdrops push a modal forward and the rest of the app back.
Continuity
The eye follows the smoothest path rather than abrupt changes.
In the interfaceNav menus, multi-step progress bars, and long-scroll pages guide the gaze sequentially.
Common Region
A shared boundary binds elements into a distinct unit.
In the interfaceA border or background around a group of settings, comments or feed items sets it apart.
Focal Point
A single prominent or deviating element captures attention first.
In the interfaceThe "Most Popular" pricing tier — scaled up and colour-badged to win the first glance.
Uniform Connectedness
Elements joined by a line or shared shape bind more strongly than proximity or similarity alone.
In the interfaceA tab's accent underline tying the active pill to its panel; connector lines in flows and tree views.
Symmetry & Order
The mind resolves complexity into the simplest, most balanced interpretation.
In the interfaceBalanced columns and centred layouts that cost the least effort to parse.
Common Fate
Elements moving in the same direction at the same time read as one group.
In the interfaceAccordion sections and drawers that animate in unison, signalling they're one unit.
Working with the brain's shortcuts
Visual hierarchy
Direct the eye to the most important information first — pricing, alerts, the primary action.
Scannability
Let people find what they need in seconds without reading every word.
Reduced cognitive load
Make the interface feel familiar, predictable and effortless to navigate.
Ignore them and things that belong together drift apart, and people have to work to find what matters. Design with them and the interface feels obvious — people find what they need without thinking about it.