Visual Hierarchy — Guiding the Eye

Lesson 2 · taught by Pip

Here is the plain idea: visual hierarchy is the order in which a page hands things to your eyes. Some things are meant to be seen first, some second, some last. Hierarchy is how a designer sets that order on purpose.

Think of how someone tells a story out loud. They don't say every word at the same volume. They lean on the important bits and rush past the small ones. Your eyes want the same favor on a page: tell me what matters most, and say it loudest. 🔦

Everything can't be important

The most common mistake beginners make is trying to make everything stand out. They bold every line, enlarge every word, color everything. The result is a page that's all shouting — and shouting that never stops just becomes noise.

If everything is emphasized, nothing is. Emphasis only works by contrast. A big headline feels big because the text around it is small. A bright button pops because the rest of the page is calm. So hierarchy is really about choosing what to make quiet, so the loud parts can be heard.

Before you design anything, decide the order. What is the one thing a viewer must see? What's second? What's just supporting detail they'll read only if interested? Write that order down. The whole layout then becomes a way of expressing it.

The four levers that create it

You don't need fancy tricks. Four simple levers do almost all the work.

Size. Bigger reads as more important. Your main headline should be clearly larger than body text — not a little, a lot. Timid size differences look like a mistake; bold ones look intentional.

Weight. Bold text feels heavier and pulls the eye. Use it for the few things that matter, not for whole paragraphs. A page of bold is a page of nothing-bold.

Color. A single accent color, used sparingly, becomes a spotlight. The one button or link in your bright color will be found instantly — but only if it's the only thing in that color.

Position. We read top-to-bottom and (in English) left-to-right, so the top and the upper-left carry natural importance. Put your most important thing where the eye already starts.

Combine levers, gently

These levers stack. A headline that is bigger and bolder than everything else is unmistakably the headline — you don't also need to color it, underline it, and box it. One or two levers per element is plenty.

A keeper points a ship to harbor with one strong beam, not twelve flickering lanterns. Restraint is what makes the signal clear. When in doubt, push one lever harder rather than adding a new one.

Your turn

Grab a flyer or a web page and rank what you see, first to third.

• Does the order your eyes actually follow match the order that makes sense? On a concert flyer, you'd want the band, then the date, then the venue.
• Spot one element fighting for attention it doesn't deserve. How would you quiet it — make it smaller, lighter, or plainer?

Practice ranking before you ever practice designing. Once you can see the intended order, building it is easy. Next, we'll line everything up cleanly with alignment. 🐙