Principle 01
Hierarchy
Guide the eye to what matters most. Not everything can be equally important. Design creates order.
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.
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, interactivity |
| Contrast | Ink colors, paper choice | RGB colors, dark/light modes |
| Alignment | Grid systems, guides | CSS Grid, Flexbox, responsive grids |
| White Space | Physical paper (costs $) | Virtual (free, unlimited) |
Interactive Example
Poor alignment: Elements scattered without purpose. The eye doesn't know where to go.
Good alignment: Everything connects via invisible lines. Professional, intentional appearance.
The difference: Alignment creates order from chaos and easier scanning.
Key Takeaways
- Principles > Tools - Tools change, principles endure
- Hierarchy directs attention - Not everything can be #1
- Contrast creates difference - Similar things look similar; different things look different
- White space is a tool - Empty space has purpose