Design Pilot on YouTube · Open on YouTube
Design foundations · Novice · Lesson 7 of 99 · 1 h 16 min video, then about 1 hour of practice
Visual hierarchy: making the eye go where you want
After this you can rank every element on a screen by intended importance and use size, weight, colour, space and position to make that ranking obvious.
Why it matters
Hierarchy is the single highest-leverage visual skill, and the most common thing missing from beginner work, where everything is medium-sized and medium-grey, so nothing leads. Focus on the fact that hierarchy is created by *contrast between* elements, not by absolute values: a heading is big only relative to what surrounds it. Common trap: creating hierarchy with colour alone, which fails for colourblind users and in greyscale. Test your screens by squinting until they blur; the reading order should survive.
How to use this resource
Seventy-six minutes and worth all of them: it works through real mobile screens rather than abstract examples. The tool shown is dated but nothing here depends on it; these are principles.
Go further
Go deeper
Practice