Hierarchy
Guide the eye to what matters most. Not everything can be equally important. Design creates order through intentional visual weight and positioning.
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)
Contrast
Difference creates meaning. Things that are different should LOOK different. Things that are similar should look similar. Without contrast, everything blends together.
Alignment
Nothing should be placed arbitrarily. Every element should have a visual connection to something else on the page. Invisible lines connect aligned elements.
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 and unprofessional.
Good alignment: Everything connects via invisible lines. Professional, intentional appearance that builds trust and aids comprehension.
The difference: Same content, dramatically different impact. 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
- Alignment creates order - Nothing arbitrary
- White space is a tool - Empty space has purpose