How wireframed copy makes everyone’s lives easier - and websites better
Inspired by this post that got a lot of traction on LinkedIn
A potential client recently told me they were surprised and impressed that I wireframe all the web copy I write.
It’s a no-brainer, in my view. Wireframing shows everyone how the words will actually sit on the page:
Clients can see the copy in context, rather than imagining it from a Word doc.
Designers and developers get a clear structure to work with, reducing “the copy doesn’t fit” moments.
My role doesn’t stop when I hand over the wireframed copy. Collaborating with designers and developers ensures that the structure I’ve built translates into a functional, engaging website.
Wireframes I created in Whimsical for Step ‘n Wash
What is wireframing?
Wireframes are simple outlines the structure of a web page app, email, etc. that shows what goes where. (In this article, I focus on web pages.) Think of wireframes as a sketch of all the elements of the page, planned out but not designed. It’s the skeleton of what your page will look like.
Often UX specialists will create wireframes in the early stages of a digital project as they plan user flows and desired paths.
Wireframes are a great way to show visually what’s being built. They’re much easier to interpret than things like Word documents or very technical drawings because you have to imagine less: You can see how it’s going to come to life.
Copywriter-created wireframes will include the actual text for the page. When other specialists create them, they often use placeholder text (e.g. lorem ipsum).
Which version of this page would you find easier to review: Real copy or placeholder text?
When do wireframes happen during a project?
It depends. From my perspective as a strategist and copywriter, wireframes are part of my job and I create them while I’m planning and mapping out the copy that brings the strategy to life.
UX experts, designers and developers may disagree and want to do the wireframes themselves. But when this happens, often the wireframes don’t account for copy. And clients can end up with something that’s beautifully designed, into which copy has to be slotted as an afterthought.
I’d argue copy should come first. Because good copywriting caters to the different buyer personas who’ll be visiting the page - and takes their stages of awareness into account. Good copy that converts well needs to follow a specific structure and flow.
This should be mapped up front, with design and dev enhancing it. Ultimately collaboration with all specialists is going to get the best results.
A clear wireframe with copy integrated improves the user experience. Content flows logically, key messages are highlighted, and calls to action are positioned to convert.
Wireframing with real copy smooths the design and development phases. Issues are spotted early, which means there’ll be fewer revisions later.
Wireframing isn’t just about making copy fit - it’s about making your website work harder for your audience.
“Working in social, I’m a BIG fan of contextualising both words and visuals. All the whats, wheres and hows, in-situ, exactly where they’re going to live! I don’t know why it’s not a golden standard, it’s super helpful to clients and creatives too.” - Head of Design and Content
Wireframes make a web project so much better
Clients get a clear view of what the copy will look like on the page. Many of us struggle trying to picture an end product; wireframes help hugely with this. There are fewer misunderstandings and less room for (mis)interpretation.
My clients LOVE when I present copy already wireframed up. They’re not usually expecting it and it blows them away. It shows an extra level of thought and care. And it makes their lives easier.
“Pardon my French, but that’s ****ing awesome. This is really, really good. Love it. I like how it tells our story. I like how this highlights everything. I have a hard time imagining this not making an impact. I’m super excited. Awesome, Jo. Very, very, very nice work.”
Designers, developers and UX specialists can see the copywriter’s vision for the site. Wireframes are a bridge between these disciplines. They create a shared understanding of content layout and structure before design or development begins.
Designers get to:
Focus on layout and hierarchy without guessing where the copy goes.
Make design decisions that better support the copy and reinforce messages.
“Working from the same wireframe, the final website is stronger, faster, and more faithful to the copy’s intent.” - Website designer
And developers:
Can plan responsive layouts and technical requirements accurately.
Experience less misinterpretation and fewer last-minute changes.
“Having a clear structure from the copywriter makes our lives so much easier — everything fits where it should, without us having to second-guess.” - Web developer
“It eliminates so much back-and-forth and those awkward moments where we have to make editorial decisions we’re not qualified to make.” - Web developer & designer
Web copy for a client back in 2013, before I started wireframing. Lots of imagination required 😬
Don’t ditch your copywriter when the wireframes are signed off
Your copywriter put blood, sweat and probably tears into creating beautifully copywritten wireframes. Please keep her involved during design and dev:
Have her brief her work in to the rest of the team, and invite her to review sessions.
She’ll be very happy to answer questions and rejig any copy if necessary.
She can also reduce your workload by liaising with the rest of the team and reviewing work before you see it - again reducing the need for changes.
tl;dr
Wireframes are magical things: Have your copywriter do them and it’ll help your web project team work more efficiently, keep the project on schedule and ensure the final website aligns with the business’s goals.
_________________________________
Want a copywriter who’ll wireframe the heck out of your web copy? Book a free 30 minute intro chat and let’s plan your website upgrade.