Visual Hierarchy
A subscriber opens LunchLoop at 7:12 a.m. with 18 minutes left to change today's lunch. Their eye lands somewhere in the first half-second. Visual hierarchy decides where, and whether that place is the Change button or a banner advertising desserts.
The rule
Decide the one most important thing, then make everything else quieter.
Visual hierarchy is the order in which the eye reads a screen. You set it with a handful of levers:
- Size: bigger is seen first.
- Weight and contrast: bold and dark beat light and grey.
- Colour: a rare accent pulls the eye, which is why the colour lesson kept it rare.
- Position: for left-to-right readers, the top and left are usually seen first. On phones, the lower part of the screen is easiest for the thumb to reach.
- Space: empty space around an element isolates it and draws attention.
Two habits keep the order clear:
- One primary action per area. Other actions look secondary: outlined buttons or text links, not a second filled button.
- Subtract before you add. When something important is being missed, the fix is usually to turn the competition down, not to turn the important thing up. A screen where everything is big and bold has no hierarchy at all.
Icons help when they sit beside a label. An icon alone is ambiguous unless its meaning is truly universal.
The shortcut
The squint test. Blur your eyes, or blur a screenshot. The shapes that still stand out are your real hierarchy. If the wrong thing survives the blur, turn it down rather than turning everything else up.
Name the one thing
Before 7:30 a.m., the priority is changing today's lunch, together with its deadline.
Hierarchy also depends on the moment. After 7:30 a.m. the Change button is gone, and the most important thing becomes when lunch will arrive. A well-designed screen re-ranks itself for each state instead of keeping one fixed order all day.
Drills
Answer fast — trust the rule.
What is the first step in setting a screen's hierarchy?
Two filled orange buttons, Change and View menu, sit side by side. What is the best fix?
You blur a screenshot and the promo banner stands out most. What does that tell you?
The Change button keeps being missed. Which fix follows "make everything else quieter"?
Remember
- Decide the one most important thing, then make everything else quieter.
- Shortcut: the squint test; whatever survives the blur is your real hierarchy.
- Trap: making everything louder, which leaves no hierarchy at all.