Key Principles of Visual Hierarchy in Web Design

What is Visual Hierarchy and why is it important in web design?

Visual Hierarchy is a term used to describe an organization of elements on the web page, by their importance. The main goal is to prioritize visually and to direct your user’s attention to the desired objects. 

Whenever users open your page, they will immediately have several questions that you are expected to answer:

  • Does this page have what I look for?

  • Where is it?

  • How do I get it?

With the help of visual hierarchy you can organize everything on the page to create a sense of order.

You can also promote specific content, encourage your visitors to click on call-to-actions, and improve overall user experience. All of which will undeniably increase your conversions.

How do you create visual hierarchy on the page?

Gestalt principles

Most rules of visual hierarchy in web design come from the Gestalt principles. This psychological theory explains how people perceive design elements. 

The basic idea is that the human eye sees objects altogether before perceiving their separate parts. There are several principles in gestalt theory like closure, similarity, proximity, and more.

The most important take out from Gestalt principles, is that you have to organize your page as a whole, and not in separate pieces.

This does not mean you should not pay attention to details. Just keep in mind that even if you have the most attractive CTA, but your whole page is a mess and does not have a well established visual hierarchy, you probably will not get a lot of clicks and conversions.

Size contrast and Fitts’s law

Visual hierarchy can be easily achieved with contrast, specifically size contrast. Fitts’s law proves that users will interact more with larger objects on the page because they will be on the top of the visual hierarchy.

  • One of the principles of Fitts’s Law is that it is easier to engage with larger objects (specifically clickable range). In other words, it takes less effort and time for a user to click on larger items. This is particularly true for calls-to-action, as you do not want your users to question where they should go.

Vinted is an online marketplace and community that allows its users to sell, buy, and swap secondhand clothing items and accessories. Their lading page uses size contrast to deliver its audience a straightforward question.

Vinted Original
Vinted Heatmap

As you can see, users’ attention divides between the main visual on the right and the key message on the left. There you can also spot the main CTA. It is hard not to notice the main CTA even if it attracts 2% of initial attention due to the size of the main message. Furthermore, according to Gestalt principles, the CTA is a continuation of the key message which attracts most of the attention. 

By now, you can see that larger objects receive more attention on the page than smaller ones. However, bigger is not always better. By making your CTA button ten times bigger, you will not immediately get more conversions. The sizes of the elements need to correspond with each other and create harmony on your page.

The Golden Ratio and web design

The Golden Ratio is a mathematical ratio that roughly equals to 1.6180. It can be commonly found in nature and used in classical design theory to create balanced compositions.

You can also apply the Golden Ratio to web design. Easily grab attention with more structurally dynamic layouts. The most interesting case is the Twitter layout.

  • Doug Bowman, Twitter’s creative director, commented on the new layout: “To anyone curious about #NewTwitter column proportions, know that we didn’t leave those ratios to chance http://flic.kr/p/8ETYM7”.

Following the golden ratio is probably the easiest and most certain way to establish a visual hierarchy on your page.

Hick’s law and white space

One of the principles of Hick’s Law applies to web design. It says that when we increase the number of choices, the time required to make a decision increases as well. In addition to that, the more choices you have, the easier it is to choose nothing. 

Simply put, by understanding Hick’s law, you can arrange your page with enough white space and avoid creating cognitive overload. It will decrease the time your users will have to spend on figuring out your website, direct them straight to your CTA, and therefore increase conversions.

Apple Original
Apple Heatmap

There is no better example in the market than Apple that has mastered the art of branding and minimalist web design. A brief headline and subhead that convey the brand goals and a sleek product photo is a signature landing page by Apple.

Conclusion

Visual hierarchy is a valuable tool in creating your webpage. It improves user experience, helps to establish clear navigation, and allows certain elements to dominate on your page for your advantage.

You can give your page classical golden ratio proportions, or increase the size of your clickable objects to make them more noticeable. You can have a minimalistic design with lots of white space to make it simple but clear, or use gestalt principles to navigate your visitors. Finally, you can do all of the above. 

No matter what trick you will use to create a visual hierarchy, always remember to keep it well balanced and avoid confusion. You want to guide your users’ attention, and visual hierarchy is here to help you achieve that goal.

Product Hunt deal

FREE for everyone:

Days
Hours
Minutes
Seconds

GET HEATMAP