Visual Hierarchy: why some screens feel clear and others don't

What is visual hierarchy, really?

Open any app you use daily, look at its home screen for three seconds, then look away. What do you remember? Probably one big thing — a headline, a photo, a button — and a vague sense of the rest. That is visual hierarchy: the screen decided, before you thought about it, what deserved your attention first.

Hierarchy is not about making things pretty. It is about answering three questions for the person looking at the screen, in order:

1. What is this? — the main message, usually the biggest and boldest thing.
2. What do I do here? — the action, usually the most colourful or most separated element.
3. What else should I know? — the supporting detail, smaller and quieter.

How do I decide what the eye should see first?

Before you move a single element, decide the reading order. Write it down as a numbered list — three items at most. For a course card: 1) the course title, 2) the "Enrol now" button, 3) the duration and level. For a login screen: heading ("Welcome back"), fields, "Log in" button, then the small "Forgot password?" link last.

The order comes from the person's goal, not from the designer's taste. Ask: what does this person need first? That answer is your hierarchy.

What are the five tools of hierarchy?

There are five, and you already know them from reading books and signs:

No single tool carries a screen on its own. The heading is biggest *and* boldest *and* at the top; the button is coloured *and* separated by space. The tools must all point at the same order — when they disagree, the screen feels confusing even if you cannot say why.

How do size and weight work together?

Size and weight are the loudest tools, so they set the main order. A simple scale keeps them honest:

• Heading: 32px, bold (weight 700)
• Subheading: 20px, semibold (weight 600)
• Body text: 16px, regular (weight 400)
• Small detail: 14px, regular (weight 400)

Notice the gaps: 32, then 20, then 16, then 14. Each level is clearly different from the one below it. The mistake beginners make is using sizes that are too close — a 20px heading over 18px body text. The eye cannot tell them apart, so the hierarchy collapses. If two levels look almost the same, make the difference bigger, not smaller. Weight works the same way: bold (700) against regular (400) is a clear step, but medium (500) against regular (400) is barely visible — avoid pairing them as your only difference between two levels.

How do colour and contrast guide the eye?

Colour is the tool for the *action*, not for everything. A screen should have one strong colour used sparingly — the primary button, a key price, one highlighted word. When everything is colourful, nothing stands out.

Contrast is the part of colour that matters most for reading. Dark text on a light background (or the reverse) is easy to read; medium grey text on light grey is hard to read, however nice it looks. Two rules cover most cases: body text should be dark and quiet, with bright colour saved for the one or two elements that need attention; and never rely on colour alone — a red "error" message that is the only signal fails for people who cannot tell red from green, so add words ("Error:") or an icon as well.

In the worked example below, the button is the only strongly coloured element on the card. That is deliberate: the colour says "this is the action" and nothing competes with it.

How does spacing create order?

Spacing answers a question the eye asks constantly: *do these two things belong together?* Elements close together read as one group; elements far apart read as separate ideas. This is the oldest rule in layout, and it needs no colour or size at all.

A practical spacing scale for a card or a screen:

• 8px — between a label and the thing it describes
• 16px — between related elements in the same group
• 32px — between separate groups (one card and the next)

The rule is simple: space *inside* a group is always smaller than space *between* groups. When a screen feels messy, the usual cause is not too little space — it is equal space everywhere, so the eye cannot tell where one idea ends and the next begins.

Worked example: fix a course card in Figma

Here is the whole method on one small screen. Open a free Figma file and follow along.

Step 1 — Make a frame. Create a frame 360px wide and 220px tall: a course card, like the ones on a course listing page.

Step 2 — Add the "before" version. Inside the frame, add three text layers, all 16px regular, all the same dark colour, with 12px between each: "UI Design Fundamentals", "Beginner · 7 hours", "Enrol now".

Expected result: three lines that all look equally important. Your eye has no reason to start at the title rather than the button. This is the screen that feels confusing.

Step 3 — Set the reading order. Decide: 1) the title, 2) the "Enrol now" action, 3) the duration as detail.

Step 4 — Fix size and weight. Select the title and set it to 20px, bold (700). Select "Enrol now" and set it to 16px, semibold (600). Leave the duration at 14px, regular (400).

Step 5 — Fix colour and position. Turn "Enrol now" into a button: draw a rectangle behind it, 120px wide and 40px tall, filled with a strong colour, with the text centred in white. Move the duration line to the bottom of the card, in a quieter grey.

Step 6 — Fix spacing. Set the gap between the title and the button to 24px, and the gap between the button and the bottom line to 16px. The title, the action and the detail now sit in three clear groups.

Step 7 — Check it. Zoom out so the card is small on your screen, and squint. You should still be able to tell, without reading the words, which element is first (the big bold title), which is second (the coloured button) and which is last (the small grey line). If you cannot, one tool is still fighting the others — usually the size gap is too small, or the button colour is too pale.

Common mistakes

• Making everything big and bold. If the title, the price and the button are all 20px bold, nothing is first. Hierarchy needs a quiet bottom as much as a loud top — most of the screen should be small and regular.
• Using sizes that are too close together. A 20px heading over 18px body text is not a hierarchy, it is a rounding error. Make the steps between levels obvious: 32, 20, 16, 14 — not 20, 19, 18.
• Adding colour instead of fixing order. A rainbow of badges, links and highlights does not create hierarchy; it creates noise. Fix size, weight and spacing first, then use one colour for the action.
• Equal spacing everywhere. When every gap is 16px, the eye cannot tell groups apart. Space inside a group must be smaller than space between groups — 8px inside, 32px between.

Frequently asked questions