SizanneSizanne, UX Writer:
As a UX writer, it’s my job to know how to create web copy that convinces readers to take action. That said, it doesn’t matter how engaging of a story I craft for my clients’ web pages or blog posts. If what I’ve written looks terrible on the page, no one will bother to read it.

Design & Copywriting are both integral pieces of a website. Naturally, they go together, but the relationship isn’t always so obvious to all stakeholders. Both of these aspects are essential in guiding the overall user experience; therefore, copywriters should have a workable understanding of the UX and vice versa. In this article, we detail how using a wireframe is the first step to building better cohesion between copywriting and UX/design. The message is the most important aspect of your web page, but the way in which the message is presented can have a huge impact on how persuasive it is. A wireframe is a content writers best friend, because it helps them lay out the content in the most effective and logical manner. The lack of a proper wireframe can have serious consequences for the perception of your copy, as we explain below.

Copy dictate design?

Joel KlettkeJoel Klettke, Business Copywriter:
“Copywriters need to understand how the compelling copy they write will translate to the web to avoid creating intimidating walls of text. Designers need to know how to arrange the visual elements of the page to make consuming the copy an effortless and engaging experience.

As for who should take the lead, there’s no debate: copy should dictate design — cramming copy into a pre-defined design makes it difficult to tell the best possible story.” (via HubSpot)

What are Wireframes?

Firstly, it’s important to define what wireframes actually are;

What are Wireframes

“A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.” Source: Wikipedia

It is also important to define User Experience (UX):

