What is Visual Hierarchy?

Visual hierarchy is the order in which a user processes information on a page. By assigning different visual characteristics to sections of information, a designer can influence what users will perceive as being further up in the hierarchy. Below are ways in which a designer can influence perception:

• Size: the larger the element, the more attention it will attract
• Color: bright colors are more likely to draw attention over muted ones
• Alignment: an element that breaks away from the alignment of others will attract more attention
• Repetition: repeating styles can give the impression that content is related
• Whitespace: more space around elements will attract the eye toward them

When information design does not have a strong visual hierarchy, a user’s eye follows a predictable reading path. A designer has the opportunity to use visual hierarchy to reinforce these natural paths and draw the viewer’s attention to a focal point.

Source: Interaction Design Foundation

Let's get started