Typography
Design & UXThe craft of choosing and arranging type on a website — fonts, sizes, weights, line height, letter spacing, line lengths — to make content readable, scannable,…
Design & UX
Visual Hierarchy
Lukas HorvathCo-founder
What is Visual Hierarchy?
Visual hierarchy is the arrangement of elements on a page so the visitor's eye lands on the most important thing first, the second most important thing next, and so on. Designers create hierarchy through size, color, contrast, weight, spacing, and position. A clear hierarchy answers an unspoken question: where am I supposed to look? Without it, every element competes for attention and nothing wins.
Why it matters
Visitors don't read pages. They scan. In the first two seconds, they're deciding whether this site is worth more attention. If every block on the page screams at the same volume, they bounce. Visual hierarchy is how you make sure the headline, the value prop, and the primary action get their two seconds. Most homepages we audit fail this test — eight competing CTAs, three hero photos, two value props, and no clear winner. The fix is rarely "add something." It's almost always "remove or quiet down everything else." Every block earns its place.
How it works
The designer ranks every element on the page from most to least important — headline, primary CTA, supporting proof, secondary CTA, fine print. Then visual weight gets assigned to match. The headline is the biggest, boldest type on the page. The primary button uses the strongest color and the most whitespace around it. Secondary elements shrink, lighten, or move to the margins. Negative space (whitespace) is treated as a tool, not as something to fill. The designer steps back, squints at the page, and asks: do my eyes land where I planned? If not, the hierarchy is wrong, and the page gets re-leveled until it does.
Related terms
Color System
Design & UXA defined palette of brand and UI colors — with rules for when and how to use each one — so a product stays visually consistent over time and doesn't quietly…
User Interface
Design & UXThe visible part of a digital product — the buttons, menus, forms, layout, typography, icons, modals — that a person actually touches, clicks, and reads to get…
User Experience
Design & UXHow it feels to use a product from start to finish — the speed, the clarity, the flow, the copy, the moments of friction, the parts that just work — not just…
Above the Fold
Design & UXThe part of a webpage that's visible before the visitor scrolls — a term borrowed from newspaper print — the area where the headline, value prop, social proof,…
Hero Section
Design & UXThe first section of a webpage — usually above the fold — that introduces who you are, what you offer, the proof that backs it up, and the single action you…
Design System
Design & UXA shared set of components, design tokens, and rules a team uses to design and build a product, so every page looks coherent and no one is reinventing a button…