Blog

We are passionate about the work we do, which is why we regularly research and update our blog with original content to keep you updated with industry news.

Top 8 Most Common Web Design Mistakes (and how to fix them)

Date Friday, 30 June 2023 Becky Allenby , In: Design

Top 8 Most Common Web Design Mistakes (and how to fix them)

Websites come in all shapes and sizes and at Blue Frontier, our web designers have seen it all. From garish gradients, to nasty-looking navigations, to copious amounts of content, we are no stranger to a website that has an acquired taste!

In this article, we explore some of the most common web design mistakes we see on a near-daily basis and how you can avoid or fix them to help keep your website easy for your customers to use and performing at its best.

a confused customer stands in front of a large cafe menu

1. Mega, Mega Menus

There’s nothing more frustrating than thinking you know what you want, until you see the menu. You may have experienced this with your local pub menu, but the same applies to website menus.

One of the top mistakes we see as web designers are bloated and tedious menus. One of the key principles in UX (user experience) is to keep content findable, this means keeping content easy to read and navigate. It has been proven time and again that, according to Hick’s Law, the amount of time it takes a user to make a decision is influenced by the abundance and complexity of choices. Keeping choices simple and to a minimum will allow your users to make confident decisions.

In addition, although SEO is a significant contributing factor to your website’s success, it’s important to ensure you are not over-optimising your site for SEO at the detriment of UX. After all, bots don’t buy your products or services, people do. Whilst SEO helps people find your website, your overtly black-hat SEO-centric links will soon have your customers in a muddle and looking at your competitor’s much simpler, less stress-inducing website.

A good example of this is being too specific with your menu items by trying to hit your short and long-tail keywords. For example, you wouldn’t expect your everyday DIY customer to innately know the difference between a…

  • Solid 24-tooth circular saw,
  • Segmental 34-tooth circular saw,
  • Carbide inserted 40-tooth circular saw --- you get the picture!

Instead, try to keep your menus user-centric by grouping pages, products and/or services into high-level categories that are easy to understand:

  • Saws
    • Manual Saws
      • Coping Saws
      • Hack Saws
    • Mechanical Saws
      • Chain Saws
      • Circular Saws
      • Jigsaws

Keeping your navigation simple, concise, and correctly labelled will make it easier and ultimately faster for your users to traverse your site and find what they need. After all, 88% of online consumers are less likely to return to your website after a poor experience, meaning you could quite literally lose your clients in amongst all that extra detail.

a jack-in-the-box pops out of its wind-up box and releases confetti

2. Pop-Ups Galore!

It goes without saying that these days, some form of pop-up on a website is inevitable, due to the introduction of GDPR back in 2018. Since then, we have all gotten used to cookie pop-ups asking for our preferences, or giving us the option to opt out of cookie tracking, usually in the form of twenty-something pre-ticked checkboxes…

Users’ tolerance of pop-ups and intrusive interstitials forcing interaction is lower than it ever has been, so keeping these to a minimum unless absolutely necessary helps to lower your chances of an increased bounce rate or losing potential leads to competitors’ websites with a more relaxed user flow.

It’s also worth noting that many pop-ups are blocked or invisible to users either employing ad-blockers to prevent pop-up content, or visually impaired users with screen readers, as most pop-ups have not been designed with accessibility in mind. The organisation that outlines the accessibility status of a website, W3C, has actively stated that pop-ups in any form are not accessible, and therefore little can be done to make them more acceptable and visible for users with screen reader software.

So, instead of using unnecessary pop-ups, consider how else you may entice users into converting or traversing your website as you would like by using on-page, static content that is eye-catching and prioritised responsively.

Pst, this compliments the ‘What Call to Action?’ section below, so stay tuned…

an old fashioned dial points to a label which says 'slow'

3. Slow on Sundays (and every other day for that matter)

Ever get the feeling your website really doesn’t want to get out of bed?

Since the release of Google’s Core Web Vitals algorithm update back in June 2021, the speed of your website has never been as important as it is today. Now, not only will you lose potential customers with a sluggish website, but you’ll also lose your coveted SERP (Search Engine Results Page) ranking that you (and your SEO team) worked so hard to get.

The mighty Google is displeased, but how does this relate to design?

