THE BLOG

As we waltz into February, traditionally the month of love thanks to Saint Valentine of Rome, let’s talk about the greatest love affair of all time. Don’t get me wrong it has definitely evolved through the ages but since writing was first discovered (I think we’re looking at Mesopotamia 25,000 BC) there has always been someone who has said we can definitely zhuzh this up. That’s where design comes in and elevates copy. As with any relationship, design should bring the best out of the copy and support the message. 

I would imagine for most of you the first design & copy pairing you would have seen would be your children’s books, comic books or a newspaper/magazine lying about the house. In fact, for website design vintage magazines and their layouts is such a great way of finding inspiration for modern designs. 

I’m also absolutely in love with some of those Victorian adverts. As you may not have seen them I thought I would include one here, not only are they a marketing marvel, and a fantastic example of a simplistic black and white version of design meets copy, even in 2024 they will absolutely spark a conversation. For all you product sellers out there this is how you do it. Let’s break down the basics: Title that tells you what the product is, image that shows you what the product is, a royal endorsement (read testimonial), the copy that sells you on the product and where you can buy it obviously. If you look closely, the font choices and the boldening of certain words highlight the important parts of the copy to attract the attention of the reader so they will stay and read more.

So why is it important to pair good design with copy?

I feel like this is obvious, but I know for some it isn’t. If your website looks like a word document you are going to lose your readers pronto. 

It’s a bit like reading ALL the instructions of the latest gadget you just bought, or the insert of the side effects that comes with your packet of paracetamol. Who reads it all? Not me, that’s for sure. I’m still unsure about 60% of the features on my new washing machine, have I worked out how to use it? Sure, am I making the most of it? Of course not, that would involve reading the instructions.  

So you need to entice the reader to read it, and you do this not only with great copy but with design. If we go back to magazines, you are more likely to pick up the magazine if you like the cover and then maybe you’ll look at what articles they’re advertising. Similar to books, sometimes the cover design, and the title, is a lot better than the actual book that is now sitting unread on your bookshelf because it had a pretty cover but the book itself? Absolute rubbish.

If we look at the example above, and this has been printed in a newspaper probably in the 1800-1900’s so we’re not talking high tech here but they have all the key elements of the ideal design & copy pairing.

OK, but what does that actually look like, in today’s world?

I hear you, you’re not buying a horse riding contraption but let’s be honest this is 1 step away from a Peloton. However, let’s look at a more simplistic example that is more commonly seen on our IG feed.

Who’s morning routine are you going to be more interested in? 1 or 2?

I’m guessing the first right? Even though the second one has a little bit of design with the use of italics over normal text it’s not that enticing.

If you saw a social media post like the left you have already bought into that person’s morning routine, whatever it is. Bonus points if that creator actually lives by the beach and then proceeds to tell you if you buy their programme this could be your morning routine too. And the only difference here is a background photo, literally 1 photo. If you have spotted that the design isn’t that good either because there’s not enough contrast between the text and the photo then give yourself a gold star. That’s the point. Design should be enhancing the copy and not blocking it.

How about great design?

Great design will consider the copy, work with it and make sure that copy is actually legible. My biggest bug bear is a design that does enhance the copy BUT you can’t read it or actually the design doesn’t make much sense. Let’s revisit the previous design and give you another couple of examples.

By tweaking the first photo and increasing the opacity on the background photo  AND pulling the text forward a little bit by giving it an indent you can read the text better and it gives you a softer feel of a morning routine. It evokes soft, warm, early mornings by the beach. 

The second one although not a bad design, the text is fairly legible BUT is that your ideal morning routine? I mean it looks like a lot of fun but it’s unlikely to be sustainable. This is where the design isn’t embracing the copy instead it’s doing the opposite. I’m not saying it’s a bad thing because the second one prompts an unpopular opinion and will definitely spark a discussion but it’s not selling a boujie by the beach morning routine and therefore a lifestyle that is no doubt on your vision board. Or is that just me? Morning routine on a warm sandy beach? You can bet that’s an Atomic Habit I can get behind.

