Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Visual Hierarchy

The order in which elements are noticed, controlled by size, weight, colour, position and space.

Definition

Visual hierarchy is the deliberate arrangement of elements so that importance is legible before anything is read. It is the single most consequential visual decision on a screen, because it determines whether a user finds what they came for.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Levers, ordered by strength
  3. Building a hierarchy
  4. In practice
  5. Sources
  6. Continue from here
No hierarchyHierarchyPrimarySecondarySame content. Weight, size and space redistributed.
The same content with and without hierarchy. Nothing was added on the right; weight, size and space were redistributed.

Levers, ordered by strength

Combining two or three is usually enough. Using all of them at once produces noise rather than emphasis.

LeverStrengthNotes
SizeVery strongWorks at a glance and survives greyscale. The blunt instrument.
WeightStrongMore precise than size for text, and cheaper in vertical space.
PositionStrongTop and left dominate in left-to-right reading. Mirrors under RTL.
WhitespaceStrongIsolation reads as importance and adds no visual noise.
Colour and contrastMedium to strongPowerful but must never be the only signal.
Case and styleMediumUppercase reduces readability at length. Use for short labels only.
MotionOverwhelmingReserve for genuine change. Honour reduced-motion preferences.

Building a hierarchy

  1. 1

    Rank the content

    Write down what the user needs first, second and third for this screen. If everything is first, the screen has more than one job.

  2. 2

    Assign three levels

    Primary, secondary, tertiary. More than three levels is rarely distinguishable and usually means the content needs splitting.

  3. 3

    Apply two levers per level

    For example, primary gets size plus weight. Secondary gets weight alone. Tertiary gets reduced contrast.

  4. 4

    Test in greyscale

    Desaturate the screen. If the hierarchy collapses, it was carried by colour alone and will fail for some users.

  5. 5

    Test at a squint

    Blur the screen. The primary element should still be the first thing you see.

In practice

Dashboard with no hierarchy

Analytics

Twelve metric cards of identical size and weight force the reader to evaluate all twelve. Promoting two to a larger treatment turns the screen into an answer rather than a list.

The greyscale test

Design review

Desaturating a design is the fastest way to find hierarchy that only exists in colour. It takes seconds and catches an accessibility failure at the same time.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A DashboardA Pricing PageA Search ExperienceAn AI ProductAn Ecommerce ExperienceAn Onboarding FlowNavigation

Applied through

Where this shows up as a concrete interface decision.

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

  • ContrastUI foundation

    Hierarchy is built from contrast in size, weight, colour and space.

Often used with

These usually appear in the same screen or the same decision.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.