How to Design Things

01 · Section

Module 1 — How to See

Before you draw anything, you have to see what's already there. Designers are first and foremost lookers — they notice the thing nobody else does, then they make it the point. The four lessons in this module retrain your eyes so the rest of the course has something to land on.

02 · Section

Lesson 1 · The Squint Test

Squint at any page until details blur. Whatever your eye still lands on first is the hierarchy. If three things are equally loud, you have no hierarchy — your viewer doesn't know where to look, so they look away. Pros squint at their own work all day. It's the cheapest design review on earth.

• Try it: open Apple.com, squint, then count how many things you see. Usually one giant headline + one product. That's the whole page.
• Try it: squint at your own homework or slide. If five things compete, kill four or shrink them.
• Look for it: every great poster has one hero element at 4× the size of everything else.
• Rule of thumb: if you can't name the #1 thing in 1 second, the design is broken.

03 · Section

Lesson 2 · Big vs Small

Equal-sized elements are boring because nothing is the most important. Real design uses dramatic contrast in size — one big thing, two medium things, a few small things. The size difference does the storytelling for you; the viewer doesn't have to think about what matters.

• Pick a 4× rule: your hero text should be at least 4 times the size of body text. Not 1.5×.
• Look for it: magazine covers — the cover line is huge, the subtitle is tiny, nothing in between.
• Try it: take a slide where everything is 24pt. Make one thing 72pt and shrink the rest to 14pt. Watch it come alive.
• Trap to avoid: making everything 'medium-big' to be safe. Safe is the enemy of clear.

04 · Section

Lesson 3 · Two fonts. Not five.

One font for headings, one font for everything else. That's the rule. Five fonts on a page makes it look like a school flyer from 1998. The pros usually pair a distinctive display font (for headlines) with a calm body font (for paragraphs) — and that's it for the whole product.

• Pair a serif heading with a sans-serif body, or vice versa — the contrast makes both shine.
• Never mix two display fonts. They fight each other.
• Look for it: the New York Times uses essentially two fonts across hundreds of pages.
• Try it: pick your two fonts before you write a single word. Constraint = creativity.
• Free pairings to steal: Inter + Fraunces, Space Grotesk + DM Sans, IBM Plex Serif + IBM Plex Sans.

05 · Section

Lesson 4 · Space is a feature

Empty space — what designers call white space or negative space — is not wasted. It's the frame around the painting. It tells the eye where to rest. Most amateur designs are too crowded; most professional designs feel almost too empty until you notice how much easier they are to read.

• Add 50% more padding than feels right. Then add 25% more.
• Look for it: luxury brand sites (Hermès, Aesop) — half the page is empty on purpose.
• Try it: take a card with text crammed inside. Double the padding. Suddenly it looks expensive.
• Mantra: 'When in doubt, add space.' Almost never the wrong move.

06 · Section

Module 2 — How to Think

Designers don't guess. They use systems — invisible rules that make every decision faster and every screen more consistent. Three small systems get you 80% of the way to professional output.

07 · Section

Lesson 5 · The Invisible Grid

Every well-designed page sits on a grid you can't see. The most common is a 12-column grid because 12 divides evenly into 2, 3, 4, and 6 — so it works for two-column layouts, three-up cards, four-up galleries. Snap every element to a column line. Suddenly everything aligns and your design feels calm.

• 12 columns horizontally, with a small gap (called a 'gutter') between them.
• Hero text might span 8 columns. A sidebar 4. Three feature cards each take 4.
• Look for it: turn on the grid overlay in Figma — every Apple page snaps to one.
• Try it: redraw your last project on a 12-col grid. You'll find 5 things that were 3px off.

08 · Section

Lesson 6 · The 60-30-10 Rule

Pick three colors. Use the first one for 60% of the page (usually the background). Use the second for 30% (large surfaces, secondary). Use the third — the accent — for only 10% (buttons, highlights, links). This single rule is why interior designers, fashion stylists, and UI designers all sound like they're saying the same thing.

• 60% — your dominant background (white, off-white, dark navy).
• 30% — your secondary surface or text color.
• 10% — the accent that pulls the eye (a single bright color).
• Trap: using your accent color everywhere. Then nothing pops.
• Try it: redesign one screen with 60/30/10 instead of 5 random colors. Cleaner immediately.

09 · Section

Lesson 7 · The 8-Point System

Pick a base unit — 8 pixels — and make every margin, padding, and gap a multiple of it. 8, 16, 24, 32, 48, 64. No 7px, no 13px, no 21px. This sounds boring but it's the secret weapon of every great design system. Things just feel right because they're all related to each other mathematically.

• Spacing scale: 4 (rare), 8, 12, 16, 24, 32, 48, 64, 96.
• Type sizes follow it too: 12, 14, 16, 20, 24, 32, 48, 72.
• Look for it: Tailwind CSS, Material Design, Apple HIG — all built on 8.
• Try it: open your last project and round every spacing value to the nearest 8. The page snaps into harmony.

