I’ve spent over 40,000 hours designing websites, here’s my top 10 mistakes to avoid

What's up my fellow IndieHackers!

Craig Barber here, Senior Product Designer.

I’ve spent over 40,000 hours designing websites.

Websites for some of the biggest brands in the world including Citi, LG Mobile, Samsung and PayPal.

In this post, I’m going to cover the top 10 mistakes I see designers making right now in the marketplace.

Let’s dive in.

1. Using low contrast colours

Using colours without enough contrast is a big no-no. Especially when it comes to typography.

You must use high contrast colours for your background and your type. Don’t make this mistake.

Not only is this bad design. It makes things really difficult for people with vision impairment. Accessibility is something we must take into consideration.

Don’t know if your colours are high contrast enough? No problem. Here’s a free tool to help you out.

2. Using too many colours

Some designers use way too many colours in their designs.

Not only is this bad design. It creates a bad user experience.

It directly affects things like click-through and conversion rates.

Your users get overwhelmed with colours grabbing their attention.

My advice is to use just 3 colours. One for your background. One for your typography. And one for your accents - things like buttons and calls to action.

3. Designing for desktop only

It’s 2022. There’s no excuse for websites that don’t work on mobile.

The crazy thing is still major sites that don’t work on mobile.

Always make sure what you’re designing are modular and responsive.

In some cases where users are mostly on mobile. You should be designing for mobile-first. And desktop second.

Remember. Modular design for the win.

4. Too little tap space on mobile devices

Don’t overlook is tap space on mobile.

By tap space I mean the space someone’s finger needs to tap something on their mobile device.

Neilson recommends “Interactive elements must be at least 1cm × 1cm (0.4in × 0.4in) to support adequate selection time and prevent fat-finger errors.”

Yes. You read that right. ‘Fat-finger errors’ are a thing.

Make sure you are designing with enough space between your UI elements. I particularly see this mistake when it comes to navigation menus on mobile devices.

Be sure to have an excess amount of space around your UI elements on mobile for the win.

5. Covering up UI elements with widgets

There are a lot of 3rd party widgets being deployed on websites.

Things like chatbots and cookie consent modals.

Often these widgets are overlaid on top of important elements like navigation.

This is a big no-no. Make sure your 3rd party widgets don’t obscure important parts of your website.

Always test your final developed designs on mobile and make sure nothing is overlaid. Your users will thank you for this.

6. Using too many fonts

Using too many fonts is quite common.

When you use a bunch of different fonts it creates more work for your users. They have ‘decipher’ each different font.

It creates a cognitive load.

It also looks poor from a design aesthetic standpoint.

I recommend using just one font. Use just one font and utilise different weights for variation.

7. Typography too small

Occasionally I’ll come across a site where the typography is just too small.

It’s particularly common in things like the website footer.

In general, your font sizes should not be lower than 14 pixels.

Be kind to your users. Adhere to accessibility by using large typography especially when it comes to mobile website design.

Don’t know what’s too small? Here’s a free tool to help you out.

8. Too complicated to use

Occasionally I come across websites that are so experimental they are unusable.

I’m talking about things like crazy different navigation, experimental typography and over the top animations.

I get it. As designers, we want to push the envelope a little.

For the sake of your users. Be mindful.

Leave the crazy stuff for your folio or your local art gallery website.

9. Too many things on the page

Some designers cram way too much information into any given space on the page.

I know. You’re trying to get as much bang for your buck.

And hey the client asked for it.

You must let your design breathe.

Allow ample space for a limited number of elements within a given space.

For example, If I’m designing a simple brochure-type website I like to put just one block of information in their viewport.

This allows the user to absorb the information before scrolling down to the next section.

Remember less is more.

10. Slow page load speeds

Our users are impatient. If your site takes too long to load, people will leave. The average bounce rate is measured in just seconds.

Avoid heavy video on your home page. Also be mindful of large, high-resolution images that take ages to load.

Lastly, Google also ranks page speed as a major factor when it comes to search engine optimization. And mobile experience is a top priority for them.

Make sure you’re using optimized images. Formats like SVG and WebP can help with reducing page load speed.

Summing up

The website design industry is extremely competitive.

Avoid making these mistakes and you will be well on your way to that next awesome product design gig. Or your next big client.

Want to learn more about website design? Check out my new course coming soon