Be kind to your copy. Design.
by guest writer Ffion Evans
So you recently hired your favourite copywriter (Hi Jamie!) and they turned over the most amazing copy for your new website. You wept with joy because it was so beautiful. So magical. So you.Then, you went and tried to design it yourself. If you’re not a pro designer, you undoubtedly made some mistakes, or maybe even unintentionally ruined your gorgeous copy by making it practically illegible to your site visitors.Content is king, as you’ve probably heard before, but there are some common design mistakes I see being made that are causing people to lose out on client connections and product sales.
Here are the design mistakes I see most often (and what you should do about them!):
The Wall of Text
The Problem:You’ve probably given up on reading a webpage several times in the past because of this. Or on one of those loooooong-ass facebook post with no paragraphs. The wall of text refers to those massive and intimidating blocks of solid text with no paragraphs. They are visually boring and just a huge pain to read.The Solution:Remember you’re writing for online, not print. Attention spans nowadays are short, so make sure your texts are easily scannable. Break long passages of text up using shorter paragraphs, headings, subheadings, lists, bold important keywords to quickly communicate vital information, and keep your writing short and to the point. This helps to better structure your content and makes for a much more pleasant reading experience.
Centered Text
The Problem:Center aligning large chunks of text is a common beginner’s mistake.Centered text is painfully hard to read and looks really sloppy. Due to the ragged edges, there’s no consistent starting point for the eyes to focus on. This forces your readers to work extra hard to find where each new line starts and makes reading centered text super tiring.The Solution:Rule of thumb: If you’re not sure of what you’re doing, just don’t. (This is generally a good design rule to live by.) You may inject centered titles, one-liners such as photo captions or similar small blocks of text throughout your design, but do it consciously and very sparingly.Generally go with left aligned or in some instances justified text instead.Caution: Justified text can end up ripping some ugly holes in your text, as it forces the words apart in order for the text to expand to fit the whole line. If this happens when you use it, leave it and use left-align instead. Left-align is always a safe bet.
The Technicolour Font Soup Vomit
The Problem:I’ve seen a ton of this going on lately.I get it, we all want to have hip, sassy, fun designs. But unless you really know what you’re doing, using a blend of too many fonts and colours can seriously backfire and leave your visitors shell-shocked and blinded, distracting or even driving them away from your message and valuable content because “OMG MY EYEEEEEEES!!!!!”. I’ve stumbled across a host of sites recently that are wildly splattering around garish colour combinations and fonts in all shapes, sizes and colours and it just doesn’t work unless you REALLY know what you’re doing. This is why designers get payed to do their job, because not everyone can pull it off.The Solution:Excessive colour and font combinations are disruptive and distracting, and trying to scan a text composed of multi-coloured, multi-sized fonts is super hard.Contrast is an important design rule. It directs our focus to specific elements and prevents things from looking boring. You can (and should) use different colors, typefaces, textures, size, and shapes, especially if you want to emphasize an idea, but don’t overdo it.Mixing and matching fonts is a whole art unto itself and it’s tricky because there are no 100% rules as to what works. Two important principles that play a part are correspondence and contrast. In other words, either use the same fonts throughout the design, or contrast them with significantly different ones. Avoid variations that are too similar in any way.If you’re going to make a font bigger, make is significantly bigger, not just a few point sizes. If you’re going to make it a different colour, make it a significantly different colour, not just a shade or two darker. Offset a font with a very heavy line-weight with something light and airy instead of using another font that looks different but has a similar line-weight. Mix a serif with a sans serif, this works particularly well if you also use contrasting sizes.Or pick one font family, and work with different cuts from the same family.Using typefaces from the same family is a safe bet, they were designed to work together. Look for families that come with a range of options (different weights, styles, cases) to ensure that you have enough variation for your purposes.When pairing fonts that come from the same family, you have to plan carefully to create contrast, varying things like font size, weight (such as light, regular, and bold), and case (upper, lower, small caps).When you combine multiple typefaces on a design you need them to coexist comfortably — you don’t want to distract the viewer with the question, “are these the same fonts or not”?Overall, try to limit yourself to 2 - 3 fonts, one, preferably sans-serif for the main copy, a prominent headline font and maybe a fun script to use sparingly as an eyecatcher.In the same sense, stick to 2 - 3 colors: too many colors can make your design look garish, overwhelming, and cluttered.I recommend having one or two main brand colours and one colour for highlights (such as buy now buttons or highlighted elements.) Consider using a colour palette generator such as Kuler. Use a primary color to create the overall unifying theme of the design. Add a secondary color in lesser proportion to create contrast and spice things up visually. Finally use a touch of accent color to provide that final touch of elegance.
Remember, when it comes to design, simple is best, less is often more.
Let your amazing copy shine by making your reader’s experience pleasant, easy and distraction free.
Want more?
Click through to get my free guidebook covering 17 common design mistakes I see people making and what to do about them.
About the Author
Hi, I’m Ffion, graphics and webdesigner at Kaleidoskop.
I create mindblowingly beautiful custom websites and design work filled with personality.I love working with creatives, entrepreneurs, business punks and rule-breakers. I have made it my mission to create funky fun design madness across the web. I’m done with the cookie cutter that’s swamping the web, and so are my clients.