Visual hierarchy: directing the eye

Size, weight, contrast, position and whitespace decide what a person sees first — whether you planned it or not.

The idea

Every screen already has a hierarchy. The only question is whether it’s the one you chose. When everything is the same weight, nothing reads as important, and the eye stalls. Good hierarchy makes one thing win first — ideally the one action you want taken — and it can do that quietly, with whitespace and restraint, instead of shouting.

Tune the pricing page

Below is a plan card. The numbers show where the eye lands — 1 first, 2 next, 3 third — from a simple attention model. Right now the price wins and the Start free trial button is nearly last. Move the sliders to make the button win first, and try to turn the goal meter green without cranking everything to the top.

pricing card · primary action = “start free trial”

Prep Room Pro

$29 / mo

Unlimited mock interviews

Model answers & critique

Resume & JD tuning

Start free trial

Compare plans

Primary action: 5th of 5 loudness 32%

does the intended action win, calmly?not yet

The primary action isn’t winning the eye yet.

size 30

weight 35

contrast 30

whitespace 30

The button is ranked 5th of 5 — equal weight with everything else, so it disappears.

How it works

Attention isn’t magic; it’s roughly additive. A rough model weighs five levers and ranks the elements by the total. Whitespace (isolation) is the quiet one — it lifts attention without adding noise.

attention ≈ 0.25·size + 0.17·weight + 0.20·contrast + 0.26·space + 0.12·position

start — primary button, everything low:
  0.25(.30) + 0.17(.35) + 0.20(.30) + 0.26(.30) + 0.12(.35)
  = .075 + .060 + .060 + .078 + .042  =  0.315   → 5th of 5

price tag (fixed, big and bold):
  0.25(.90) + 0.17(.80) + 0.20(.70) + 0.26(.60) + 0.12(.60)  =  0.729   → 1st

give the button whitespace + moderate size/weight/contrast:
  0.25(.76) + 0.17(.70) + 0.20(.73) + 0.26(1.0) + 0.12(.35)
  = .190 + .119 + .146 + .260 + .042  =  0.757   → 1st, loudness only 0.73

The lesson in the last line: you can win the eye and still be calm. Whitespace did most of the lifting, so size, weight and contrast never had to max out.

When to use it

Any screen with one job	Decide the single primary action, then make it win first. One primary action per screen.
A quick critique	Squint until detail blurs; whatever still stands out is your real hierarchy. If nothing does, that’s the problem.
The limit	This is a model of attention, not an eye-tracker. Use it to reason and catch obvious faults — then confirm with real users.

Watch out for

Everything bold means nothing bold. Emphasis is relative. If every element shouts, the eye has no leader and gives up.
Winning by shouting. Max size, weight and contrast can put your button first — but a loud page is fragile, because the next loud thing steals attention right back. Prefer whitespace and restraint.
Colour alone. Making the one button the brightest thing is weaker than it feels, and fails for anyone who can’t rely on colour. Size, weight and whitespace carry more.
Two primary actions. Two equally-weighted buttons compete and cancel out. Pick one primary; demote the rest to secondary.
Decoration outranking content. A big hero image or a giant price can quietly beat the action you actually want taken.

Worked example

In an interview you’re asked to critique a signup screen: two same-size green buttons, Start free and Book a demo, side by side. Don’t say “I don’t love it.” Say what the model says: with two primary actions at equal weight, neither wins, so the eye stalls and users hesitate. Your fix — make Start free the single primary through size, weight and surrounding whitespace, and demote Book a demo to a quiet text link. One clear first action. That reasoning, not taste, is what the interviewer is listening for.

Check yourself

A landing page has a bold headline, a bold price, and a bold button — all the same weight. The problem?

Cheapest way to make one button win attention without shouting?