If you want to make the most of your investment in a professional website copywriter, hire someone who wireframes their copy. In this post, you'll learn what copy wireframes are and why they're good for your copywriter, your designer, and you!
What is a copy wireframe?
A copy wireframe is a visual representation of a website page that shows where and how the copy should be placed to work most effectively.
Copy wireframes focus on indicating copy placement, page flow, and typographical hierarchy to offer a visual roadmap for how to put copy into action. These are some of the basic design and layout elements I include when wireframing copy for a website:
H1, H2, H3 styling
Body Copy styling
Buttons
Icon Placeholders
Image Placeholders (with notes on suggested image to support the surrounding copy)
Callout Boxes
Social Proof (including testimonials and proof bars)
Accordions
Sliders
Page Sections and Divider Lines
A copy wireframe isn't meant to veer into the design lane. It doesn't incorporate color, photography, or anything fancy. But while it's simple and grayscale on the surface, it delivers surprisingly powerful outcomes.
Why wireframing is a crucial step in the website copywriting process
Remember, the thing that makes “words” into “copy” is the fact that they have a specific job to do: drive action. On a website, that action is typically purchase, book, register, contact, or subscribe.
So, for copy to do its job well, it has to be built on a strong messaging foundation AND take user experience into account. Copy placement, font size, use of white space, and other technical decisions impact that user experience. User experience is also influenced by the psychology behind how visitors engage with copy on a website. The bottom line? The right words can only do their job effectively on your site when you put them in the right place.
How wireframing has made me a better copywriter
While I’ve been running my copywriting business since late 2016, I didn’t start wireframing website copy until 2020. Once I added this important element to the process, though, I immediately started seeing better results.
My goal with every site I write is to make it as effortless as possible for visitors to move through the site, get the info they need, and take action. Wireframing helps me achieve that goal so much more successfully.
When I start thinking about the layout and the actual amount of space I have available, I end up with tighter, crisper copy that doesn't waste words. Seeing the copy wireframed helps me edit for flow, ensure that the copy is scannable, and catch any spots that might cause friction.
Wireframing also helps me put myself in the mind of a website visitor as I imagine their experience moving through the site.
How copy wireframes help my clients
In addition to the obvious fact that wireframes help me craft better copy, wireframes also improve the client experience.
Opening up a Microsoft Word Document full of website copy can feel overwhelming. By offering an accompanying wireframe, I’m able to give context to the copy. The wireframe serves as a guide and helps communicate the vision more clearly. This ultimately results in a more effective and efficient feedback process where the client feels empowered rather than confused.
It can also be helpful for the client to see which images, icons, or other visual elements I suggest as they plan for their work with a brand photographer or designer.
How wireframing makes life easier for website designers
A delicious dish starts with the best ingredients. Still, no matter how tasty it is, it needs to be well-presented to entice you to dig in. The same goes for your website. Strategic copywriting comes first, but it needs to be "plated" by a designer who can maximize its impact through visual elements.
A copy wireframe offers a bridge from copywriting to design that sets you up for the best results. With a wireframe, nothing gets lost in translation, and I don’t need to worry about a designer accidentally interpreting, changing, or moving copy in ways that undermine the results we’re after.
“Amanda's wireframes are the perfect bridge between copy and design,” shares Natalie Leroux of Studio Eighty Seven, She thoughtfully pairs her copywriting with each section of the website, freeing me up to focus on the development and design.”
Beyond simplifying communication and enhancing collaboration, wireframes also free up the designer to focus on what they do best. That inevitably leads to better outcomes and gets us to the finish line faster!
Remember, if you’re preparing to build or update your website, copy is the place to start.
Copy on your site isn't meant to fill in placeholders in a design or to simply sound good. The words you use on your website have a much bigger job than that. Every word, section, and page on your site needs to support the ultimate goals of building brand affinity and driving conversion.
Learn more about why copy comes first and the other professionals you need on your team to build a winning website in this post.
