Emphasis inflation
Every element on a screen was designed at a moment when it was the most important thing on that screen. The heading was styled while somebody was thinking about headings. The badge was added in the week the badge mattered. The warning was made red by a person who had just been told the warning gets missed.
Each of those decisions was reasonable on its own. Together they produce a screen where six things are shouting, and a screen where six things shout has no hierarchy at all. It has a flat surface with a lot of texture on it, and the reader has to do the sorting work that the design was supposed to do for them.
There are only six signals
Everything that separates one level of a hierarchy from another comes down to a short list:
- Size. How much room it takes.
- Weight. How heavy the strokes are.
- Colour. Including how dark the grey is.
- Space. How much emptiness sits around it.
- Position. How near the top and the left it starts.
- Containment. A box, a card, a rule, a tint.
A step down in hierarchy needs one of these. Not all six. A card title that is larger, heavier, in the accent colour, in capitals and inside a tinted box is not five times clearer than a card title that is only heavier. It is less clear, because it has spent five signals saying one thing, and those five are no longer available to say anything else on the page.
Treat the signals as a budget
The six are shared across the whole screen, so spending one at the top has consequences further down. If size is what separates the page title from everything else, size cannot also separate a card title from its body, because the card title would have to grow to win and then the page has two titles arguing.
Pick one signal per level and hold it. Sizes step down and keep stepping down. Weight marks the one thing inside a group that matters most. Space does the grouping. Colour is kept back for the thing a reader is meant to act on.
Reserve the accent
Colour is the signal that gets spent fastest, because it is the most satisfying to add. One accent doing exactly one job, marking the primary action, tells somebody where to go without a word of copy. The same accent on the heading, the active link, the badge, the icon and the card border tells them nothing.
Before putting the accent on something new, find everything already wearing it and decide which of those is giving it up.
Space groups faster than lines do
When two things belong together, the reliable move is to place them closer to each other than to anything else around them. That reads before any border does, and it costs nothing from the budget that a border would cost.
Boxes earn their place when space alone cannot do the job: when a group has to hold together against other content sitting immediately beside it, or when it needs to be a target. Drawing a box around a group that is already spaced correctly is a signal spent on a problem that was already solved.
Squint at it
Blur the screen until the words stop being readable. Standing back far enough works too, and so does turning the design down to a thumbnail. Two failures show up straight away.
- Nothing survives. Everything dissolves into one even grey texture. The page is flat, and a reader arriving on it has no obvious place to start.
- Everything survives. Six blocks stay equally dark and equally insistent. That is emphasis inflation, and it is the more common of the two.
What should survive is one clear entry point, and under it two or three shapes that are obviously subordinate to it.
Fixing a screen that already exists
The method is the same every time, and most of it is subtraction.
- List every element carrying emphasis, and write down which of the six signals each one is using. The list is usually longer than expected.
- Decide the levels. Three is normally enough: what the page is, what its sections are, what the details inside them are.
- Give each level one signal, and take the others away.
- Squint again, and check that the entry point is the thing that should be the entry point.
Screens treated this way get quieter and easier to use at the same time, which is not a coincidence. The quiet is what makes the one loud thing legible.
The instinct to resist
When a screen is not landing, the first instinct is to make the important thing louder. It is almost always the wrong move. The important thing is usually loud enough already, and the problem is everything standing next to it at the same volume.
