Your Portable Guide to the Visual Hierarchy, June 2018

8 min readJun 25, 2018

When you operate as a white collar worker, your job might have a lot to do with creating presentations or the other designs. And you probably realize that for this, not only the analytical skills matter. Of course, your professional skill set is a necessary baseline from which you can actually take off.

But what makes a great design?

There is the visual taste that’s imperative to bring the insights and analysis to your audience and supervisors harmoniously and transparently. One of the most important lessons here is to get to know the visual hierarchy basics that once learned will simplify your job forever.

What’s the visual hierarchy?

Visual hierarchy is one of the most important principles behind good web design. It refers to combining all the visual elements together, arranging them into a composition according to their predefined order and priority, while giving the design a sense of integrity. The visual hierarchy defines the order in which the human eye perceives what it sees.

It reflects all the elements of your design toolkit and techniques of using them, including colors, position, arrangement, contrasts, typography, fonts, spacing and anything else that’s useful for visualizing your content so that it becomes easier to digest and memorize.

The primary goal of your visual hierarchy is to define the focal point of each of your slides.

The focal point is the central point of your slide, the center of interest. It’s the part that people concentrate on or pay the most attention to in your presentation. Normally, your focal point defines the hierarchy of information and navigates your audience through your slideshow.

Key Principles of the Visual Hierarchy

1. Use size to draw attention

People read the bigger design elements first, so we can say that from the visual hierarchy standpoint, bigger is better 🙂

Take a look at the Facebook banner below.

I bet you can clearly see what the most important objective was for Omise, a leading Asian online payment company from Singapore.

It’s pretty self-explanatory.

Omise wanted to boost brand awareness first, and back it up with the ‘sign up now’ call to action. They emphasized the elements according to these goals. The brand name comes as a considerable part of the banner, and it is located in the central position.

The bigger the elements of your presentation; advertisement, banner, website, or landing page become, the more attention they attract.

And this is why size should be applied methodically as a basic technique to boost your visual hierarchy, and scale the size of elements in relation to other objects.

The right way to give a presentation about a specific topic is to name it directly, get straight to the point and stay on the point — and not the other way around. The size of your visuals and words should follow and bring out the essentials.

Therefore, put what’s important substantial and in the central position, and visualize it, no matter if it is a word, sentence or a simple illustration.

Interestingly, this rule or tendency is actually strong enough to override the top-down rule (or left-to-right rule). And the same technique is used in newspapers to emphasize the headlines on the page.

2. Contrasting colors and tints

We are visually drawn to colors, especially to contrasting ones. In fact, the bright splash of color on your design will drive attention when used methodically.

However, if you over-do it and use a whole rainbow of colors at the same time, this will give the opposite effect, negating their power and making everything look faded.

So be mindful when choosing colors for your designs. Using color sparingly and with purpose are the key principles here.

Apart from playing with the multiple colors, you can play with other factors, such as temperature and saturation. For instance, bright colors stand out from muted colors or grayscale. Temperature defines the warmth or coolness of the colors. The higher contrast makes them look, sharper and they attract a lot of visual attention.

This poster design by Quim Marin embraces the two vivid colors that complementary make up the whole composition. Here, the yellow and pink stick to one color temperature, so they make the entire design more cohesive. Colors match themselves and drive attention to the central number, seven which is the date of a promoted concert at the Octopus music club.

Another poster design, created by Mateusz Michalski, embraces the lively navy blue and is matched with the delicate salmon rose shade. These two colors look harmonious together, although their temperatures and saturation are different, especially since the same colors were applied to some fonts.

The composition defines the integrity of the whole poster and unifies the design rather than creating emphasis.

There is also a term called the value of the color that is defined by the balance of darkness and lightness. Similar to the saturation and temperature, the value of colors can be used to create a more dramatic effect when the colors are more contrasting.

On the other hand, the equal visual values, like pastel shades or muted hues, are subtle and have the same visual weight, so that can be used for the background of your designs.

3. Typeface hierarchy (weight & pairing)

When your design involves text, you can’t overlook the rules of good typography.
The selection of typography is imperative to establish a proper visual hierarchy.

Typeface constitutes the right formatting of your copy on a site; blog; landing page; or advertisement. Just picture a newspaper and see how it’s formatted.

When you take a closer look, you’ll realize that apart from the colors, whitespace, and composition, text formatting helps you understand the information too.

This is why the blocks of text are fractured into short paragraphs, with the headings and subheadings on top of each.

The bottom line is, every good design needs three levels of typography.

Level One typography reflects the most important message of your design. Level One typography’s task is to make your headings visible at first glance.
Level Two typography reflect the secondary message of your design and should be visible on the second glance. Most often you use this typography level for subheadings.
Level Three typography concerns your body content. When used in design it should include details like the brief description.

Of course, it also needs to be highly visible, but here the size of the font is smaller compared to the other typography levels.

4. Fonts

Typographic hierarchy is closely related to font selection. The fonts themselves along with their category and style can make your copy look very attractive and readable or dull and faint.

Stylistic choices will contribute to a design’s overall mood and define the personality of your project.

When you consider this, you’ll see that fonts have characters.

They can make your project design fun, artistic, modern or distant, raw and even rusty.

Experiment with several styles, and compositions before you actually go for one font selection for good. Once you run into the right choice, you’ll feel it. Also play with size, color, the use of uppercase and the boldness of your fonts to make individual elements more prominent.

And don’t be afraid to combine different typefaces, the stylish contrast can do a lot of good for your overall layout. For instance, take a look at fonts implemented into the design below.

5. Whitespace

White space is an element that is widely neglected when designing marketing materials. We tend to forget about the role and importance of this. So this it’s a good excuse to remind it.

The whole idea is to give your readers some rest for their eyes.

Because advertisements that are messy and packed with information aren’t a masterpiece. It’s practically like turning away] your customer’s intent.

Blank spaces help make the composition well-balanced and give a sense of space and ample room to breathe. White space can be used as an elegant alternative or addition to the use of size.

To create white space, divide your design project into sections and introduce some air between them. In other words, isolate your focal points. It’s also recommended to reduce blank space inside those sections.

6. Texture & Composition

Texture reflects the arrangement of the design elements, in other words, the composition. And there are a few rules to respect regarding the composition of your project:

The Rule of Thirds

This rule reflects a composition with the focal point out of the central position. This is the way to create a dynamic design project. The rule of thirds divides your layout into a grid with two horizontal lines and two vertical lines.

The Rule of Odds

People are more attracted to uneven numbers in a composition. Implementing the rule of odds, you are expected to use an uneven, odd number of the elements to create a sense of interest and attraction.

Meanwhile, even numbers introduce the balance, stability, and predictability to your project, uneven elements will bring the opposite impression. Because of this, such a composition becomes more intriguing and captivating.

Implied Movement

Here, the whole trick is about including leading lines pointing your attention towards certain parts. It’s like drawing a path for attention. Those lines don’t have to be real lines; they can be other shapes and objects too. The point is they have to create movement and drive your attention towards the focal points of your design.