If you’ve ever flipped through a magazine, browsed a website, or simply stopped to look at a sign on the street without becoming confused or overwhelmed by the information, it may be due to visual hierarchy. We already know that the graphic designer’s main objective is to communicate, and to do so correctly and ensure our message is read in the correct order, we rely on visual hierarchy. Even if you don’t see it (well, you’re actually seeing it but don’t realize it), it’s there, working in the shadows and subconsciously for the graphic designer.
In this post, I’ll tell you what visual hierarchy is, why it’s essential in design, and how to use it so that everything we look at or the message we want to convey makes sense and isn’t a chaos of letters, images, and colors. Without this hierarchy, design is a visual explosion that no one understands.
What is visual hierarchy?
You could say that visual hierarchy is the order in which we perceive visual information. We need order to communicate. It’s that simple, and that important. It’s a technique we graphic designers use to guide your eyes through a design, ensuring, through cues and contrasts, that you see the most important first, then the next, and so on until you reach the least important. That’s what visual hierarchy is all about: working with all the resources at our disposal to order, organize, and prioritize our content.
Let’s say it’s like a visual GPS. It consists of establishing an initial focal point from which viewers will begin to observe the composition, and which will subsequently lead you down the right path, even if you don’t realize it. If you’ve ever visited a website and instantly known where to click, what to read first, or how to easily find a product, congratulations, you’ve been skillfully manipulated by a good visual hierarchy… And that’s a good thing!
Why is it so important?
Now that you know what visual hierarchy is, you might be wondering “why should I care?” Well, because we live in a visual world, and the way information is organized directly affects how we understand it.
Here are some reasons why you should consider giving more value to visual hierarchy:
- It makes reading and comprehension easier.
No one wants to read endless blocks of text. When there is hierarchy, the eyes relax, the brain understands and structures better, and we appreciate being able to focus our efforts on the content of the text and not just on its form. - It increases the effectiveness of the message.
A good design guides attention where the designer wants it to go. Do you want the reader to click? Do you want them to read something important? Give it a good hierarchy and you’ll achieve it. - It conveys professionalism.
Yes, even if you’re designing a flyer for a popcorn sale. If it’s well-organized, it looks serious, thoughtful, and trustworthy. Without hierarchy, it feels like it was made by just anyone. - It improves the user experience (UX).
In web design, for example, a good visual hierarchy helps people find what they’re looking for without getting frustrated. This means that customers are more likely to return, make a purchase, or at least not run away with a negative impression of your website.
Resources to help us establish a proper visual hierarchy
In graphic design, we rely on several resources that help us create emphasis and contrast in the content. We rely on these resources to channel and indicate the correct order of the different elements in our composition, thus influencing its perception.
So, you could say that to create a good visual hierarchy, we have to play with visual resources to establish levels of importance.
Let’s see what these key resources or ingredients are:
1.- Size does matter
The most obvious. Bigger things draw more attention. Increasing the dimensions of one element in a composition relative to the other elements is a very effective way to emphasize a specific part of the design.
Larger elements act as focal points for the viewer. But they don’t just generate specific attention. Let’s say we want to downplay an element. In that case, by reducing its size, we can position that element at a lower level in our visual hierarchy. This means that size can establish a compositional rhythm or logical reading order to process all the information, moving from the largest to the smallest elements. Let’s look at an example of this:
2.- Color as a visual appeal
Bright or contrasting colors stand out more than neutral or dull colors. A red button on a white background is begging you to press it. Therefore, we could say that color not only conveys sensations, but also directs.
Are some colors more attractive than others? The truth is, it’s a somewhat subjective matter that depends on other factors such as context, composition, or even the viewer’s origin. However, we can guarantee that, for humans, the most striking, vibrant, saturated, and intense colors are usually the warmest.
To achieve the most vivid and intense colors, we use three color properties: hue, saturation, and brightness. An easy way to find warm (or cool) colors is with the color wheel, which has a high degree of contrast. For a deeper dive into this topic, you can visit my article on the color palette.
3.- Fonts that speak
Regarding typography, we have to take into account two factors: the typographic hierarchy and the typeface.
The typographic hierarchy
In any composition that uses typographic elements, we rely on the typographic hierarchy, which organizes our composition and determines the reading order. This typographic hierarchy is typically divided into three levels: the primary level, which contains headlines; the secondary level, which includes subheadings and small blocks of text; and the tertiary level, which comprises the text or main body of the design.
Typefaces
Let’s not forget the font. This is responsible for giving the composition a specific style and personality, and contrasting with the rest of the elements. We can combine typefaces by using line spacing, qualities such as size, or with their typographic variants. For those who don’t know, typographic variants are the different options we can find within the same typeface family. These affect stroke thickness, character proportion, slant, etc.
Thanks to the versatility and range offered by typographic variants, we often don’t need to use different typefaces. In many cases, we use variants of the same typeface to achieve a good visual hierarchy.
4.- Space also communicates
ESpace is a very important element for the designer. It’s like the necessary pauses in any conversation and is essential to ensuring the correct order of our composition. If we provide space around an element, we are actually giving it greater prominence, placing it hierarchically above the rest.
“Principle of proximity”—does it sound familiar? This principle is one of the laws of Gestalt Theory that every designer should know. It argues that the viewer’s gaze always tends to move to the closest element. Therefore, if we group elements close together by decreasing the space between them, we are establishing a link at the same hierarchical level, as well as a navigation pattern within them. If, on the other hand, the spaces are too large, we break the relationship between them.
Therefore, space as a hierarchical resource is very useful both for focusing attention on a specific element and for maintaining a logical reading or compositional order.
5.- Composition and structure
Composition is like the skeleton of a design. Grids, the rule of thirds, symmetry, and alignment, among others, help everything make visual sense. In other words, how we arrange the visual elements in our composition directly influences the visual hierarchy.
We mustn’t forget how our mind works. It will always tend to read from top to bottom and from left to right. It’s accustomed to processing information through pattern recognition, something also studied in Gestalt Theory. Therefore, we can also generate emphasis on a certain element by intentionally breaking that balance, alignment, or pattern.
Depth also helps prioritize things. Our perception tends to focus its attention on the object that is closest to us (or appears closest to us).
All of these resources are very useful for visually organizing a composition, navigating a website, or organizing a news story or magazine article.
Of course, you have to know how to use them with subtlety and tact. If we go overboard, filling our composition with giant elements, too many garish colors, or several fonts at the same time… all we’ll achieve is to confuse the viewer and fail to communicate the message as we intended. At the same time, remember that elements designed with the same size, font, color, or layout will be perceived at the same hierarchical level.
Conclusion.
Visual hierarchy is like the conductor of your design’s orchestra. You can’t see it, but it sets the pace. It decides what comes first, what comes last, and what doesn’t need as much attention. It’s not about following rigid rules, but about knowing what you want to communicate and guiding the viewer’s eye so they receive it effortlessly. It’s about designing with intention, not just inspiration.
A good design isn’t one with the most elements, but one that makes sense at first glance. So the next time you put together a poster, a website, or even a PowerPoint presentation, ask yourself, “What do I want people to see first?” and build from there.
Hi, I’m Roberto Vidiella.
I’m the founder and Creative Director of VIDI. I’m passionate about graphic design, and through this blog, I try to deepen my knowledge and share what I’ve learned throughout my journey. If you leave a comment, you’ll help me continue learning and improving, and I’m also very excited!