10 · Section

Lesson 8 · Mobile is its own canvas

Phones are the default. Most of your users will see your design on a 390-pixel-wide screen, with their thumb covering the bottom third. Design for the phone first, then expand to desktop. This single mental flip kills 90% of the layout problems before they happen.

• One column on mobile. Stack everything.
• Tap targets at least 44×44 pixels — about a fingertip.
• Put primary actions in the bottom third (thumb zone), not the top.
• Try it: open your design on a phone. If you can't read it without zooming, the body text is too small.
• Rule: if it works on a phone, it'll work on a laptop. Reverse is rarely true.

11 · Section

Module 3 — How to Build

Now that you can see and think, you can build. Four lessons on the things that matter most when you ship a real interface — the unglamorous details that separate a demo from a product.

12 · Section

Lesson 9 · Buttons are where products die

Every button has four states the user might see: rest (just sitting there), hover (mouse over it), pressed (being clicked), and disabled (greyed out). Most amateurs design only the rest state and ship. Pros design all four. The hover and pressed states are where the product feels alive.

• Rest: the default look — solid color, clear label.
• Hover: subtly brighter or with a soft glow. Tells the user it's clickable.
• Pressed: slightly darker, scaled to 0.98. Tells the user it heard them.
• Disabled: 40% opacity, no hover. Tells the user it's not ready.
• Bonus: design a 'loading' state too — a spinner inside the button after it's clicked.

13 · Section

Lesson 10 · Every screen has four states

Empty (no data yet), Loading (fetching data), Error (something broke), Success (data showing). Amateurs design only the success state and ship. Then on day one a user sees a blank page and bounces. Design all four states for every screen — it doubles the work and triples the quality.

• Empty state: friendly illustration + one CTA. 'No notes yet — write your first.'
• Loading state: skeleton placeholders, not a spinner alone. Skeletons feel faster.
• Error state: plain language + a retry button. Never show raw error codes to users.
• Success state: the actual content, clean and readable.
• Try it: list every screen in your app and write the four states for each.

14 · Section

Lesson 11 · Motion has timing

Animation is timing, not decoration. 200 milliseconds feels snappy — perfect for buttons, hovers, and small UI changes. 400ms feels smooth — good for modals and page transitions. Anything over 600ms and your product feels broken. The other secret: use easing curves, not linear motion. Real things accelerate and decelerate.

• 200ms ease-out: button presses, tooltips, small snaps.
• 400ms ease-in-out: modals opening, drawers sliding, page changes.
• Never animate everything. Only animate what reinforces the user's action.
• Test: if you have to wait for the animation to finish to do the next thing, it's too long.
• Look for it: Apple's settings panels — every animation feels physical.

15 · Section

Lesson 12 · Designing for everyone

Accessibility is not a checkbox at the end. It's the difference between a product 1 in 4 people can use and a product everyone can use. Three rules cover most of it: high color contrast, big tap targets, and meaningful image descriptions.

• Color contrast: text on background must hit 4.5:1 ratio. Use a free contrast checker.
• Tap targets: 44×44 pixels minimum. Bigger for kids' apps.
• Alt text: every image gets a one-sentence description. Screen readers depend on it.
• Don't rely on color alone. Add an icon or label too — colorblind users can't see red vs green.
• Captions on every video. Transcripts on every podcast.
• Test: try using your app one-handed, on a phone, in bright sunlight. If it still works, it's accessible.

16 · Section

Module 4 — How to Brief AI

The most important new skill. AI builds what you describe. A vague brief gets generic output that looks like every other AI app. A specific brief gets magic. The next four lessons are how to write briefs that pull great work out of any AI — Lovable, ChatGPT, Midjourney, all of them.

17 · Section

Lesson 13 · The metaphor slot

Start every prompt with 'It should feel like ___.' Pick one reference, not five. The brain — and the AI — works best with a single anchor. 'It should feel like the inside of a Muji store' is a thousand times more useful than a list of adjectives. The reference does the heavy lifting.

• Good: 'It should feel like the Criterion Collection website.'
• Good: 'It should feel like a Wes Anderson movie poster.'
• Bad: 'It should feel modern, sleek, professional, fun, and bold.' (Five things = no thing.)
• Pick references from outside tech. Movies, books, restaurants, fashion brands.
• Try it: write down five products you love. What does each one 'feel like'? That's your vocabulary.

Build a landing page for a meditation app called Stillwater.

It should feel like the inside of a Japanese ryokan — warm wood tones, soft natural light, a single ink-brush mark as decoration. Quiet, slow, expensive without trying.

No gradients, no neon, no rounded-corner gradients.

18 · Section

Lesson 14 · References are your friends

Words alone are not enough. Paste a screenshot of the vibe you want — into Lovable, into ChatGPT, into your design tool. Visual reference shortcuts the entire conversation. One image saves a paragraph of description, and the AI gets the texture, color, spacing, and feel in one shot.

