← All terms
Labeled interface graphic showing what "Hierarchy" looks like

Fig. 43 / Hierarchy

Visual Design Vocabulary

Hierarchy

EXPLAINED SIMPLY:Hierarchy is making the important things look important, so your eye reads a screen in the order the designer intended.

Hierarchy is making the important things look important, so your eye reads a screen in the order the designer intended. Headline first, details second, button when you're ready for it.

Without it, everything arrives at the same volume. Picture a workshop announcement where the title, the description, the date, and the sign-up line are all set in the same quiet type. No single line is wrong, but when everything looks equally important, the reader has to do the sorting, and most readers would rather leave.

Designers build the order with size, weight, color, and position. In the fixed version of that announcement, nothing new was written. The title got big and heavy, the description dropped to gray, the practical details shrank to a whisper, and the action became a button. Your eye walks it 1, 2, 3 without being told, which is the whole trick.

The common failure is promotion inflation. Someone asks for the price to be bigger, then the deadline, then the legal line, and three rounds later every element is shouting in unison again. Emphasis is a budget: every promotion quietly demotes everything else. Contrast and whitespace are how the budget gets spent, and making one thing smaller is often the cheapest way to make another thing important.

You'll also hear visual hierarchy, the same idea in its formal jacket, and designers talk about visual weight, meaning how heavily an element sits on the page. When a design reads like a wall and you don't know where to look, say the hierarchy is flat. It names the problem exactly, and it's a far more useful note than asking anyone to make it pop.