Hierarchy Principle of Design

What is the hierarchy principle of design? Hierarchy is the order in which a design is read.

Every composition has a hierarchy whether you planned one or not. If you do not decide the order, the eye decides it for you, and it will pick whatever happens to be biggest or brightest. That is usually not the thing you needed read first.

A menu, a form, a dashboard and a poster all share the same job here. They have to answer three questions before the reader thinks to ask them: what is this, what matters most, and what do I do next.

---

How the eye ranks things

The eye assigns importance using a small set of signals. You can move any of them.

• Size. Bigger reads as more important. This is the strongest signal and the easiest to overuse.
• Weight. Heavier type reads as more important than lighter type at the same size.
• Colour. A saturated or high contrast element outranks a muted one.
• Position. Higher and further left reads first in languages that scan left to right.
• Space. An element given room around it outranks one crowded by neighbours.

A clear hierarchy points several of these signals at the same element. A heading is usually larger, heavier and given more space, all at once. That agreement is what makes the ranking feel obvious rather than argued.

---

Three levels are usually enough

New designers often build hierarchies with seven levels. The reader cannot hold seven.

In practice most screens need three: a primary element that states what this is, a secondary layer that carries the detail, and a tertiary layer for metadata and labels. A single action sits on top of all of it.

Let us take an article page as the example. The headline is primary. The body text is secondary. The date, reading time and category are tertiary. The one button asking you to start the course sits above the lot precisely because everything else has been ranked below it.

---

Hierarchy is not the same as emphasis

These two get confused constantly, so it is worth separating them.

Emphasis makes one element stand out. Hierarchy ranks every element in the composition.

Emphasis is the top of a hierarchy rather than a different principle. If you emphasise something without ranking what follows, you get a loud element and then a flat field behind it. The eye arrives and then has nowhere to go.

For more on that first step, I suggest you read my article Emphasis Principle of Design.

---

Where hierarchy breaks

The most common failure is competition. Two elements are given the same rank, so the eye bounces between them and settles on neither. Two buttons of equal weight side by side is the everyday version of this.

The second failure is inversion, where the signals disagree. A heading that is large but pale, sitting beside body text that is small but black, sends the eye to the body text. Size said one thing and contrast said another, and contrast won.

The third is flatness. Everything gets the same treatment, usually in the name of consistency. The page looks tidy and reads as a wall.

---

Why is hierarchy an important principle of design?

Hierarchy is important because of the following reasons:

• It controls the order in which information is received.
• It lets a reader skim and still leave with the main point.
• It makes the next action obvious without instruction.
• It reduces the effort of reading, which is what people actually notice.

---

Final Words

To sum everything up, hierarchy is how you decide what gets read first. In this article you learned:

• What hierarchy is? Hierarchy is the order in which a design is read.
• How do you create it? With size, weight, colour, position and space, pointed at the same element.
• How many levels? Usually three, plus one action. More than that and the ranking stops being readable.

If you would like to learn more about the other principles of design, I suggest you check out my article on the core concepts here: The 11 Principles of Design and Art [Infographics Included]

Further Reading:

• Emphasis Principle of Design
• Contrast Principle of Design
• Movement Principle of Design