When you look at a web page or a poster, your eye never wanders randomly; it follows an invisible order the designer has built. Visual hierarchy is the principle of arranging the elements in a design (through size, color, contrast, position, and space) according to their order of importance, and it determines what the eye sees first and what it sees next. The most common design mistake I've seen in my eighteen years as a designer is trying to make everything "important" at the same time; the result is visual noise in which nothing actually stands out. In this piece, I cover where visual hierarchy comes from, which concrete tools build it, and how it's applied both on screen and in print, in a way that leaves no question marks behind.
What Is Visual Hierarchy?
Visual hierarchy is the principle of arranging the elements in a design in the order you want the eye to consume them. To put it more descriptively, in any two-dimensional visual — a page, a poster, or a screen — it's about organizing the design elements so that the eye consumes them in order of importance. It may sound simple, but in practice it works the opposite way. If you don't establish the hierarchy yourself, the eye finds its own shortcut, and that shortcut is usually the least efficient one.
The concept's roots go back to Gestalt psychology, which was born in Germany at the beginning of the 20th century. The word "Gestalt" means "form" or "whole" in German, and this school of thought holds that the human mind automatically groups scattered elements into meaningful wholes. The element with the highest contrast on a page is the one that stands out most from its surroundings, and the mind notices it first; this is precisely the perceptual foundation of hierarchy.
The practical conclusion that follows from this is that hierarchy isn't a "style preference," it's a communication decision. As the designer, you decide what the reader sees first and what they see next; if you don't make that decision, the reader's eye habits make it for you, and that usually doesn't work in your favor.
The Five Fundamental Tools That Build Visual Hierarchy
Visual hierarchy isn't some vague, abstract concept; it's built with concrete, measurable tools, and the good news is that the number of these tools is limited. According to Nielsen Norman Group's classification, you have five tools at your disposal: size/scale, color/contrast, proximity/grouping, alignment, and repetition. Each of these can build a hierarchy even on its own. When these techniques are used together, they reinforce each other. Now let's go through each one, one by one, with an example.
Size and Scale: If Everything Is Big, Nothing Is Big
Size is the most intuitive tool: the large element is seen before the small one. Think of a book cover, the author's name is in a small font and the book's title is in a large font, because the eye that looks at the cover for a second is meant to read the title first. But the common mistake here is "enlarging everything that's important." If all five elements on a page are large, none of them is larger than the others as far as the eye is concerned; that's exactly how a hierarchy flattens out.
Let's make the rule concrete: use at most three different sizes in a design — small, medium, and large — and put no more than two elements in the "large" category. On the web, this usually corresponds to a range of 14-16px for body text, 18-22px for subheadings, and up to 32px for the main heading.
Color and Contrast: It's Not the Color That Matters, It's the Contrast
Color and contrast are the second pillar. What matters here isn't the color itself, but the contrast between an element and its background or neighboring elements. Think of the "Add to Cart" button on an e-commerce site: if the button is the same shade of gray as the rest of the page, the user has to scan the page to find it. But when the same button is set apart from its surroundings with a vivid color, the eye goes there on its own.
The same rule of restraint applies here too: in designs that aren't complex, limiting the palette to 2 primary + 2 secondary colors, and limiting contrast variation to at most 3 different levels, doesn't blur the hierarchy.
Proximity and Grouping: Space Is a Message Too
Proximity and grouping are the most direct application of Gestalt psychology. Elements placed close to each other are automatically read as "related" by the mind. Think of a membership form: the email and password fields sit right next to each other, the "forgot password" link is a bit farther away, and the submit button is set apart with its own space. The user separates these three groups from one another just by looking at the space between them, without reading a single explanation.
The same logic also works by reducing the space between a heading and its related fields while increasing the space between different sections; it sends the message "these belong together, those are separate" without writing a single word to the user.
Alignment: The Invisible Line the Eye Follows
Alignment is a page's skeleton. Think of a résumé; if all the headings and dates are left-aligned, the eye glides down comfortably. If one line is centered and the next is right-aligned, the eye has to figure out all over again "where to keep reading from" each time. This usually comes down to a grid system, and I'll get to that in a separate section shortly.
Repetition: The Silent Signature of Unity
Repetition, on the other hand, builds unity. Using the same font, the same color, or the same shape consistently throughout a design tells the reader "these pieces belong to the same whole." If every recipe title in a cookbook is in the same font and every "ingredients" list is in the same style, the reader understands where they are the moment they turn the page; nobody has to write "a new recipe is starting now" for them.
What emerges when all five work together is simple. There's no doubt left about where the eye should look.
| TOOL | FUNCTION | PRACTICAL RULE (NIELSEN NORMAN GROUP) |
|---|---|---|
| Size / Scale | A large element is seen before a small one | Use only 3 sizes on a page: small, medium, large. Limit the "large" group to a maximum of 2 elements. Typical web ranges: body text 14-16px, subheading 18-22px, heading up to 32px. |
| Color and Contrast | A high-contrast element draws attention | Limit your palette to 2 primary + 2 secondary colors. Use no more than 3 contrast levels (for example: heading, subheading, body text). |
| Proximity / Grouping | Elements placed close together are perceived as related | Place related elements close together and reduce the space between them. Separate different groups with more space between them. |
| Alignment | Creates a sense of order and consistency | Anchor the page to a grid system. Break the grid only where you want a deliberate point of emphasis. |
| Repetition | Builds cohesion and recognizability | Repeat the same font, color, and shape consistently throughout the design. |
| This table summarizes the five core tools that build visual hierarchy, along with the practical thresholds Nielsen Norman Group recommends for each. |
Kadir KARA © kadirkara.co | |
The Eye's Natural Routes: The F-Pattern, the Z-Pattern, and Others
Users don't read a page, they scan it, and this scanning isn't random, it follows specific patterns. The best known of these patterns is the F-pattern, which emerged from the eye-tracking research Nielsen Norman Group carried out in 2006 under Jakob Nielsen's leadership. The user first scans the top of the page horizontally, then moves down a bit and makes a shorter horizontal scan, and finally moves down vertically along the left edge of the page. The resulting shape roughly resembles the letter "F."
There's a critical point here that most sources skip: in Nielsen Norman Group's own words, the F-pattern is a bad thing for users and businesses alike. This pattern is the natural result of unformatted, "wall-like" blocks of text; the user misses the information on the right side of the page because no visual reason is given to direct them there. In other words, the F-pattern isn't a "design goal," it's a symptom of weak hierarchy. Good visual hierarchy doesn't reinforce this pattern, it breaks it.
On visually heavy, text-light pages (posters, landing pages), a different pattern comes into play: the Z-pattern. The eye scans the top horizontally, moves down diagonally, and scans horizontally again at the bottom. Designers use this deliberately. The logo is positioned at the top left, and the main call-to-action button (CTA) at the bottom right or at the diagonally opposite corner.
F and Z aren't the only patterns. Among the other scanning patterns Nielsen Norman Group has identified are the "layer cake" pattern, in which the user scans only the headings, and the "spotted" scan, in which the user skips over the text while looking for a specific piece of information (a price, a date, a name).
| PATTERN | WHEN IT OCCURS | EYE MOVEMENT | DESIGN RECOMMENDATION |
|---|---|---|---|
| F-Pattern | On lightly formatted, text-heavy pages | Horizontal across the top, a shorter second horizontal sweep below, then vertical down the left edge | Start subheadings with a word that directly conveys the topic, so the eye grasps what the section covers just by catching that first word. Bold key phrases and break up the text with bullet points. |
| Z-Pattern | On visual-heavy pages with little text (posters, landing pages) | Horizontal across the top, diagonally down, then horizontal again at the bottom | Place your brand or logo in the top-left corner and your main call-to-action (CTA) in the bottom-right or diagonally opposite corner - the eye is already heading there. |
| Layer-Cake Pattern | When the user scans only headings / subheadings and skips the body text | Horizontal lines across headings only | Construct the first two words of each subheading so they convey what the section covers without reading the rest; the user is going to scan only the headings anyway. |
| Spotted Pattern | When the user is searching for a specific piece of information (price, date, name) | Skipping over large text blocks and jumping straight to the item being searched for | Visually set apart information users are likely to search for (price, date, contact details) using bold type, a different color, or an icon. |
| This table summarizes the four eye-movement patterns users follow when scanning a page, along with the recommended design approach for each. | Kadir KARA © kadirkara.co | ||
Grid Systems: The Skeleton of Hierarchy
Having talked about alignment, it would be incomplete not to touch on grid systems. The most systematic treatment of this subject in the history of graphic design comes from the book the Swiss designer Josef Müller-Brockmann published in 1961, which is considered a classic of the field. The logic he proposed is simple. Divide the page into a framework made up of columns and rows, and place the important elements at the intersection points of that framework. This isn't a random aesthetic preference. It's a consistency system that lets the reader learn what to expect from where.
For those coming from the world of photography and composition, there's a familiar cousin to this: the rule of thirds. Dividing the frame into nine equal sections with two horizontal and two vertical lines, and placing the important elements at the four points where these lines intersect, builds an off-center but balanced composition in both photography and graphic design. It's generally found more engaging than a composition placed dead center.
One important thing to keep in mind is this: a grid should be a skeleton, not a cage. Never breaking it makes a design predictable. Knowing when and why to break it, on the other hand, creates exactly one of the strongest moments of emphasis in a hierarchy. A single element that steps outside the rule draws more attention than everything else.
"Good design makes a product understandable."
Dieter Rams
Testing Your Hierarchy: The Squint Test
It's hard to objectively evaluate the hierarchy in your own design, because you already know the content from start to finish. Your eye constructs meaning even in places an ordinary user would never notice. The "Squint Test," taught in design schools, exists exactly for this reason. Take a screenshot of your design and make it blurry (you can squint at it or apply Gaussian Blur in Photoshop). Whichever element still stands out in that blur, where you can't read the text, is the real hierarchy of your design. Whether you planned it that way or not…
One of Nielsen Norman Group's own examples shows this: when you test an interface with 5 and 10 pixels of blur, the groupings may work as planned, but at 20 pixels of blur, a single strongly colored element — for example, the cover image of the last song played — can unexpectedly become the most dominant element on the entire page. This is proof that a design needs to be tested not just at the template level, but together with real content.
Visual Hierarchy in Photography and Video Composition
Since this piece's readers also include photographers and video production professionals, it's worth touching on how hierarchy extends beyond screen and print design. In a photograph, the designer doesn't have direct control tools like size or a color palette. Instead, decisions made at the moment of shooting come into play. Blurring the background with depth of field to increase the subject's contrast, letting light fall on the subject while leaving the rest in shadow, or using framing to leave breathing room around the subject, just like the use of space in digital design…
On the video and directing side, the dimension of time comes into play. Changing the focal point within a scene, moving the camera toward the important element, or setting one moment apart from the others through editing pace are tools that don't exist at all in static design, but that serve the same fundamental principle — guiding the eye. A moving element automatically carries the highest visual weight among static ones; even a slowly shifting gradient on a web page can mark that area with a "look here" before the user reads a single word.
The tool changes... contrast, framing, depth, motion... but the principle stays the same; the eye goes to the point with the highest contrast and the sharpest focus.
Accessibility: Hierarchy Should Work for Everyone
There's a dimension that discussions of visual hierarchy often leave out. If hierarchy is built with color alone, it can become invisible to a user with color blindness. The current version of the W3C's Web Content Accessibility Guidelines (WCAG 2.2) sets a concrete threshold for this: a contrast ratio of at least 4.5:1 between standard text and its background; for large text of 18 points and above, this ratio can drop to at least 3:1. The same guideline also explicitly states that color shouldn't be the only way to convey information or build a hierarchy.
What this means in practice is this: don't just paint an "important" element red and leave it at that; back it up with size, weight, or position as well. A hierarchy that also works for a user with low visual acuity or color blindness is, in fact, a stronger hierarchy for everyone. Here, accessibility isn't a constraint, it's a second layer of control that reinforces your hierarchy.
Common Hierarchy Mistakes
The mistakes I most often encounter in design usually stem from a single root: the urge to highlight everything at the same time. A client saying "make the logo big too, make the heading big too, and make the button stand out too" makes all three elements equal to each other and doesn't actually make any of them stand out.
The second most common mistake is thinking of contrast as an aesthetic preference. In fact, as WCAG also shows, contrast is a matter of minimum readability. Third is either never using a grid at all, or, at the opposite extreme, following it blindly and never breaking it; both produce the same result: a predictable but ineffective page. Finally, declaring a design "done" without ever running a simple check like the Squint Test is the real reason most hierarchy problems go unnoticed until they go live.
"Clutter and confusion are failures of design,
not attributes of information."
Edward R. Tufte
A SHORT NOTE
What made me think the most while writing this piece was that hierarchy is actually a matter of humility. As a designer, the urge to use every tool at your disposal (size, color, contrast) is very strong, but good hierarchy is the discipline of not using most of the tools you have. The common thread among the weak designs I've seen in the field is almost never a lack of skill, it's an inability to hold back. The designer looks at their own work so closely that they forget to run the squint test. This is actually why I chose this topic; visual hierarchy isn't an ordinary "design principle," it's a reflex whose discipline I myself lose from time to time and need to relearn.
DID YOU KNOW? 8 QUESTIONS 8 ANSWERS
1. Is visual hierarchy only relevant to digital design?
No - the concept works in every form of visual communication, from printed posters to menu cards; its roots go back to Gestalt psychology from the early 20th century and the tradition of newspaper layout.
2. Is the "F-pattern" always a bad thing?
In Nielsen Norman Group's own words, yes. The F-pattern works against both users and businesses, because the user misses the content on the right side of the page, which is sometimes more important. Good visual hierarchy breaks this pattern, it doesn't reinforce it.
3. How many different sizes should I use in a design?
Nielsen Norman Group's recommendation is three: small, medium, and large. Adding a fourth size usually doesn't clarify the hierarchy, it blurs it.
4. How exactly is the squint test performed?
Take a screenshot of your design and blur it (you can squint at it or apply Gaussian Blur in Photoshop); whichever element still stands out in that blur, where nothing can be read clearly, is your design's real hierarchy.
5. Is the "most important" element in a design always the biggest one?
No - space (negative space) can make an element stand out without enlarging it; the extra space left around an element can work even more powerfully than size to direct the eye toward it.
6. Why is visual hierarchy more critical on mobile?
Because screen space is limited, the room to hide hierarchy mistakes is limited too; a lack of contrast that goes unnoticed on desktop instantly reduces readability on a small screen.
7. Can visual hierarchy exist in a logo, or does hierarchy only apply to compositions with many elements?
Hierarchy exists even in a single logo. Decisions like whether the symbol or the text is perceived first determine which message the logo conveys at first glance. Hierarchy doesn't arise from the number of elements, but from the relationship between them.
8. Is there a single "correct" hierarchy for a design?
No - the same content can be presented with more than one valid hierarchy serving different purposes; for example, a news site editor might highlight the photo one day and the headline for the same story the next. There's no single correct hierarchy, there's the hierarchy that best serves the purpose.
