Module 3: Content Before Design
Write the words before you place the pixels. This module covers the page brief, the homepage copy that carries the whole site, and the proof-gathering that makes design serve the message instead of decorating around placeholder text.
Content-First Design
Content-First Design means every page's copy is written before a single pixel is placed. Not drafted — written. Final-ish. The reason is simple: design exists to present a message, and you can't design the presentation of a message that doesn't exist yet. Every redesign that starts with mockups full of placeholder text ends the same way: the real copy arrives, doesn't fit the pretty boxes, and either the copy gets butchered to fit or the design gets rebuilt.
The placeholder trap is expensive. A designer builds a hero section around a short headline; your real headline needs two lines; now the layout breaks, the designer charges for revisions, and the timeline slips. Multiply that by every page. Writing first flips the dynamic: the designer receives real words and builds around them — which is what design is actually for. Words first, pixels second. The order is the strategy.
This doesn't mean the copy can't change — it will, and the designer will have suggestions. It means design starts from something real. A good rule: no design review happens until the page brief (next lesson) is approved. The brief is the contract between the words and the layout.
Fill in the blank: In the page brief, the ________ must tell a stranger what the page is about in 8 words or fewer.
The order is the strategy
Mockups first vs. content first
| Mockups first | Content first | |
|---|---|---|
| Designer gets | Placeholder text | Final-ish copy |
| Real copy arrives | Does not fit — revisions, slipped timeline | Already fits — design serves the message |
| Order | Pixels, then words | Words, then pixels |
Build brief
Which 5 pages need final copy before design starts? List them in priority order and note who will write each one (you, a writer, the team).
Saved
The page brief
Every page gets a brief with four parts: headline (what this page is about, 8 words max — a stranger must get it instantly), subhead (one sentence expanding the headline: who it's for and the outcome), proof (the testimonial, number, or credential that backs the claim), and action (the one thing the visitor should do next). Four parts, one page, no exceptions. If a page can't fill in all four, its strategy isn't ready.
The homepage brief is the one that matters most, because the homepage carries the whole site's first impression. Its headline answers two questions: what do you do, and who is it for. "We help busy homeowners get spotless houses without lifting a finger" beats "Welcome to SparklePro" — the first tells a stranger everything, the second tells them nothing. The subhead adds the outcome and the differentiator. The proof goes right below — never make a claim without evidence in the same viewport.
Write the briefs for your top 5 pages (the converters from Module 1) before anything else. These pages earn the most attention, so they get the most writing effort. A page brief takes 30 minutes. A redesign built on vague pages takes 30 days of revisions. Do the math.
Priya's designer sent beautiful homepage mockups filled with placeholder text. Her real copy isn't written yet. What's the strategic move?
Four parts, no exceptions
The page brief, in numbers
Build brief
Write the page brief for your homepage: headline (8 words max), subhead (one sentence), proof (testimonial/number), action (the one next step). Then do the same for your top converting page.
Saved
Gather the proof
Design needs proof the way engines need fuel — and proof takes time to gather, so start now. Collect: testimonials (ask your 10 happiest customers for one sentence each — specific beats generic: "they doubled our leads in 90 days" beats "great to work with"); numbers (customers served, years in business, average rating, results delivered — real numbers, never rounded-up guesses); logos and credentials (client logos with permission, certifications, press mentions); and photos (real team, real work, real customers — stock photos of handshakes actively reduce trust).
Place proof by the claim it supports — a testimonial about results goes next to the results claim, not on a separate testimonials page nobody visits. The homepage needs proof in the first screen: a rating, a client count, a recognizable logo. Visitors decide whether to trust you in seconds, and trust comes from evidence, not adjectives. "Trusted by 200+ local businesses" with logos beats "we're passionate about excellence" every time.
The email to send today: "Hi [name], would you be willing to share one sentence about your experience working with us? Specifics help — what changed for your business?" Most happy customers say yes within a day. Proof you gather this week designs itself into the site next month. Proof you skip becomes a blank space the designer fills with stock photos.
Engines need fuel
Gather the proof, in numbers
Build brief
List 3 customers you'll email for testimonials this week, 3 real numbers you can publish, and what photos you need (team, work, customers). What's missing?
Saved
Your turn: Write full page briefs (headline, subhead, proof, action) for your 3 most important pages. Keep every headline under 8 words.
Saved.
Your next 24 hours
Email 3 happy customers asking for a one-sentence testimonial with specifics. Write the page brief for your homepage — headline, subhead, proof, action.
Steal this template
PAGE BRIEF
Page: ___
Headline (8 words max): ___
Subhead (one sentence — who it's for + outcome): ___
Proof (testimonial / number / credential): ___
Action (the one next step): ___
Module 3 cheat sheet
- Content-First Design: final copy before design begins, no exceptions.
- Page brief: headline (8 words), subhead, proof, action.
- Homepage headline answers: what do you do, and who is it for.
- Place proof next to the claim it supports — not on a separate page.
- Gather testimonials, numbers, logos, and real photos now — they take time.
- Never invent proof. One fake destroys all the real ones.