Which comes first, website copy or design?

Getting a new website is exciting, but there are also things you need to do to make it as successful as possible. It’s not a case of simply hiring a website designer for a stylish-looking theme…

There’s much more that goes into a great website (spoiler alert: including great website copy, which should come first!).

Best steps for a successful website launch

So, what are the ideal steps to make the new project smooth sailing, instead of stressful and over budget?

This blog post is all about the relationship between design and copy, plus tips on structuring your copy so the designer can bring it to life. 

Should you start your website project with copywriting?

Have you ever tried to fit your feet into shoes that are too small? What about trousers that only come up 3/4 of your legs?

To me, that’s what writing copy for a pre-designed website is like. Awkwardly trying to make it fit, when you’d be better off buying a new size…

Yet to get the best results, your copy and design should really be done together. Or, if you have to pick one to do first, go with the copy. 

Why? It’s far easier to get a perfect pair of trousers tailored to fit your specific body type, style, and height than it is to buy off the shelf.

Not only will you feel good about yourself when they fit just right, but the trousers will look awesome, too. 

When you get great copy working with design, you’re letting both parts shine ✨

Ok, let’s be real. I’m a website copywriter, so of course I consider the copy an essential part of the overall website.

Now, before any designers come at me, I’m not in any way talking down the design process. But what I do want to highlight is that in a world where more people are aware of good design, they often approach this first. 

This is why I’m here to explain why starting with the website copywriting is good for everyone involved in your new site. You want the best outcome for your new website, and so do I.

Common problems caused by writing website copy after the design

The number of times I hear website developers’ progress is being held back by not having the website copy from clients is astounding. 

That’s because when you think of a new website, it’s likely you’re thinking about the pretty colours, cool images, and slick design. So you hire a website designer first… and forget about the copy. 

When website designers get started before the copywriter, it usually causes these issues: 

• The website looks great but can’t go live without the copy, which holds the project up for everyone 
• When the website copy is added AFTER the design, it alters the look and feel 
• Some key messaging can get lost or squished in a pre-determined layout 
• The messaging informs how much information the website actually needs, so the number of pages and their flow are usually out of sync 
• Without knowing how much copy there is, the designer can’t balance the design and layout fully 
• The website copywriting process helps you to understand what’s important to not only you but your customers, which can alter the way your design works 

On the other hand, when you work on your website copy first, it means: 

• You and your designer have a clear understanding of who you’re targeting, your tone, and the ‘vibe’ to give off 
• The information can be displayed to make the copy sing, rather than it getting lost 
• The page layout and flow are already decided (yes, a good website copywriter should be helping you with this) 
• You’re not wasting time waiting for a website design to go live – hit publish much faster 

So, how do you write your copy before you plan the design?

Information architecture is your new best friend

You may or may not be aware of something called information architecture (IA). If you’re not, think of it as organising the information needed into clear, accessible, and helpful sections. 

Just like an architect designs a house, you need to design and organise your message (before the pretty stuff happens).

The diagram below shows how IA overlaps the needs of the user, content, and context. (Image source)

Why is information architecture so helpful to writing copy before the design? 

Giving yourself a structure to write your copy also helps your designer to plan a sitemap. Here are my tips to apply this principle to your next project:

1. Start with the key information you want to tell people – customer pain points, how you solve their problems, and your results. This is getting your messaging on the page in the right order in a way that’s clear and easy to navigate. Keep each page with one core message.

2. Create an information hierarchy – most important and persuasive info at the top, FAQs and less impactful information at the bottom.

3. Get this into clear headers and sub-headers – using consistent styling throughout. This helps to break the page up for both users and SEO.

4. Put call to actions into the structure – encouraging users to take the next step at regular intervals. These should relate to the page’s one focus message, but may also direct readers to other relevant pages to find out more information.

5. Use short, digestible chunks of copy – for added readability, don’t forget to break your copy down so it’s easily scannable. It’s unlikely someone will read everything, so bullet points and short paragraphs help people grasp the message and won’t overwhelm the reader.

Doing this means even if you change your copy slightly, you have an idea of the flow and structure first. Your designer can use this as a starting point to inform the design. This planning concept not only works on websites, but also on brochures, emails, and everything in between. 

How to integrate website copy with design 

When you present your copy to a web designer using these information architecture principles, your designer will not only thank you for making their life easier, but the words will have a bigger impact.

So, although your designer can create a website before seeing any copy, they may have to re-do parts of it afterwards. 

Ok, how do you actually get your copy and design done for a new website?

In an ideal world, you would work with both parts running side by side: 

1. Start your initial research and planning 
2. Build your expert team (design and copy)
3. Get going with development and writing
4. Bring it together and iron out any tweaks
5. Hit publish on your awesome new website!

Even better if you introduce your website copywriter to your website designer, so they can chat!

Collaboration between experts not only provides you with a better outcome, but you also don’t have to act as the go-between.

But if you don’t live in an ideal world where you work with copywriters and designers simultaneously, understanding the process will still help you to get great results.

And remember – use the information architecture principles to organise your copy (before getting distracted with fun designs). 

The relationship between website copy and design 

Now that you understand how copy and design work together, you can get the best results for your business and remove the headache from the process.

If you need help developing your brand voice and bringing it to life through website copy, I can help. I work with businesses to structure a clear, persuasive, and personality-packed message that’s tailored to your audience.

Find out more about my signature done-for-you website copywriting package here or get in touch to arrange a discovery call.