When I was pondering on what to write about this week, I came across a website that was so ugly and terrible that it inspired this whole post.
Bad website design could be the difference between a website that works and one that harms your business.
Is bad website design killing your business?
As a freelance copywriter and content writer, I spend a large proportion of my time surfing the web for information. And some of the websites I see are shocking.
There are all kinds of reasons why your website could be harming your business — from painfully slow loading and broken links, to copy that doesn’t hit the spot.
But in this article, I’ll be looking specifically at bad design. The kind of design that frequently makes me want to shoot back to Google and find something less offensive to look at.
Why bad web design happens
A lot of the bad website designs I see are DIY jobs.
Designing your own website is easier now than it’s ever been, with a variety of online tools and templates available. But not everyone has an eye for design and this is glaringly apparent when they publish their creations.
If you’re considering designing your own site and want to learn more from someone who’s been there and done that, you can read my guide to the pros and cons of DIY website design >>
Some bad website designs are professional designs that have clearly gone awry.
Maybe the client insisted on an ill-advised change. Or there were unresolved issues between the client and the designer that resulted in parts of the website being left unfinished.
Why bad website design is harmful
Studies have shown that it takes less than two tenths of a second for visitors to form a visual first impression of your website. And that first impression will likely determine whether or not they choose to stay.
That means you have about 0.2 seconds to make the right impression with a design that:
A design that’s ugly, looks amateurish or gives a bad user experience could be repelling your prospects and turning them away.
- Is on-brand and visually appealing
- Looks professional and polished
- Shows you care about your visitors’ experience
- Draws visitors in and makes them want to see more.
If you have a sky-high bounce rate, or your website is getting visitors, but not converting them into customers, you could be making some of these elementary errors.
15 Cringeworthy web design mistakes
1. Crazy clutter
Some websites have so much going on, you don’t even know where to start. You can’t see it on this static screenshot, but this website is also animated — just to add to the general busyness. And, unbelievable as it might seem, the clutter has been toned down since last time I looked!
On Ling’s website, everything is crammed together with very little breathing space around it. And there are lots of links, buttons and interactive elements that are pulling your attention in all directions.
This makes it hard for your eyes to settle in one place and really understand what you’re looking at.
The example below is from a Miami company called ‘Gates N Fences’. Again, there’s so much going on here, you don’t know where to start. The design is dated and the amount of text is so off-putting, you just want to leave immediately without reading anything!
When I designed my first website back in 2010, this three-column format was popular. But we’ve since realised that having so much in the frame is distracting.
Most modern websites have a much simpler one-column format. They start with a large heading that immediately draws the eye, then have body copy interspersed with more headings and calls to action as we scroll down the page.
The good news for an amateur web designer is that this makes designing an effective and professional-looking website much easier.
2. Pesky pop-ups
Pop-ups, like the ones below, are generally an unwelcome distraction that disrupts the user experience.
How can visitors possibly know if they want to sign up for your marketing emails before they’ve got a sense of who you are, what you do and whether it’s something they’re likely to need?
When visitors arrive on your website, you can reasonably assume that they want to read what you have to say. They don’t want to be bombarded with one pop-up after another and have to close them all down first.
If you must use a sign-up pop-up, have it set to appear when your visitors are leaving rather than when they arrive. Then at least they’ll have had the chance to decide if they want to sign up.
3. Frightful font choices
When I designed my first website, there were only about five web fonts to choose from. Now there’s a much wider choice, but this isn’t necessarily such a good thing.
On some websites, the fonts are chosen for creativity rather than readability. These fonts can be difficult to read and create the wrong impression of your business.
Let’s look at some examples:
And in case you can’t read those, here are the transcripts:
Remember the website I mentioned in my opener — the one that inspired this whole post?
Well it was written in this font, in this colour, on this background in 16 point text, which is tiny and very hard to read. I lasted two minutes before I gave up and left.
If you want your business to look professional and be taken seriously, avoid cartoonish fonts like this one. Seriously.
The only place a font like this belongs is on the wall of a nursery school — and even that’s pushing it.
Unless you hate your audience and want them to suffer, you should avoid using novelty fonts like this one.
Yes, it might seem perfect for your medieval banquet business, but it’s not user friendly and after time it will make your eyes go googly!
I often see fancy fonts, like these, used by florists and other wedding suppliers.
They may look whimsical and romantic, but they’re also a quick way to make your audience fall out of love with your website!
How to choose an effective font for your body copy
The font you choose should:
- Be legible and easy to read on a screen — even at a small size
- Look professional and businesslike.
Most body copy fonts are either serif or sans-serif.
Serif means the font has serifs, which are little line details on the letters.
Sans-serif means without serifs.
Here’s an example showing the serif and sans-serif version of the same font. On the serif font, you’ll notice that capital A has the little line details on its feet. On the sans-serif font, these line details are missing.
Serif fonts are usually used for the body copy in books. But for websites sans-serif is more widely recommended, because these fonts are cleaner and easier to read on a screen.
If you want to be more creative with your font choices and use some of the fancier ones, my advice would be to just use these in your headings and keep your body copy plain. Headings are larger in size and and shorter in length, so they’re generally less problematic.
4. Too many fonts
Almost as bad as using the wrong font, is using too many fonts.
Too many fonts on the same website is chaotic, confusing and distracting. It doesn’t give an impression of a confident, cohesive and well-thought-out brand.
Ideally you should aim to stick to one or two fonts — three at the most.
Here are a couple of examples of how to use them:
5. Poor contrast
Reading from a screen is more difficult than reading from a paper. And that difficulty is dialled up even further if you get the contrast wrong.
When you’re choosing the colours for your text and background, you need to make sure there’s a good contrast so the text stands out.
Let’s look at these examples:
- Pink text on blue is popular, but it’s nauseating. Often the blue and pink are brighter and more vivid than this. It’s unpleasant to read, which can be really off-putting to visitors.
- The black and grey combo might look cool and sophisticated, but the contrast is poor, which makes it difficult to read.
- Choosing a bold background colour, like red, and adding white text makes a statement. The contrast here is good but it’s not necessarily pleasant to read a whole website from. If you’re going to do something like this, do it sparingly.
- You can’t go wrong with dark text on light background. Yes, lots of other websites do it, but that’s because it works and it’s comfortable for most people to read.
6. Busy backgrounds
A striking image can make a bold statement on your website, but you need to choose carefully.
If you place your text over something busy, you might find it becomes camouflaged or disappears completely.
Even if your design looks okay on a desktop, a responsive design can cause things to move around on smaller devices.
In this example, there’s so much going on in the background, it’s hard to read the copy.
In this better example, the picture has enough clear space for the text.
One of the most common web design mistakes I see is in the formatting of the copy.
7. The impenetrable wall of copy
Too many websites are formatted like this: a heading followed by a wall of solid copy with no paragraphs or breaks. Being faced with this amount of unbroken copy on a screen is off-putting to your visitors.
But there are several devices you can use to change this and break up the copy, to add white space and improve readability.
Use short paragraphs and add headings
The best way to make sure visitors want to read your copy is to make it look more appealing. Adding SEO subheadings also makes it easier to skim-read, which is how most people read online.
Use call outs
Another way to break up the text is to use call outs to highlight important information.
A call out might look something like this: a coloured panel containing an important statistic or interesting quotation.
Use bullets and CTAs
Bullet points are a great way to break up the text and deliver information in a way that’s easy and accessible.
A CTA, otherwise known as a Call To Action, is usually in the form of a button or link that takes the visitor on the next phase of their journey through your website. That might be to go another page of your site, to make a purchase or to get in touch with you.
Your CTAs should be carefully considered and well placed for maximum conversions. For more information on this, check out my article on 5 Ways your CTAs are killing your conversions >>
8. Alignment issues
There are three ways to align the text on your website, but two of them don’t make for easy reading.
Keeping all your content aligned to the left margin is more natural and makes it easier to read.
9. Illegible leading
Leading (pronounced ledding), essentially refers to the amount of space between each line of text in a paragraph. Getting this right means your text is easy to read and looks right on the screen.
Some lower case characters have what we call ‘uppers’ and ‘downers’. These are the parts of the letter that stick up or hang down.
Characters with uppers: b, d, f, k, l, t
Characters with downers: g, j, p, q, y
If the leading is too tight, the uppers and downers will touch and the text will be difficult to read. If it’s too loose, it can look wrong.
To show you what I mean, here are some examples:
10. Borderless content
Some apps and templates require you to set up your own borders. If you don’t, you get a website that looks like this, with copy that goes right up to the edge of the browser window. This is a sure sign of an amateur, so it’s something you really want to avoid.
If you’re using a two-column format with no borders, your text can crash in the middle, making it unreadable — as shown in the example below.
Two-column text isn’t always advisable, so the best way to avoid problems is to stick to a more simple single-column format.
11. Shifting styles
Most websites evolve over time. Administrators change, new pages are added and — unless you have an effective Cascading Style Sheet (CSS) in place — existing styles can evolve too. Fonts, colours and styles change from one page to another.
Sometimes what you’re left with is a Frankenstein’s monster of a website where there’s no consistency or sense of cohesion. This can be jarring and confusing for your audience.
If you can’t establish an effective CSS, it might help to write down all the details in a document that all your website administrators can refer to. This would include:
- Heading fonts, sizes and colours* (for H1, H2, H3 etc)
- Body copy font, size and colour*.
*Use the web colour code, which is 6 figures preceded by a hash, e.g. #336699.
The images on your website can create a misleading impression of your business that makes you look cheap and amateurish. There are several things to watch out for here and I’ve reworked my homepage into a handy example that shows most of them.
12. Rough cutouts
Let’s start with the header in this example, which looks sloppy and unprofessional.
If your logos and other graphics are saved with white backgrounds, it makes sense to put them on a white background, so you can’t see the white edges and corners.
You should also make sure your icons are all the same size and that the colours you’re using are consistent with the other elements on the page.
13. Irrelevant images
I’m a sole trader who’s not a great fan of formality, so this image, showing a team of business executives around a boardroom table, is a million miles away from what my business actually looks like. Using an image that misrepresents your business like this can come across as fake.
The written and visual elements of your website should work in a unified way to clearly communicate who you are and what you do. So, when choosing images for your site, try to stick to pictures that are authentic, genuine and relevant.
If you’d like more help with this, I wrote this post on How to choose more creative images for your website >>
14. Talkin’ bout resolution
Pay attention to the resolution of the images you use and make sure they’re good quality and web-friendly.
Low-res images, like the one in the example, are poor quality and will appear blurry and pixelated.
High-res images have larger file sizes and can slow down your website.
What you need to do is take the high-res versions of the images and optimise them for the web. Optimising allows you to reduce the file size without any noticeable reduction in quality.
When I optimise my images, I first make sure the resolution is set to 72 dpi, to make them web friendly, then compress them further using Tiny PNG.
15. Watermark warning
The © sign you can see across the centre of the photograph is called a watermark. You get watermarks like this if you’ve used a low-res composition version of a chargeable stock image. You have to pay for image to get the high-res unmarked version.
I can’t tell you how many websites I’ve been to that have these low-res watermarked images in place.
The first impression this creates is either that you’re cheap, because you haven’t paid to download the proper image. Or that you’re sloppy and careless, because you’ve left the watermarked image in place and seemingly haven’t noticed.
A handy recap
This article has given you 15 cringeworthy examples of bad website design. So, here’s a recap of the good advice you can take from this and apply to your own site.
- Avoid clutter and use plenty of clear/white space
- Stick to a simple single-column design
- If you must use pop-ups, set them to appear when your visitor is leaving your site rather than when they arrive
- Choose clear, legible fonts that are easy to read on a screen
- Stick with one or two fonts — three at most
- Using dark text on a light/white background gives you the best colour contrast for easy reading
- If you’re using a photo or pattern as a background, make sure it’s not too busy and has enough clear space for your text to sit on top
- Split walls of copy into paragraphs with white space between them
- Use headings and subheadings to guide the reader through the text
- Left align your text for easier and more natural reading
- Make sure the leading on your text looks right and not too tight or loose
- Set borders on your pages to keep your text away from the edges
- Use fonts, colours and layouts consistently — especially when adding new pages to your site
- Make sure like elements, such as icons, are all the same size and colour
- If you’re using stock images, make sure they feel authentic and relevant to your business
- Make sure your images are high-res and optimised for the web
- Download any chargeable images so you get them at the best resolution and without the watermark.
Problems with your website?
If your website isn’t doing what it’s supposed to — i.e. making you money — and you’d like to find out what’s wrong, I offer a comprehensive website auditing service.
A website audit will show you where the problems are on your site and give you constructive advice on how to fix them and make the improvements you need.
For more information:
- Visit my website audit page
- Read my blog post: Everything you need to know about my website audit service
- Contact me to discuss what you need.