hierarchy, or telling the eye where to go
Size, weight, color and position each give an element a rank. The system uses all four, in a fixed order, so that a screen reads the same way to everyone.
A screen is read in an order, and the order is not the one it was built in. The eye goes to the biggest thing, then to the most saturated, then to whatever sits at the top left, and only then starts reading. Visual hierarchy is the craft of making that order the one you intended. It is the most important thing the rules do, and most of them do it without saying so.
four levers
- Size. The type scale has seven steps, and the rule is to skip one when you want contrast: 96 beside 32 reads as two ranks; 32 beside 24 reads as a mistake. The same applies to blocks on the grid: a five-column hero beside a three-column aside is a hierarchy; two six-column halves are a tie.
- Weight. Two weights per view, one heavy and one light. A heavy word in a light paragraph is the thing the sentence is about. Three weights is three claims on attention, and the eye gives up ranking them.
- Color. Red is the strongest signal and is spent once per screen, on the action. Yellow marks state and so points at the present: where you are, what you chose. Blue holds structure in the background. Ink and paper are rank zero, which is what lets the other three rank at all.
- Position. Top left is first, bottom right is last, and the diagonal between them is the path. The dominant block goes near the start of the path, the primary action near the end of it, and the counterweight sits off the path to keep the page level.
one of each
The rules keep repeating a number, and the number is one. One dominant block. One red button. One inverse panel. One quote. One shape divider. Hierarchy is a ranking, and a ranking with two things at the top is not one. When a screen has two things that both need to be first, it is two screens, or one of them is not first and should look like it.
the test
Blur your eyes or step back until the words disappear. What is left is the hierarchy: the big shape, the saturated spot, the dark band. If the first thing you see is the thing the page is for, the ranking holds. If the first thing is a decoration, a logo or a photograph of a screen, the page has told the eye the wrong thing, and no amount of good copy will fix it.
hierarchy and reduction
Less is more is usually understood as a rule about quantity. It is really a rule about hierarchy. Every element you remove promotes every element you keep, and a page with four things on it has a clearer order than a page with ten, whatever the four are. The remove-one-thing test is a hierarchy test in disguise: you are not asking whether the element is needed, you are asking whether its rank was earned.