Summary
(To cut a long story short …)
- Web copy and design work best together: designers prefer copy first for structure, while copywriters prefer design first for layout and thinking about SEO.
- Each approach has pros and cons: copy-first gives direction but may need reworking; design-first offers visual context but can restrict word flow and copywriting creativity.
- Collaboration is key: working together in tandem through tools like Figma and maintaining open communication with the client ensures a cohesive, flexible and co-ordinated website,
“What do I need first: website copy??? Or web design???”
It’s a question potential clients often ask. In a nutshell (or even an eggshell), web designers like to see copy first while copywriters like to see wireframes and design first.
I’ve worked with both options and I’ll tell you my own view at the end (plus an invoicing tip). I even had a recent instance where the web design agency sent the client a form with fields for the copywriter (i.e., me) to populate. That was it – no sharing of ideas. No “What if we do it like this?” No “How about using a client quote here instead?” The agency even expected the client to provide all the visuals!
Advantages for the web designer in having the web copy first
Having web copy first helps the designer understand the key messages to convey.
Words set the scene and the visuals bring them to life. In fact, the copy can be seen as part of the design: a heading or quote in a large font size can have just as much impact as a photo.
However …
- The copy may be too long to fit certain page sections or blocks of text. If an edit’s required, that means more to-ing and fro-ing to get client feedback.
- Not all clients will make a decision about the copy they read in a Word doc or Google doc until they see how everything looks on the web page, so a copywriter should never think a project is signed, sealed and delivered after sending a supposedly final draft.
Advantages for the copywriter in having the web design first
I can get a clear feel for the brand and its position in the market. Does the product look high-tech? Or bold? Or cheeky? Or ….?
The web designer will have created a hierarchy of info, letting me see exactly what needs to go where. I can also understand how many words might be needed. Plus, weaving in keywords for SEO is simpler.
And, working out a copywriting quote is also easier.
However …
- Sometimes the web design assumes copy will appear as solid blocks of text rather than nicely thought-out paragraphs, which can make the web copy look squashed and lose the potential for key points to be emphasised.
- The design may not account for a hierarchy of H1, H2, H3 etc headings in copy for SEO.
- The area to populate with content may be too limited and not allow enough room for the benefits and services to be properly explained.
So, back to the question: web copy first? Or web design first?
My ideal scenario is to work with a designer I know so that we can create and develop the website in tandem. I like to think of the process as two parallel lines that magically come together.
Need a few words trimmed off? Got a better idea for a visual? The process shouldn’t be any different from the traditional creative partnership of copywriter working with art director. You can both have ideas and you’re both working to the same end goal.
David Woods, Owner and Creative Director of surgery creations, comments, “Seeing the website copy prior to starting on the design visuals helps to inform the layout, flow and overall structure of the website, leading to a more strategic and considered process and solution. But just as important to the project’s success is a good relationship between both copywriter and designer – with flexibility on both sides so the copy both reads well and looks good!”
Figma can be a really good way for a copywriter to work because you can instantly see if the copy is too long or short and make adjustments. And the client can easily view the latest iteration, leave comments and see the version history.
The really important thing is to start with a clear brief and have ongoing discussions with the client. After all, a website is an organic process; copy can usually be easily changed without incurring traditional print costs.
My invoicing tip for a website copywriting project
Depending on the size of the web copywriting project, I usually invoice in at least three stages: a payment upfront, another payment after providing all first draft copy (for large websites, I may split this further e.g., invoice after the first 50% of pages) and then a small amount at the end, such as 10% or 15%, after sign off within scope. (You may find this of interest: Why Freelance Copywriters Should Request A Down Payment — And How Much To Ask For)
One thing I’ve learnt over the years as a freelance copywriter is that, even though you might have finished writing the copy ages ago, the designing and coding can take months and the client won’t sign off until everything is in place. So that I’m not subject to these delays, I also include these two terms in my contract:
- If any agreed stage of work is unfinished 30 days after starting it due to client or client supplier delays, I reserve the right to discuss invoicing for an interim payment or for work to date.
- If any stage remains unfinished or has not started 12 months from the proposal date, I may need to review the estimate and discuss a fee increase.
Oh, want to know what happened with that web agency example I gave at the start? I recommended a web designer I work with regularly and he got the gig instead.
Written by Caroline Gibson, experienced UK freelance website copywriter, content strategist and SEO specialist who can also recommend a brilliant web designer.
E: caroline@carolinegibson.co.uk T: +44 (0) 7957 567766