Visual Hierarchy
Arranging elements so their visual weight matches their importance, telling the eye where to look first, second, and last.
Visual hierarchy is the ordering of elements on a page or screen by how much attention they draw, so that people notice the most important thing first and the least important last. Every layout has a hierarchy whether or not anyone planned one. The design question is whether the order the eye follows matches the order that matters.
Elements gain visual weight through a handful of properties:
- Size. Larger things are seen first. A Typographic Scale gives headings, subheadings, and body text distinct sizes so their ranks are obvious.
- Contrast. A dark element on a light page, or a saturated color among muted ones, stands out. Strong Color Contrast pulls the eye; low contrast pushes things into the background.
- Weight and style. Bold text outranks regular, and a single italic word stands out in a paragraph.
- Position. In left-to-right languages, readers start at the top left. Things near the top and the left are seen earlier.
- Space. An element surrounded by white space looks more important than one crowded among others.
- Grouping. Items placed close together or styled alike are read as one unit, following the Gestalt Principles, which lets a page have a few big groups rather than dozens of competing items.
A good hierarchy usually has a clear focal point, one element that is obviously first, and a small number of levels below it. Common failures run in both directions. When everything is bold, large, or colored, nothing stands out and the page feels loud. When nothing is, the page feels flat and readers can't find their way in.
Designers use a simple check called the squint test: blur your eyes, or the screen, until text becomes unreadable, and see which shapes still stand out. Those are what the page says first. Eye-tracking studies show a related pattern on text-heavy web pages, where people scan in a rough F shape, reading the first lines fully and then only the starts of lines further down. Clear headings and front-loaded sentences serve those scanners.
Hierarchy is closely tied to structure. On the web, heading levels in Semantic HTML should match the visual ranks, so screen-reader users navigating by heading meet the same outline sighted readers see, part of good Accessibility. A Grid System gives elements consistent positions, and a Design System encodes the levels as reusable styles so pages stay consistent.
Strong hierarchy reduces cognitive load: readers don't have to work out what matters, so they can use their Selective Attention on the content itself. It also supports Progressive Disclosure, keeping secondary options visually quiet until needed. The same tools can be misused, as when a Dark Pattern makes "Accept all" bright and large while "Reject" is faint gray text.
See also3
Signifier
A perceivable cue that tells people what action is possible and where to take it, the visible half of an affordance and the fix for doors that make everyone push the wrong way.
Design & Interface16 connections
Focus Indicator
The visible outline or highlight showing which element on a screen will receive keyboard input, essential for anyone who doesn't use a mouse, and for years routinely removed by designers who found it unattractive.
Design & Interface12 connections
Data Table
Rows and columns of values designed for looking things up and comparing exact figures, which read best with right-aligned numbers, light rules, and headers that stay put, and remain one of the hardest components to make work on a phone.
Design & Interface11 connections
Linked from9
- Above the FoldDesign & Interface
The part of a page visible without scrolling, a newspaper idea carried onto the web, where it still matters for first impressions and loading but no longer means people won't scroll.
- BreadcrumbDesign & Interface
The short row of links near the top of a page that shows where it sits in a site's hierarchy, such as Home › Shoes › Running, letting people orient themselves and step back up a level in one click.
- Call to ActionDesign & Interface
The button or link that asks a visitor to take the next step, such as signing up or buying, whose wording, prominence, and placement are heavily tested and easily turned manipulative.
- CarouselDesign & Interface
A panel that rotates through several slides in one spot, popular on home pages as a way to give everyone's content top billing, and notorious for low engagement and accessibility problems.
- Data VisualizationDesign & Interface
Turning numbers into marks people can see patterns in, which works only when the visual encoding matches what the eye judges accurately and the chart type matches the question being asked.
- Focus IndicatorDesign & Interface
The visible outline or highlight showing which element on a screen will receive keyboard input, essential for anyone who doesn't use a mouse, and for years routinely removed by designers who found it unattractive.
- Heads-Up DisplayPlay & Games
The layer of health bars, ammo counts, maps, and scores drawn over a game's view, borrowed from fighter-jet cockpits, which has to tell players what they need at a glance without burying the world they're looking at.
- Lorem IpsumDesign & Interface
The scrambled Latin filler typesetters and designers use to show a layout before the real words exist, useful for judging type and dangerous because it hides what real content will do to the design.
- SignifierDesign & Interface
A perceivable cue that tells people what action is possible and where to take it, the visible half of an affordance and the fix for doors that make everyone push the wrong way.