Stage 2 · Lesson 5 of 7
Visual hierarchy
is the order in which the eye reads a screen. You control it with size, weight, colour, contrast, position and space. On every screen, decide the one thing people should notice first.
Usually that is the page purpose or the main action. Then make everything else quieter. Toning down secondary items often works better than making the main item louder.
Grey out the small details, and use a plain text link for the second action. The helps: half-close your eyes and see what still stands out. Hierarchy ties together type, colour and spacing. Later it decides the button in your .
Common trapmaking everything bold or brightly coloured, which leaves nothing important.
A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- GuideFreeMaterial Design 3
Google
Free, detailed foundations on layout, colour roles and type scales from a system used by millions of apps
- BookPaidRefactoring UI
Adam Wathan and Steve Schoger · About $99
Paid, practical visual design tactics explained for people without a design background
Practise
Keep handy
Also worth your time
How size, colour, contrast and spacing create reading order, with examples