Visual Design
Visual Hierarchy
Visual hierarchy is the arrangement of elements to show their order of importance and guide the eye through a layout.
Why it matters
It tells people what to look at first, second, and third. Without it, everything competes for attention and nothing stands out.
In depth
Hierarchy is built with size, weight, color, contrast, spacing, and position. Designers use it to lead users along an intended path — typically from the most important message or action down to supporting details. Strong hierarchy makes a page scannable in seconds.
Real-world example
A large bold headline, a smaller subheading, and regular body text create an instant sense of what matters most on the page.
Field Notes
The shape of attention
Size, weight, and space guide the eye from most to least important — without a single instruction.
Related terms