MODULE_02

Design Principles

Tools change. Software updates. Trends fade. But principles endure. Understanding WHY something works lets you adapt to ANY tool or platform.

Core Principles

01 // HIERARCHY

Hierarchy

Guide the eye to what matters most. Not everything can be equally important. Design creates order through intentional visual weight.

// Visual hierarchy in action:

MAIN HEADLINE              // Largest, boldest
Supporting subheadline     // Medium size
Body text that explains    // Normal size
fine print details         // Smallest

02 // CONTRAST

Contrast

Difference creates meaning. Things that are different should LOOK different. Without contrast, everything blends together and nothing stands out.

$ echo "When everything is emphasized, nothing is."

03 // ALIGNMENT

Alignment

Nothing should be placed arbitrarily. Every element should connect visually to something else. Invisible lines create order from chaos.

Print vs Web

Principle Print Web
Hierarchy Size, position, color Size, position, color + motion
Contrast Ink colors, paper RGB, dark/light modes
Alignment Grid systems, guides CSS Grid, Flexbox
White Space Physical (costs $) Virtual (free)

Interactive Demo

// Poor alignment: Elements scattered without purpose. The eye doesn't know where to go. Chaos everywhere.
// Good alignment: Everything connects via invisible lines. Professional, intentional, trustworthy.
// The diff: Same content, dramatically different impact. Alignment = order from chaos.

Key Takeaways