Build visual hierarchy

Visual Hierarchy

Language

Visual hierarchy directs attention using scale, weight, contrast, color, and space — so the primary story is obvious in a 2-second glance.

Title subtitle and body scale
Let type size express importance.
Hero and sidebar hierarchy wireframe
Contrast carries more information than borders.

One focal point per view

If everything shouts, nothing is heard. Sequence headline → supporting detail → actions. De-emphasize secondary paths.

Typography as system

Limit steps of size and weight; pair consistent line heights; align to a grid. Jumping font families without reason adds noise.

Color discipline

Reserve high-chroma hues for CTAs and status; keep bodies neutral. Too many accent colors flatten hierarchy.

Practices

  • Type scale with named tokens (display, title, body).
  • Dim metadata compared to primary labels.
  • Crop images so faces or products guide gaze toward CTA.

Common pitfalls

  • All caps paragraphs (hard to read).
  • Multiple “primary” buttons stacked.
  • Underline on non-links for emphasis.