Hierarchy: One Hero per Screen
Open a page and the eye has to land somewhere first. If the designer doesn't place that landing spot, the reader's eyes bounce around on their own. This lesson is about hierarchy: how to use type size, weight, and color—three levers—to decide "look here first."
Attention is scarce, and every element on a screen is fighting for it. Bold, red, bigger—each move makes sense alone, but stacked together they cancel out: five leads on stage, and the audience remembers none. Hierarchy flips that: pick one hero first, then let the rest step down by importance. You only get three levers:
| Lever | How to use it | Common crash |
|---|---|---|
| Type size | One or two steps bigger than supporting roles is enough—spread the steps, keep the count restrained | Three elements all at the largest size, big type fighting itself |
| Weight | Body at 400, emphasis at 700—two steps rule the screen | Everything bold, so bold loses the meaning of "more important" |
| Color | Give the accent color to one action or one number only | Three things in red—readers can't tell which red is the real alarm |
About Face 4: The Essentials of Interaction Design, chapter 17 on visual hierarchy, opens by splitting a user's first reaction into two subconscious questions: "What's important here?" then "How are these things related?" Cooper's take: the interface answers both by building hierarchy and relationships. Done well, users barely notice hierarchy; done badly, chaos jumps out immediately.
Those two questions are this lesson's acceptance mantra. For every case below, ask yourself first: can you find the hero in three seconds? Which elements read as one group at a glance?
Here's a product card. All three levers are yours: title size, secondary-info color, accent-color count. Pull them and watch how the card's "hero" shifts.
Beginners build hierarchy by addition: hero not loud enough? Bigger, bolder, add a fill. Cooper's advice flips that: when two elements fight for attention, dimming the secondary beats amping the primary. Dimming clears room for the hero; amping starts an arms race—this version enlarges the title, the next enlarges the button. The book's image: when every word on screen is red bold, which word stands out?
Hierarchy rides on visual variables—and variables have two temperaments. About Face 4 follows Bertin's Semiology of Graphics: size and value (lightness) are ordered variables—the eye automatically reads "bigger" and "darker" as "more important"; hue (red, blue, green) has no natural order. Readers can't rank red vs blue, and they'll invent meanings in the colors. To carry hierarchy, prefer the two ordered levers.
There's a zero-cost check for hierarchy—graphic designers call it the squint test: squint at the screen; once detail blurs, see what still pops and what collapses into a group. About Face 4 lists it as a regular check for hierarchy and relationships. A different angle often catches layout issues you missed. Hold the button below to simulate a squint and compare the two UIs.
One hero per screen. In a glance readers ask "what's important" and "what's related." Pick the hero first; step the rest down by relationship—then both questions have answers.
One step on each of three levers is enough: size up one or two steps, two weights, accent color in one place. Prefer size and value—the ordered variables—for hierarchy; leave hue for categories.
Want emphasis? Subtract first. Dimming the supporting cast beats amping the hero; cut screen time from elements farthest from the core decision.
Squint once before you ship. If primary and secondary still separate when blurred, hierarchy holds; if not, go pull the levers again.
Source: Original to Xiaoshan Academy's Taste Engineering series; some principles adapted from About Face 4: The Essentials of Interaction Design, chapter 17 (Alan Cooper et al.).