How do you know what sales copy will look like when it’s published?
How do you know whether it will look like the Mona Lisa or a first-grader’s finger painting?
Wireframing.
It’s a trick that needs to be up every copywriter’s sleeve.
Yet, it isn’t.
Very few writers present wireframes to clients or use them for personal projects.
It’s an easy way to stand out, charge more, and give clients peace of mind.
Here’s everything you need to know about copywriting wireframing.
What is wireframing?
Wireframing is the process of building a two-dimensional sketch of a webpage or app.
It provides an overview of the page’s layout, sales copy placement, structure, architecture, user flow, and intended behaviours.
Here’s an example:
Concepts, styling, colours, and similar elements are kept to a minimum.
Especially in the case of a copywriter.
You’re mostly trying to show the client how the sales copy will be placed on a page to look the nicest while driving conversions.
It’s not difficult either.
Stick around and I’ll show you how to create wireframes that get clients jumping from their seats to work with you again.
Why is wireframing important?
So, why should you bother with wireframing anyway? Here are four reasons.
1. Clients will lend less feedback and it speeds up projects
What’s one of the most annoying parts of copywriting?
The endless feedback … debating over the use of a single word … and clients trying to make changes that will sink conversions like the Titanic. 👎
We’ve all been there.
What if there was a way to resolve all of these issues at once? There is. And it’s all thanks to wireframing.
Offering clients a wireframe answers a lot of their questions and objections preemptively.
They will have less feedback to offer since the end vision is easily understandable.
This ultimately results in less work for both parties Win-win!
And, trust me. I’ve been freelance copywriting for eight years. My clients always tell me horror stories of previous writers that were a pain to work with.
Delivering wireframes will make you stand out from the crowd. They’ll be happy to work with you in the long term.
2. You can demand higher rates
Being a high-paid copywriter is all about the details.
Everybody can become an excellent writer. Quite quickly, in fact. Check out my courses to learn more.
However, it’s skills like wireframing, SEO, conversion rate optimization, lead generation, and others that help you make the big bucks.
Do you know why?
Because you help clients make the big bucks. And they’ll pay a premium for that.
Once you understand how to wireframe and use the process I’m teaching you in this article, you can instantly increase your rates.
If you were charging $0.10/word, for example, you can confidently double that.
3. Designers will love you
Designers and copywriters go hand in hand.
They are the ones that are going to take your magnificent sales copy and translate it onto an advertisement, squeeze pages, etc.
Why not make their life easier?
Providing a wireframe to designers will ensure that the sales copy remains as untouched as possible during the design phase and when it’s published.
Similar to my first point about helping clients, wireframes speed up the designer’s job and increase their likelihood of putting in a good word for you.
4. You can gauge headline effectiveness easier
What’s the most important part of any sales copy?
The headline.
It’s the first thing readers see.
But if it sucks, it’ll be the last.
A wireframe allows copywriters to accurately gauge how eye-grabbing a headline is (or not).
It’s not just about what the headline is but how it looks too.
It needs to contrast with the page.
…Grab attention.
…Lead the reader into the first sentence.
You get my point. Read my headline copywriting guide to learn about writing drool-worth headlines.
Next, let’s talk about how to wireframe copy.
How to wireframe copy
Follow these steps to begin wireframing sales copy and reaping all of the above benefits I covered.
Pick your poison (tool)
Unless you plan to wireframe in MS Paint, you need a proper tool.
I personally recommend MockFlow. It’s cheap and effective, and there’s a free version available to give it a test drive.
Register for a free account.
Click the blue plus button on the top left.
Select one of the “Web” templates and assign a project name.
That brings me to my next point.
Create the general layout
Remember, you’re not trying to be fancy here.
You simply want to create a general idea of what the page looks like and how the sales copy sits on it.
Avoid adding colour and unnecessary elements if possible. It’s time-consuming and doesn’t contribute to the end goal.
Rather, aim for something like this:
Note how this wireframe includes:
- Text
- Buttons
- Navigation
- Sections
- Calls to action
That’s it. Nothing crazy.
Drag elements from the left sidebar onto the right side.
You can edit each individual element after dragging it or clicking it afterward.
This includes colour, font size, etc.
I recommend keeping it black and white.
Designers and developers will handle the styling. That’s not your job.
Also, use descriptions for placeholder images like people, hero images, and so forth. Help the client see the page as if it were real.
You can also add comments about how big the font should be for headlines, how wide columns are, or what the font type should be.
Add in the sales copy
Now for the meat and potatoes.
The next step is to add the sales copy you’ve written onto the page.
Add a text element from MockFlow’s sidebar and paste it into the appropriate copy.
For sections of pages that you want to fill in, I recommend using the scribble option.
This is good for footers, navigation, and areas that are already taken care of.
Do one final proofread
Alright, you’re done!
You’ve created your very first wireframe and it’s lookin’ spiffy.
Now, let’s do one final proofread because the last thing you want is to hand off a wireframe with errors to a client.
That’s a big no-no.
Do a final proofread beginning with spelling, grammar, and punctuation.
You can run the copy through a tool like Hemingway App before placing it on the page.
Does the flow of points make logical sense? For instance, you wouldn’t introduce the pricing of a product before explaining its features.
The tone of voice, personality, and style should be consistent and match the brand.
Check out my full proofreading checklist here to give the sales copy a thorough audit.
Send it in!
With your wireframe done, it’s now time to send it for clients to review.
The first way to share a wireframe on MockFlow is to click “Export” on the left sidebar.
Choose between one of the options like PDF.
Send this to your client.
Alternatively, you can go back to the main dashboard and click the “Share” button while hovering over a project.
Add a member directly to the wireframe so they can view and edit it or click the “Create share link.”
Final thoughts on copywriting wireframing
Every copywriter needs to learn how to wireframe.
It’s not spoken enough about in our space.
Yet, it’s a profitable skill and helps everybody involved in the copywriting process.
To recap, a wireframe is a skeletal outline of a page. Specifically, in our case as writers, it mainly displays how the sales copy should be placed on the page for maximum engagement.
I recommend using a free tool like MockFlow to begin wireframing. Use one of the web templates to speed up the process.
Add elements to the page like buttons, navigation, and others along with the copy you’ve written.
Give it one final edit to polish it off and share it with your client!
Take your copywriting skills to the next level and get mentorship from me in my copywriting courses.
