Group related elements

Gestalt Principles

Language

Gestalt principles explain how we perceive wholes: proximity, similarity, continuity, closure, and common region group elements into meaningful structures.

Two clusters by proximity
Let whitespace define groups before borders.
Wireframe with grouped panels
Repeat spacing rhythm across the page.

Proximity and spacing

Spacing is the cheapest grouping tool. Increase whitespace between groups more than within a group to signal boundaries.

Similarity and repetition

Shared color, shape, and typography imply relationship. Inconsistent styles fracture scan patterns.

Continuity and implied lines

Align edges and baselines so the eye flows; broken alignment forces jumps that feel unintentional.

Practices

  • Cards for distinct objects; lists for peers.
  • Shared grid columns across sections.
  • Connect related chips with subtle backgrounds.

Common pitfalls

  • Everything boxed in equal heavy borders.
  • Random alignment “because it fits”.
  • Color-only grouping (fails for color-blind users).