Whether you’re building a website yourself or hiring someone, it’s important to make sure that you avoid all of the common web design mistakes (and learn what to do instead).

Many professional web designers make these mistakes too – it’s not only beginners who need help. If you’re outsourcing the creation of your website, be sure to run their work through our checklist!

So, which common web design mistakes should you avoid and what should you do instead?

There are countless mistakes that can be made when building a website, but we’ve distilled them down into the most critical 16.

If you avoid all of the following 16 mistakes, your website will already be superior to most websites on the internet:

1. Too many different colours or fonts

Let’s avoid creating a terrible website like the one below…

The first step to achieve a clean and modern design (unlike the one above) is to limit the amount of different colours.

You should almost never use more than 1-2 prominent colours. Using too many different colours will make your website look messy and overwhelming.

By using less colours, your website will look more professional and approachable.

For a more comprehensive checklist on how to select colours, check out WordStream’s Website Colour Scheme Guide.

The second step is to limit the amount of different font styles and sizes.

You should almost never use more than 1-2 font styles.

If you use 2 font styles, then 1 should be strictly for headings and 1 should be strictly for body text.

For font sizes, you should have a standard size for each situation and you shouldn’t deviate from it.

For example, all primary headings might be 55 pixels, all secondary headings might be 35 pixels, all body text might be 18 pixels, and so on.

Keep your font styles and sizes to a minimum to prevent your visitors from leaving!

For a more in-depth article on how to select the right fonts, check out Qode Magazine’s Website Font Guide.

2. Not enough (or inconsistent) spacing

When all of the different elements and sections on your website are too close together, it creates an overwhelming experience for your visitors.

Spacing (also known as “white space”) is another critical step to ensure that your website visitors stay engaged and that your website doesn’t look “cluttered”.

When you’re adding white space, the trick is to ensure that the amount of spacing is consistent throughout the website.

For example, if there’s 80 pixels of spacing between 2 sections, then there should be 80 pixels of spacing between other sections as well.

Check out Justinmind’s White Space Guide for more complete instructions on how to utilize white space.

3. Not responsive on all devices and browsers

In most industries, the majority of website visitors are using their mobile devices.

This contradicts the approach that many web designers take when building a website. It’s common for web designers to prioritize the desktop version instead of mobile.

However, at Azuro Digital, our Calgary web design service prioritizes the mobile experience.

While most modern website builders automatically optimize some of the mobile features, there are still several things that need to be optimized manually.

For example, the font size on desktop might not look good on mobile. In most cases, the font size needs to be reduced on mobile devices (particularly for headings).

The spacing also needs to be reduced in most cases. If you have 100 pixels of spacing between sections on desktop, you might find that the mobile version looks better when there’s only 50 pixels of spacing between sections.

There are also images to consider – particularly images that cover the entire background of a section (covering the full width of the screen). Since mobile devices are much narrower than desktop devices, you might need to adjust the alignment of an image for it to look good on mobile. Or you might need to use a different image altogether.

You should also consider the fact that some functionalities simply don’t exist on mobile, and you might need to completely rethink your approach as a result.

For example, website visitors on desktop “hover” on top of the website with their mouse. This allows the web designer to create sections that change or adapt whenever the website visitor hovers over it. For instance, a section might expand to show additional text when the mouse is on top of it. This is not possible on mobile because the concept of “hovering” doesn’t exist. You would need to redesign the mobile version in that case.

Read BrowserStack’s Responsiveness Guide to get full instructions on how to make your website responsive on all devices.

4. Too much going on

You want to avoid having too many different things trying to grab the visitor’s attention at the same time (like the website above).

Every website needs a clear “hierarchy”. This means that only one thing should be grabbing the visitor’s attention at a time.

If there are too many things that are equally prominent, the visitor won’t know what to focus on and they’ll get overwhelmed.

For example, you might want the website visitor to read the main headline first, then look at the primary image, and finally the call-to-action button.

There should be a clear “hierarchy” where only one thing grabs the visitor’s attention at a time, and there shouldn’t be too many other distractions.

For example, it’s a bad idea to put tons of different images or multiple different headlines of the same size, because the visitor won’t know where to look!

5. Not enough going on

The “minimalist” approach to web design is becoming more and more trendy these days.

Website minimalism can be a great strategy when it’s executed correctly, but sometimes it’s taken too far…

When the minimalistic approach is taken too far, the website visitor doesn’t have enough context to understand what they’re looking at – causing them to leave the website out of confusion.

The purpose of your website should be immediately clear, and the visitor should know exactly what their next steps are.

6. Weak calls-to-action

A call-to-action (CTA) is what prompts the website visitor to take a specific action that you want them to take. It comes in the form of a prominent button on your website.

You want the CTA to stand out and be noticeable. You also don’t want to have too many different CTAs because it might overwhelm the visitor.

But most importantly, you need to have at least one CTA and it should ideally be more enticing than a generic “Contact Us” button.

For example, you’ll get more visitors taking action on CTAs such as “Free Consultation”, “Free Trial”, “Instant Estimate”, “Get the Guide”, etc.

Make your primary CTA as compelling as possible!

Oh, and don’t forget to list your contact info in the footer of your website. You should also have a contact form somewhere, whether it’s on the home page or a contact page. Make it easy to get in touch!

Check out HubSpot’s List of 40 Irresistible CTAs for ideas and inspiration!

7. Too much or too little content

The length and structure of your content significantly impacts the overall design of your website.

Too much text often comes across as overwhelming, and too little text often comes across as unprofessional.

Having a lot of text is totally fine as long as you break it up with multiple headings, images, design elements, etc. You just need to avoid having “long walls” of text.

Your content should be “scannable”. The visitor should be able to quickly scan your website and get a general idea of what it’s all about (without needing to read anything in-depth).

On the flip side, it’s also important to have enough content for several reasons.

If your website appears too “empty”, many visitors will think it’s unprofessional and they’ll leave. It might be tempting to have minimal content in order to give it a “clean” look, but don’t take it too far!

Having enough content is also important for search engine optimization (SEO). Google tends to favour websites that have a considerable amount of content. The right “amount” depends on your industry.

If you own a law firm in Toronto, try searching for “toronto law firms” on Google and check the first few results. Your page should have a similar amount of content (or more).

A good rule of thumb (in most cases) is to have at least 1,000 words on each page that you’re trying to rank on Google. But to be safe and more exact, check Google to see what’s actually ranking!