Design foundation
Visual hierarchy in UI design
Learn how size, contrast, spacing and position guide attention and make interfaces easier to scan.
In one sentence
Visual hierarchy tells users what matters first, second and next.
Why it matters
When every element competes with the same visual weight, users must work harder to understand what to do.
The 4 levers of visual hierarchy
Hierarchy rarely comes from one property. Size, contrast, spacing, and position usually work together to create a clear order of attention.
Size
Larger elements often win attention first, but size should reflect real importance.
Contrast
Differences in color, weight, or tone separate priority from supporting content.
Spacing
Space groups content, separates levels, and prevents everything from competing at once.
Position
Placement, alignment, and flow shape what the eye finds next.
Common mistake
If everything stands out, nothing stands out.
Large buttons, heavy headings, shadowed cards, and multiple accent colors can all compete. Good hierarchy also decides what should stay quiet.
Applied example
A primary CTA can gain priority through stronger contrast and spacing without making every other element disappear.
What to remember
- Prioritize with contrast, not decoration.
- Use spacing to separate levels of importance.
- Make the primary action easy to identify.
PixelDojo
Don't just memorize the principle. Practice spotting it.
Test your judgment with fast visual challenges and immediate feedback.
Start training