Paul Davenport | 9 min read
VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW
In Episode 3, you learned how to use MOBLE's workshop process to identify exactly the key points of what should go on to each website page. You learned how the workshop tool can help your team prioritise each point to set a clear foundation for the copywriter to produce your website content. Now we extend this knowledge by sharing insights and learnings over many years of working in the science and the art of copywriting for website design.
This Episode is split into the following three parts. Each part can be read separately and you can jump ahead:
When planning your website design and copy, invariably at some point you and your team will ponder this somewhat classic question:
"Should you design a page before you have the copy and make the copy fit into the design, or should you write the copy first and design the page around it."
Most creatives agree on face value, that the copy should be written first since the designer needs to consider various layouts, heading styles, and call to actions to support the copy.
However, in recent years with technological advancements, there are some rules of the digital design that are essential for the copywriter to follow, that will naturally help the designer to get started well before the copy is finalised, saving significant project time and procrastination. Jump ahead now to discover more.
With a MOBLE Workshop and website, we believe both design and copy can happen simultaneously and independently, without having to risk any expensive redrafting or procrastination.
If you have not done so already, before you continue, we strongly advise you spend 20 minutes following Episode 3, How to execute a Website Workshop like a Pro.
For Designers and Copywriters to work simultaneously you must:
Following the Workshop, as a designer and copywriter team, you can now start to work independently via the same data source.
W. Edwards Deming.
The aim is for the designer to be grateful to the copywriter for supplying purposeful maxims that are kept to the minimum, to suit all devices. The copywriter will thank the designer for design layouts to play with and get a visual feel for the content with the selected typeface.
The art of storytelling is often structured in terms of Context, Action, Result (CAR). If you're new to copy we encourage you to spend an hour or two on YouTube getting some insights as to this foundation technique.
For business websites, MOBLE aim to bring more emphasis to the problem that is being solved to tell the story, particularly on landing, product and services pages where we are aiming for a conversion. Over the years we've summarised our own approach as follows:
Now let's jump over to MOBLE to see the story we wrote for our DirtyFeet case study.
In 2012, when we began conceptualising what MOBLE would be, our minds were very much focused on the future of the mobile web. We spent a lot of time thinking about what mobile might mean for website copy, how engaged the reader would be and small devices, what would drive them to click, and how long the would stick around.
It seems a long time ago now, when in 2010, when Steve Jobs announced that Apple would not allow Flash on the iPhone, iPod and iPad. Two years on we were experiencing significant advancements in CSS, notably with the release of Bootstrap 2 by the team at Twitter. This was one of a series of Frameworks, that contributed to a new approach in designing and building responsive websites, so more focus could be spent on designing website UI kits, which were the building block of CSS (such as forms, buttons, and navigation).
In building websites at the time, it was clear that with a good framework web pages could be built rapidly directly in code. MOBLE decided to take advantages of these technological advancements and really started to question if the photoshop and wireframe phases could be removed altogether, or at least for the foundation HTML page structure and CSS UI elements.
For designers, we decided to create our own framework, that would allow designers a simple UI for editing the main elements of the UI Kit, or to completely write their own CSS and JS and drop it into the CMS.
For content editors, we decided to create hundreds of beautiful drag and drop layouts that could be dropped on to a page and instantly pick up the CSS elements that were created.
In doing this, not only did with see an enhanced alignment between the designer and front-end developer, we saw a strong alignment between the designer and copywriter. Previously web pages would have a couple of options for content to be added. Now, every page could be laid out differently, to specifically suit both the visual design and copy of the story that was being told. There was an uninhibited balance between the visual and the literal, with the layout customised explicitly for every piece of content, to tastefully deliver a combination of form, function, and style.
A complimentary benefit to the advancement of CSS and customisable layouts was the adoption of psychology in persuasive design. Persuasive Design techniques often guided us to provide users with only one desirable action per viewport. The logic here is that if a user only has one desired action, as opposed to many choices (links, buttons, messages), they are more likely to take that desired action.
Thankfully for graphic designers, this meant that all content no longer had to be squeezed above the "fold line", which was really becoming a design nuisance between the years of 2006 and 2012. Beautiful pages could now be created with the considered use of negative space, both focusing the user towards the desired goal and making the brand more desirable.
Similarly, for copywriters, the challenge was to both define the desired action and make the page more desirable. This often involves prominent headings with well thought out maxims or proverbs, that are both concise and accurate in solving the problem.
Copywriters that have the skills to portray a compelling maxim offer the perfect complement to design when utilising an ever-expanding array of beautiful fonts. Ever since Google Font Directory was launched in 2010, designers could confidently move away from the traditional web-safe fonts. Designers could now explore new techniques with typeface and it was imperative that great copy could compliment great design.
Completing the symbiosis between copywriters and designers was the onset of mobile and in particular responsive design. The maxim has never been more prevalent in choice and necessity, with tiny screens now the canvas to articulate the message, with pithy statements and punchy sentences a must to solve business goals, optimise clicks, time on page and conversions.
Finally, we should mention conversion optimisation. The shared end goal and the defining metrics that the designer and copywriting are both ultimately held accountable for is conversion rate.
Previously copywriters might have deliberated the preferred choice of maxim; now it is possible to publish two or more variants and see which has the best results for the users. We'll dive into this in great detail in Series 10. Just like design, the preference of one maxim over another is subjective. Therefore, at times of deliberation, it is best not to apply opinion, but more to publish both variants in an A/B test to determine which has the desired or most profitable outcome for specific customer segments at that time.
For designers and copywriters, this is perhaps the most satisfying part of all. You may adopt your preferred choice for your Portfolio and let the public define the final direction. You can be free from preference without feeling a need to force your beliefs upon your client. Your role is simply to provide a method for achieving the business goal that harnesses your creativity. Conversion Optimization helps to reduce procrastination, helps ship more of your creativity and gives you a platform to learn what works and where you can improve.
There is a saying in design that you 'design a version for yourself and a version for your client'! Well, this need not be different for copywriters as you build up a Portfolio of your best work. When you sign up for a Team Site with MOBLE, designers can keep their own personal portfolio of design layouts, we encourage copywriters to do the same so that you can share your portfolio online.
GETTING AROUND
SUPPORT
AI SALES LINE
AI SUPPORT LINE
GET A QUOTE
A Web Builder for Design. A CMS for Business. We serve all businesses from SME's to Enterprise. Talk with us for AI development, custom website design, website development, ecommerce websites, directories, intranets and social networks.