DesignDojo
Grouping

Proximity

Things placed close together read as related; distance signals a boundary.

Also heard as: grouping, visual grouping

Back to vocabularyJump to components

Definition

Proximity is the spacing relationship that tells people which items belong together and which ones are separate.

Why it matters

Good grouping lowers cognitive load because users can chunk content instead of parsing every row, label, and action one by one.

Visual comparator

✓ Clear grouping

Aligned fields

Consistent spacing tells users which items form a unit and where a new section begins.

  • Labels and controls sit in one obvious block.
  • Section spacing is larger than internal spacing.
  • Repeated groups share the same rhythm.

✕ Spacing drift

Gap drift

Random distance makes everything feel equally related, which slows comprehension.

  • Internal and external gaps are nearly identical.
  • Related controls feel disconnected.
  • Users must infer boundaries instead of seeing them.

Prompt language

  • Tighten the label and helper text into one group, then add more space before the next field block.
  • Separate destructive actions from the safe settings group so the relationship is unambiguous.

Anti-patterns

  • Using the same gap between unrelated sections and tightly related controls.
  • Letting a label drift farther from its field than from the next section heading.

When to research more

Research more when forms, settings pages, or data-heavy tables require several nested levels of grouping or progressive disclosure.

Related components

Stack

Arrange elements in one direction with consistent spacing rhythm.

Card

Group related information into a bounded, scannable surface.

Text Input

Capture short-form text with clear labels and validation feedback.

Related lessons

Proximity = Relationship

1.1 First Principles

Stack

1.2 Components

Spacing System

1.3 Composition