Visual communication depends in part on how visual elements, such as images, shapes, and text, are arranged on the screen or page. This arrangement communicates a secondary message through visual hierarchy, indicating the relative importance of elements and guiding viewers from the most important information to supporting details.
An effective visual hierarchy directs attention by making one element stand out from the rest, ensuring it becomes the main focus of the design. Instead of requiring viewers to process all the visual information at once, the hierarchy communicates what to look at first, second, and third.
Without a hierarchy, a cluttered screen or page can be overwhelming because viewers don’t know where to look first. Similarly, a screen or page with no hierarchy lacks a focal point and can confuse viewers. Establishing a visual hierarchy helps clarify your message and guides the viewer’s attention.
Aim for Three Levels of Importance
A standard visual hierarchy consists of three levels of importance, as shown in the graphic below. Level 1 is the headline, which is the largest and boldest element. It quickly captures attention and establishes the design’s focus. Level 2 consists of the supporting image and subheading. The image naturally attracts attention, and their position and size make them prominent. Level 3 consists of the smaller details in the bottom half of the page.
Graphic with three levels of visual hierarchy.
How to Design with a Visual Hierarchy
To establish a visual hierarchy in your designs, first determine which elements are most important to the learning outcome. Then, identify the best way to convey the hierarchy. You can do this through images, positioning, color, size, and typography.
In practice, most designers combine several approaches for greater impact. Read on for the different ways to establish a visual hierarchy.
Images
- Image Type: Different image types create different levels of visual interest and detail. Photographs often attract more attention than simple icons because of their realism and visual complexity.
- Human Faces: Human faces are among the most attention-grabbing visual elements. Even when they are relatively small, faces and eyes often draw a person’s attention before nearby elements.
- Isolation and Framing: Isolating an image within a frame, colored shape, or surrounding whitespace separates the image from its surrounding and draws attention to what is enclosed.
- Visual Weight and Complexity: Images typically contain greater visual variety than text, which gives them substantial visual weight. This places them near the top of a hierarchy unless other elements, like a large headline, compete more strongly for attention.
In the example below, the prominent image, compelling expression, and positioning at the top of the slide, clearly establish the image as the primary focal point. The title below is the secondary level and the detailed information at the bottom is the third.
Position
Positioning is one of the most common ways to establish a visual hierarchy. People tend to scan screens and pages in predictable patterns. In Western cultures, viewers often begin near the upper-left area and scan from left to right and top to bottom. Elements placed near the beginning of this scanning path generally receive more attention than elements placed lower on the page. Designers often combine position with size, contrast, and typography to reinforce a hierarchy.
Notice that all of the examples on this page combine positioning with other hierarchy techniques. In each case, the most important visual or typographic element appears near the top of the layout, helping guide attention before viewers move to the supporting content.
Color
Designers often use color with contrast to establish a hierarchy. Elements that differ noticeably from their surroundings tend to attract attention first. Use brighter, more saturated, or contrasting colors to emphasize important information, and use muted or neutral colors for less important elements.
Avoid relying solely on color to convey information, as this may exclude people with color vision deficiency.
Some color-related factors that affect a visual hierarchy include:
- Contrast: Elements with strong contrast against their background are more likely to attract attention.
- Color Intensity: Vivid colors tend to stand out more than muted ones.
- Uniqueness: A color used sparingly can draw more attention than a color repeated throughout a design.
- Consistency: Repeated color patterns help learners quickly recognize categories, actions, or levels of importance.
In the example, the bright orange background, high contrast, and large white headline work together to draw attention to the primary message. (See What Learning Professionals Should Know About Color.)
Size
Our attention often focuses on the largest object on the screen because larger elements generally attract more attention than smaller ones. Designers use size to signal importance and guide viewers toward key information. However, size works best when combined with other hierarchy techniques, such as position, contrast, imagery, and typography.
Notice that the examples throughout this article use size to reinforce hierarchy. Headlines, images, and other important elements are larger than supporting content, making them easier to notice and process.
Typographic Hierarchy
You can establish a visual hierarchy through typography that reflects the information hierarchy. To lead the viewer’s attention to the most important area of text, use size, weight, style, and color. These aspects of typography affect the visual hierarchy:
- Size: Larger text attracts more attention than smaller text. Use a larger size for headlines, titles, and high-priority information.
- Weight: Weight refers to the thickness of a character’s strokes. Heavier weights attract more attention and appear more prominent, while lighter weights recede. Use black or extra-bold weights for headlines, bold or semi-bold for subheadings, and regular weights for body text.
- Style: Style refers to characters with an altered appearance, such as italics, small caps, or uppercase text. Use style sparingly for emphasis and to distinguish key terms.
- Color: Changes in color can draw attention to important information. Use color consistently and in combination with size, weight, or contrast. Again, avoid using color alone to convey information.
The training manual example below uses size and weight to establish a clear typographic hierarchy.
Conclusion
Whether you design learning products with AI tools or manually, focusing on the visual hierarchy will bring clarity to your work. In turn, establishing a hierarchy should make it easier for learners to understand your message, because they’ll know where to focus.
RESOURCES:
Get the latest articles, resources, and freebies once a month plus a Visual Design Checklist.
Leave a Reply