COPYWRITING TIPS FOR WEBSITE DESIGNERS

DESIGN BEFORE COPY, OR COPY BEFORE DESIGN?

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.

SO, WHICH COMES FIRST, DESIGN OR COPY?

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:

1. Prioritise content into key points with the most important copy at the top. E.g. for products, list the best features first. Since you are writing for small screens on mobile devices this is especially important. You may elect to only show the priority content on mobile. On your MOBLE web pages, you can easily decide which copy you'd like to see on which devices. Often you might show more copy on desktop than on mobile with the click of a button.
   
2. Decide in the Workshop roughly how many words you're aiming for, for each page, or key point. Therefore, both copywriting and designer are aligned. This is especially true for widget summary snippets and detail page content for blogs, articles, products, services and directory listings, where a set design layout will be important to maintain consistency across the website pages.
3. Post Workshop, supply key headings and call to actions for each page before the main body of the copy is submitted. We suggest keeping these notes in your MOBLE workshop area.
   Even if copy this needs to be tweaked later, this is no problem, you can style finish off the Headings, Body and Button text by logging in once the Designer has made the layouts for you.
4. The designer should create design Layout variations to suit both short and long copy. Traditionally, website design firms and older website CMSs would tend to lock the client into a set number of page layouts, e.g. Home Page, Internal Page, Blog Page, etc. This tended to be due to technological and budgetary constraints. Designers would simply create space for the copy to be added, and often copy was simply loaded to the page with little consideration. With your MOBLE with it's easy to swap Layouts with a different number of columns or swap Grids to fit the copy. So even if the copy changes after the design is finished, and even if the website is live, it is always simple to make the design work with the copy at any stage of the project, therefore removing risks to project budget and limitations of having a set number of page layouts.
   

Following the Workshop, as a designer and copywriter team, you can now start to work independently via the same data source. 

“Without data, you're just another person with an opinion."

W. Edwards Deming.

1. Creative Options
   As soon as the layouts are prepared the designer can share them with the copywriter. Since your MOBLE website has hundreds of drag and drop layouts out of the box, you can quickly provide a few options for the copywriter to play with and explore. Especially when trying to crafting short compelling headings and call to actions. 
2. The copy can be written straight into the website pages
   MOBLE is a website builder for design and a CMS for business. As soon as the layouts are prepared the copywriter can dive into the website pages with 'Design Mode' turned off and simply start adding and playing with the copy. The key thing for a copywriter to hold in mind is that the content needs to work across multiple devices and screen sizes vary greatly, so it’s important to aim to produce compelling statements and keep the maxims to the minimum. Think large attention-grabbing typeface; large type can only work if you have a short maxim, statement or proverb. This will give your designer more creative freedom and more negative space to work with to keep it clean and focus attention towards the key page objective.
3. Team Collaboration
   Once the content is ready a first draft can be placed on to the page and shared with colleagues or users to get feedback. Alternatively, you might have a couple of variants and share both of these for feedback, or pass to the marketing team for potential A/B tests.

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 VILLAIN, THE HERO, AND THE HAPPY EVER AFTER.

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:

1. VILLIAN

• What is the problem that you are trying to solve?
• Set the scene and paint the picture with the context of the product, service or item. This might be sprinkled with history, people, or the situation.
• Relate what you are talking about to the reader, the type of person and job role the article is intended for and why it's important to them. You've perhaps heard this type of structure thrown at you at the start of many a YouTube pre-roll, so please excuse the parody:
  
  "You might be reading this if you're a marketing consultant that has been burned by trying to build professional company websites with themes. You might not have any coding skills and are feeling daunted about the seemingly vast options that all do the same thing. You are not alone, this is the biggest thing that we hear from our marketing clients before they come to MOBLE and they are surprised to learn just how easy it is to create a high-end custom website design, on a low budget, without using themes."
  
  This might seem a little cheesy, but the point here is that these types of introductions place your customer segment into the heart of the story. They are like the protagonist learning of the villain, giving the article much-required context.
  
  If your customer database is segmented accurately into key customer segments, and your ads are targetted accurately for these segments, then you can feel confident creating segment-specific landing pages and write copy specifically for these potential new prospects.
  
  

2. HERO

• Now that the 'problem' is aligned with your customer segment you can define how your solution solves the problem. Your solution is the Hero.
• List out the key points from the Workshop in priority order. This doesn't have to be complicated; you can list them out. A bullet list can often be just as effective as well written copy, assuming this context is set.
  
  

3. HAPPY EVER AFTER

• This is quite simply how your Hero has crushed your villain, how your product provides the solution to the problem.
• Back this up with validation in the form of case studies, examples and testimonials.
• List out trust badges of partnerships, affiliations, and awards.
• Have a prominent call to action and form or button at the key magic moment.

Now let's jump over to MOBLE to see the story we wrote for our DirtyFeet case study.

https://www.moble.com/story-dirtyfeet

THE RISE OF COPYWRITING IN DIGITAL DESIGN

1. THE ADVANCE OF CSS

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. 

2. PERSUASIVE DESIGN

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. 

3. TYPEFACE

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.

4. DEVICE SIZES

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.

5. CONVERSION OPTIMISATION

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.