By Mehdi HassanMost websites are designed in the wrong order. Someone draws a hero, three feature cards, a logo strip and a testimonial carousel, fills them with placeholder text, gets sign-off, and only then asks the founder for the words. The words never fit. This is our opinion piece on why we start with copy, how we do it, and where the method has limits. It's the process behind our approach to website design and development for startups.
What is copy-first web design?
Copy-first web design means the message is written before the layout. The team agrees on what the page has to say, to whom, and in what order, and only then designs how it looks.
It's sometimes called content-first design or messaging-first design, and the idea isn't new. What's different in practice is how strictly it's applied. A copy-first team won't open the design tool until there's a document with real headlines, real section claims and real proof points. Lorem ipsum doesn't appear in a single mockup. That sounds slower. It's faster, because the expensive step, redesigning pages once the copy changes, mostly disappears.
If you can't say it in a doc, you can't design it on a page.
Why should you write copy before design?
You should write website copy before design because the words carry the argument, and the layout's job is to make that argument easy to follow. A layout designed first is a guess about what the argument will need.
Placeholder text has a uniform shape: even line lengths, no long product names, no awkward plural, no claim that needs a footnote. Real copy has a different shape. A headline that works might be 11 words, not 5. A feature that matters might need a diagram, not an icon. A pricing note might need a caveat. When the design came first, each of those becomes a fight between the writer and the layout, and the layout usually wins, which means the message loses.
There's a second reason. Writing forces decisions founders often avoid: who the page is for, what you're claiming, and what proof you have. Those decisions shape the sitemap and the brief, so making them first saves rework everywhere else.
What does a lorem-ipsum-first page look like next to a copy-first page?
A lorem-ipsum-first page looks finished but says little; a copy-first page may look plainer in the first draft but every section earns its place. The comparison below is a hypothetical example of the same SaaS homepage built both ways.
Section | Lorem-ipsum-first | Copy-first |
|---|---|---|
Hero | Short slogan sized to fit a big font | Specific claim of who it's for and the outcome, sized to the words |
Below hero | Logo strip, because templates have one | The one proof point that backs the hero claim |
Features | Three equal cards with icons | Two or four sections, sized by importance, each with one claim |
How it works | Missing; no slot for it in the layout | A three-step explainer, because the copy needed one |
Testimonials | Carousel of short quotes | One quote placed next to the claim it supports |
Pricing teaser | Generic button | The pricing model in one line, then the button |
Ending | Repeat of the hero call to action | An answer to the last objection, then the call to action |
Notice that the copy-first version has a different number of sections and different section sizes. That's the point. The message decides the structure, not the template.
Hypothetical walkthrough: the same hero written both ways
For example, suppose a startup sells scheduling software for clinics. In the lorem-ipsum-first version, the designer draws a hero with room for about five words, and the founder later writes "Scheduling, simplified" to fit. It fits the box and says nothing a competitor couldn't say.
In the copy-first version, the writer starts from the buyer: a clinic manager losing time to no-shows. The headline becomes a specific promise about fewer no-shows and less phone time, with a subhead naming the clinic types it's built for. That's longer, so the designer sets a smaller headline size and adds a short proof line underneath. The page looks less like a template and more like it was made for one buyer, because it was.
How do you run a copy-first web design process?
You run a copy-first process by settling the message in a document, then wireframing from that document, then designing and building. Each stage has a sign-off, and the copy stage is the one that takes the most care.
Gather the raw material
Sales call notes, support tickets, customer interviews and the founder's own pitch. The best lines are usually things customers already say.
Write the message hierarchy
For each page: the one thing it must prove, the sections that prove it, and the proof that supports each section. One claim per section.
Draft real copy
Headlines, subheads, body text, button labels and FAQs, written in a doc. Not final polish, but real words with real lengths.
Approve the argument
The founder signs off on what the page says. Wording can still change later; the argument shouldn't.
Wireframe from the doc
Each section of the doc becomes a block on the page, sized for its actual words. Missing proof becomes visible as an empty slot.
Design and build
Visual design gives the copy hierarchy, rhythm and emphasis. Interaction details, like the micro-interactions that make a site feel premium, come last.
Who should write the copy in a copy-first project?
The copy should be written by someone who understands both the buyer and the page, ideally on the same team that designs it. The founder supplies the knowledge; a writer turns it into page copy.
Founders know the product better than anyone, but they often write for themselves: features first, jargon intact. Freelance copywriters write well but sometimes hand over a doc and leave before design, so nobody defends the message when layouts get tight. We cover the options in who should write your website copy and the staffing trade-offs in agency vs in-house website copywriting and design. Our own approach is that one team writes, designs and builds, so the writer is in the design review.
Does copy-first design help with SEO and AI search?
Copy-first design helps with search because the page structure follows the questions people ask, not a template's slots. Headings become real questions with direct answers, which is the shape both search engines and AI answer engines quote.
When the words come first, it's natural to open each section with a one- or two-sentence answer and add detail after it. That's the pattern we describe in answer-first page structure. It also makes FAQ blocks honest: they answer real buyer questions instead of filling a design slot, which is what we look for in FAQ sections that earn citations.
When is copy-first the wrong approach?
Copy-first is the wrong approach when the page is mostly visual, when the message is already settled, or when you're iterating on a layout system rather than a single page's argument.
- Portfolio and gallery pages, where the work is the message and words are captions.
- Design-system work, where you're building reusable components that many pages will use.
- Small updates, like adding a section to a page whose argument already works.
- Brand explorations, where you're testing a visual direction before writing anything long.
Even then, we'd still write real headlines before designing. Rough copy beats placeholder copy every time, because it shows the layout what it has to hold. If you're about to brief a new site, put a copy deliverable into your website design brief and ask each agency when in the process the words get written.
