Layout & Spacing
Visual hierarchy, whitespace, and organizing content so it makes sense.
Good layout is invisible. Users don't notice it — they just find things easily. Bad layout makes everything feel cluttered and confusing.
Whitespace
Whitespace (empty space) isn't wasted space. It's what makes content scannable.
- Generous padding inside cards and sections (16-24px) - Clear gaps between sections (32-48px) - Space between elements lets the eye rest
- Elements crammed together with no padding - No visual separation between sections - Text runs right up to edges
Cramped layouts consistently score lower. Adding consistent spacing is one of the easiest ways to improve your design.
Consistent spacing
Use a spacing scale instead of random values. Pick a base unit and multiply:
Base: 4px
Scale: 4, 8, 12, 16, 24, 32, 48, 64This means padding is always 8px, 16px, or 24px — never 13px or 17px. Consistency makes everything look intentional.
Visual hierarchy
The most important content should stand out. Less important content should be smaller or lighter.
- Big, bold heading at the top - Supporting text is smaller and lighter - Primary action button is prominent - Secondary actions are subtler
- Multiple elements the same size and weight - Three equally-prominent buttons - No clear starting point for the eye
Alignment
Align elements to invisible grid lines. Misaligned elements look sloppy even if users can't say why.
- All content aligned to a consistent margin - Form labels and inputs line up - Cards in a grid are the same height
- Text starting at different left positions - Cards slightly different widths - Centered and left-aligned content mixed randomly
Max width
Content that stretches to fill a 27-inch monitor is unreadable. Set max widths:
- Text content: 640-720px max
- Page content with sidebar: 1200-1400px max
- Cards/grid items: consistent widths within a row