Help
Integrating Copy and Design
Humble beginnings
I wanted to start the series with trying to show how copy is design and show how you can use copy as a design tool to save you time, give you direction and overcome 'designer's block'.
I'll start the mechanics of writing good copy in the next part but here lets assume you've got perfect content to work with.
Copy is design
The basis of a website is copy that's been marked up in HTML to be semantically correct. i.e. headers, paragraphs and lists etc are defined purely by their function within the text.
Taking the design principle that every pixel on a website must serve a function… every pixel from this point on is essentially optional.
And so it begins…
So this is where your flair for design comes in. Spending a bit of time analysing content can pay-off.
- Just like for SEO scan through looking for keywords, phrases and descriptions.
- Look for particularly effective/emotive descriptions and wording – for ideas or to highlight or lift-out of the body of the text…
- Note where there are heavy, wordy and difficult to read sections (to be broken-up with callouts, quotes etc….
- Check for design cues in how things are described (eg. 'crisp, clean and clear copy' makes me think of an apple)
- Get a feel for the style, tone and pace – should your design be relaxed and neutral or urgent and sharp?
- Is the language formal, technical, chatty…? – does it suggest grungy or corporate?
- Every paragraph should serve a purpose – what is it? Is it to lead the reader on to the next or off through a link or advertise a great offer?
- Make sure you understand what the copy is saying!
- Check to see if what's written matches your client's brief and view of their business– it'll save headaches later.
Parallel worlds
Copy writing and design share the same processes, goals and a good site needs both disciplines to work in tandem.
- Good copy has a clear goal – a core message to get across. Your design must reinforce this.
- Good copy has a 'voice' (formal, casual, technical, legal…) appropriate to it's audience. This is equivalent to your design's overall theme and they must support and reinforce each other.
e.g. An investment bank's site isn't the place for a grungy collage design. - Good copy has structure (headings, paragraphs etc.) to break text up and make it readable. The function of your design's layout is to reinforce this – adding focus, leading the eye on to the next element, adding contrast etc. and must improve readability not hinder it (e.g. clutter, illegible colours or overpowering images…)
- Good copy uses description, word choice and grammar to convey more than the plain facts – it creates an emotive response in the reader to reinforce the underlying message and 'voice'. In the same way, you must style individual elements to fit your overall theme.
- Typos and grammatical errors will hinder the effectiveness of copy in the same way that image artefacts, broken layouts and the like will ruin a good design.
Designer's block – an example of all this!
I will write about 'designer's block' in more detail in a later part and share with you how us copy folk get over 'writer's block'. But if your design is stalling then inspiration can come from analysing your copy.
An example from my own site eventually led me to the overall design. It started with just wanting a snappy headline. How could I 'sex-up' copy-editing?
I went through my copy picking out keywords, effective descriptions etc. and then began plugging them into sentences to describe what my service would give clients (i.e. my message). I kept it loose to begin with, not too worried about how unwieldy or grammatically incorrect it was and then began whittling away.
One influential sentence I came up with was:
'Get copy that's crisp, clean and clearly gets your message across. '
This lead to my headline of 'Give your content more bite', the apple elements and trying to keep the design crisp, clean and clearly getting my message across!
I hope this has given you food for thought. From here we're going to start our descent into the murky world of effective copy. In part 2 we'll start to look at clearly getting your message across in 'A moment of clarity'.
