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 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.
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.
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.
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.
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.
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.