Gestalt Principles in UI Design — How the Eye Reads a Screen

A good screen is understood before it is explained. When a user grasps in a single second which label belongs to which button, that is not luck — it is the way the eye organizes form, the Gestalt principles, doing their quiet work. In this article we look at how six of those principles — proximity, similarity, closure, continuity, figure and ground, and common region — build the structure of a screen in UI design, and in what order they are best applied in everyday practice.

1. Gestalt Psychology — “The Whole Is Other Than the Sum of Its Parts”

Gestalt is the German word for “shape” or “overall form.” In the early twentieth century, the Gestalt psychologists — Wertheimer, Köhler, and Koffka chief among them — argued that human perception does not work by adding up individual stimuli one at a time. Instead, we grasp the overall structure first and only then make sense of the parts. Their famous proposition, “the whole is other than the sum of its parts,” comes from exactly this insight.

Why does this matter for design? Because users do not read a screen element by element. The moment the eye lands on an interface, it automatically groups elements using visual cues — distance, color, shape, alignment — and guesses at meaning one chunk at a time. A designer who understands the rules of this automatic grouping can build screens whose structure speaks for itself, without explanatory copy or decorative scaffolding.

2. Six Principles, Read Off the Screen

Proximity is the tendency to see things that sit close together as one group. It is the reason a form only reads correctly when the gap between an input field and its label is narrower than the gap between that field and the next label. Similarity is the tendency to read elements that share a color, size, or shape as playing the same role. When every link on a screen uses the same color, users know what is clickable even on a page they have never seen before.

Closure is the tendency to complete incomplete forms. Think of IBM’s striped logotype or WWF’s panda mark: the outlines are broken, yet we read the whole shape without effort. In UI, a card cropped at the edge of the viewport becomes a signal that “there is more to the side,” inviting a scroll. Continuity is the tendency to perceive elements arranged along a single path as connected — the reason well-aligned lists and grids feel so effortless to read.

Proximity · Common Region

Grouping by distance and enclosure. Cards, whitespace, and background surfaces announce “these belong together.”

Similarity · Continuity

Grouping by repetition and alignment. Elements that share a style or sit on the same axis read as the same role.

Closure · Figure/Ground

Focus through omission and contrast. A cropped card invites scrolling; a dimmed backdrop pushes the modal forward.

Figure and ground is the tendency to divide the visual field into a protagonist and a stage. The dim overlay behind a modal dialog uses this principle directly, darkening the page to lift the dialog into the foreground. Finally, common region is the tendency to see elements inside the same boundary or on the same background surface as one group. It is why iOS Settings places related items on rounded white panels, and why Google’s Material Design and Airbnb’s listing pages treat the card as their basic unit.

3. Putting It to Work — Five Steps That Start with Whitespace

Knowing the principles and applying them to a screen are two different things. In practice, we recommend the following sequence. The key idea: reach for quiet devices like spacing and repetition before explicit ones like lines and boxes.

Group the screen’s information on paper first. If you have not defined what belongs together, no principle can help you.

Apply proximity first. Keep gaps within a group tight and gaps between groups roughly twice as wide — the hierarchy of spacing is the hierarchy of information.

Unify roles with similarity. Give the same function the same color, size, and shape; make different functions unmistakably different.

Clean up alignment lines to secure continuity. The fewer points where the eye has to change direction, the quieter the screen becomes.

Only where distinctions remain weak, add common region (cards, background surfaces) and figure/ground contrast. The more sparingly you save them as a last resort, the more they achieve.

A Common Mistake — Grouping with Lines Instead of Whitespace

The mistake we see most often is adding a divider or a bordered box every time a group needs separating. Lines feel decisive, but they are visual noise in their own right; stack just a few and the screen starts to feel like it is behind bars. Boxing in what proximity has already grouped adds nothing but ink. Muji’s stores and packaging look orderly without a single partition line, because whitespace does everything a line does — only more quietly. The next time you feel the urge to draw a rule, ask first: can adjusting the spacing solve this instead?

Closing thoughts

The Gestalt principles are not a passing trend; they are a grammar of perception written down a century ago. The eye groups what is near, connects what is alike, completes what is broken, follows the flow, and sorts protagonist from stage. The designer’s job is not to fight these automatic responses but to borrow them in service of the information structure.

The next time a screen feels cluttered, ask a question before you start deleting elements: how is the eye grouping this screen right now? The answer usually contains the thread that untangles it.