A considerable portion of page load speed (and your website’s overall speed) is due to the design and appearance of your website. Websites that feature unnecessary or obstructive content animations (such as loading animations, animated text on scroll, etc.), large carousel hero banners and unoptimised images suffer poor page load speeds the most, and consequently rank lower than competitors with lighter, faster websites.

Whilst it’s important to not be too frugal with your website’s appearance (after all, a bare and unimaginative website never appealed to anybody!), it’s important to consider how certain visual enhancements will affect your website’s speed. A professional web designer will work with you to carefully plan your website’s design, balancing frivolity and eye-catching design with your performance goals.

Although each website has its own individual areas for improvement, we have put together a list of the main page speed culprits and how you can fix them yourself:

  • Large and unoptimised images

    Perhaps the most common culprit is large, unoptimised images. Most raw photos, either from a stock provider or your camera, are several thousand pixels wide and usually over 20 MB in memory. Therefore, they need to be processed first to make them fit for web use. Try to use an image processing programme, such as Photoshop (our favourite), or a free image resizing service such as Image Resizer.com to reduce the physical size of your images. You can also use a free image optimising service such as TinyJPG afterwards, as this will help to decrease the memory size by stripping out any extraneous information from the image, with minimal impact on the quality.
  • Self-hosted videos

    A mistake we see on the regular is self-hosted videos. Video content is extremely heavy; even a simple 30 second video will on average be at least 150 MB in size, so storing just a few videos via your website can quickly bloat it and take up precious memory space on your hosting server. You should always use a third-party provider to host your videos (such as YouTube or Vimeo) and embed these on your landing pages or blog articles using the HTML iframe snippet provided. This will save you money on your hosting, as well as keeping your page load speed… well, speedy!
  • Plugins and extensions

    If your website is running off of a CMS (Content Management System) such as WordPress, Joomla or Shopify, it can be tempting to enhance the functionality of your website with a few clicks of a button. When it comes to plugins, less is more; reduce the amount of third-party extensions your website is using (especially if they are redundant or inactive) to help reduce the bulk of your website. Many plugins will add large JavaScript (JS) and CSS dependency files which your website may not use, but will have to load every time the page is refreshed, so make sure you have a spring clean from time to time.

There are other ways in which your web designers and developers can improve the speed of your website, such as enabling caching, minifying JavaScript and CSS, moving content to a CDN (Content Delivery Network) and using LazyLoad. If you’re looking to get specific insights on how your website performs, we recommend running it through Google’s PageSpeed Insights tool to understand your website’s pain points and put a plan in place to target these in your next website review.

an orange megaphone graphic with the wording in capitals 'the loudest person in the room, is the weakest person in the room'

4. UPPERCASE TEXT, EVERYWHERE

IN MOST INSTANCES, WE SEE UPPERCASE TEXT WHEN A CLIENT IS TRYING TO EMULATE A BRAND LOGO AS ANOTHER WAY OF TYING THEIR WEBSITE IN WITH THE COMPANY'S BRANDING.

Phew, that’s enough of that!

Although its admirable to try and carry your branding across where possible, this shouldn’t be at the detriment of your users. Instead, it’s better to adhere to the core UX principles to ensure that your content is first and foremost useful and usable (legible). Generally, it is best to combine cases, using either sentence case (the most legible) or title case (if you still need to maintain visual prominence against sentence case or lowercase).

You can see from the example below the difference just using a different type of text case has on a sentence:

  • Lowercase: most common web design mistakes
  • Sentence case: Most common web design mistakes
  • Title case: Most Common Web Design Mistakes
  • Uppercase: MOST COMMON WEB DESIGN MISTAKES

However, this doesn’t mean you need to ditch uppercase altogether, instead it can be used carefully throughout your site as a visual cue to your users, such as one-word labels, buttons or actions. Not only will this help to define your typographical hierarchy, this will also allow you to make the proverbial nod to your branding as well as keeping your content easy to skim and digest for your user base.

a person struggles to carry multiple shopping bags whilst one of the bags says 'good things inside'

5. More is More

Too much of a good thing can be bad, and too much of a bad thing can be terrible.

Unfortunately, something we see far too often is “quantity over quality”, particularly on pages where copy should be kept to a minimum to engage and convert users. Knowing when to stop is an artform, so writing content that is precise is essential.

