Web Copywriting
Should the Copy Come Before the Design?
Designing first and writing into the boxes afterwards is the default on most projects, and it is the reason so much website copy reads as padded or clipped.
On most website projects the design is signed off first and the words are poured in afterwards. It feels efficient — stakeholders can see something, and the writing looks like the easy part. It is also the single most common reason finished sites carry copy that is either padded to fill a box or truncated to fit one.
What Goes Wrong Writing Into a Layout
A layout is a set of decisions made before anyone knew what the page had to say: three columns here, a headline of about six words there, a testimonial in that slot. Each of those is a constraint, and collectively they decide the argument before the argument has been made.
- Padding: the box wants forty words and the point takes twelve, so twenty-eight words of filler go in. Every reader feels it even if none of them names it.
- Amputation: a genuine objection needs a paragraph and there is room for a line, so the objection goes unanswered.
- Invented sections: a three-column block needs a third column, so a third benefit is manufactured to match two real ones.
- Lost order: the sequence a reader needs may not be the sequence that looked balanced in the mockup.
The tell is a page with three of everything. Real businesses rarely have exactly three differentiators, three steps and three reasons to choose them — but grids do, and copy written into a grid inherits its arithmetic.
The Case for Copy First
Writing first means deciding what the page has to prove, in what order, before deciding how it looks. The designer then has real material: the actual headline length, the number of objections, whether there are two proof points or five. Layouts built around known content need fewer revisions, not more.
It is also cheaper to change. Restructuring an argument in a document takes an afternoon. Restructuring it after the layout is built means redesigning, and by then the sunk cost usually wins and the copy gets bent instead.
Where Design-Led Still Makes Sense
Copy first is not an absolute. Where a page is genuinely visual — a portfolio, a product gallery, anything where the images carry the argument — the design leads and the words support. The same applies when a design system already exists and the page is an instance of a known pattern rather than a new one.
The distinction worth holding is between a template and a mockup. Writing into an established, tested component is fine. Writing into a bespoke layout invented for this page before anyone knew what it had to say is where the trouble starts.
The Practical Middle: Parallel, With Structure First
Most projects cannot stop design while copy is written, and do not need to. What works is agreeing the page structure first — what sections exist, in what order, what each has to accomplish — and letting design and writing proceed against that shared outline.
- Agree the page's job and the one action it asks for.
- List the sections in reading order, each with a one-line purpose.
- Draft the copy against that outline, at whatever length the argument needs.
- Design against the real draft, negotiating length where it genuinely matters.
Lorem ipsum is the mechanism by which this goes wrong. A layout that looks balanced with placeholder text has been approved on the basis of text that says nothing, and every later argument about length is measured against that fiction rather than against what the page needs.
Who Decides When They Disagree
They will disagree, and the useful tiebreaker is the page's job rather than either discipline's preference. If cutting the paragraph loses a real objection, the layout moves. If the paragraph is restating something already said, the words go. Framed that way the argument is usually short.
Cold-traffic pages are where this matters most, because there is nowhere else for a visitor to click — see writing a landing page for cold traffic. Our website copywriting service works from a page structure rather than a finished mockup wherever the project allows it.