01
Hierarchy
Guide the eye to what matters most. Not everything can be equally important. Design creates order through intentional visual weight.
Principles are the foundation of all great design. Whether you're designing for print, web, mobile, or any other medium, these core concepts remain constant. Understanding WHY something works allows you to adapt to ANY tool or platform.
The Core Principles
Visual hierarchy in action:
MAIN HEADLINE ← Largest, boldest
Supporting subheadline ← Medium size
Body text that explains ← Normal size
fine print details ← Smallest
02
Contrast
Difference creates meaning. Things that are different should LOOK different. Without contrast, everything blends together.
"When everything is emphasized, nothing is."
03
Alignment
Nothing should be placed arbitrarily. Every element should connect visually to something else on the page. Invisible lines create order.
Print vs Web Application
| Principle | Web | |
|---|---|---|
| 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. Chaos and confusion reign.
Good alignment: Everything connects via invisible lines. Professional, intentional, and trustworthy appearance.
The transformation: Same content, 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