This goes hand-in-hand with the design of your site; keeping copy manageable and grouped into sections will not only make it easier for your users to scan-read, but will also allow your web design team to produce more varied and exciting layouts.

When writing content for your website, consider the following to help keep your copy concise and easy to implement in a creative, and visually engaging fashion:

  1. Consider the main goal

    Are you looking to inform your users, generate leads, or increase conversions? Consider the main purpose of what you are writing, as you are writing it, to help you evaluate if that extra 1,000 words is really worth it.
  2. Make your copy scannable

    Splitting your content into manageable sections will make it easily digestible for your target audience. These days, users are accustomed to scrolling to get what they’re looking for, however, we should still try to refrain from large walls of text.
  3. Incorporate your USPs

    If you’re writing copy designed to promote a service or a product, tell us what’s so special about what you’re offering! Not only is this a fantastic way to encourage leads to convert, but also allow your designer to make a feature out of your USPs.
  4. Collaborate with your designer

    Writing copy that hits your short and long-tail keywords, boosts your SEO ranking, converts leads and translates well in a design is a high-wire balancing act. It’s important to collaborate closely with your designer, particularly during the wireframe stage, so that you can determine the structure and style of your landing pages.

The resulting carefully curated copy (see what I did there) will not only bring joy to your users, but will also put a smile on your web designer’s face (as well as a sigh of relief!)

a neon sign sits on a dark brick wall with the text 'this is the sign you've been looking for'

6. What Call to Action?

70% of small business websites lack a call to action on their home page, a sobering statistic when you consider how competitive the online world is. Businesses jostle with their competitors for the best SERP ranking they can get, however, without clear, sign-posted actions for your users to follow, getting that lead to convert could be nigh-on impossible!

Calls to action (CTAs) are much more than pushy sales spiel; a well-written, naturally placed and appropriately designed CTA will help your users access valuable information that much faster. Small businesses benefit the most from clear and well-placed CTAs as users searching for services will usually be looking to make quick and easy contact with providers in their locality, for example, plumbers, decorators, or mechanics.

If you’re unsure what calls to action would increase your lead conversions, consider the main purpose for your users visiting your website and how you may be able to turn one-time users into returning customers. A website will often have a primary and secondary call to action, the most popular being some variation of the following:

  • Primary CTA: Contact us (usually via telephone or a contact form)
    Fast and easy-to-access contact details are essential if you are operating a service-based business model. Businesses that offer expediated or emergency services (such as plumbers or locksmiths) benefit from advertising their priority telephone numbers to users in a hurry, whilst redirecting their other users to a booking or quotation form.
  • Secondary CTA: Sign-up to our newsletter
    This is a great way to keep your business at the forefront of your customer’s minds and encourage return business. By encouraging your users to sign-up for newsletters, you can keep them coming back using offers, competitions, or reward schemes.

Equally, it’s never a good idea to fill your webpages with links and shouty calls to action, as excessive links on a page can impact your SEO rankings by diluting your link value. Instead, consider the impact of adding buttons and links and ask yourself whether they are really necessary. This will not only help you retain your webpage’s SEO value, but also help to keep the UI (user interface) clean and easy for your users to traverse with clear, sign-posted calls to action encouraging the engagement you want to see.

a user right clicks and steals an image off the internet

7. Copy Thy Neighbour

The cardinal sin; copying your competitor.

Oscar Wilde once said, “Imitation is the sincerest form of flattery…”, but most people forget the ending; “…that mediocrity can pay to greatness.” – no one wants to consider themselves mediocre and likewise your website shouldn’t be either.

A website is more than just an expense; it is the virtual representation of your business and is usually one of the first experiences or interactions a user has with your brand. Therefore, it is essential to strike out and create a name for yourself, whether through custom branding and design, unique photography, or hand-crafted content.

With the sheer volume of information available online, it can be tempting to cherry-pick your favourite content and images, or even get an AI assistant to generate it for you, however, blatant copying (or “imitation” if we’re being polite) can land you in some serious hot water.

Most originally created content falls under international copyright law, which means directly copying or heavily imitating another company or person’s intellectual property would mean breaching copyright protection. Copyright infringements leave your business open to a lawsuit, which could be anywhere north of £50,000 depending on the damages being sought by the claimant.