“User experience design (UXD, UED, or XD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and desirability provided in the interaction with a product.” Wikipedia

Wireframing Software in Action

At Wisevu we have tested many different wireframing software available on the market. Based on our in-depth research we have decided to use Moqups since its very easy to learn and use, and it makes copywriting and wireframing a pleasure. Many of our copywriters have told us that it has made their job much more interesting and pleasurable since it gives them more creative freedom when compared to using traditional text editors like Google Docs and Microsoft Word.

To see a video of Moqups wireframing in action please watch:

Relationship Between Wireframes and Copywriting

More and more copywriters are discovering the benefits of using wireframes for effective copywriting. The best copywriters can use their knowledge of wireframes to tailor their content better to achieve the best conversion rate. After all, the end goal of everyone involved in the process is to maximize this all-important rate. Therefore, wireframes are useful in allowing copywriters to specifically detail how their words can be arranged to suit the website in the best possible manner.

Relationship Between Copy & Design

It’s often easy to think of copy and design as separate aspects, which should be combined in the final stages. Copywriting is often reduced to just words. The reality is that copywriting has always been an integral part of the design. The UX is dependent on good copy. The words themselves are important, but the way in which they are presented is even more important. Copy should always dictate design rather than the other way round. A designer can drastically change the message the copywriter produces through how they present it or position it on the page. For example, if the writer writes a piece of content that is beautifully written, and broken down into sections that read very well, the designer can make it lose all its power by moving specific pieces of the content like the sub-headline or bullet points to a completely different section.

When the writer can wireframe, they can show the designer and the clients how the page will look when it goes live, and it’s great for the designer and the client to get a picture of how the copy is actually going to function, and how it is going to flow.

Joanna of Copy Hackers and Airstory sums it up best…

Joanna WiebeJoanna Wiebe, Copy Hackers & Airstory:

Copy leads design. If you don’t believe and practice that, your copy is not going to convert as well as it could. Don’t cram copy into lines of lorem ipsum.

Don’t start with the salesroom (design). Start with the salesperson (copy).”

When design dictates copy, UX invariably suffers.

The Potential Pitfalls of Not Using Wireframes

There can be a temptation to skip the use of wireframes altogether. However, there are many reasons why a wireframe is essential for both designers and copywriters. The potential negatives are not always apparent, as it requires a way of looking at the goal from multiple perspectives. It’s a common practice within the industry for copywriters to spend immense amounts of time rightfully researching and crafting imaginative pieces. However, they are then forced to send over these pieces with no nuance of wireframes. This can leave the entire structure in the hands of a designer who obviously doesn’t have the same familiarity with the content, and in the end, the potential can be wasted.

Additionally, it’s even common for copywriters to conduct tasks fitted in pre-built wireframes created by designers rather than the other way round. This is a big mistake since it limits the creativity and freedom of the copywriter. Copywriters should never work in pre-built wireframes, instead the copy should always the layout of the wireframe.

Kira Hug, an experienced and reputable conversion copywriter states that without a wireframe, copywriters are throwing their copy out the window:

Kira Hug, Conversion Copywriter:

“A copywriter’s job is to protect the words, so that the words have the best chance of converting. When you hand over copy to a client without any direction, a guide or a wireframe, you’re basically throwing your copy out the window.

It’s our job to highlight what should go where, what should be accentuated and how to communicate the copy, visually, so that it can do its job and sell.

Every copywriter should understand how to lay out a wireframe and lead the initial layout of a page. It doesn’t mean you need to design every detail (that’s not your job), but you need to understand how best to highlight the copy within a design.”

There are a few key reasons why it’s crucial to wireframe your copy. We list a few of the pertinent risks below:

Risk of Losing Clarity

The goal of every copywriter is to express certain statements in the clearest way possible. However, these details can become less clear when they are fitted onto a live page. A copywriter working without a wireframe risks their copy becoming unclear due to the changes that can occur.

Risk of Changed Structures

A copywriter will carefully choose headings and subheadings to maximize the effectiveness of the copy. However, without a wireframe, designers have the freedom to change these structures and alter the layout of your copy entirely. This can drastically change the message being delivered, and reduce the effectiveness of it.

No Direction

The lack of a guide or wireframe means that you’re sending out copy that lacks any direction. It means you’re giving away your copy without sending out the manual for the appropriate way to use it. Ultimately, your job is to sell your copy, and this is done by clearly showing how it is to be used. Otherwise, you’re discrediting your own copy.

Risk of Not Highlighting your Copy in the Best Way

All the hours spent researching and refining your copy can become meaningless if you do not highlight your copy in the best possible way. Your words deserve to be showcased in their best way. You do not have to be a master of design to understand the basics of structure. These basics will help you make your copy shine, and you can communicate the message in the clearest way possible with wireframes.

How Does the Research Process Relate to Copy & Wireframes?

Wireframes can only do so much. Ultimately, your research will have a key bearing on how well your copy performs. The following research process can be highly beneficial in crafting your eventual wireframe.

Content Writing Research


The first stage of research is always assessing target market awareness. The biggest problems are meaningless if a visitor is not aware of how it specifically affects their life. Firstly, you should consider the pain that the visitor feels. This will dictate their awareness of any solutions, and also their motivations to seek out a potential solution. You should also look at how aware they are of your organization and their general sentiments. These considerations will provide the basis of how you form your copy. It requires a key understanding of the mindset of someone landing on your page.

Interviews and Auditing

Instead of leaping to craft a new copy, you can gain important information from internal interviews and auditing. To find this information, it’s crucial to conduct internal interviews with the team members. These should involve all the sectors of the organization, as they can provide fresh perspectives on the problems, and they can also have a specific view of the customer. Also in order to understand how relevant the copy is, and whether the pain points and solutions are still in the same phases, it’s helpful to perform an audit if the priorities have changed since the copy was first developed. This will allow you to conduct an in-depth comparison with the current copy, and whether the team’s views are the same. Conversion rates are ultimately reliant on the messages being relevant and up to date.

At Wisevu we conduct a Deep Dive Interview with each client to gain important insights into their business. We provide all our copywriters with these “Deep Dive” interviews so they can have the necessary information needed to write great content. However we encourage our copywriters to ask any questions we may have missed.

Audience Segmentation & Insights

After this, you can start looking into insights through segmenting your audience base. This will require asking your audience key questions to understand their process better. To get a better understanding of the buying experience, you can interview existing customers. This will provide you with clear insights on where the copy and messaging can be improved. After this, segmentation can be even more specific depending on your goals. The goal of segmentation is to be as specific as possible in order to ask the right questions to the right people.

Alternatively, if interviewing the customers is not feasible, Review Mining is an excellent way to gain insights into the most common customer complaints and praises. Review Mining research should be a part of all copywriting projects, since review mining will show what customers are specifically saying about your or your competitors organization.

Finding Key Patterns

The process involves setting aside your biases. If you focus on something from the start, then there is a tendency to fixate on it. You should be open with what you expect to find, and you should let your findings dictate your actions rather than implanting your preconceived notions into them. You should look for keywords and phrases that pop up numerous times. These can be found in both benefits and potential improvements. You will likely receive a lot of information, and therefore, it’s recommended to use efficient note taking practices. It’s not enough to merely collect the data; you must analyze it meaningfully and look for the patterns that will help you improve.

Bringing it all Together

Once you have everything you need, you can start to plan your wireframe. The above steps will help guide you through the process of this, and you will have a better idea of how to drive conversions more effectively. Wireframing doesn’t need to be an incredibly detailed process. On the contrary it should simplify the copywriting process. It involves early drafting of key ideas to gain an idea of how they fit together in the best way. Simple layouts can quickly transform into useful wireframes that have a clear structure of your copy, which will be conveyed to the visitor.

Making the Most out of the Design & Copy Relationship

Design and Copy are both integral to one another. They both need each other to work in the best way. Yet, many organizations still think of these as separate aspects when the reality is that they are closely embedded. Whatever your organization is about, it’s up to you to convince the stakeholders about the benefits of wireframing. You shouldn’t let your copy be in the hands of designers who do not understand it. It’s always essential to note the benefits of wireframing and have a clear presentation. Additionally, you should make it clear that wireframing is not part of the design, but rather, it’s a segment of the user experience. You may face backlash, but your copy deserves to be presented in the best way possible.

Closing Thoughts

Every copywriter needs to master the art of designing words that resonate with audiences and force them to act. However, what separates the competent copywriters from the elite ones is an understanding of how the effect of a copy can be maximized through the understanding of a wireframe. This allows the copy to fulfill its highest potential. The close cohesion of designers and copywriters is essential within any organization. The copy leads the design. You should think of copy and design as ingredients in the same cake. A copy forms the base of your page; however, without the consideration of design, it lacks the spark to persuade the user to act. A great copy deserves to be delivered with great design. You’re selling your copy short if it doesn’t come with a wireframe.

Give Us a Heart
Content Writing, SEO

Leave a Comment