The arrangement of elements in order of importance to guide users' attention through an interface. Visual hierarchy is established through size, color, contrast, spacing, and positioning, and determines what users notice first, second, and so on.
Common contexts
- Redesigning a dashboard where every data point is given equal visual weight, making it impossible to identify what matters
- Critiquing a marketing landing page where the primary CTA competes visually with four secondary actions at the same size
- Establishing hierarchy rules in a design system to ensure consistent attention sequencing across all product screens
Use when
Apply explicit visual hierarchy thinking whenever a screen contains more than one or two pieces of information — every interface needs a clear reading order, and the designer must define it deliberately or users will impose their own unpredictable sequence.
Avoid when
Don't over-engineer visual hierarchy in intentionally exploratory or discovery interfaces — gallery pages, creative portfolios, and browsing-mode layouts sometimes benefit from more balanced visual weight that invites exploration rather than driving users toward a single dominant path.
Visual hierarchy fails most often not because designers don't understand it, but because stakeholder review rounds progressively elevate everything to 'important' until the hierarchy is flattened — protecting the hierarchy through the review process is as important as creating it.
Real-world examples
- Apple's iPhone product pages establish visual hierarchy through size contrast alone: the device name is 96px, the headline is 48px, body copy is 17px — a 5.6× size ratio that guides the eye without any bold or colour differentiation.
- Airbnb's listing page uses visual hierarchy to direct attention from photo (full-width, dominant) → title and rating (large, secondary) → price (bold, tertiary) → host details (small, quaternary) — a hierarchy validated by eye-tracking studies.
- The New York Times uses four levels of visual hierarchy in their article cards (headline, deck, byline, timestamp), with size, weight, and colour working in combination to establish reading order without the user consciously noticing.