Layout & Spacing
Visual Hierarchy in Layout
Using size, weight, contrast, and depth to guide attention through a layout
Key Insight
Visual hierarchy tells users where to look first, second, and third. It is created through: size (larger = more important), weight (bold = more important), color contrast (higher contrast = more prominent), and depth (elevated elements draw attention). The squint test - blurring your eyes and looking at a design - reveals whether the hierarchy is working: the most important element should remain clear.
Key Points
- •Squint test: blur your vision and check which element stands out - that's what has strongest hierarchy
- •Depth and shadow: elevation draws attention; flat equal-depth elements compete
- •Size is the strongest hierarchy signal - headings, not just bold labels
- •Reduce contrast for secondary content rather than increasing it for primary
- •12-column grid: align content for structural consistency and predictability
Guidelines
- ✓Define hierarchy levels: primary, secondary, tertiary - each screen needs one primary element
- ✓Test the squint test on every major screen before shipping
- ✓Use depth sparingly - elevation should signal interaction priority, not decoration
- ✓Align content to a grid for structure; break the grid deliberately for emphasis
- ✓Keep important content visible without scrolling on the primary viewport
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall - strengthens long-term retention