Law 18Part 2: Structure & Power

Create Visual Hierarchy

Lead the eye, don't confuse it.

Humans process information hierarchically; a design that ignores this is ignored. Hierarchy guides attention, emphasizing what matters most.

Example

The New York Times online homepage uses size, weight, and placement to prioritize stories, directing the reader naturally through content.

Actionable Takeaways
  • 01Use scale, color, and contrast to indicate importance.
  • 02Organize content logically from primary to secondary elements.
  • 03Test whether users can discern key points at a glance.
Decision Framework

When to Apply

  • Any visual communication with multiple elements
  • When users don't know where to look
  • Designing interfaces, documents, presentations
  • When everything feels equally important (meaning nothing is)
  • Creating scannable content

When NOT to Apply

  • In artistic contexts where ambiguity is intentional
  • When truly all elements are equally important
  • In meditative or contemplative designs
  • When hierarchy would impose artificial prioritization
Skill Assessment

Assessment Criteria — Where Are You?

You understand that not everything can be important. You can identify hierarchy in existing designs.

Self-assess honestly — growth requires knowing where you are

Deep Mode — Applied Perspectives
Deep Mode — The Designer Perspective

Visual hierarchy is perhaps the most fundamental skill in graphic design, determining whether communication succeeds or fails. Every design decision—size, color, position, weight, whitespace—either reinforces or undermines the intended hierarchy.

Real-World Examples
  • 01Newspaper front pages: Size and position communicate importance instantly.
  • 02Apple's website: Clear hierarchy guides users from headline to detail to action.
  • 03Google's search results: Consistent hierarchy across billions of queries.
How to Implement
  • 01Define information priority before beginning visual design.
  • 02Use size as the primary hierarchy tool—bigger means more important.
  • 03Apply the squint test: blur your vision and check if hierarchy remains clear.
  • 04Limit hierarchy levels to 3-4 maximum for clarity.
  • 05Ensure every element has a clear level—no ties for importance.
Tools & Resources
01

Type Scale Tools

Create systematic size hierarchies

02

Hierarchy Testing

Verify user perception of importance

03

Information Architecture Methods

Structure before design

04

Eye-Tracking Analysis

See where attention actually goes

Further Reading
  • "Thinking with Type" by Ellen Lupton — Typography and hierarchy
  • "Information Architecture" by Louis Rosenfeld — Structuring information
  • "Grid Systems" by Kimberly Elam — Hierarchy through structure

Reflection Prompts

"If someone sees only ONE thing, what should it be?"

Commitment to priority is required. Everything flows from this decision.

"In what order should someone process this information?"

Hierarchy isn't just importance—it's also sequence.

"Where in my life lacks hierarchy where it shouldn't?"

When everything is priority, nothing is. This applies to tasks, relationships, commitments.

Practice Exercises

Blur a design until you can only see shapes. Is the hierarchy clear? What's most prominent?

Difficulty:

Power Combinations

Total Clarity

The complete toolkit for unmistakable communication.

Systematic Design

Grid + Hierarchy + Patterns creates scalable design systems.

Synergies — Laws That Amplify This One

Prerequisites — Understand These First

Sign in to track applications

Personalized Analysis

Sign in to get AI-powered insights on applying this law to your life.

Sign In to Continue