But, how do I make my copy pop on my website?

So far, I’ve covered the social media side of things, purely as an illustration. Your long form content though is primarily going to be on your website or on your blog posts. As we’ve discussed, a long amount of text needs some design to make it more palatable for your readers. Let’s look at some website examples.

OK you might want to ignore the copy, this is purely done for illustration purposes.

Hopefully for this example you will go with option #2 and not option #1. I have actually seen websites look like Option 1 and the information is there, don’t get me wrong the copy could be so fantastic that if you were giving a Ted Talk to your followers/website visitors people would be throwing their money at you. Your SEO could also be top notch and you’re converting the hell out of it BUT let’s play devil’s advocate for a minute. We live in a very visual world, your website could be #1 on Google, and you will be found BUT if you’re a wedding photographer and your website looks like your granny had a bit of a go on Microsoft Word chances are your ideal client might not consider you their first option.  

As a web designer, if this was my niche, I would be highlighting my clients photos on their website to complement their copy. I would like to note these are not perfect examples of what you will see in the wild, and by wild I meant the world wild web BUT they do illustrate HOW design can enhance copy and how the lack of design makes it look like the instruction manual that you’ll never read. I know I will only be reading the washing machine instruction manual when it breaks or I need to clean the filter.

I definitely don’t want to be boring but I can’t afford a designer?

I totally get you, you’ve built your own website or you’re about to. I’m hoping you’ve invested in great copywriting, honestly so important, and you have some half decent photos but how do you uplift your design without looking like you did it yourself?

There are 3 main things you need to consider. Fonts, Colours & Images.

Let’s start with Fonts, even in the terrible options I’ve shown you I’ve still played with the fonts in order to add a design element. I’ve made the font italic to highlight words, it’s pretty basic but will absolutely uplevel your existing basic arial font, which obviously you haven’t used….. (I’ve used Playfair Display here for reference) 

Your Brand Colours should be consistent throughout your website and it’s also a really nice way of highlighting a section of your copy. Let’s say it’s the testimonial or one of your packages making the row behind it one of your branding colours works really well. I also find that if you use that same colour for your testimonials throughout your website it becomes recognisable and visitors will automatically know that colour references your social proof. Of course that’s a personal preference but think about it.

Lastly, I’ve used photos to illustrate the point that I’ve made with my copy.  If we stay on the subject of weddings (it’s an easy one) and you’re a florist you are going to be showing your most beautiful bouquets and floral decorations that you’ve done on your website as part of your services page. You will also back that up with some descriptive copy of said bouquets and arrangements.

I don’t have many photos of my services/product for my website

This is an easy one, there are plenty of stock photo websites where you can download suitable images with no licence to be used on your website. My personal favourites are Pexels and Unsplash but there are plenty of others. 

You absolutely do need to be careful though, refrain from using photos that are completely outside your usual aesthetic or branding colours. If your brand colours are softer and on the pastel side and your copy evokes a soft and dreamy vibe don’t pick photos that have bright bold and clashing colours. They will negate your beautifully worded copy and it will just clash. 

The only way I can illustrate this clash is if you have read a popular book and you have the protagonist (s) in your mind’s eye based on the writer’s in-depth description. Then that book gets made into a film or TV series and casting picks an actor that looks nothing like what you had in your head you might not give that film a fair chance. In your mind there is a complete clash and it makes no sense. It’s the same when the design or image doesn’t enhance the copy but clashes with it. 

What have we learned?

Design and copy is the ultimate partnership. Pairing great design with stand out copy not only enhances the copy but makes it stand out and supports it wholeheartedly. Design can be defined by the fonts, colours and images you use that will elevate those beautifully written words, in any format. 

Have questions and want a web designer to elevate your beautifully written copy? Contact me here.