Attention needs direction

Hierarchy answers three questions without explanation: where should I begin, what belongs together, and what comes next? When every element has equal force, the reader must construct the order themselves.

Hierarchy is not simply making headings larger. Scale, weight, value, position, space, and repetition all create priority. The strongest systems use several of these cues in agreement.

First.

Then this.

Supporting information arrives only after the order is understood.

Figure 01

Information weight

A decisive change in scale establishes order faster than several timid differences.

Source
Proteus study

Establish levels

A practical system begins with three clear levels: primary, secondary, and supporting. Make them meaningfully distinct. Tiny incremental differences often create ambiguity rather than nuance.

Considered

One idea leads.

Supporting detail arrives at a quieter level.

Unresolved

TITLE AND DETAIL

COMPETE AT ONCE

Use space as emphasis

Isolation creates importance. A modest element surrounded by space may command more attention than a larger element crowded by neighbors. This makes whitespace one of the most precise hierarchy tools available.

Visual note — Attention

Aa

The eye seeks contrast before content.

Sequence and scanning

Readers do not consume pages evenly. They scan for anchors, then decide where to invest attention. Repeated headings, predictable metadata, and stable alignment make that scan productive.

Observe — Notion

Quiet structure can still be unmistakable.

Notion separates page title, properties, body, and controls with scale, position, and spacing more than color. Each level is modest, but the relationships remain consistent.
☰Workspace / Handbook
Visual hierarchy
Status · In progress   Owner · Proteus
Quiet structure
Properties, content, and controls use spacing and position to remain distinct.

Exercise 01

What did you notice first?

Reveal the observation +

Most readers see the isolated black square before the larger grey field. Contrast and isolation combine into a stronger signal than size alone.

  • The first point of attention is intentional.
  • Primary and secondary levels are unmistakable.
  • Spacing reinforces the content structure.
  • Repeated elements behave consistently.
  • The order remains clear without color.

Chapter summary

Keep these
ideas close.

  1. 01Hierarchy establishes a visible order of importance.
  2. 02Several aligned cues are stronger than scale alone.
  3. 03Whitespace can create emphasis through isolation.

Related topics

Typography →Contrast →Composition →

Test at a distance

Step back, blur the screen, or view the page as a thumbnail. You should still perceive its order. Hierarchy is successful before the words become readable.

Keep exploring

References

Books

Visual Grammar

Christian Leborg · A concise language for visible relationships.

The Functional Art

Alberto Cairo · Clarity and hierarchy applied to information graphics.

Web & practice

Laws of UX

A useful index of perception principles in interfaces.

Nielsen Norman Group

Research on scanning, attention, and reading behavior.

Field exercise

Blur a favorite interface screenshot. Mark the first three masses you still notice.