Think copywriting and web design are exclusive concepts that should be handled separately? Think again. The two creative disciplines are intrinsically linked. They both aim to grab people's attention and keep them on the site.
In fact, you simply cannot have good web copywriting without also having good design. In this blog, we'll explain the relationship between copywriting and web design, as well as showing how it often goes wrong and offering some top tips to bring the two together.
When you write a piece of content, what are you trying to do? Get a message across. Whether that's to sell something, raise awareness or entertain – at its core, you are communicating a message to your reader.
Now, you can employ all the tricks in the world for writing short, sharp concise copy, but you must also consider the visual element. It's also about how the copy is laid out on the webpage. And if it's laid out poorly, then your message can become invisible or, at best, confusing. Either way, people won't hang around on your site to work it out.
As we have explained, web design and copywriting are two parts of the same whole. But because they're carried out independently, by separate teams with separate creative ideas, they're often more like distant planets.
Both teams deliver their ideas, and beautiful as they may be, they often just don't fit together – like parts from two separate jigsaws.
So how do we improve this?
Communicate: To have webpages and copy that fit together beautifully and effectively, you need to share ideas between copywriters and web designers from day one.
Sure, you work in different departments, but have a web designer present at monthly content strategy meetings and work towards an overall shared brief rather than two separate ones.
Keep pages simple – white space: Work with web designers to keep pages simple and your message/product clear.
Apple is very good at this. Shane Gladstone, content editor at Sticky Content, explains in a blog: “White space has long been used as a design tool by the style press, and Apple too knows its value. By framing its products on pages with much white space, their qualities leap from the screen ‒ colors look brighter, text sharper, products much more impressive.”
Write with a designer's eye: Help the designer by avoiding overly long blocks of text. Make your copy easy to scan, in short, sharp sentences that can make an impact on a site's design.
Shane Gladstone explains, again talking about the Apple site: “On its landing pages, you’ll find short, sharp paragraphs using simple words and avoiding techy jargon. Apple engages rather than alienates by keeping its language simple and straightforward.”
Use copy as design: A copywriter's main concern is getting their message across. So why not make the message a design feature?
Apple takes its key feature and places it slap, bang in the middle of the webpage where its message has no chance of being lost.
Shane at Sticky Content said: “Apple knows what it loves the most about each of its products, and makes sure people visiting its website know too.”
Consider lists: Instead of presenting your web-design team with a bunch of traditional paragraphs, break the text up into bullet-pointed lists.
The rise and rise of BuzzFeed means the listicle is a big deal – capitalize on the trend with some list content on your site. Such lists are much easier for designers to make attractive and clear than a lumped paragraph of text.
Bridie Pritchard at Sticky Content explains in her blog top tips for writing lists online: “Users need to grasp the content of pages quickly and without friction. Using lists can help you do this, without losing essential information. Lists help readers identify key issues and facts quickly.”
Ensure the designers know your aims: You probably know why the copy is going on your site and for what reason, but do your designers?
Ginny Reddish, author of Letting Go of the Words: Writing Web Content that Works, says the creative brief is underpinned by 3 key questions. They are:
1. Why is this copy going on the site?
2. Who is the copy for?
3. What conversations are the personas bringing to this copy?
But if web designers also think about them, then it could help shape the design.