🔸 Master ADVANCED Hierarchy In Under 7 Minutes! (Important)

Key Concepts

• Three Flow Rule: Determining the viewer's eye path (initial landing, second place, final destination).
• F Pattern: Viewer starts top left, moves right, then down with content aligned left.
• Z Pattern (Zed Pattern): Viewer starts top left, moves right, diagonally down to bottom left, then right.
• Hierarchy Levels: Hook (initial attention grabber), Secondary Detail, Finisher (CTA/crucial info).
• Typographic Hierarchy: Applying the three-level rule to typography.
• Whitespace: Essential for visual distinction and subconscious hierarchy identification.

Three Flow Rule

The three flow rule is a foundational technique for establishing hierarchy in design. It involves consciously planning the viewer's eye path through the design by asking:

1. Where will the viewer's eyes initially land?
2. Where will the viewer's eye likely move to second?
3. Where will the viewer's eye finally finish?

This rule helps create a streamlined avenue for viewers to easily obtain information from the design. For example, in the "pet play feed" poster, the bold white typography is the initial landing point, the parrot is the secondary stop, and the information on the left is the final destination.

F and Z Patterns

These patterns describe how viewers instinctively scan designs, especially in the Western world:

• F Pattern: Mimics reading a book (left to right, top to bottom). Viewers start in the top left, move right, and then scan down with content aligned to the left.
• Z Pattern (Zed Pattern): Viewers start top left, move right, diagonally down to the bottom left, and then right.

These patterns serve as templates for building a framework of hierarchy within designs. Even if the focal point isn't in the top left, the viewer's eye will still scan according to these patterns, allowing designers to strategically place elements.

Size as Hierarchy

Size is a straightforward way to establish hierarchy. The presenter outlines a three-level structure:

1. Hook: The initial attention grabber, often the largest element.
2. Secondary Detail: The second largest element, providing supporting information.
3. Finisher: Smaller sections containing crucial information and calls to action (CTAs).

While the most important element is often the largest, the "hook" can also be an artistic visual element. For example, in a product design, the product itself is the hook and largest element. In an event poster, the visual hook might be the largest, while the dates and location are the important secondary details.

Grouped Objects and Hierarchy

Placing one object larger and in the center of a group of equally sized objects creates automatic hierarchy. This technique works specifically with grouped objects and isn't universally applicable, but it's a useful trick for emphasizing certain elements within a group.

Typographic Hierarchy

Apply the three-level rule (hook, secondary detail, finisher) to typography. For example, the "future big gun" section is the typographic hook, followed by the secondary text below it, and the "book of is it called action" in the upper right as the finisher (CTA). While designs don't need to strictly follow this, it's a good basis for implementing typographic hierarchy.

The Importance of Whitespace

Whitespace is crucial for hierarchy. It allows viewers to distinguish between elements and subconsciously identify the hierarchy. Without proper whitespace, hierarchy cannot effectively function. The presenter refers to another video that explains whitespace in terms of macro, micro, passive, and active.

Conclusion

Effective visual hierarchy is achieved through a combination of techniques, including the three flow rule, understanding F and Z patterns, strategic use of size, grouping objects, typographic hierarchy, and, most importantly, the proper use of whitespace. By consciously applying these techniques, designers can guide the viewer's eye and ensure that information is effectively communicated.