Group related elements with proximity, similarity, common region and continuity so screens explain themselves.
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 principles, 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.
Similarity 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 region is stronger than proximity, 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 continuity.
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:
- Proximity: split the toggles into three groups (Notifications, Privacy, Display) with 32px between groups and 8px within.
- Common region: put each group on a lightly shaded card.
- Similarity: make every toggle and every label the same style, so differences are meaningful.
- 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.