Visual Hierarchy: Why Your Site Needs It and How to Create It

1. What Is Visual Hierarchy
2. Basic Elements of Visual Hierarchy
3. Eight Tips on Achieving Visual Hierarchy
4. Patterns: How the Audience “Scans” Pages

Now you are probably scanning this article along the trajectory of the letter F: you’re looking at the title, reading the first lines of each block, and paying attention to the illustrations. We have put key information in these parts of the article to interest you.

This is how visual hierarchy works, that is, the arrangement of elements in a certain sequence, which improves user experience. Read more about all the nuances of visual hierarchy in this article.

What Is Visual Hierarchy

This is the principle of placing components in the order of their importance. The “smart” design helps users to easily navigate the menu, quickly find the information they need or click on the “Buy” button. The less effort they put into it, the better the impression of your website and, as a result, of your brand.

Let’s take a closer look at what tasks visual hierarchy performs:

• Informing. The interface tells what your page is about, structures your data, helps you navigate the product line.
• Convenience. Content is located in the sequence in which users want to receive information. 
• Emotional impact. The design creates an emotional connection with the audience through colors, fonts, and images.

For example, the Apple website has a logo and a short menu at the top (information), and the entire first screen is occupied by iPhone 12 advertising with a huge color photo (emotional impact). The large blocks below tell about other company products (convenience).

Basic Elements of Visual Hierarchy

The priority of the page content can be emphasized with the help of:

• large size;
• bright colors;
• blank space;
• volume;
• videos or animations.

These components can be structured according to two principles:

• Contrast. Opposite colors, fonts, shapes, images that help pay attention to one of the components. For example, an asymmetry between smooth lines or a red call-to-action button against a gray background.
• Consistency. The elements of the same style that show the interrelation of the contents. These can be the same fonts or colors in different sections.

Eight Tips on Achieving Visual Hierarchy

How many headers are needed on a page? How to work with color blocks? Why is it important to leave blank space? We’ll tell you in detail about all the tools that can help with the design.

1. Choose fonts

The style, weight, and size of the font prioritize the text and suggest what to pay attention to:

• Apart from the main text, designers recommend using three types of headings: H1 as the main one, H2 for subheadings, and H3 for the names of small blocks. For example, Evernote, the notes service ranks the importance of the information on the page with a different outline.

• The basic requirement for a font in the digital format is readability. Use simple fonts without serifs, decorative elements, or special effects.
• Similar fonts in different sections of the platform will suggest that this data is interrelated.

2. Adjust the size and scale

The easiest way to pay attention to the text or photos is to enlarge them. For example, in the online store Asos, the whole first screen is occupied by two large photos of models in branded clothing.

But be careful with zooming in: do not zoom in all at once and make sure that no other components are lost behind a large image or headline.

3. Choose proper colors

Manage your audience’s attention with colors:

• Elements designed in the same color scheme are perceived as interrelated. In different sections of Square’s online payment processing platform, there are many calls to action. All of them are made in blue.

• Color blocks help to differentiate content. In this way, the Danish chocolate producer Simply Chocolate distinguishes varieties of the product. Each block is made in the colors of the ingredients: caramel, raspberry, mint, etc.

• The information presented in bright colors with high contrast seems to be more important. Thus, the designer of online forms Wufoo highlights the blue and yellow buttons with calls to action against a white background: “Sign up for free” and “Live demo”.

4. Pay attention to spaces

Do not try to put as much on the screen as possible: the “air” between components is as important as the text, images, and graphics:

• To highlight the main component, leave more space around it than near the others. Look at how much “air” there is on the Quip electric toothbrush sales page: we only see the title, subtitle, and a few laconic photos.

• Spaces will help to emphasize that components are grouped or separated. On the same site, blocks with product advantages are highlighted. There is white space around each of them.

5. Add volume

Most pictures in digital space look flat. To highlight an area of the page, give it some depth and volume:  

• Apply the parallax effect (scrolling): let some components move slower or faster than others. For example, on the site of the Chicago restaurant Alinea, the logo during scrolling increases and becomes three-dimensional.

• Experiment with statics and dynamics. Simply Chocolate shows a large image of a chocolate bar in the center of the screen as you scroll through it, and the colored ingredients of which it is composed slowly float through the background. If you move the cursor over the edge of the wrapper, it will “burst” and a piece of product will appear from inside. 

6. Consider symmetry and asymmetry

Symmetry creates balance and ease of perception, while asymmetry emphasizes the importance of certain areas. For example, Happiness Abscissa, an online merchant of fragrances, focuses our attention on the logo of two “scattered” letters and asymmetrically arranged products.

Left, right, or center alignment shows that the components are interrelated. The upper left corner most often contains a logo, then links to the menu sections, below is a slogan and a call to action, as on the main page of ZenBusiness’s logo designer. To develop an emblem, no effort is required: under a short description, there’s a box to enter the name of the company and get a ready-to-use logo in a couple of seconds.

7. Set priorities

The secret of successful design is to highlight the most important elements. If there are bright colors, large bold letters, lots of images all over the screen, it will confuse and deter users. Focus on two things:

• Your goals. What should the person who comes to your online platform do? Make a list of components that should lead them to the target action.
• User convenience. The audience comes to you with a specific task: have fun, buy, get information. Think of the shortest way to meet their needs.

8. Check

Having prepared the layout of the online page, make sure that you have set priorities correctly. To do this, use the so-called blurring technique.

Take a screenshot, upload it to Photoshop or another photo editor, and enable the blurring function. Those elements that you want to emphasize should be highlighted, and all others should turn into an indistinguishable spot. If you’re not satisfied with the result, go back to the original layout and edit it.

Patterns: How the Audience “Scans” Pages

When people enter the site, they scan it for milliseconds and decide whether to stay or leave. How can you help them quickly navigate? Remember that there are two main patterns of scanning in online space – F and Z. These are the trajectories that must be used to locate key content.   

Z-pattern

Similar to the trajectory of the letter Z, the eye slides from the upper left corner to the right corner, then to the lower left and lower right corner.

This template best suits platforms with laconic design, little text, and a call to action at the end. This structure is used by the Spotify audio streaming service: in the page header, we see the logo on the left, the menu on the right, a large slogan in the center, and a free download offer at the bottom. 

In the center of the screen, you can place not only the title but also an image. Its choice should be carefully considered: Nielsen’s research has shown that informative photos in Z-pattern are perceived better than decorative ones. In other words, you should choose a real illustration of the product rather than a faceless stock photo.

F-pattern

In this case, people scan the screen by the trajectory of the letter F, focusing on the cap and the left side. This pattern is most often used by platforms with a lot of text, such as blogs or news portals like The New York Times, where key information is at the top of the page and the news is on the left.  

Here’s what Nielsen found out in the F-pattern study:

• the first two paragraphs at the top of the screen are the most important to capture users’ attention;
• start paragraphs, subheadings, and lines with keywords;
• people rarely read every word in the text.

Wrapping up

Visual hierarchy is an opportunity to create a fascinating story on the site and lead potential customers to the target action: buy goods, subscribe to the mailing list, read the article. Each element in the design should improve the user experience and broadcast your message. Let’s summarize the steps that will help you to achieve this:

• define the main purpose of design: to share information, increase the number of users, sell the product;
• set priorities by defining the main components of the page, such as slogan, title, photo, call to action;
• think about which tools to use to highlight content: colors, sizes, asymmetry, etc.;
• Determine which type of pattern suits you best, and arrange the components according to this scheme.