Wireframe Mockups for Copywriters

Copywriters must be versatile to survive. There’s the business side of things, for one—the way we communicate with, manage, and bill our clients. Then, there’s the strategies and tools we use to be more effective (and profitable).

Don’t forget mind reading, word wizardry, and saintly patience during late-stage revisions.

One thing I’m often asked to do is the web copy rewrite. Rebrand an About Us page. Optimize conversions on a landing page. Add word count to improve on-page SEO.

Lately, these clients have also requested layout recommendations. That is, the final deliverable (on my end) is twofold: a copydeck and a visual representation of how that copy will be arranged on the page.

In my LinkedIn post introducing mockups for copywriters, I discussed in brief what mockups are and why they’re useful. Here’s a recap:

  • Visualize the copy layout
  • Establish expectations
  • Make sure recommendations are technically feasible
  • Get client and stakeholder buy-in

I also discussed some reasons why copywriters need wireframes. Here’s brief guide to help you create wireframe mockups for freelance writing clients.

1. Write and Approve the Copydeck

For rewrites, I’m typically working off existing layout and copy. So, I begin with a copy deck that follows the structure of the page in a linear way. Headline, Subtitle, CTA, etc. During this step, I share the copydecks with stakeholders for review of my copy recommendations. The image below should give you an idea of what my typical copy deck looks like:

Sample Copy Deck

2. Create the Wireframe Mockup

After the copydecks are approved by stakeholders, I use Balsamiq Mockups to create visual layouts of my page revisions. Essentially, I create a wireframe of the page with new elements and copy points included. I always make sure to take into account the current design, the updated copy, and any new sections I recommend. Also, any recommendations I have for optimizing conversions.

Notice the order of operations here: copy first, then design.

Here is a sanitized example of what the top half of a recent mockup I created:

Example of a Wireframe Mockup

3. Request Stakeholder Approval

Once I’ve completed both the copydeck and the mockup, I typically send both to the web developer and project manager for approval. Google Doc for the copy deck, PDF (exported from Balsamiq) for the mockup. This helps to ensure that everything is within scope and aligns with the client’s original expectations for the project.

From there, the client reviews both deliverables and sends feedback, usually in the form of a marked up PDF document full of comments, suggestions, and questions.

4. Revisions and Web Developer Hand-off

At this point, I update the copydeck and mockup based on the client’s feedback and then hand them off to web developer.

Now, it’s time for the web developer to do their magic, translating the mockup into a live web page. This is a good time to clarify any questions your web developer has about copy, layout, and design recommendations.

5. Final Review and Sign-off

The web developer will likely send over test versions of the page(s) for final review. Look them over, catch any last minute issues, and sign-off for go-live with the client.

All done!

How to Learn Balsamiq

You’ll notice that I didn’t cover the step-by-step process of using the Balsamiq tool itself. Why? Because I’d be writing a book that’s already been written. Here are some useful resources to help you as you learn to make your own mockups using Balsamiq:

Leave a Comment