Skip to content
UX Atlas
Plate FND·001 · UI foundationGrid D2 · Rev. 2026-08-14

Visual Hierarchy

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

UI foundationCraft conventionFoundational

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 plate
  1. 1Definition
  2. 2Levers, ordered by strength
  3. 3Building a hierarchy
  4. 4Keeping a hierarchy legible
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Any screen where users report they cannot find something.
  • Reviewing a layout that feels busy without being dense.
  • Establishing the rules for a design system's typography and colour roles.
  • A screen reads as flat and nobody can say where to look first.

Common mistakes

  • Multiple primary actions.
  • Hierarchy carried entirely by colour.
  • More than three levels of emphasis in one view.
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.

Keeping a hierarchy legible

Do

  • Decide the single most important element on the screen before styling anything.
  • Use one strong lever rather than four weak ones stacked together.
  • Check the page in greyscale, where only size, weight and space survive.
  • Let secondary content be genuinely quieter, including its spacing.

Do not

  • Emphasise three things, which emphasises none.
  • Rely on colour to carry rank, which fails in greyscale and for many readers.
  • Set every heading in the same size and expect structure to be visible.
  • Add weight to fix a problem caused by the layout having no ranking at all.

In practice

  1. i.

    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.

  2. ii.

    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.

  3. iii.

    Everything bold

    Emphasis inflation

    A page where each team made their own section bolder ends with uniform weight and no hierarchy at all. Emphasis is relative, so the only way to raise one element is to lower the rest.

Local chart

FND·001 · Region II · Grid D2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

DashboardsPAT·028 · APPLIED THROUGHHalo EffectBIAS·013 · PRINCIPLES BEHIND THISAesthetic and Minimalist DesignHEUR·008 · PRINCIPLES BEHIND THISAesthetic-Usability EffectLAW·011 · PRINCIPLES BEHIND THISLaw of PrägnanzLAW·017 · PRINCIPLES BEHIND THISMiller's LawLAW·004 · PRINCIPLES BEHIND THISSerial Position EffectLAW·008 · PRINCIPLES BEHIND THISVon Restorff EffectLAW·009 · PRINCIPLES BEHIND THISBanner BlindnessPSY·003 · PRINCIPLES BEHIND THISCognitive LoadPSY·001 · PRINCIPLES BEHIND THISContrastFND·002 · DEPENDS ONLyssnaTOOL·020 · OFTEN USED WITH

Sources

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

  1. [1]

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.

  • ContrastFND·002 · UI 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.