Lay out your 5 stylistic explorations on your desk or screen
Walk around and look at 3–4 classmates' iterations
Which iteration feels most "finished"? Which direction surprised you?
Mira, will you pray for us today?
Ugly isn't a taste problem — it's a hierarchy problem.
You'll be able to identify (or diagnose the absence of) 3 clear reading levels on any screen
You'll know 6 specific principles that fix the most common high-fidelity design mistakes
You'll be able to look at your own screen and know exactly what's wrong — using diagnostic questions, not guessing
Almost every "this doesn't look good" is actually one of three things: no visual hierarchy, inconsistent spacing, or too much going on.
Fix those and the design gets 80% better — before you even touch color or branding.
These are the same things a senior designer would flag in a design review. Learn them now.
The difference between student work and professional work isn't talent — it's knowing what to check.
Fix the reading order, fix the spacing, remove what doesn't earn its place. The design gets 80% better before you touch color.
If everything is semibold, nothing is.
Pop & un-pop: big + light = pop. Small + dark = pop. Big + dark = VERY pop (use sparingly).
Same information. Left: everything at 13px/500 — no reading order. Right: three levels (hero stat, habit names, meta).
Show 2 real app screens — class calls out: "Where's Level 1? Level 2? Level 3?"
Things close together = related. Things far apart = separate.
8pt grid: All spacing in multiples of 8 — 8 · 16 · 24 · 32 · 48 · 64
Inner padding < outer gap. Card has 24px padding → gap between cards ≥ 24px.
Gut check: double whatever spacing feels right. Beginners always start too tight.
Are your inner gaps and outer gaps different enough to see the grouping?
Same elements. The only change: 8pt grid with generous gaps between sections (20px) and tight gaps within (9px).
4 sizes max. No in-between sizes.
28–36px display · 20–24px heading
15–16px body · 11–13px label/meta
Large headlines: tighten (−0.02em)
Small all-caps labels: loosen (+0.05em)
Body text: zero — don't touch it
Weight: never below 400. 400 body, 500 buttons, 600 headers, 700 display.
When everything is blue, nothing is blue.
Contrast: Body text needs 4.5:1 minimum (WCAG AA). Light grey on white = 2.85:1 → fails.
Neutrals: Never pure grey. Warm (hue 30–40°) = human. Cool (hue 220–240°) = technical. Pure grey = dead.
Same layout. The only change: accent restricted to 10% — just the primary action. When everything is blue, nothing is blue.
Every element should be intentionally placed, not "approximately" there.
Use auto layout + layout grids. Consistent horizontal margins (16px minimum on mobile).
Concentric border radius
outer radius = inner radius + padding
Button 12px radius + card 8px padding → card needs 20px radius
Mismatched radii look cheap immediately — one of the easiest quality tells.
Left: jagged left edges, shifted elements, mismatched border radii. Right: one vertical lane, concentric radii, consistent margins.
Beautiful design is mostly subtraction.
The cover test: Cover each element. Does the design lose information or hierarchy without it? If no — remove it.
When something feels off, beginners add. Experienced designers remove.
The antidote to generic design is specificity. What real-world reference already solved this information problem?
Flighty → departure boards · Mela → kitchen context · Financial apps → trading floor conventions
Cover test: the quote, badges, counter, bell, and tab bar add nothing. The green checkmark already says "done."
Every screen you build should pass all 6.
Self-audit (15 min) — Walk through the 6-principle checklist on your best D7 iteration. Mark everything that needs fixing.
Build high-fidelity screens (45 min) — Start with your most important screen. Every color and text style comes from your design system. Goal: 2–3 polished screens by end of class.
Use auto layout in Figma with 8pt spacing values · Apply your design system tokens consistently
D8: High Fidelity Round 1 — due Wed, Apr 1. App icon, style guide, at least 5 key screens. Hand-built in Figma.