Visual Hierarchy: Do it right!

What exactly is Visual Hierarchy?

We already know that not all elements are equal. On a well-made application, where all UI elements are organized and structured in the right way, users can easily understand the product and they can naturally navigate through it. That ability, to create that compelling story through fonts, space, colors, contrasts, and many more, is called Visual Hierarchy and is a very important skill that every designer should sharpen.

Visual Hierarchy presents the content of applications that way so users could comprehend the level of importance for each element. In that case, users could easily tell which action is the main action on the application.

Adjust to the business goal!

Every application serves a different purpose. So for example, in a hotel-booking application, designers through visual hierarchy need to indicate that the main goal of that app is to make users book a room or reserve a hotel on that web.

Here I am using AirBNB as an example, where we can see that the main goal of the website, which is the ‘Reserve’ button, is the element craving the most attention on this screen.

By thinking about business and marketing goals set for the application, the designers can effectively prioritize visual content and make a product stand out from the crowd.

Size is (not) everything!

The most obvious way of creating a hierarchy between elements is by adjusting different elements to different sizes.

And that’s also based on the traditional graphic strategy that is to make the most important elements the largest, and step downsizing for less important elements.

But, using only that we could create too many sets of sizes so which can be confusing and chaotic.

And that is all okay, as long as we don’t leave all of the heavy liftings to size alone. Whilst font size is very important, we could create better communication if we for example make a primary element bolder or use a softer color for supporting text.

Concluding that there are three main levels of typographic hierarchy:

• Primary Level (Usually used in bigger headlines, to get people’s attention)
• Secondary Level (Easy to scan text, mainly sub-headers to help users navigate throughout the UI easy)
• Tertiary Level (Usually used in body text and some additional data)

Let items breathe!

Being able to find the optimal space between elements is a great skill to have. By optimal, I mean not using too much space, and not using too little on the other hand. When it comes to space, usually people are afraid of using it. But we need to remember that the right use of space will not only create a cleaner design, but the design will also appear more elegant and more beautiful.

It is very recommended to use systematic spacing, rather than adding it randomly. It’s a known rule to practice spacing in multiples of 4 or 8, as shown below for margin and padding. To learn more about grid guides here is a great article:

Negative space is a component of design!

It can be hard sometimes to arrange a lot of elements on a website or application, and that is because all elements need some kind of ‘privacy’. And that’s where negative space comes to help. Negative space is white space that we leave between different elements so they can breathe and users can easily notice and perceive each of them to each of them.

Color hierarchy

That’s an obvious one too. Colors besides making the UI look more attractive, are also used to differentiate the hierarchy of elements.

So there are bold colors like Red, Orange, or Black which can easily grab the user’s attention and they are often used on CTA buttons, headlines, etc.

On the opposite side, softer colors such as baby blue, cream, or white, are weaker and they tend to grab less attention so they are often used on less important elements.

Knowing how to use different colors to support the hierarchy of UI is a very important skill for a designer. So on a web, where all UI elements are soft color, and the CTA button is filled with a bold color, it would be for sure the first thing that users see once they land on that page.

Contrast

Last but not least, contrast. All visual hierarchy is based on contrast. If an element contrasts with another element that’s obviously how users perceive the differences between them. Take the example below, the text ‘Download for free’ is the same size, but the second part which says ‘for free’ craves more attention since there is a contrast in the weight of the font.

Thanks!