Wireframing for Copywriters (and for You, Too)

Joanna WiebeFive months ago we sent our inner circle a newsletter about wireframing for copywriters. It was an interview with Joanna Wiebe from Copy Hackers, and it was sooo good that we decided to have it on our blog, too.

After reading almost everything that comes from Joanna's keyboard and taking her in-depth copywriting course, I honestly think she's the best when it comes to crafting and sending a marketing message.

We sent her some questions about wireframing for copywriters and asked her what she means by the phrase "Copy Leads Design." What she told us is not only for copywriters but also for those who need to write something for a web page, an email newsletter, a blog post, AND want to deliver the best message most compellingly.

Q&A with Joanna Wiebe

Why Should Copywriters Be Familiar with Wireframes?

Copywriters who want to charge premium prices get one huge benefit from wiring their copy: less feedback from the client.

One of the toughest things about writing copy is that it's so hard for non-copywriters and non-designers to imagine how the copy will look when it's live on a landing page. A wireframe removes a lot of the imagination work. And that means the client can focus on real feedback, not guessing. Whether you charge hourly or project rates, wireframed copy saves you time - and time is money.

Other awesome benefits:

  • Designers are less likely to take liberties with their interpretations of your copy when you wire it
  • Wires give you a stronger sense for when a headline actually IS too long or a section of body copy is too overwhelming
  • Other copywriters are just handing over Word docs -- you can distinguish yourself as premium when you offer a PNG of your wire (and ultimately also deliver an editable doc)
  • You can use the online comments in Balsamiq Cloud and control your client's feedback, removing the chances of them in-line editing your text (and forcing them to think about their feedback, not just type over your work)

You Often Say “Copy Leads Design”: What Does It Mean?

The message is the point. Your page doesn't exist except to communicate a message to your prospect, compelling them to take action. If you treat the page like an important part of a conversation with your prospect, then you should start by focusing on the conversation itself… not the room in which the conversation is held or the clothes you're wearing when you have said convo.

Once your messages are in place, then design can come in and make it all more persuasive. Design makes a page look trustworthy; design makes important messages stand out; design controls the timing of the messages; design can enhance clarity, improving content consumption. But it doesn't start with any of that. It starts with the message. So I believe copy leads design. And most top designers believe the same thing. (Ultimately, of course, design and copy should work together. That's how old school agency teams worked. That's how it works best.)

One of Joanna's wireframesOne of Joanna's wireframes

Why Do So Many People Think the Other Way Around?

To me it's a combination of factors.

One, templates insist on design before copy, and people love their shortcuts / landing page templates.

Two, most creative teams have three or four designers for every one copywriter; the focus on designers in creative teams and agencies means more designers are creative directors, and copywriters become supporting members of teams - not the critical members they should be.

Three, clients are dazzled by the design side of things, so it's natural to want to start by dazzling the client because that's a really easy win.

And four, the vast majority of copywriters aren't willing to fight the good fight to tilt things in favor of the message over the art - there's a lot of complacency and not a lot of challenging conventions.

What's Your Wireframing Process?

I start by creating a loooong blank rectangle that's about 1000px wide. Then I put markers on the rectangle (wire page) to plot where messages will go, starting with a framework.

My go-to is PAS (Problem, Agitation, Solution), so I'll start a wire with sticky notes for each of those steps, popping them down the page with the general idea of spacing in mind. Then I reference my research to start organizing messages on the page.

Then I kinda take a step back and look at the flow of the page - is it cluttered here, does it need whitespace there. And adjust. BTW, I like to use the cleaned-up UI view of Balsamiq for this stuff - the straight lines work best for my tidiness requirements.

Do You Have Any Tips and Tricks to Share?

A few things:

  1. Keep it black and white - no color when you're wiring copy.
  2. Set limits and stick to them - how wide is your headline allowed to be, how big is the type, how wide is a single column, etc.
  3. Use a description for a placeholder image, not an actual image.

Is "Lorem Ipsum" Really So Bad?

Nah, it's not bad… if you're lazy. If you're lazy, it's perfect for you. (BTW, I don't mean YOU.)


Thank you, Joanna!

Now we'd love to know your process, your tips & tricks. Do you mind sharing them with us? Add a comment below!

Fra for the Balsamiq Team


Get the Inside Scoop

We'll send you just one email a month and share a ton of information that you'll get before everyone else. More info about the newsletter here.

We'll never share your email address or spam you.

Leave a Comment

Your email is never published nor shared.