Principle 02 · Visual hierarchy
Visual hierarchy
Visual hierarchy controls what people notice first, next, and last. By varying emphasis between elements, a layout becomes easier to scan and understand.
Different levels of emphasis create a natural reading order.
See the principle
Unclear hierarchy. Clear hierarchy.
Design exhibition
Form, rhythm, and the city.
A one-night exhibition exploring how everyday visual systems shape the way we move through public space.
Design exhibition
Form, rhythm, and the city.
A one-night exhibition exploring how everyday visual systems shape the way we move through public space.
Nothing moved or changed color. Clear differences in emphasis created an obvious reading order.
Practice
Now create a clear reading order.
Adjust the emphasis of each text element so the most important message leads and the supporting details stay quiet.
Interactive exercise
Create a clear reading order.
Select a text element, then make it more or less prominent.
Complete
Clear hierarchy ✓
Clear hierarchy gives every element a role: one leads, one supports, and the remaining details stay available without competing.
Compare
northgallery.city/exhibitions
The principle
Why visual hierarchy works
Hierarchy helps someone understand what to notice first, what supports the main message, and which information can remain quieter until it is needed.
When every element has an intentional level of emphasis, the page becomes faster to scan without changing its content, alignment, or structure.
Continue learning
Next principle · 03
Proximity & spacing
Show relationships through intentional grouping and breathing room.
View all principles