Hierarchy in Design

Introduction

• Hierarchy is a fundamental design principle
• Essential for creating order, focusing attention, and making information easily understandable
• 3-stage process in marketing hierarchy: Attract, Intrigue, Deliver

Marketing Hierarchy Explained

• Attract: Capture viewer’s attention
  • Example: Adidas poster—shoe and paint splash
• Intrigue: Spike interest
  • Example: Quote on the Adidas poster
• Deliver: Communicate the message
  • Example: Information at the bottom of the poster

Methods of Hierarchy

• Color: Different colors attract attention differently
  • Red is most attention-grabbing (used in notifications)
  • Single colored element in a grayscale design can attract attention
• Size: Larger elements appear more important
  • Used often in advertising (e.g., product images)
  • Important in typography (headings, subheadings, and body text)
• Lack of Hierarchy: Avoid cramped designs, use white space effectively

Establishing Clear Hierarchy

• Organize Content: Place most important elements prominently
  • Use size, color, and typography as visual cues
• Create Visual Pathways: Guide viewer’s eye naturally and logically
  • Arrange sequentially, use directional elements
• Simplify Navigation: Keep simple and intuitive
  • Consistent placement of navigation buttons or links

Practical Application

• Design Examples
  • Use leading lines to guide attention
  • Left-aligned text and consistent color properties
• Three Flow Rule:
  1. Where do viewer’s eyes land first?
  2. Where do they move next?
  3. Where do they end up?
  • Example: Pet Play Feed poster
• F and Z Patterns: Common viewing habits in Western cultures
  • F-pattern: Top-left to right, then down
  • Z-pattern: Top-left to right, diagonal down, and right again

Techniques and Tips

• Hierarchy of Size:
  • Hook, secondary detail, and finisher (in decreasing size importance)
  • Example: Drink as focal point in product design
• Composition and Object Grouping:
  • Larger central object in a group creates hierarchy
  • Odd numbers of objects are visually appealing
• Topography:
  • Three-level hierarchy rule (Hook, secondary detail, finisher)
  • Example: Different text sizes and alignments
• White Space and Importance
  • Allows hierarchy to be clear and identifiable

Why Hierarchy is Essential

• Makes information easier to process
• Directs viewer’s attention effectively
• Example: Apple landing page with clear levels of hierarchy

Creating Hierarchy in Design

• Weight: Font weight (e.g., bold for important areas)
• Size: Larger elements for more important sections
• Color: Different colors for visual distinction
• Orientation: Arrangement of text/assets (e.g., isometric angles)
• Direction: Visual guidance through design (e.g., lines)
• White Space: Room for elements to stand out
• Style Differentiation: Different styles for headings vs. body text

Conclusion

• Hierarchy is critical for effective design
• Multiple methods and techniques can be applied
• can now better understand and effectively apply hierarchy

Continue to explore more about design principles and improve your skills.