fbpx

16 Common Web Design Mistakes to Avoid in 2021

Daniel Houle, Author

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 World's Worst Website

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

White Space

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

Mobile Responsive Website

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 Ottawa 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

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

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

Call 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

Website Content Writing

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!

8. Cheesy or irrelevant stock images (and graphics)

Stock Image Websites

Searching for the perfect stock image might feel tedious and it might be tempting to settle for the first decent-looking option that you find.

However, images play a massive role in the overall design and aesthetic of your website – so it’s worth spending the extra time.

It’s important for each image to be relevant to the section that it’s displayed within. It should always make sense, and it shouldn’t feel random.

You also don’t want your images to look cheesy… many stock images are just flat-out cringey!

To take your images to the next level and to create a beautiful aesthetic on your website, pay attention to the colours within your images. The colours should have synergy with the rest of your website.

If your website’s colour scheme focuses on blue and green, it might not make sense to add an image that has a ton of orange…

The above rules apply to images as well as videos and graphics (whether they’re “stock” or your own originals).

If you have high quality original images/videos/graphics of your own, that’s definitely better than using stock – as your website will appear more authentic!

If you need high quality stock images, check out DepositPhotos and Shutterstock.

9. Text that is hard to read

Small Text

There are 3 circumstances that can make the text on your website hard to read.

Keep in mind that some people have more difficulty reading digital text than others. A good rule of thumb is to ensure that anyone in a retirement home can read it too!

The first scenario is when you’re using a background image with text on top of it. In this case, you need to make sure that there’s enough image-text contrast.

In some cases, the image will have a clear spot to place the text in a way that has enough contrast for the text to be perfectly readable. However, in most cases, this won’t be possible.

In cases where it’s not possible, the trick is to use white text with a bit of text shadowing and then add a dark overlay on top of the image. Or, you can use black text and a bright overlay on top of the image.

The second scenario is when your text is simply too small for some people to read without straining their eyes.

At a bare minimum, your body text should be 14 pixels in size. Ideally 16-18 pixels to provide the perfect experience for anyone (including people with minor vision problems!).

The third scenario is when you choose the wrong style of font. Keep the font style simple and easy to read. Don’t pick anything too fancy!

10. Logo not consistent with website (or poorly designed)

Logo Sample

It’s often the best decision to get your website and logo designed by the same company or person (or do both yourself). This way, you can ensure that there is synergy between the two.

The first step is to make sure the colours are exact matches between your website and logo. This means using the exact same HEX code. Don’t randomly select a colour that looks the same. It’s important for it to be exact, and you don’t want to guess!

The second step is to make sure the font style within your logo (if there’s any text in it) is the same (or very similar) to the font style on your website. It’s not vital for the font style to be an exact match, but there should be a good level of synergy between the two.

The third and final step is to make sure your logo’s overall aesthetic “fits in” with your website and that it’s actually well designed! There’s no exact science for this. You’ll need to use your own judgement. This is the step that makes it ideal to hire the same company or person for both your website and logo (or do both yourself). And of course, hire someone who has a wonderful portfolio (or put a lot of effort into it yourself).

Bonus tips: make sure your logo has very high quality resolution (you don’t want a blurry logo) and don’t make your logo too big on your site! In most cases, it should be subtly placed in the top left corner of your website (in the header).

Check out our Ottawa logo design service if you’re interested in getting a logo created by a reliable agency!

11. Poor use of ads and popups
Ads and Popups

We all know how annoying ads and popups can be. Don’t be one of those websites!

Let’s start with popups.

If you’re using popups, be sure to only use them after the visitor has already been browsing your website for some time. Don’t use any “immediate” popups.

Instant popups will cause some people to leave your website right away, reducing your conversion rate as well as your SEO performance (Google penalizes websites that cause people to leave quickly).

Instead, your popups can appear after the visitor has already scrolled at least halfway down the page, visited multiple pages, or spent at least 30 seconds on your website.

And be sure to not have too many different popups! In most cases, just 1 popup is the best choice (if any). You don’t want to harm the user experience.

Another good trick is to have a popup appear when the visitor is about to leave your website (your website can detect when their mouse moves toward the “back” or “exit” button).

At this point, your popup can offer some sort of special deal to get them to sign up for something at the last second.

For a more comprehensive overview of popups, check out OptiMonk’s Guide on Popup Best Practices.

Now let’s talk about ads!

Your business model might require ads to be displayed on your website, and that’s totally fine as long as it’s done correctly.

The only rule with ads is to ensure that they don’t make it difficult for the visitor to navigate through the main content on your website. They shouldn’t be too distracting.

There’s no specific rule on the number of ads you can safely display on a page. It depends on the size of the ads and where they’re placed.

This is something you’ll want to test by creating two versions of your page and seeing if the “time spent on page” metric is affected when you change the size, quantity or placement of the ads.

To learn more about display ads and its impact on user experience, check out MarTech Advisor’s Guide on Display Ads and User Experience.

12. Rejecting design norms

Web Design Norms

You might have noticed that most websites use a very similar structure – and there’s a good reason for that!

