Wireframes & UX, why the sketch matters more than the code.

Section · 01

UI vs UX — they're different things

UI (User Interface) is what the user sees: buttons, fonts, colors, spacing. UX(User Experience) is what the user feels: flow, friction, time-to-task, frustration. UI lives on a screen. UX lives in your visitor’s head.

You can have great UI and terrible UX (gorgeous landing page, can’t find the “Cancel Subscription” button). You can have plain UI and great UX (Craigslist; Hacker News). The goal is both, but if you have to pick one, UX wins — users put up with ugly far more readily than they put up with confused.

Section · 02

Wireframes — drawing before coding

A wireframeis a low-fidelity sketch of a page. Boxes, lines, placeholder text. No colors. No fonts. The only thing it’s trying to answer is: what goes where, and what does it do?

┌─────────────────────────────────┐
│  [logo]      [nav nav nav nav]  │
├─────────────────────────────────┤
│                                 │
│   [HEADLINE GOES HERE]          │
│   [supporting sentence]         │
│   [primary CTA] [secondary]     │
│                                 │
├─────────────────────────────────┤
│  [feature]  [feature]  [feature]│
│                                 │
└─────────────────────────────────┘

You build this on paper, on a whiteboard, or in Figma. The point is to settle the structurebefore you settle the look. You will throw away three or four wireframes before you find one that works. That’s the whole reason to do it on paper — throwing away paper is cheap. Throwing away built pages is not.

Section · 03

Storyboarding — wireframes that move

A storyboardis a sequence of wireframes that shows how a user moves through your site. The cinema analogy is deliberate — you’re mapping a flow, scene by scene.

Scene 1: Land on homepage         →  see headline + CTA
Scene 2: Click "Start free trial" →  signup form, 3 fields
Scene 3: Submit form              →  email verify screen
Scene 4: Verify email             →  onboarding tour begins
Scene 5: Complete tour            →  main dashboard

Most landing pages fail not because the homepage is bad, but because scene 2 has 14 fields and scene 4 sends to a 404. Storyboards make those gaps visible before you build them.

Section · 04

The fold — still real, just different

“The fold” comes from newspapers — the headline above the literal fold of the paper had to grab you on the newsstand. On the web it means: the part of the page a visitor sees before they scroll.

Old advice was “put everything important above the fold.” That’s outdated. Users scroll. But the fold still matters for one thing: does the user understand what this iswithin three seconds? If yes, they’ll scroll. If no, they’ll leave.

Above the fold, you need:

1. What is this thing?        (a clear product name + 1-sentence description)
2. Who is it for?              (so I know whether to keep reading)
3. What's the next action?     (one CTA, not five)

Section · 05

Typography — picked once, lived with forever

Typography choices look small and last decades. Pick two fonts (one for headings, one for body), pick a base size, and stop.

Sane defaults:

Body:     16px, line-height 1.5-1.6
Headings: 1.5x-2.5x body size, tighter line-height
Font:     system-ui or a single web font; never more than two

Why fonts matter

A poorly-chosen font does two things: it makes content harder to read (literal accessibility hit), and it sets the wrong tone for your brand. Comic Sans for a law firm; Times New Roman for a children’s app. The font is doing rhetorical work whether you’re paying attention or not.

Pair fonts cautiously: pick one serif and one sans-serif, never two of the same family. Google Fonts has good defaults if you’re unsure: Inter (sans), Source Serif Pro (serif), JetBrains Mono (code).

Section · 06

SEO & analytics — design for being found

SEO(Search Engine Optimization) is the practice of structuring a site so search engines understand what it’s about. Good SEO starts in the wireframe: clear headings, real content, useful URLs. You can’t bolt it on later without rewriting half the site.

Analyticsis the other side: did anyone show up, and what did they do? Decide before launch what events matter (signups, purchases, time on page) and instrument them. Without analytics you’re flying blind and you’ll “feel like” the site is working when it isn’t.

Whatever you collect, write a privacy policy that says so. Most jurisdictions require it. The next lesson is about making any of this work on a phone — which is where 60-80% of your visitors will actually be.