How to Create a Copy Wireframe

Copy wireframes are one of my most frequently used tools as a professional copywriter. If you are writing websites, they are crazy valuable. They will help clarify what each part of the website is supposed to say, helping you coordinate efforts with fellow professionals (web designer, developers, etc.) as well as translate WHY you are making certain copy choices to clients.

Copy Wireframes

All copy wireframes are, seriously, is a table in a Google Doc. That simple. It doesn’t have to be that format. You can use a Word Doc or IDK whatever else. The only point is that you are using some kind of visual method to separate the content out into its distinct parts:

• Here’s the header
• Here’s a tagline
• Here’s a paragraph section
• Here’s where I want a photo
• Here’s where I want a callout box
• Here’s where I want a form
• Here’s where I want a button

ETC.

You can imagine how much easier this is to lay out visually than to just put in text. Copy wireframes help translate all of the many decisions you are making as you layout and write a website. Big deal.

Visually Mapping a Website

This visual map should be supported by the two underlying strategies behind any well-written website:

1. Search Engine Optimization (SEO)
2. Conversion Rate Optimization (CRO)

Both optimizations are essential if you’re going to have a high-functioning website, and a copy wireframe helps you address those dual priorities effectively.

Copy Wireframing for SEO: Start With a Sitemap

I like to lay out any website that’s going to have a strong SEO strategy according to sitemap, in a Google Sheet. This enables me to do the research, then put the final decisions into a format that makes perfect sense to everyone involved:

• Home page = here’s the H1, here are the H2s, here’s the form, here’s the CTA, here’s the download, etc.

For each page, I’ll map out not just the well-researched SEO keywords I want on that page but I may also put metadata info, the objective of each page, and any number of other details that I’ll want to talk through with the website owner. Having a formula for delivering this information creates the possibility of shared understanding (which you should not assume - you’re the professional; they may just think you’re writing pretty words - disabuse them of this notion by having this framework in place).

I could go way deeper in this because it’s a process I’ve done a bazillion times but let’s keep moving into copy wireframing.

Copy Wireframing for CRO: Map the On-Page “Funnel”

Now, this is a misuse of the word funnel so don’t freak out. But the idea is: you have your funnel of the customer journey. How does this page have a micro-version of that? Top of funnel = above the fold; mid funnel should also be addressed (it often isn’t); what about bottom of funnel? Do we assume anyone’s going straight to “buy”? For many types of websites, it’s a reasonable possibility.

All three levels should be adequately, if lightly, addressed. Give people the opportunity to choose their adventure, but use a copy wireframe to map the possibilities and smooth out the process.

How to Copy Wireframe

• Open a Google Doc
• Picture in your head what someone would ideally see when they land on the page
• Insert a table into the Google Doc
• Add the pertinent information to that table

Keep doing this down the page.

A table gives you the chance to frame out the copy in sections. It helps you envision when copy is way too long or way too short for the area it will occupy on the site. It also helps you identify areas you’re over or under emphasizing.

Keep framing out the whole page until you’ve gotten to the bottom (this whole experience is obviously bracketed by top nav and footer).

The Power of Copy Wireframing

There is plenty of power to this. I talk about it in the video, which you can watch here:

As always, adapt this. Make it your own. Consider how it can be a useful tool to serve you as you progress in your copywriting skills.