99% of business websites are designed to do one thing: To Sell (and drive revenue). Whether it’s an idea, product or service. However, many designers and copywriters skipped out on the Copyframing process because they don’t know or too much work to figure out.
What is Copyframing?
Copyframing is a term Laman7 coined by a combination of copywriting and wireframe, where copywriters visualise the copywriting into understandable layout that makes more sense than a document file.
Before I confuse you further: Here’s a definition of Copyframing and Copyframe.
Copyframing (verb): Process of turning copywriting to wireframe
Copyframe (noun): The work done through Copyframing, which is a wireframe with copywriting.
Here’s an example of copyframing for one of our project
Copyframing sits in between high-fidelity and low-fidelity design. Copywriters with image editing skills use wireframe software like Figma, Adobe XD, Photoshop, or Illustrator to produce Copyframes.
The most sought-after copywriters have high skills in copywriting, layout design and typography. Copywriting drives the content through persuasiveness and clarity. Layout design makes the content visually structured and eye-pleasing. While typography amplifies words and dictates eye movements
Designers can also do copyframing. However, it may need more clarity and persuasiveness, which is the key to website conversion.
Copyframing aims to help clients understand the visual layout of the website before the designer starts decorating the website.
Design Without Copyframing
Website design without Copyframing usually ends up with lower conversion.
- The website looks good – but not converting stranger and visitors into readers or leads.
- The workflow is a mess – there will be many back and forth from client and agency with many emotional exhaustive and time wasting.
- Clients do not understand – Clients can’t visualise the copywriting. They need to see it to understand.
- Designers go clueless – Converting from copywriting (docs file) to wireframe requires a higher degree of understanding Semantics (word association/ choice of words).
You can learn to become a Copyframer from our Lead Generation Courses.
The Process of Copyframing
Copyframing starts by understanding what the website is about through Information Architecture (IA) and how we’re driving visitors to perform the desired action. It’s important to note, a “Design Strategy” was done prior to IA that focuses on Business aspect (what problem to solve).
A copyframer may also need to perform Keywords research for SEO purposes.
From Information Architecture, you’ll have a list of pages to be built.
Every single page is then written persuasively and navigates users to click on the “Call to Action” button. Whether it leads to Newsletter, Purchase, Downloads, Contact or Booking. These are usually done on Microsoft Words or Google Docs.
These pages are then converted into Copyframes and passed to clients for fact check, approvals and feedbacks.
This process of checks may take weeks to be finalised. Client is required to do a sign-off the document so minor changes will happen in the final stage.
Copyframes are passed to Designers to add flares to website design without interrupting the copywriting flow. Designers will then focus on eye-tracking and attention-holding design.
The copywriting should and always be the star of a Business Website.
Before Copyframing Exist – Traditional Web Design Process
I’ve spend nearly 20 years in the industry, most companies I worked with (prior to our engagement) do not know about Design process.
To make this simpler to understand, we’ll use Architecture as an anology.
Client ask for Mockup – They want to see the ‘look and feel’ of the website before committing to the deposit. This introduces a common error in Design,
Form before Function (is picking up again)
For non-designers, this means looks before utility. Wedding dress wore once. Stiletto kept in closet after pregnancy and so forth. It looks good, but lacking use.
Mockup only serves the client (employee) interest, get the website redesign done and over with. It does not solve the business issue as “website is the face of business”.
Akin to architect, is 3D House Render before knowing who’s the family, their budget, the size of land, their goals (renting, long term investment, retirement plan), aspirations and tastes.
With a bit more cleverness to the web design process and solving business problems, Designers adds/hires copywriter to the team. This helps to guide the website development into meaningful business goal.
However this comes with many cons than positive ones. Clients will want to dictate the copywriting on the website because ‘they know their business’ and they have everything to lose. Which leads to removing and adding unnecessary sections to the website design.
This is similar in architecture, where the homeowner dictates the materials to use when cheap wood is unsuitable for tropical locations.
All these issues lead to one thing: lack of visualisation.
This can be addressed using Copyframes.
It’s an additional step and resources, and certainly worth the investment.
Through Copyframing, we’ve developed two key Laman7 Assets: autoCSS and Bricks7.
- autoCSS – A sistematic way for developers to work together with designer, without reinventing the wheel for every project
- Bricks7 – A reusable Bricks builder framework that reduces Developer workload by 74%
Common Mistakes in Copyframe
The common mistake copywriter makes during Copyframing are
1. Overly creative layouts – With new layout system, visitors are required to re-learn ‘how to read’ the website. Confusing and disruptive layouts makes visitors frustrated and leave.
2. Poor choice of Words – “listen” and “hear” almost have the same meaning, but it’s usage are different. Similarly, copywriters use words can conveys lesser and shallow meaning of words.
3. Overly creative copywriting – The same typical mistakes copywriters make is being overly creative until it loses context like using abbreviations, bombastic words,
3. Vague hero section – “This product makes you Happier”, intangible benefits are warm and fuzzy but what does “happy” truly means?
4. Lacks Brevity – The copywriting is too long and can be shorten, If visitors want to read more, they should download the Manual and not ready
Copyframing is the Future
For Client needing to Redesign Website: Your goal is to scale the website traffic and get leads, make it easier to add content. Copyframing can help you make informed decision, twice faster and accuracy when working with B2B marketing Agency.
For Agency: Learn and try it out for your next project. This can lead to lower ‘firefighting’ and ‘gear grinning’ with your clients.
Need to Redesign Website?
The worse thing that can happen with website redesign, is not getting more leads than the previous Website. We can solve that for you. We’ve help business grow leads by over 450% (view our case studies).
Let’s have a chat and see if we can find ways to improve you Lead Generation.
