Why copywriters should absolutely SWEAR by wireframes.

Building your site without making wireframes first is kind of like deciding to build your house without any blueprints. As in, probably not the best idea.

Will Ferrell in Anchorman regretting his decision

A smart, beautiful, and easy-to-navigate website starts with rock-solid wireframes. And while they’re usually thought of as part of the design/build process, wireframes are just as important to copywriting.


So, what exactly IS a wireframe?

A wireframe is a basic visual guide that shows the structure and layout of a website. Kind of like a road-map, showing where everything should go, and how the content should appear.

Wireframes usually take the form of a black-and-white layout, with simple blocks in place of any images or visuals, and only the most basic fonts.

They’re super bland, kind of ugly, and 100% boring to look at – but for good reason!

It’s because at this stage, the focus should be on the messaging, the hierarchy, the flow, and the overall user experience – not whether your CTA buttons should be orange or pink (or neither…).


Why are wireframes so handy for copywriting?

It can be really tough to picture what a website’s actually going to look like, based on just a few paragraphs and headings in a Word doc.

Presenting copy as wireframes works, because it shows how it’ll look when it actually goes live on the site. Which makes deciphering and reviewing it about a thousand times easier.

Here are a few more lightning-round reasons I rate copy wireframes so highly:

  • They clarify the story and the flow.
  • They make sure each section has the right amount of text, so you don’t end up with any crazy-long headlines, or massive blocks of text that hurt your brain to read.
  • They make life easier for your web designer – showing them the proper hierarchy and emphasis, and giving them a clear blueprint to work from.
  • They ultimately lead to less back-and-forth, way fewer headaches, and way more spare time to spend deciding on pink or orange for those pesky CTA buttons.


Here’s a quick example for ya.

When the time came to build my own site, HelloElo.co.nz, I followed exactly the same process I do for my clients.

Here’s how the early days of the HelloElo homepage looked, both in a word doc, and as wireframes:

Comparison of word doc copy vs. wireframe copy


Pretty big difference, aye?

With a wireframe, suddenly you feel like you’re looking at an actual website (albeit a very sad and grey one). It’s easy to see how the hierarchy works, whether the layout is effective, and if the right information is appearing in the right place.

I could’ve tinkered away on my wireframes forever, but I eventually handed them over to my wonderfully talented web designer and friend, George Howes, who turned them into the beautiful site you’re perusing today (thanks, Georgio <3).

There were a few changes between the original wireframes and the final site, but overall, it stayed pretty much the same, which I’m chalking up as a win. Go, team!


How do HelloElo wireframes work?

There are a whole load of online tools you can use to help you make wireframes – like Balsamiq, or Moqups – but I’m a technological dinosaur, so I like to make mine in good old-fashioned InDesign.

I use blocks in various shades of grey to separate information, and plain old Arial for the typography, keeping it as pared-back as possible.

Then I send the finished wireframes to my clients as a PDF for review, along with an editable Google Doc to make any feedback easy to track. Almost TOO easy.

If you’re looking to give your website a cheeky revamp, or need a site written from scratch, let me know! I’d love to welcome you into the cult of copy wireframes.

Fran Drescher welcome gif

Until next time!


Elo Jack x

No Comments

Sorry, the comment form is closed at this time.