Why Your Website Copy Should Come Before the Design
The words decide the layout, so they should exist before the design does. What goes wrong when copy arrives last, what to write for each page first, and how the words reach the live site unchanged.
Mike Lopez
Designs and builds websites and B2B software
On this page
I think you should write the words for each page of your website before the design starts, because the design is built around them. The headline, the line which explains it and the words on each button decide how much room a section needs, so when those words exist first the layout is made to fit them, and when they arrive after the design is finished, the design is mostly redone around them.
Late copy is also the most common reason which I see for a website launching late, which I went through in how long a website takes, so it’s really the cheapest thing you can fix before a project begins.
What happens when the words arrive last
A design which starts without copy uses placeholder text, and placeholder text is always the right length, so every heading fits on one line and every card holds the same three lines. Then the real words arrive, the headline wraps onto three lines on a phone, one card has twice as much to say as the cards beside it, and a section which looked finished in Figma has to be designed again around the real content.
Placeholders also cause trouble in a review. On one website this year the client’s own note “tbp”, meaning to be provided, sat in the design four times on one page, because the copy had been transcribed exactly as it arrived, and in a design review a marker like that reads as a typo, which pulls attention away from the design that the client is meant to be judging.
What changes when the words come first
When the copy exists before the design, the size of the website becomes clear before anyone draws a page. On one website this year the sitemap held 97 pages before any articles, and 59 of them already had their copy with no design yet, so once those words were laid side by side it was easy to see that three page templates covered 53 of the 59, and the design work became three templates and a handful of special pages.
The words can carry a length as well. On another website the content was specified before the build as 36 pages and 187 features, with a word count for every section and 21,072 words in total, so the length of every section was agreed before it was built, and every page in the copy document went live.
What to write before the design starts
A full draft of every page is ideal, but the design only needs a few things from each page to begin, and I would write them in this order.
| Write first | Why the design needs it |
|---|---|
| The headline | It is usually the longest line in a section, so it sets the width and the size of the type |
| What the page has to prove | It decides which sections the page needs and in which order |
| The words on each button | They name where each button goes, so every button has a destination before it is built |
| The sections in order, with a rough length | A section of two lines and a section of twelve need different layouts |
| The photos you already have | The layout can be sized for real images, and the gaps show up early |
I think a page which reads well as plain text is most of the way there, because then the layout has something real to hold, and the design becomes a question of how to present words which already work.
How the words move into the build
Once the copy is agreed, I keep it exactly as it was written, down to the punctuation, because the words have already been approved and the build is the wrong place to change them. When a sentence looks wrong to me, I would ask about it and leave it as it is until the answer comes back.
Before a page is marked as done, I compare it with the copy document in both directions, so every sentence in the document is on the page and nothing on the page is missing from the document. On one run of 17 pages which were built from copy documents, every one of them passed that check, and it’s really the last step of the same habit, because the words which you approved at the start are the words which your customers read on the live site.
Where to start
If your website project hasn’t started yet, I would write the home page first as plain text, with the headline, the line under it, what the page has to prove and the words on each button, and then read it without any design around it. The other pages would mostly follow the same pattern, and you can see how the words sit in finished pages in my case studies.
Frequently asked questions
Should website copy be written before the design?
Mostly yes, at least the headline, the purpose of the page and the words on each button, because those decide the layout. The rest of the copy can be finished while the design is in progress, as long as the lengths stay close to what the design was built for.
Can a designer start with lorem ipsum?
A designer can start with placeholder text for the structure, but I would replace it with real words before the design goes to review, because a design which is shown with placeholder text is judged on words which nobody will ever read.
Who should write the website copy?
Whoever knows the business best should write the first draft, which is usually you or someone on your team, and a copywriter or the designer can then shape it for the page. I would decide who owns the copy before the project starts, which is one of the first items in my website redesign checklist, because a job which nobody owns quietly becomes the longest task in the project.
How much copy does each page need?
Enough to say what the page has to prove, and I would agree a rough length for each section before the design starts, since a section of two lines and a section of twelve need different layouts. If you are paying someone to write or load the copy, it belongs in the quote, which I covered in what a custom website costs.
