Principle 01
Hierarchy
Guide the eye to what matters most. Not everything can be equally important. Design creates order through intentional visual weight.
The Core Principles
Visual hierarchy in action:
MAIN HEADLINE ← Largest, boldest (most important)
Supporting subheadline ← Medium size (second important)
Body text that explains ← Normal size (details)
fine print details ← Smallest (least important)
Principle 02
Contrast
Difference creates meaning. Things that are different should LOOK different. Things that are similar should look similar.
"When everything is emphasized, nothing is."
"When everything is emphasized, nothing is." - The golden rule!
Principle 03
Alignment
Nothing should be placed arbitrarily. Every element should have a visual connection to something else on the page.
Print vs Web Application
| Principle | Print Application | Web Application |
|---|---|---|
| Hierarchy | Size, position, color | Size, position, color + motion |
| Contrast | Ink colors, paper choice | RGB colors, dark/light modes |
| Alignment | Grid systems, guides | CSS Grid, Flexbox |
| White Space | Physical paper (costs $) | Virtual (free, unlimited) |
Interactive Example
Poor alignment: Elements scattered without purpose. The eye doesn't know where to go. The design feels chaotic.
Good alignment: Everything connects via invisible lines. Professional, intentional appearance that builds trust.
The difference: Same content, dramatically different impact. Alignment creates order from chaos.
Key Takeaways
- Principles > Tools - Tools change, principles endure
- Hierarchy directs attention - Not everything can be #1
- Contrast creates difference - Similar things look similar
- Alignment creates order - Nothing arbitrary
- White space is a tool - Empty space has purpose