Visual hierarchy is a concept that allows a user to process information in a specific order. Its function in Interface Design (UI) is to facilitate the understanding of information by the user.

Alignment

Alignment can create order between elements. When any of the elements ‘brake’ from the overall alignment, it will attract attention. This rule also allows us to relate elements to each other and helps us to understand the beginning and the ending of specific information.

In this graphic, the circles, and the lines next to them, belong to one alignment. This creates order.

Color

Bright colors stand out more than muted colors. For instance, yellow is more vibrant and more vivid than white (as white is more muted), so it stands out. A good example of this is using a highlighter to mark important words on a sheet of paper. In Interface Design, usually, the strongest color is for interaction, as the user feels the need to take action or receive feedback from the system.

In this graphic, the pink button stands out the most because it has a brighter color than the lines above it.

Whitespace

An excellent way to generate attention to certain pieces of content is to use space around them: the more space, the more attention. And on top of that, whitespace also makes information easier for the eye to digest, since it gives the layout more breathing room.

In this graphic, the lines placed in a box, have a significant amount of spacing around them, which helps to generate more attention and better readability.

Size

A large element on the page will — compared to smaller elements — attract more attention. For instance, with typography, larger fonts (like headlines or page titles) will be noticed first. The concept behind the size hierarchy is to give a focal point to start the visual journey.

Here are two circles, a small one and a significantly larger one. You decide which generates more attention.

Repetition

Repeating styles will give the impression that content is related. In Interface Design, repetition facilitates a sense of uniformity and consistency throughout the design. For instance, in this post, the headings have the same repeated style. The use of a number, a bold weight, and a larger font size gives you a sense of orientation and hierarchy based on repetition.

These two blocks have the content with the same styling. The pink lines give the impression that they are related.

Proximity

If elements are close to each other, they will tell our users how likely they are related. If things are further away, then they may not be related. In summary, proximity creates these connections and brings order and hierarchy to information.

In this graphic, the rounded circles are together, so they are related. The square is further away, which means it belongs to a different content type.