How to Copy Wireframe a Webpage

If you’re a professional writer, there’s a good chance that you’ve already been asked to write a website for someone. If you haven’t, it’s only a matter of time. 

It could be your employer, a new client, or even just your friend’s new side hustle – regardless of who you’re writing a website for, many of the same principles apply. If you’re not sure where to start, this guide is for you. We’re going to run through how you build, design, and write copy in a copy wireframe: a simple website copywriting framework. 

What is a Copy Wireframe?

It might sound like you have to get visually creative when you make a copy wireframe, but you really don’t. In most instances, a copy wireframe is just a series of tables in a Google Doc. Or, if you insist, a Microsoft Word document. 

You use copy wireframes to lay out the elements of your proposed webpage design in a very simple way. Think of it as the digital equivalent of a sketch – you’re literally going to be noting down where you want pictures, buttons, and headlines to go, and providing some notes that summarize why you want things to be the way you want them to be. 

Anatomy of a Copy Wireframe

A copy wireframe is a simple document and you shouldn’t overcomplicate it. Leave that to the designers and website developers you’ll pass the baton to further down the road. Get started by breaking your copy wireframe out into key sections that clearly communicate what each component of the page should look like.

For example, when I write a B2B Services page, it will invariably look something like this:

• Hero Panel
• Brief Summary
• Benefits
• Social Proof
• Features
• CTA
• Links to Related Pages (e.g. Other Services)
• Resource Links
• Soft CTA

Your webpages will be different. It’s your business, or your client, and you know better the messages you need to convey and the way you’d like to convey them. Equally, an About Us page or a Careers page will obviously look different from this. But it’s a helpful starting point that you can take and make your own.

So, what do each of these sections look like? Here’s an example of a hero panel:

Obviously, as the writer, you’re going to add your very best copy into these placeholder sentences. From there, it’s pretty easy for anyone to visualize what the page should look like. 

You can do this in countless ways. For example, you might summarize the key benefits your product or service offers with a panel like this:

The ways you can apply a copy wireframe are limitless – you can write down just about anything and structure it in a Google Doc full of these little tables. 

You can add notes sharing your design thoughts, include images you want to be in the final design, and specify technical details, like the link a CTA button goes to, or that you’d like a section headline to be coded as a H2. 

One of the great benefits of copy wireframes is that they essentially force simplicity. Complex websites are often underwhelming. There are examples of great ones (I love Stripe’s website), but if you’re reading this, you probably don’t have the same level of resources to throw at your website as a company like Stripe. 

Side note: if you do have the same level of resources to throw at your website as a company like Stripe, hire us. Remember, we’re smart, kind, and funny – what more reason do you need? 

Simplicity is your friend. Concise writing, effective images, and a thoughtful design and layout – that’s really all there is to a webpage. 

It can be easy to overthink this process and get stuck spending months writing your website. You might get an end result that fifteen different stakeholders across your business can tolerate. But you’ve wasted months with your crummy old website still live, costing your business opportunities every day. Don’t let perfection be the enemy of progress.

Start Writing Your Copy Wireframes Today

Focus on making your copy wireframe idiot-proof. That’s not to say the people you work with are idiots. I’m sure that, like us, they are also smart, kind, and creative. Rather, it is to say that anyone should be able to read your copy wireframe and understand what you’re trying to convey. 

And a lot of people will read it. Designers, developers, executives – everyone always has an opinion on what the business’s website should look like. The job of the copy wireframe is to help everyone arrive at a shared understanding of the layout and the copy. From there, your designers and developers can make things look nice. 

It sounds simple, and it is. The wireframing isn’t the hard part of copy wireframing: the copy is. And if that’s something you need help with, you’re in exactly the right place. 

Here at Hire a Writer, we’ve cumulatively written several hundred, if not thousands of websites, and there’s nothing we love more than the challenge of distilling the essence of your business onto a copy wireframe. Want to learn more? Drop us a note today.