The experience of browsing any website should be effortless. And in order for it to be effortless, the structure needs to be the same as what the visitor is already used to.

Don’t worry – there are many ways to make your website look unique while still adhering to the overarching structural norms!

For example, you want to make sure that:

  1. The navigation menu is easy to locate in the header as well as the footer

  2. There aren’t any overly distracting motion graphics

  3. The “scrolling” experience is normal (some websites have an awkward scrolling experience, such as left to right instead of top to bottom, or an experience that “jumps” from section to section instead of scrolling smoothly)


Just remember that the #1 purpose of your website is to provide a simple user experience, a clear message, and a convincing call-to-action!

The idea of creating a “unique” website should be secondary – and you don’t want to take it too far!

Check out Orbit Media’s Guide on Web Design Standards to learn more about web design norms that you shouldn’t break!

13. No favicon, OpenGraph or custom 404 pages

These 3 things are very commonly forgotten about.

Let’s start with the favicon.

The favicon is the small image in the browser tab. It also shows up in the Google search results.

When you don’t set a custom favicon, it displays a generic default favicon instead, which looks unprofessional and makes your website seem “incomplete”.

Next, there’s the OpenGraph image.

The OpenGraph image is the image that appears whenever you share the link to your website.

If you don’t set a custom OpenGraph image, a random image from your website will be selected. In many cases, the randomly selected image looks out of place.

Finally, there’s the 404 page. Your visitors will see a 404 page when they visit a link on your website that doesn’t exist. They might have accidentally typed in the wrong link, or that link might not exist anymore.

If the link used to exist, be sure to set up a redirect so that they don’t need to see the 404 page to begin with. If a redirect doesn’t make sense, then it’s acceptable to let it go to the 404 page.

Make sure your 404 page contains useful information (like a search bar and/or sitemap) and is customized to feel “on brand”.

14. Slow site speed

Snail

Nobody likes a slow loading website…

It causes visitors to leave (harming your conversion rate) and it’s also frowned upon by Google. Site speed is an important factor in SEO.

The good news is that it’s simple to fix.

If you’re using WordPress, use the following tools and you’ll be golden:

Hosting & CDN: Cloudways or WP Engine

Theme: Astra or GeneratePress

Caching & Performance: WP Rocket or Nitro Pack

Image Optimization: ShortPixel Adaptive Images or EWWW Image Optimizer

You should also keep the amount of other plugins on your WordPress website to a minimum. Having too many heavy plugins is a surefire way to slow down your site.

Last but not least, we need to discuss which “page builder” you should use for optimal site speed on WordPress.

There are an overwhelming amount of opinions online as to which page builder is best for site speed (and as to whether you should use a page builder at all).

However, if you’re using all of the tools listed above, your choice of page builder won’t make much of a difference as long as you’re using one of the major options.

We recommend Elementor because it’s the most customizable page builder on the market (and the most popular), but there are several other great options out there too – such as Beaver Builder, Divi, Oxygen, and more.

For a complete checklist and in-depth analysis on site speed optimization, check out WPBeginner’s Guide on WordPress Site Speed.

15. Not secure

Your website needs to avoid having the “not secure” warning message at all costs:

Not Secure Error

Not only will your website be more susceptible to attacks, but website visitors will see it and they will instantly lose trust in your website. It also negatively impacts your SEO performance.

The solution is to install an SSL certificate on your website. Most modern WordPress hosting companies offer SSL certificates for free! Be sure to ask your hosting company about SSL.

16. Poor SEO

SEO

Most businesses want their website to get found on Google and generate leads, so it’s important to build the website with SEO as a central focus from the very beginning.

At Azuro Digital, our Ottawa SEO service is performed simultaneously with our web design and development service.

It’s much easier to optimize your website for Google during the design and development phase than to optimize it afterward (because you’ll end up needing to undo a lot of work).

Here are the key steps for SEO:

  1. Keyword research
  2. Competitor analysis
  3. On-page optimization (content writing, keyword placement, keyword density, word count)
  4. SERP optimization (page titles, meta descriptions, schema markup)
  5. Technical optimization (site speed, HTML tags, link optimization, alt text, site architecture, mobile optimization, Google Search Console setup)
  6. Google My Business optimization (local SEO and Google maps)
  7. Ongoing blogging and backlink building


For a comprehensive article on SEO, check out Brian Dean’s Definitive SEO Guide.

Do you want to avoid all 16 common web design mistakes?

As Ottawa’s award-winning WordPress designers and developers, we ensure that your website is flawless in all respects.

Feel free to reach out if you’re looking to take your web presence to the next level.

Click here to get a quote today!

More Resources:

16 Questions to Ask Your Web Designer Before Hiring

Why You Need a WordPress Maintenance Plan

Hours

Monday: 8am-6pm EST
Tuesday: 8am-6pm EST
Wednesday: 8am-6pm EST
Thursday: 8am-6pm EST
Friday: 8am-6pm EST
Saturday: 8am-6pm EST
Sunday: 8am-6pm EST