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.

Start Learning
🔥

Practice this topic

Active recall — strengthens long-term retention

Related Topics