📖 Notes
LESSON 2 OF 26
Design Principles — Contrast, Hierarchy, Alignment, Proximity
The Rules Behind "It Just Looks Right"
The 4 core design principles that separate professional designs from amateur ones — contrast, hierarchy, alignment, and proximity.
The Four Principles
CRAP: Contrast, Repetition/Hierarchy, Alignment, Proximity
⚡
Contrast
Makes elements stand out from each other — a bold headline vs. light body text guides the eye to what matters most.
📊
Hierarchy
Size, weight, and color control the order a viewer notices elements — biggest/boldest first.
📐
Alignment
Every element should line up with something else — nothing placed arbitrarily.
🤏
Proximity
Related items grouped closer together; unrelated items separated with space.
Before/After Thinking
- Amateur: everything the same size and weight — nothing stands out.
- Professional: one clear focal point per screen, established through contrast and hierarchy.
- Amateur: labels and inputs scattered with inconsistent gaps.
- Professional: labels sit close to their input (proximity), and all inputs align to the same left edge (alignment).
✅
A quick self-check
Squint at your design. If you can still tell where to look first, hierarchy and contrast are working. If everything blurs into the same gray blob, they aren't.