Visual Hierarchy
Part of the UI/UX Design Roadmap
In short
Users don't read screens, they scan them in a few seconds. Visual hierarchy decides what they see first, second and third, so the important thing never gets missed.
Using size, weight, color and position to guide a viewer's eye to what matters most, in the right order — a core skill for making complex screens feel scannable rather than overwhelming.
Think of it like this
A wedding invitation card
The couple's names are biggest, then the date and venue, then the small RSVP line at the bottom. Nobody gets confused about whose wedding it is. Size, weight and position tell you the order to read.
Watch it happen
Where the eye goes on a product card
1/5First: the big product photo. Large images grab attention before any text.
The big ideas
What you need to know
Size and weight lead
Bigger and bolder gets seen first. Use that for the one thing users most need on the screen.
Colour pulls the eye
One bright element on a calm screen grabs attention. Ten bright elements cancel each other out.
Position matters
People usually start at the top left (in left-to-right languages) and skim down. Put key info where eyes land early.
One focus per screen
If everything is important, nothing is. Decide the single main thing before you design.
Save yourself the pain
Common mistakes
Oops
Making the title, price and button all equally big and bold.
Do this instead
Pick a clear first, second and third. Shrink or soften whatever isn't the priority.
Oops
Using three different primary-coloured buttons on one screen.
Do this instead
Have one primary button. Make the others secondary, like outlined or text-only.
Your mission
The squint test
Quick check
On a payment screen, which element should usually have the strongest visual weight?
Go deeper
- 1Critique a screen for unclear hierarchy — what should be seen first, and does it read that way?
- 2Practice redesigning a flat, same-weight layout to establish a clear primary/secondary/tertiary hierarchy.
- 3Learn how size, color, and whitespace each independently contribute to hierarchy.
More topics at this stop
Gestalt Principles
Color Theory
Typography Fundamentals
Layout & Grid Systems
Contrast & Whitespace
Iconography Basics
Design Consistency
Accessibility Basics (WCAG)
Dark Mode & Theming
Design Trends vs Timeless Principles
Stuck on this topic? Ask an Insider
Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.
