Gestalt principles

Why it matters

People do not see a screen as a list of separate pixels, boxes and words. The brain automatically groups what it sees into larger patterns: this label goes with that field, these three cards are a set, that row of icons is a toolbar. Gestalt principlesDescriptions of how the brain automatically groups what it sees into larger patterns., described by German psychologists in the early 20th century, explain how that grouping works. If your layout agrees with these instincts, people understand the screen without effort. If it fights them, they misread it, for example by matching a label to the wrong input.

The core principles

Proximity

Things that are close together are seen as a group. This is the strongest and cheapest grouping tool you have, because it needs nothing but space.

A form where every label sits exactly halfway between two fields is confusing: which field does "Email" belong to? Move each label 4px above its own field and 24px away from the field above, and the pairing becomes obvious.

Similarity

Things that look alike (same colour, shape, size or style) are seen as related. If every link on a page is blue and underlined, a new blue underlined word will be read as a link. That is useful, and it is also a trap: if you make a plain heading blue, people will try to click it.

SimilarityThe principle that things that look alike in colour, shape, size or style are seen as related. also lets you break a pattern on purpose. In a row of grey tags, one tag in the accent colour reads as "selected".

Common region

Elements inside the same boundary (a card, a panel, a shaded background) are seen as a group, even if they are not very close. Cards on a dashboard work this way. Common regionThe principle that elements inside the same boundary, such as a card or shaded panel, are seen as a group. is stronger than proximityThe principle that things placed close together are seen as a group., so use it when spacing alone is not enough, but do not box everything: too many borders add clutter.

Continuity

The eye follows lines and curves. Items arranged along a line, such as a horizontal row of steps or a timeline, are read as a sequence. Breadcrumbs and progress steppers use continuityThe principle that items arranged along a line or curve are read as a sequence..

Closure

People fill in missing parts of a shape. A circle drawn with a small gap still reads as a circle. Many icons rely on closure, and so do carousels where a card peeking in from the edge hints that there is more to scroll.

Figure and ground

The brain separates a figure (the thing you look at) from the ground (the background). A modal dialog with a dimmed backdrop uses this: the dialog becomes the figure and the page behind it becomes ground.

Common fate

Elements that move together are seen as a group. When you drag a selected set of files and they all move, you understand they are one selection.

A worked example: a settings screen

Imagine a settings screen with ten toggles listed with equal spacing. It works, but it is hard to scan. Apply the principles:

1. Proximity: split the toggles into three groups (Notifications, Privacy, Display) with 32px between groups and 8px within.
2. Common region: put each group on a lightly shaded card.
3. Similarity: make every toggle and every label the same style, so differences are meaningful.
4. Hierarchy (from lesson 1): give each group a short heading.

The same ten toggles now read as three understandable sections.

When principles conflict

Principles can pull in different directions. If two items are close together but look different, or far apart but share a card, the viewer has to work out which signal wins. Common region usually beats proximity, and proximity usually beats similarity. The safest design makes the signals agree: related items are close, look alike and share a region.

Common mistakes

• Equal spacing everywhere, so nothing groups.
• Accidental similarity, such as styling non-clickable text like a link or a button.
• Boxes inside boxes inside boxes. Common region overused becomes noise; often whitespace alone is enough.
• Labels floating between fields. Always place a label clearly nearer to its own control.

Quick recap

• The brain groups what it sees automatically; Gestalt principles describe how.
• Proximity (closeness) and similarity (look-alike) are your everyday tools.
• Common region, continuity, closure, figure-ground and common fate add more ways to group.
• Make the signals agree so the grouping is unambiguous.

Try it

This lesson is quiz only. Open the Do tab and test yourself on which principle explains each layout.