Copyright protection applies to a whole range of original intellectual property as soon as you create it, including:

  • Media content, such as;
    • Films, TV programmes and advertisements
    • Music, broadcasts and sound recordings
    • Photography and illustrations
  • Written content, such as;
    • Software and databases
    • Website content

So, if you’re looking to add or create content for your website but are restricted for time or budget, try to use free stock websites such as Pexels or Unsplash (but always check the artist’s conditions), and save yourself a nasty surprise in the post!

a painted recycle emblem shows a stick man dropping a piece of paper into a bin

8. Forget “The Fold”

Finally, forget the fold - we saved this one until last, if you hadn’t noticed…

Once upon a time, in the late 1990s and early 2000s, websites were very different. Most websites were contained to a small, 600 pixel squared box that could not be scrolled without using cumbersome scrollbars. This meant all the important information had to be crammed into one tiny space so that everything was instantly visible, rather like how newspapers would have their biggest headlines “above the fold”.

Some years later, the advent of reliable scroll wheel mice and touchscreen phones meant scrolling down a website to read the rest of the page was a familiar experience for most users. However, unfortunately, the antiquated practice of putting everything “above the fold” seems to have had a lasting impact and is still requested today.

Trying to cram everything to sit “above the fold” (or inside what is sometimes now referred to as “first viewport load”) is not a method that translates well today. It’s important to not overwhelm your users or give the impression that your website is poorly designed. In fact, it takes 0.05 seconds for users to judge whether your website is up to scratch, and even so, 38% of users will bounce if they find your website’s layout and design too unattractive.

Instead, we now advise our clients to think about their users’ primary needs and consider why they are visiting their website in the first place. Relevance of information or visuals is imperative to any webpage, whether it’s your home page or a PPC or social media campaign landing page designed to convert leads; the information on your webpage should be carefully curated to ensure you capture your users’ attention immediately.

A professional web designer will help you prioritise what content should be immediately visible for your users. A designer will think carefully about the value of each element that sits above the fold within the first viewport load and will usually recommend a ‘less is more’ approach with UX (user experience) features such as calls to action, anchor links and buttons and visuals to help draw your users down the page.

So, what have we learnt?

Design is much more than making something ‘look pretty’.

These days, many crucial aspects of your website’s success hinge on the design, layout and implementation of visuals. 94% of first impressions are based on your website’s design, and since we know it only takes 0.05 seconds for users to form that first impression, it’s never been more important to thoroughly consider the design of your site.

A good web designer will collaborate with you to help ensure that your new website or webpage successfully incorporates best practices for SEO, UX, lead generation techniques or even accessibility measures.

If you’re looking to get some expert advice on your next web project, our web designers are well-versed in a range of disciplines and are capable of working with an array of industries.

References

  1. Laws of UX Website - Hick's Law: https://lawsofux.com/hicks-law/
  2. Business.com Website - Website Conversion Mistakes: https://www.business.com/articles/7-website-design-mistakes-that-can-hurt-conversion/
  3. W3C Website - Web Content Accessibility Guidelines (WCAG): https://www.w3.org/TR/WCAG21/
  4. MOZ Website - Page Speed: https://moz.com/learn/seo/page-speed
  5. UX Planet (via Medium Website) - Text Case Readability: https://uxplanet.org/why-letter-casing-is-important-to-consider-during-design-decisions-50402acd0a4e
  6. UK Government Website - Copyright Law: https://www.gov.uk/copyright
  7. SWEOR Website - First Impressions Statistics: https://www.sweor.com/firstimpressions
  8. VWO Website - Above The Fold: https://vwo.com/blog/is-above-the-fold-really-dead/
Becky Allenby

Becky Allenby

Web Designer

As both a web designer and frontend developer, Becky spends her days at Blue Frontier collaborating with an array of clients and departments. Whether she’s working her design magic on a new concept or coding a brand-new website, her years of industry creative and technical knowhow give her a unique perspective into our daily web operations.

Get the latest Blue Frontier and Industry Insights!




  • Blue Frontier are accredited with Cyber Essentials Plus
  • Blue Frontier are a Silver Microsoft Partner
  • Blue Frontier is a G-Cloud Supplier
  • Blue Frontier is a crest certified
  • ISO 27001 ISO 27001
  • ISO 9001 ISO 9001
  • ISO 13485 ISO 13485
  • ISO 14001 ISO 14001