Let’s talk wireframing your web copy

Say what now? The other day I was in a client feedback session. As we discussed this business’ web copy – and how I ordered the flow of copy – I mentioned the word ‘wireframe’. And my client looked blank. I paused and she admitted I was talking gobbledegook. Oops, I thought. I did something I ‘aint fond of. I spoke in copywriting jargon! Because to me, wireframing a web copy project is second nature. But what does it mean for you? And why is it important for your web copy project?

That simple moment has stuck in my head for a couple of weeks now. So much so, I feel I need to write about it. Why? Well, not just to explain this website building term (‘cos it’s the website design side, as much as the website copy side!) because I want you to know. I think you need to know – especially if you’re working on copy yourself at any point. But even if you simply evaluate copy, plan copy or you work with a copywriter, it helps to understand the ‘thinking’ behind the web copy.

So, without further nattering on! In this blog post, I will chat about web copy wireframing. Learn:

• What wireframing means
• Where wireframes are used
• Why wireframing matters
• Why copywriters who wireframe are ACE (haha, no, but really…)
• How to wireframe your own web copy

Back to basics. What is a wireframe, then?

A wireframe basically means a very basic plan of where everything goes on a webpage. Think of it literally – like little bits of actual wire, framing off sections of copy. Wireframes are sometimes referred to ‘information architecture’ too. This sounds super fancy and I must admit, I like it. But I think it’s a little more confusing.

A plan for your web copy

So instead of having a blank page – and no structure – a wireframe (or your ‘information architecture’) almost gives you ‘gaps to fill’ within a pre-determined structure.

Where are wireframes used?

Traditionally, wireframes are the tools of website designers. In fact, having a read around about wireframes on the ‘net I thought this excerpt illustrated that exactly:

“Designers use wireframes to outline visual and typographic hierarchy of user interfaces, set the interactive zones and elements, plan transitions and interactions, organize the general layout markedly for the target audience. Since a wireframe is focused on the structure, not the visual and emotional perception of the details, designers try to keep it simple. They mostly limit it to monochromatic color schemes, with boxes and lines representing copy, pictures and all the interactive elements on the page.” – UX Planet

It’s the same for us copywriters. We use them to outline the typographic hierarchy, interactives, different copy elements, interaction and general layout for the target audience. In simple terms, we plan how everything flows, which bits stand out, and what specific elements go where – in the best way for your target audience.

I believe wireframing is FUNDAMENTAL to any website copywriting project. You cannot simply open up a word document and type. You need to craft it – and visualising the copy on an actual web page is a huge part of that.

Specific tasks that require copy wireframing

• Creating a new website (having a new website designed from scratch? A total overhaul? A wireframe for your new copy is vital)
• Adding a new (important) page to your site
• Creating a landing page for a specific campaign/ marketing goal

Are there any tasks that don’t need copy wireframing?

Yes, ish. Copywriting and content writing are different. So if you’re writing content for your website (and not copywriting – as in writing copy), this rarely needs a wireframe. In fact, I once worked with a client who wanted to make their blog page look super cool and interesting. And I just thought, ‘no, keep it simple – people are literally there to read your posts like an article.’

The below is a total side note – but may be useful!

The difference between copy and content

Here’s a quick reminder. It’s easy to use these terms interchangeably – and while you could say I’m being pedantic (perhaps I am a little) it does my head in. Why? Well, copy and content are very different. They have very different goals. So. it’s reallllllyyy important to be clear on whether you’re writing copy or content – as that will determine your goals. And those goals will underpin every sentence you put together.

P.S. for purposes of this blog, we are talking about copy (web copy).

Why do wireframes matter?

As I sit here on my copywriting throne (haha) spouting information at you (my lovely target audience, I hope) I recognise I need to justify why this important for YOU. So let’s break this into two camps – and explain why wireframing matters

Camp 1: You’re DIY’ing your copy

Go you! I always say that business owners are the very best people to write their copy (if they can master all those lovely copywriting skills too!) ‘cos they know their audience best. In theory, this means you can be super targetted with any copy you do.

So you’re now here, learning about web copywriting. A wireframe will help you a gazillion times over because

1. you’ll be able to plan and structure your web copy
2. you can prioritise what’s important (and have the ability to move things about and experiment if you’re not sure)
3. you can stay focused on how the page flows (without losing yourself in words)
4. you are less likely to forget important copy elements like testimonials, calls to action and button copy

Annnnddd, all these things will most likely result in better copy! So it matters.

Camp 2: You’re outsourcing your web copy to a pro copywriter, like moi!

Well, rest assured of all the benefits mentioned in camp 1 – they’re given.

PSA: Website copywriters who wireframe are ACE

But more than that, if your web copywriter is au fait with wireframes, it also means they understand the medium they are writing for. I’m not saying it’s a one-size-fits-all template, but there are certain formulas that work amazingly well across all websites – and a website copywriter who knows how this works will sketch out a wireframe for your copy before they even type one word.

This is why it matters to you. I don’t want to get all haughty-haughty, but I’d be questioning a copywriter doing web copy if you received a looooong document of copy and nothing else.

How to wireframe your own web copy

My most practical tip is to either grab a big piece of A3 paper or use a design application. I use Canva to make all my wireframes. Then get sketching out each page in boxes. You can put in rough headings (which you can, of course, tweak later), plan out where CTA and buttons go – and even testimonials too.

This is the basic way to get started. And you’ll find it a lot easier to ‘fill in the gaps’ when you start drafting the copy out.

Website copywriter for creatives + go-to brand

Are you thinking of elevating your web copy – and finally saying a warm hello to the right people for your brand? Check out my custom website copywriting services here.