6 catastrophic blog design mistakes & how to fix them

Top blog design mistakes to avoid and how to fix them

Are you making these catastrophic blog design mistakes? The path to successful blogging isn’t all about creating awesome content (although that’s certainly important!) – it’s also about presenting that content in the best way possible for your reader.

If your blog is well designed with easy-to-read content then your readers are more likely to spend more time on your site and click through to other pages.

However, if your blog is messy and cluttered then it may cause them to leave your blog straight away without taking the time to read your content.

Here are six common design mistakes that bloggers often make, particularly newer bloggers who are just getting started learning WordPress or their blogging software of choice.

If you’re making any of these blog design mistakes then don’t panic; most of them are easy to fix.

1. Using too many fonts

Using too many fonts on your blog is a huge blog design mistake.

It causes confusion to your readers as they don’t know which parts of the page you want them to focus on.

Using too many fonts stops the reader from being able to focus on your content. Their eyes are being constantly drawn to different styles and typefaces.

It’s advisable to have a couple of different fonts on your blog to help differentiate between headlines and body text, but try to stick to a maximum of three fonts.

Take a look at this example:

Limit your blog to 2-3 fonts to improve the design

The box on the left uses five different fonts and the result is a hot mess.

The fonts don’t match because they are all different sizes, weights and styles. This gives a messy, cluttered and unprofessional appearance.

In contrast, the box on the right uses two coordinating fonts for a cohesive, slick appearance.

You can find a huge collection of free fonts over at Google Fonts and also Font Squirrel.

2) Making text unreadable

If readers can’t easily read your text then they will probably give up and leave your website.

If you have a light background on your blog, don’t use a light coloured font as this causes eye strain and makes it difficult to read your articles.

Similarly, if you are creating graphics for your blog then take note of the background colours you are placing text on.

In the example below some text has been placed on the same image.

The text in the left box is very hard to read because it’s black text on a dark grey and dark purple background.

The right box has text that is much easier to read. It’s the same font and the same size – the only thing that’s different is the colour.

Ensure your text is readable when it's placed on top of an image or coloured background

(If you like this photo, you can download it for free as part of the “Haunted Halloween” collection in my Free Stock Photography Library)

Choose your colours carefully to ensure easy readability when placed on a photo or coloured background.

In general, opt for dark text colours if you’re using a light background and light text colours for dark backgrounds.

3) Using poor-quality photos

Poor photography is probably one of the top things to drive readers away from a blog article.

It screams ‘unprofessional’ and ‘amateur’ – and are those really two words that you want to be associated with your blog?

In the example below, the left photo was taken on a phone. It’s dark, blurry and it’s been stretched out of proportion to fill the space.

Although obviously the puppy is still super cute (spoiler alert – that was my dog when we met him for the first time), it’s not a good photo choice.

Conversely, the image on the right (same dog – five years later) is a much better photograph and better depicts the type of photo that you want to put on your blog.

It’s bright, colourful, in focus, resized in proportion and the image is crisp and sharp. It was taken outside in natural sunlight on a DSLR camera which is much better than taking photos inside on your phone (and you should never use flash!)

Use high-quality photos in your blog posts to keep readers interested

Now, I’m not suggesting that you need to invest in a posh camera to take your own photos for your blog.

Many bloggers rely on stock photography for all their blog images.

There are many different stock websites out there so you are bound to find perfect images for your blog. There are loads of free or very cheap stock photography sites.

Check out my free Photo Library to access all my collections of photos for bloggers.

If you run a blog that requires your own original photos (e.g. a craft blog or DIY tutorial blog) then a little practice can easily turn your photos from the ‘bad’ example above to the ‘good’.

4) Making text size too small or too large

Have you ever stumbled across a website and then left it because the paragraph text was just too small? I certainly have.

Making text too small to be easily read is a common design mistake that really easy to fix.

Increasing your font size can even increase your blog’s ad earnings. It encourages readers to scroll through your page and stay on the article longer. This is great for your banner ad impressions!

Popular blog advert network MediaVine suggests a font size of 18px for your paragraphs. Check out their font size article for more information, and for tips on how to increase the font size on your blog.

Remember though, it’s not just making the font too small that can be a design fail.

If your headings are too large in comparison with your main article text then this gives an uneven look to the page. Instead of your headings being a useful break-up of content for a reader to scan though, they become too obvious and distracting.

How to choose the best font size for your blog

You can see in the example above that the left heading is far too large. It makes the rest of the text look small and all your eye really focuses on is the larger text – it’s difficult to read the sentences underneath.

The more moderately sized heading in the right box matches far better with the text underneath. It’s still obvious that the first line is a heading, but it blends far better with the rest of the content.

5) Poor colour contrast

Poor colour contract is one of the things that makes me leave a website before I’ve really given it a chance.

If the colours used on the blog are hard to read then it shows a lack of consideration for the reader and I usually just give up. Nobody wants to have to squint or lean towards the screen to read your text.

Bad contrast vs good contrast

Using good colour contrast is important for accessibility.

If someone is visually impaired then they may find it almost impossible to read text that’s put on a background with poor colour contrast.

To make your blog as assessable and easy-to-read as possible, consider your colours carefully.

Try putting your colours into this free colour contrast checker to see how the colours go together.

You can read more about colour contrast and the effect it has on your blog’s usability and accessibility in this article by the UX Collective.

6) Using too many colours

Using too many colours is another colour related design mistake similar to the contrast issue mentioned above.

If you look at most well-designed websites and blogs you can see that they use a limited colour palette across their whole site.

This gives a feeling of consistency and cohesion which soothes the reader. It makes them feel comfortable reading the website as all the colours match.
 
As you can see with the examples below, the one on the left with lots of different colours is rather hard to read. It’s difficult for the eye to quickly scan the content as it keeps getting distracted by the colours.

Using too many colours is one of the top blog design mistakes

The image on the right is much easier to read as it only has three colours and they all coordinate with each other. In case you hadn’t already realised, this is my blog’s colour scheme J

I use a dark grey for my main body text and then a dark teal and bright coral as my standout colours.

These three colours are used across this whole blog so that as you travel through the website you become familiar with it and know that you are still on the same website.

In my opinion, every blog should have a brand colour palette so that the blogger knows exactly what colours to use every time they make a new graphic or add something new to the web design.

This colour palette should be limited to 3 – 5 main colours which all coordinate nicely (and have good contrast – see Point 5 for more info).

Your colour palette might be as simple as a piece of paper where you write the hexadecimal codes of your brand colours to make sure you always use the exact same shades.

Or, you could go more advanced and create digital brand guidelines to save the colours for future reference.

What are brand guidelines for blogs?

Brand guidelines are really useful because they save all your blog design information in once place so that you never forget anything.

This might include your logo, the fonts you use on the website, text sizes, colours and even your favourite places to find stock photos for your blog posts.

They don’t need to be complicated – even just writing all the information in a Word Document is a great way to ensure consistent and beautiful branding across all of your blog posts.