• Screenshot one site you love and paste it in. Then say what to keep and what to change.
• Use 2–3 references max. More than that confuses the AI.
• Combine them: 'typography from Vercel, colors from Glossier, layout from Stripe.' That's a recipe.
• Save a folder of reference screenshots on your phone. You'll use it forever.
• Trap: pasting a reference and not telling the AI what about it you like. Be specific: 'I love the way the headline overlaps the image.'

19 · Section

Lesson 15 · Say what NOT to do

AI defaults are bad on purpose — they're trained to be safe and average. Saying what to avoid is more powerful than saying what to do. 'No purple gradients, no Inter, no centered hero' beats a 200-word essay describing what you want. Constraints push the AI somewhere new.

• Forbid the obvious: 'no AI-generated stock imagery.'
• Forbid the overused: 'no glassmorphism, no purple gradients, no Inter font.'
• Forbid the cliché: 'no centered hero with one big headline and a CTA button.'
• Forbid your own bad habits: 'no rainbow color palette' if you keep doing it.
• Three to five forbidden things is the sweet spot. Too many and the AI gets paralyzed.

20 · Section

Lesson 16 · Your first real prompt

A great brief has four sentences: who the user is, what screen they're on, how it should feel, and what to avoid. That's it. Once you can write that brief in under a minute, you can build anything with AI — because the brief is the design.

• Sentence 1: Who is the user? ('A 14-year-old learning piano on weekends.')
• Sentence 2: What screen are they on? ('Their daily practice screen, opened first thing in the morning.')
• Sentence 3: How should it feel? ('Like the inside of a quiet music shop — warm wood, soft, focused.')
• Sentence 4: What to avoid. ('No gamification, no streaks, no neon. No childish cartoons.')
• Try it: write that 4-sentence brief for one screen of your own app. Paste it into Lovable. See what happens.

User: a 14-year-old learning piano on weekends with a parent.
Screen: the daily practice screen, opened first thing in the morning before school.
Feel: like the inside of a quiet music shop — warm wood tones, soft natural light, a single sheet of music as the only decoration. Calm, focused, grown-up.
Avoid: no gamification, no streaks, no neon, no rainbow colors, no cartoon characters.

Build a single mobile screen showing today's 15-minute practice plan with three exercises, each tappable to start. Use one accent color sparingly. Two fonts maximum.

21 · Section

Glossary — the words pros use

If you can use these twelve words correctly in a sentence, you sound like you've been designing for years. Memorize them and you can read any design article without getting lost.

• Hierarchy — the visual order of importance. The biggest, boldest, brightest thing wins.
• Grid — invisible columns and rows that everything snaps to. Usually 12 columns wide.
• Gutter — the gap between two columns of a grid.
• Padding — empty space inside a container, between the edge and the content.
• Margin — empty space outside a container, between it and what's next to it.
• Leading (rhymes with 'sledding') — the vertical space between lines of text.
• Kerning — the horizontal space between two specific letters.
• Tracking — the horizontal space across a whole word or sentence.
• Contrast ratio — how much darker the text is than the background. 4.5:1 minimum for body text.
• Tap target — the clickable/tappable area. 44 pixels minimum on a phone.
• Easing — the speed curve of an animation. 'Ease-out' starts fast and slows down (most natural).
• Affordance — visual cues that tell you something is interactive (a shadow on a button, an underline on a link).

22 · Section

Capstone — Ship one screen

Now do the work. Pick one app idea. Design one screen. Write the brief using everything in this course. Paste it into Lovable, ship the screen, then grade yourself against the rubric below. Don't worry about the whole app — one great screen is the win.

• Rubric · 1 of 5: Does the squint test pass? You can name the #1 thing in 1 second.
• Rubric · 2 of 5: Two fonts max. Three colors max (60/30/10).
• Rubric · 3 of 5: Every spacing value is a multiple of 8.
• Rubric · 4 of 5: All four states designed (empty, loading, error, success).
• Rubric · 5 of 5: Works one-handed on a phone in bright sunlight (contrast + tap targets).

Use this template — fill in the four blanks before pasting.

User: ___________________________________________ (one specific person, with an age)
Screen: _________________________________________ (the one screen — what they came to do)
Feel: ___________________________________________ (one metaphor — 'feels like ___')
Avoid: __________________________________________ (3–5 things you DON'T want)

Build this screen on mobile (390px wide) with:
- Two fonts only (one display, one body).
- Three colors only — 60% background, 30% secondary, 10% accent.
- Every margin/padding a multiple of 8px.
- All four states designed: empty, loading, error, success.
- Tap targets ≥ 44×44px. Color contrast ≥ 4.5:1 on body text.
- One animation max, 200–400ms with ease-out.

No glassmorphism, no purple gradients, no Inter, no centered hero with one CTA. Surprise me.