Good visual hierarchy is a foundation of a successful digital product.

Proper content, presented improperly, can be a disaster.

Visual hierarchy helps to organize UI elements effectively so that content would be easy to comprehend and pleasant to see. The presentation of visual elements has a great impact on user experience. If the components are organized wisely, users navigate and interact with a product without efforts and enjoy the process.

Today’s article provides useful tips on creating the compelling visual hierarchy for web and mobile products.

Keep business goals in mind

Work out which UI elements are more important and prioritize them according to their roles.

For example, all the elements on e-commerce websites perform the tasks of various levels. The item images are usually the main eye-catchers since they have to encourage customers to consider it. A heading goes after the image explaining what it is and the next important stage is a CTA button calling people to buy an item.

Consider scanning patterns

Before reading a web page, people scan it to get a sense of whether they are interested.

F-pattern appears mainly on digital pages or screens with the big amount of content such as blogs, news platforms, etc. Users’ eyes move in F-shape: first, they scan a horizontal line on the top of the screen, then move down the page a bit and read across the shorter horizontal line, finishing with the vertical line down on the left side of the copy where people look for keywords in the paragraphs’ initial sentences.

Z-shaped pattern takes place on the pages which are not so heavily concentrated on copy or those which don’t require scrolling down. The pattern is the following: people first scan across the head of the page starting from the top left corner, searching for core information, and then go down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page from its left to right.

Functionality first

Visual hierarchy needs to be not only visual but also functional. Make sure a product is clear to use, and the navigation works right. The visual hierarchy which is built exceptionally on aesthetics can’t work effectively.

White space is a visual element

It is a core component of each visual composition. It is a tool able to make all the user interface elements noticeable to users’ eyes. Moreover, negative space helps to emphasize particular elements which require deep attention from users.

Effective use of negative space is what separates great designers from good ones.

Apply the golden ratio

It is a mathematical proportion of the elements of different sizes which is thought to be the most aesthetically pleasing for human eyes.

Use a grid

A grid helps to structure all the components and put them into the appropriate sizes and proportion.

Add some colors

Colors help users to distinguish the core elements. The thing is that colors have their own hierarchy which is defined by the power of influence on users’ mind. There are bold colors such as red and orange as well as the weak ones like white and cream.

Applying one color to the several elements you can show that they are somehow connected. For example, you can choose a red color for purchase buttons so that people could intuitively find them when they need.

Pay attention to the fonts

Use fonts to build the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information.

Different fonts can divide copy content into different levels so that users could perceive the information gradually. However, it is recommended to keep the number of fonts within three since too many fonts look messy and make the design inconsistent.

Three levels for web, two for mobile

There are three typographic levels: primary, secondary, and tertiary. The first one includes the biggest type and aims at drawing people’s attention to the core information on the screen. The next level provides copy elements which are easily scanned and help users navigate through the content. The tertiary level usually applies body text and some additional data which is presented via relatively small type.

Web products usually include all three levels since they are more likely to provide the big amount of content. For mobile, it is recommended to keep the number of layers within two. The small screens don’t provide enough space for three levels, so the elements of a secondary level such as subheaders have to step aside to make mobile UI look clean.

Conclusion

Effective visual hierarchy is not only about aesthetics. It aims at providing problem-solving navigation and interaction systems as well as friendly user experience. To create a sufficient visual hierarchy, organize all UI elements considering the functionality and business goals. And don’t forget the white space! It’s an element too.

9 Effective Tips on Visual Hierarchy

PS. There’s a high probability you’re reading this on mobile. That’s why I only use a larger font for headlines and a smaller one for text. That’s it. And I remember about white space too 👇