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.

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:

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.

Until next time!

Elo Jack x