Proximity
Objects placed close together are perceived as related, making grouping and hierarchy clear
Overview
Definition
What is the Proximity principle?
The Gestalt principle of Proximity states that objects positioned close to one another are perceived as a group, while objects spaced further apart are seen as separate. Spatial distance alone — with no borders, colors, or labels — is enough to communicate which elements belong together, making proximity one of the most efficient grouping tools available to designers.
In interface design, proximity governs how we structure information. Form labels sit close to their inputs, related navigation links cluster together, and whitespace separates one content section from the next. By managing the space between elements, designers create clear hierarchy and rhythm without adding visual weight, helping users parse complex layouts at a glance.
Because proximity is so strong, mismanaging spacing is a frequent source of confusion: a label drifting too close to the wrong field, or unrelated items crowded together, can imply relationships that do not exist. The principle works best when consistent spacing scales reinforce the logical structure of the content.
Takeaways
Space Signals Connection
Distance between elements implies the strength of their connection
Distance Hierarchy
Closer items have stronger perceived relationships, increase whitespace to signal a different relationship
Modularity
Break content into digestible chunks using proximity to structure information.
When to Use
- •
Group related items in navigation menus
- •
Cluster form fields and labels for clarity
- •
Use spacing to show logical content sections
- •
Organize cards or lists by category
- •
Group CTAs with relevant information
When Not to Use
- •
When unrelated items are grouped too closely
- •
If spacing is needed to emphasize key elements
- •
When dense layouts overwhelm users
- •
If proximity overrides the need for whitespace
Common Pitfalls
- •
Overcrowding elements, reducing readability
- •
Grouping unrelated items, causing confusion
- •
Failing to differentiate mobile tap targets
- •
Ignoring the balance of spacing and grouping
Examples in Action
See how Proximity works in real design
Interactive UXcel lessons to help you apply Proximity and other design fundamentals.
Affiliate link — free to start, and you'll get 25% off if you upgrade to Pro. We earn a commission at no extra cost to you.
Dive Deeper
The Gestalt Principle of Proximity for Designers, Explained
Built In / Lukas Oppermann
The Gestalt Principle of Proximity for Designers, Explained
Built In / Lukas Oppermann
Gestalt Theory for UX Design: Principle of Proximity
tubik / Marina Yalanska
Gestalt Theory for UX Design: Principle of Proximity
tubik / Marina Yalanska
The Law of Proximity
Interaction Design Foundation
The Law of Proximity
Interaction Design Foundation
Gestalt Principles of Design — Proximity
Christopher Butler
Gestalt Principles of Design — Proximity
Christopher Butler
Proximity Principle in Visual Design
Nielson Norman Group / Aurora Harley
Proximity Principle in Visual Design
Nielson Norman Group / Aurora Harley
Frequently Asked Questions
01What is the Gestalt principle of proximity?
What is the Gestalt principle of proximity?
Proximity is a Gestalt law of grouping which states that elements placed near each other are perceived as related, while elements separated by space are perceived as belonging to different groups.
02How is proximity used in UX and UI design?
How is proximity used in UX and UI design?
Designers use proximity to pair labels with inputs, group related navigation items, separate content sections with whitespace, and organize cards or lists — creating clear structure without relying on lines or boxes.
03Why is whitespace important for the proximity principle?
Why is whitespace important for the proximity principle?
Whitespace is the mechanism that makes proximity work. Increasing space between groups signals separation, while reducing space within a group signals connection, so consistent spacing is essential for communicating hierarchy.
04How does proximity relate to common region?
How does proximity relate to common region?
Both group elements, but proximity uses distance alone while common region uses a shared boundary or background. When a layout cannot rely on space — for example in dense dashboards — common region often takes over.