10 common design mistakes I see on websites and how you can fix them

Since becoming a web designer, I can’t help but critique every website I come across. I’m sure you’re the same in your speciality too!

I thought I’d let you know some of the most common things I see that affects the user’s experience of the site, so you can see if you do them on yours and what you can do to fix them right now.

#1 Reduce the line length

The problem:

You want visitors to read what you’re saying, so you need to make it as easy as possible for them. One way you can do this (and the most important IMO) is to reduce the line length. This is how wide a block of text is. Newspapers have a very short line length organised in columns, which means you can read a line without your eyes having to travel from left to right. The wider it is, the longer it takes for the reader’s eye to travel to the next line, and therefore read what you’re trying to say. They are also more likely to lose their place.

The fix:

I usually make a line of text no wider than 800px, or around 20 words. The best way to do this is to set a maximum width in CSS, or use that option in your website builder.

#2 Condense the number of pages

The problem:

Not much content on each page, so the user has to keep clicking and loading different links. Content is hidden on the other pages, making it hard work for the visitor to get the information they need.

The fix:

If your site doesn’t have that much info, then why not group some together? Your about and contact pages could be on the same page so it’s easy to find the information. Or you could even just have your homepage as one long scrolling page, with links in the menu that jump down to different headings (these are called anchor links). See how I did this for The Wild Bluebell here.

#3 Make it super clear what the website does/what the product is

The problem:

Someone visits your site, but they’re faced with an ambiguous photo, and a chunk of text they have to read to understand what you do. They have a brief browse and leave.

The fix:

You need to have a clear headline at the top of your landing page which is in a larger or bolder font than everything else. It needs to be a sentence that answers the question of what you do/are offering and why. How YOU (or your product/service) can help THEM (the visitor). Donald Glover goes into a ton of detail about this in his book ‘Building a Storybrand’. I’d definitely recommend it. Basically just make everything as easy as possible for the visitor.

#4 Reduce the amount of text on your landing page

The problem:

You have long paragraphs of text on your landing page that no one reads.

The fix:

You should be able to scroll down your landing page while squinting and still be able to understand what you do/are selling and what the website is there for. Sub headings, pull quotes, images, icons all break the text up so it’s easy to read. Make sure the text on your site is absolutely essential. You can go into more detail on other pages (as people are already invested in you) but keep your landing page short and sweet. Think about what you would want to know if you visited the site, or ask someone to spend 30 seconds looking at your landing page and see if they got the gist of things and are intrigued. For example, I’ve replaced my headling ‘about me’ with ‘helping brands communicate’, which has already told the user something I want to tell them, even if they don’t want to commit to reading a whole paragraph.

#5 Use more spacing

The problem:

This is a HUGE one for websites and printed materials. If you bombard the user with information then they won’t know where to look and might not look at any of it at all.

The fix:

In the case of websites, you have a lot of space to play with, so make the most of it. Spacing goes a LONG way to making a site look professional, it gives the content room to breathe and makes it easier for the user to digest at each point of their scroll.

#6 Make sure the text is the correct size

The problem:

Since making the text as easy to read as possible, make sure your paragraph text is the right size. Too small and it’ll be a struggle on the eyes, too large and your site could look unprofessional and junior.

The fix:

As a general rule your paragraph text should be around 16px-18px, although this does depend on the font.

#7 Ensure the site is responsive

The problem:

Tiny buttons which are fiddly to click on mobile, text that is too small or large and too much or too little spacing, things not in proportion when viewing on mobile.

The fix:

With more people than ever using their phones to browse the internet, it’s essential that your website is easy to use on mobile. Check the things listed above and see if your website builder allows you to change them for specific screen sizes. If not, then you might need to add a little extra CSS code in the form of media queries.

#8 Guide the user

The problem:

There are so many different links on your landing page that the visitor isn’t sure where to go or where you want them to click.

The fix:

Let them know what you want them to do, and keep reminding them. For example, if you’re selling something, or you want the visitor to view your services, include multiple, clear buttons directing them there, so you know where you want them to go. At the bottom of each page, make sure that the visitor has a link to click on, so they don’t click that x!

#9 Ensure the site has clear hierarchy

The problem:

Your website has too much large text that isn’t the most important information, you don’t have clear headings or subheadings.

The fix:

Hierarchy is everything in design. You want the most important information to be the clearest – this isn’t always the largest, it could be that it’s in a different colour, font, has more space around it or it’s bolder than the other information. Make sure that your headlines are as clear as they can be, and that they say the most important information.

#10 Use professional photos

The problem:

Imagery is so important, your eye picks up visuals before you’ve read anything, so you need to make sure that any imagery you’re using represent your brand perfectly.

The fix:

If you have a smaller budget, some great stock photos can be found on Unsplash. If you’re happy to pay a little, then Death to Stock is worth a look. If you can pay for a photographer and need product photos or portraits, then let me know and I can send you some recommendations.

If you need a hand or would like me to work on your website – just reach out to me!

Sign up to my newsletter! It'll be good I promise.

All content © Chloe Ford 2020

Typography

Logos

Moodboards

Take a look at

my prices

Enter your email address and I’ll send you a link to my quote builder. 

Remember to check your junk mail!

.