01
Hierarchy
Title
Subtitle
Body
Title
Subtitle
Body
Guide the eye to what matters most. Not everything can be equally important.
Foundation
The Seven Principles
These fundamental principles form the foundation of all visual design. Understanding them allows you to analyze any design and create with intention.
02
Contrast
Difference creates meaning. Things that are different should look different.
03
Alignment
Nothing should be placed arbitrarily. Every element connects to something else.
04
Proximity
Related items should be grouped together. Space creates relationships.
05
Repetition
Consistency builds recognition. Repeat visual elements throughout.
06
Balance
Visual weight distributed across the composition. Symmetrical or asymmetrical.
07
White Space
Empty space is active space. It separates, groups, and emphasizes.
Design is not just what it looks like and feels like. Design is how it works. These principles guide both form and function.
Deep Dive
Understanding Hierarchy
Visual hierarchy creates order by directing attention. Size, weight, color, and position all contribute to establishing importance.
Visual Weight Scale
Primary - Headlines
Secondary - Subheads
Tertiary - Body Text
Quaternary - Captions
Autumn Wellness Retreat
Join us for three days of mindfulness
October 15-17, 2024
$450 per person
Reserve your spot
The Problem
When everything is the same size and weight, nothing stands out. What's the event? What's the price? Where do I click?
Autumn Wellness Retreat
Three days of mindfulness and renewal
October 15-17, 2024
$450
Reserve Your Spot
The Solution
Title commands attention. Subtitle provides context. Date and price are clear. The call-to-action is unmissable.
Autumn Retreat
Oct 15-17
$450
Flat
Autumn Retreat
Oct 15-17
$450
Hierarchy
The Insight
Our brains seek patterns. Clear hierarchy provides a visual roadmap that reduces cognitive load and improves comprehension significantly.
Application
From Print to Digital
The same principles apply differently across media. Understanding these differences helps you design appropriately for each context.
Hierarchy
Headline
Subheadline text
Body copy details
Size, position, color
Digital
Headline
Subhead (hover state)
Body with link
+ motion, hover, interactivity
Contrast
Cream paper
Black ink
Ink colors + paper texture
Digital
Light mode
Dark mode
RGB colors + theme switching
Alignment
Fixed grid (e.g., 3-column)
Digital
Responsive (CSS Grid, Flexbox)
White Space
$$$
Paper costs money
Digital
Virtual space is free
Repetition
Brand guidelines, templates
Digital
Design systems, components
Key Insights
Principles over Tools
Tools change constantly; principles endure for decades
Hierarchy Directs
Not everything can be equally important - prioritize
Contrast Creates
Similar things look similar; different things look different
Space is Active
Empty space separates, groups, and emphasizes