Lesson 0003
How to tell the reader: look here first. Builds on
CRAP, specifically Contrast on steroids.
Primary source: Toptal, A Guide to Visual Hierarchy ↗
Every diagram you make answers a silent question from the reader: where do I look first? Visual hierarchy is the toolkit for answering it deliberately. Without hierarchy, the eye wanders. With it, the eye obeys.
For a Holistics handout, this is the single most useful idea you’ll learn. A semantic-layer diagram with no hierarchy looks like a switch panel. With hierarchy, it looks like a story.
Hierarchy isn’t one technique, it’s five, stacked. You rarely use just one. But you should be able to name them and use each on purpose.
Tool 1
The single strongest signal of importance. Bigger = more important. The eye lands on the largest thing on the page first, every time. Use generously: a headline three or four times body size, not 1.2×.
Tool 2
How thick the strokes of a letter or line are. Bold elements pull the eye even at the same size as their neighbours. Reach for weight when you can’t make something bigger but still need it to stand out.
Tool 3
A single saturated element in a sea of grey shouts. The trick: keep most of the design quiet so the loud thing has room to be loud. One accent colour, used sparingly, beats a rainbow.
Tool 4
In English-reading cultures, the eye starts top-left. Whatever lives there is read first. Centre-stage commands attention; corners and bottom edges get glanced at last. Put the headline where the eye lands, not where it’s leaving.
Tool 5
Surround an element with empty space and it gains importance. Crowd it and it disappears. Often the cheapest fix: make something matter by giving it room, not by making it louder.
Pick one thing per view to be the focal point, the place the eye lands first. If everything is loud, nothing is. If three things tie for first, the reader picks none and feels overwhelmed.
When you stack tools, the focal point grows: a headline that is large and bold and coloured and well-isolated will dominate, full stop.
Four shouty things competing. The eye refuses to pick.
Headline wins. Eye lands, then walks down to the button.
Eye-tracking studies (Nielsen Norman Group, 2006–present) reveal two dominant scanning paths on Western-language pages. Knowing them tells you where to place the focal point.
Text-heavy pages (articles, docs, dashboards). Eye reads the top, then a shorter middle line, then drags down the left edge. Put the lede top-left.
Sparse pages (landing pages, slides, single-screen visuals). Eye traces a Z, top-left to top-right, diagonal, bottom-left to bottom-right. Put logo top-left and CTA bottom-right.
Rule of thumb: lots of text → design for F. Sparse layout → design for Z.
Suppose you’re explaining the semantic layer in a one-screen image. Three layers stacked: Database → Semantic Layer → Reports. Everything else is detail.
Every box is the same size, same weight, same colour. The eye has nowhere to land. A prospect’s instinct: skim past it.
The middle box now wins the page on every tool:
The reader’s eye walks: middle → left → right. Story delivered in two seconds.
Exercise 1 of 4
Name the five tools of visual hierarchy from memory, in any order. Don’t peek.
Size, Weight, Colour/Contrast, Position, White Space.
If you missed Whitespace, you’re in good company, beginners forget it because it’s the absence of something. It is the highest-leverage tool you have.
Exercise 2 of 4
A KPI tile shows the label “Quarterly revenue” in 24px bold and the number “$4.2M” in 14px regular. What’s wrong, and which two tools would you swap?
The label is louder than the data. Swap size and weight: number large and bold, label small and muted.
Hierarchy must mirror importance. On a KPI tile the number is the message; the label is metadata.
Exercise 3 of 4
You’re designing a one-page Holistics handout dense with text and screenshots. Which reading pattern should you design for, and where does the lede go?
F-Pattern. Dense, text-heavy. Put the lede, the most important sentence, in the top-left.
Dense layouts shorten the F’s horizontal sweeps the further down the page the eye goes. Anything below the second sweep is rarely read in full.
Exercise 4 of 4
A diagram has a clear focal point but everything around it is also brightly coloured. The focal point doesn’t feel focal. Which tool fixes it fastest, and how?
Colour/Contrast, applied by removing, not adding. Mute the surrounding elements (grey them out, drop saturation) so the focal point is the only saturated thing on the page.
A common beginner trap: trying to make the focal point louder. The faster fix is making everything else quieter. Contrast is relative, not absolute.
Ask me anything. Want a worked redesign of a real Holistics diagram you have? Drop it in, I’ll critique it with the five tools.