Whitespace
Empty space is a design element that groups, emphasises and sets pace, not leftover area.
Definition
Whitespace, or negative space, is the unmarked area in a composition. Macro whitespace separates major regions; micro whitespace operates inside components, between a label and a field or between lines of text.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
What whitespace does
- Groups, through proximity, which is its most important job.
- Emphasises, because an isolated element reads as important.
- Sets reading pace, since line height and paragraph spacing control how fast text can be scanned.
- Signals quality, which is the aesthetic-usability effect at work and part of why premium products are typically more generous with space.
- Reduces perceived complexity without removing anything.
In practice
Increasing space to reduce perceived complexity
Dense formsA form that users described as overwhelming was unchanged in content and only re-spaced into groups. Perceived difficulty dropped without a single field being removed.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Aesthetic and Minimalist DesignHeuristic
- Aesthetic-Usability EffectLaw
- Law of PrägnanzLaw
- Occam's RazorPrinciple
Related concept
Connected closely enough to change how you apply this.
- BalanceUI foundation
- Borders and DividersUI foundation
- Common RegionUI foundation
- CompositionUI foundation
- DensityUI foundation
- EmphasisUI foundation
- Line HeightUI foundation
- ProximityUI foundation
- ReadabilityUI foundation
- RhythmUI foundation
- Spacing SystemsUI foundation
- Visual HierarchyUI foundation