Spacing
Consistent spacing systems, proximity grouping, and whitespace as a design tool. You'll hit this when a layout feels cluttered even though every individual element looks fine on its own.
Order Summary
Wireless Earbuds
$79.00
USB-C Cable (2m)
$12.99
Phone Case
$24.00
Subtotal
$115.99
Shipping
$5.99
Total
$121.98
Order Summary
Wireless Earbuds
$79.00
USB-C Cable (2m)
$12.99
Phone Case
$24.00
Subtotal
$115.99
Shipping
$5.99
Total
$121.98
Random spacing values (7px here, 13px there, 22px elsewhere) produce a layout that feels subtly off. The inconsistency makes the design look unpolished, and maintaining it becomes difficult because there is no system to follow.
A spacing scale (4px, 8px, 12px, 16px, 24px, 32px) creates visual consistency throughout the interface. When every gap is a multiple of a base unit, the layout feels intentional and cohesive even across different sections of the page.
Sarah Chen
Product Designer
Focused on design systems and accessibility. Previously at Figma and Stripe.
Edit Profile
Sarah Chen
Product Designer
Focused on design systems and accessibility. Previously at Figma and Stripe.
Edit Profile
Cramped layouts overwhelm the user with too much information in too little space. When elements are packed tightly together, nothing stands out, and the entire page feels stressful to navigate. More space almost always improves readability.
Generous whitespace gives content room to breathe and makes the interface feel calm and professional. Elements that are not crowded together are easier to scan, and users can focus on one piece of content at a time.
First Name
Jamie
Last Name
Rivera
jamie@example.com
First Name
Jamie
Last Name
Rivera
jamie@example.com
When all items have equal spacing, the user cannot tell which elements belong together. Labels float ambiguously between sections, and the user has to read every item carefully to understand the grouping. This adds unnecessary cognitive load.
The law of proximity states that items placed close together are perceived as a group. By tightening spacing within related items and increasing spacing between groups, you create a clear visual structure without needing borders or dividers.
Dashboard
Analytics
Settings
Team
Billing
Dashboard
Analytics
Settings
Team
Billing
Borders around every section create a grid-like, boxy appearance that feels heavy and dated. Each border is another visual element competing for attention. In most cases, sufficient spacing between groups communicates separation just as effectively with less noise.
Whitespace is a cleaner way to separate content groups than adding borders everywhere. It reduces visual clutter while still making the structure obvious. Fewer visual elements on screen means less work for the user's eye to process.