Gestalt principles

Gestalt principles describe how people perceive visual elements as organised groups rather than separate parts. In interface design they explain why spacing, alignment, colour and containers make a layout read as related or unrelated.

The core ideas

The main points of Gestalt principles:

  • Proximity: elements placed close together are seen as a group
  • Similarity: elements that look alike are seen as related
  • Continuity: the eye follows lines and aligned edges
  • Closure: people complete incomplete shapes
  • Figure-ground: people separate a foreground object from its background
  • Common region: elements inside the same container are seen as a group

How to apply it to your product

Use spacing before borders: group related form fields with tighter spacing and separate groups with larger gaps. Give interactive elements a consistent style so similarity signals function, and use containers only when spacing alone is not enough.

Check your designs with Fleck

Fleck's UX Audit reviews a screen or live URL for usability, accessibility and visual hierarchy problems and returns specific fixes you can apply in the same project.

Common mistakes

  • Equal spacing everywhere, so labels sit as close to the wrong field as to the right one
  • Styling non-interactive text like links, which breaks similarity
  • Adding cards and borders around everything instead of using spacing

Häufig gestellte Fragen

Which Gestalt principle matters most in UI?

Proximity is usually the most practical, because spacing is the main tool for showing which elements belong together.