Feature image for web design mistakes article by Toman Kanyte

20 Common Web Design Mistakes and How to Avoid Them

A website’s prime purpose is to convert users.

It’s not just to look attractive.

It’s to turn visitors into loyal customers. Encourage them to click your CTA button, fill your contact form, and buy from your website.

And a website that doesn’t convert users is failed.

However, designing a high-converting website is no easy feat. Many elements go into creating one, and getting even one of them wrong can cost you conversions.

After all, only 22 percent of businesses are satisfied with their conversion rates. And if you’re not one of them, this article is for you.

We enlisted the help of 30 experts and asked them what they believe are some of the most common web design mistakes, and how business owners can rectify them.

Let’s dive in.

Table of Contents

Before the start of the website design project

Before you start to design your website, there are a few essentials you need to take care of – your brand identity, creating your sales funnel, and getting crystal clear on who your target audience is.

Let’s go through each of these web design mistakes.

1. Building your website design before you have a complete brand identity

Creating your website design without having a robust library of your brand assets is a big mistake that many marketers make. 

Your website design needs to reflect your brand and be consistent and in sync with all your other marketing materials (i.e., social media profiles, etc.), and that’s not possible if you don’t have a clear brand design.

As Abby MacKinnon, Content Creator at HDco, rightly points out, “Creating a website without a brand will result in a basic, templated look.”

The solution?

MacKinnon recommends website owners and designers to design their brand before designing their website. “Your brand is more than just a logo – it should include a variety of fonts, specific colors, icons or illustrations, and photography styles. If you have this in place, it will be easy to design a website,” says MacKinnon.

2. Designing the website before building the sales funnel​

You’ve created your brand materials. Now should you start designing your website?

Not yet.

The next step is building your sales funnel.

Many brands put time, effort, and resources into making artsy but aimless websites that don’t drive sales. Your website’s prime goal should be to convert viewers into customers, make sales, and increase brand awareness. 

Illia Termeno, Founder at Fractional CMO, shares, “Each business website should have a central theme and a purpose, so it should be designed with your sales and marketing objectives in mind.”

You should create a comprehensive marketing strategy and only then build a website that will help implement it.

Termeno adds, “You should consider the customer journey and the decision-making process and structure your website to address your audience’s pain points and potential barriers that can prevent them from becoming your customers. Think about what information your potential customers are most likely to want to find at each stage of the sales funnel and make it easily accessible on your website.”

3. Neglecting your target audience

From the language you use on your website, to the colors and elements you add, everything depends greatly on your target audience.

  • Are you targeting millennials or gen z? 
  • Is your target audience women only, or men and women both? 
  • What demographic are you targeting?
  • How much does your target audience earn?
  • What kind of language do they respond to?

 

Alan Spurgeon, Founder, and director of Hedgehog Digital, aptly says, “All too often, businesses get hung up with wanting a state-of-the-art website and being all about the image – but if it doesn’t appeal to their customers, it won’t perform.”

Knowing your target audience and their needs are crucial. 

Spurgeon further adds, “The website should be oriented entirely around their needs and make it as easy as possible to achieve what they want. Want to generate inquiries through your website? Make this as easy for your potential customers to do as possible.”

Mind the number and placement of CTAs

Next is designing your website’s call to action. Every website has one. But not every website manages to convert users via it.

Here’s why.

4. Having multiple CTAs

Just like too many cooks can spoil the broth, too many CTA’s can confuse your audience. And the one thing you don’t want your audience to be is confused when navigating your website. 

“Many web designers think having multiple buttons with different calls to action could be beneficial because you can cast a wide net and allow users to sign up for the CTA that meets their needs.

In reality, this is not the best practice because it confuses the web visitor, and instead of signing up, they will likely bounce and move on to another website,” explains Tyler Forte, CEO of Felix Homes.

It also kills conversions because “it creates more options for the user to pick from, and the more options, the less likely a visitor is likely to take action,” shares Sean Dudayev, Founder of Frootful Marketing.

The best website pages have a single, bold CTA that persuades viewers to click on it and convert. 

5. Placing CTA below the fold

You’ve created a clear CTA button for your webpage.

It’s bold. It’s persuasive.

Where do you add it?

Above the fold or below the fold?

Above the fold. 

CTA button placement example
website example with CTA placement

Oli Graham, Marketing Manager at Rightly Written, explains, “It is a certainty that everyone who lands on your webpage will see the content above the fold, as that is what is first presented to you on the page.

Not everyone, however, will scroll down below the ‘fold’, so by having your call to action below the fold, you are already excluding these people from achieving your desired goal. 

This will lower the conversion rate of your webpage.”

And since the fold varies on different platforms (such as mobile and desktop, “make sure that it appears above the fold on all these devices,” advises Graham.

Conversion Rate Optimization Mistakes You Could Be Doing Right Now

Are you taking care of all the critical elements used to amp up your conversions?

6. Adding no reviews

Reviews are essential. Would you buy a $2000 online course without first pouring over all the reviews and testimonials you can find?

I know I wouldn’t.

I need reviews. I need a guarantee that this course will change my life by someone who’s already taken it. And it’s not just me. The average consumer reads 10 online reviews before making a purchase decision.

“Reviews and testimonials are an essential marketing tactic, related to the concept of social proof.

website review example

Incorporating reviews and testimonials on your website allows you to harness the wisdom of the crowd for your product by showing a group of people agreeing that your product is effective and trustworthy,” explains Vincent Bradley, CEO at Proper Wild.

7. Creating a long, complicated contact form

“Your website’s contact form should only ask for a name, email address, and message. Anything beyond that, and you run the risk of alienating a potential customer or client,” stresses Tyler Boyd, Chief Strategy Officer at Squeeze.

The longer your contact form, the more annoyed your users will get. And annoyed users click the {x} faster than you can say STOP. 

“If you have important follow-up questions that you need to be answered before you can properly categorize a new client, ask them at a later time, like when you respond to the potential client’s initial query. Your first order of business should be getting their contact information, the ‘small yes,’” says Boyd.

So limit your contact forms to three to five questions, at max. And only ask essential questions when following up. 

8. Creating buttons without name attributes

Jeff Milam, CEO at Blue Blaze, explains, “Name attributes allow for buttons to be uniquely identified across a website. This makes it possible to create event tags in analytics platforms like Google Analytics that are triggered by button clicks with unique names. This reduces ambiguity and false positives as compared to when buttons are identified by class or text.”

For example, there may be several buttons on a website that contain the text “Submit.” Without some other way of identifying them, these buttons all look the same to an analytics platform. 

Milam adds, “By using names like “Form1-Submit” for each button, a webmaster can identify exactly which submit button was clicked on in the analytics platform.” 

9. Crafting poor headlines

You have 7 seconds to grab your user’s attention. 

A strong, bold, eye-catching headline comes in handy here and instantly piques your user’s attention and encourages them to read further. 

“In our experience, a headline can make or break the success of your webpage. Our bounce rate reduced by 52% by changing our headline, but more importantly, conversions increased by 79%. All that changed was our headline. That’s how important it is that you get it right,” explains Alan MacLachlan, Founder at Improves.

You can always outsource this to a copywriter who understands your niche. 

MacLachlan further explains, “Working with them we went from

“Improve your tennis. Get feedback from the World’s top players and coaches.”

to

“Record yourself playing tennis and get coaching from the World’s best players.”

A small change can make a big difference to your results.”

10. Using cliche stock photography

“Generic stock art detracts from your brand’s messaging and quality of services provided, suggesting your organization is less unique, professional, or experienced than it actually is,” explains Sean Tice, Creative Director at North Street Creative.

Original and professionally shot photography always speaks louder for your brand than cliche stock photography.

“Use imagery that aligns with your brand’s values and purpose. What adjectives or keywords describe your company? Look for imagery that can serve as a metaphor for what your organization is known for or stands for,” adds Tice.

Andrew Wachholz, User Experience Design Consulting at Designing4UX, agrees and adds, “Real people resonate. Stock people are a turnoff. Visitors will come away with a more positive and trustworthy brand experience when you use real, authentic imagery. 

When in doubt, leave stock out.”

11. Lousy page loading speed

You come across a fantastic ad and instantly click on the link that takes you to its website.

However, when you reach the website, it takes eons to load.

Frustrated, you click the {x} button and go back to scrolling through your social media.

This is what happens when your webpage’s loading speed is slow. You lose a lot of potential customers. 46% of people say waiting for pages to load is what they dislike most about browsing the web on mobile.

Mark Coster, Owner of Web Design for Businesses, says, “This factor has never been more important user-wise, but also Google-wise! Especially when Google rolls out their new algorithm update scheduled for May 2021. The importance of a website loading in a split second has been a thing for several years now, but Google intends to make it a priority this year.”

So what steps can you take to rectify this?

“An image-heavy website is sure to take an eternity to load, and that’s the last thing you want! So make sure: 

  • not to upload images in full resolution.
  • upload images in JPG instead of PNG. 
  • purge your cache regularly, 
  • uninstall or at least deactivate any WordPress plugins you aren’t using at the moment.

 

Last but not least, good hosting service is a must,” advises Coster.

Chris Von Wilpert, Founder of Content Mavericks, agrees and says, “Consumers form an opinion of your entire business based on your website and how quickly it loads. The faster your website loads, the better the experience is for your visitors.”

An easy way to check your website’s loading speed is through Google’s PageSpeed Insights.

a website screen with an example of page speed

“You may also want to consider using file compression software to reduce the size of your CSS, HTML, and JavaScript files that are larger than 150 bytes. This will help reduce the number of things that need to be loaded when a visitor first enters your site. 

You’ll also want to reduce the number of long-chain redirects on your site too because each time a page redirects to another one, your visitors face additional wait time for the HTTP request-response cycle. 

You should also take steps to improve your server response by looking for and fixing bottlenecks like slow database queries, slow routing, or a lack of sufficient memory. An optimal server response time is under 200ms, so aim to get your server response time to around that number,” recommends Niles Koenigsberg, digital marketing specialist at Real FiG Advertising + Marketing.

Do you focus enough on the UX/UI?

Did you know that 89% of consumers shop with a competitor after a poor user experience? 

A great user experience is essential for increasing conversions. What are some design mistakes you might be making that are costing you conversions?

12. Adding too much content

Attison Barnes, Co-founder and CPO at Captain Experiences, shares, “The average bounce rate for websites is somewhere in the 55% range — ours is hovering around 18% because we give users what they need and nothing extra.”

What helped?

Creating only the most important content for the homepage.

“Companies feel like they need to include features on multiple key products, special variations the user might be interested in, information on the company and what it does, reviews to build trustability, a search function, images of the product, recent updates and news, etc. 

We all know (from intuition and data) that the user does not look at 90% of this, and for most sites, the fold (the scroll depth at which users leave) is pretty high. 

The goal of your homepage is not to give the user everything – it is to welcome the user to the site and direct them where they need to go (and avoid bounces).”

Simplifying content on the entire website. 

example of overloaded website

“Think about your target customers and sort them into different cohorts – maybe these cohorts have different needs and goals, but you can focus on the majority of your customers and get them the information they need upfront. 

The homepage is about directing traffic: no one comes there to get what they want. Users need to be funneled to the page they want (whether it is information or a product). 

Add more accessible links to the footer, streamline the homepage, and make it easy for the user to search/click through to more narrow information,” explains Attison Barnes.

Stefan Chekanov, CEO at Brosix, agrees and adds, “Frequently, businesses want to offer as many services as possible on the website and make them easily accessible for people, resulting in landing pages that have too much content.” 

However, right now, the dominant trend in web design is minimalism, and “the majority of brands are trying to reduce the amount of content on their website. This way, the focus remains on the important elements as well as CTAs.” 

minimal website example

And the best way to embrace minimalism is by adopting content prioritization.

“Businesses need to know exactly what they want to show on the website and select two or three most important conversions they want to get,” explains Chekanovs.

13. Having an unresponsive UI

Many businesses focus too much on a unique design and not enough on the user experience. 

Big mistake.

Prioritize clarity and functionality for user

As Kevin McMurray, Digital Marketing Associate at Blue Compass, explains, “While it’s great to be creative with your web designs, you should always prioritize clarity and functionality for your target audience.

It’s not enough for a website to be visually compelling. To be truly competitive, your website needs to work for users. Your website’s main purpose is to generate more sales and leads for your business, so don’t be afraid to ask for the sale and find ways to encourage more leads when designing the site.”

Solution?

Using strategic and attention-grabbing buttons, easy-to-use forms, and strategic links. 

“Whether it’s to schedule an appointment, register for an event, or some other way to get in touch with your business, our UX experts agree that the most effective buttons are large, bold and have clear text that leads users to perform the desired action,” adds McMurray.

Optimizing for mobile

Another important factor is designing for mobile. People often forget that most internet traffic in the 21st century is mobile, and web pages load differently for mobile browsers than they do on PC. 

And if a web page is hard to navigate, visitors will simply press the {x} button and leave.

An excellent solution for this is using plugins that optimize your website for different browsers.

examples of regular website and mobile version on Iphone screen

“WordPress plugins such as Jetpack, WPTouch, AMP for WordPress and Touchy are easy to install and use and make sure your website optimizes and displays well for different kinds of browsers.

Always put yourself in a visitor’s shoes. Avoid the bad habit of viewing your website through your eyes as you are building and designing because you are almost certainly looking at it from the perspective of a laptop or PC user,” advises Lacy Summers, CMO at Crush the PM Exam.

Don’t neglect navigation when adding new pages

User experience is compromised when you add new pages to the website. While the navigation is planned carefully during the design and launch of a site, it’s neglected as the site grows. Additional pages are added to the navigation without much thought, often by different people. Over time, the navigation becomes a scattered maze of options with no clear path to finding what a user needs. 

Michael Steele, CEO at FlyWheel, explains, “There are two ways to prevent a site’s navigation from becoming confusing and ineffective. 

The first is to develop a process for adding new pages to the navigation. This process should outline what types of pages belong in the navigation (not everything needs to be in it!), standards for where new pages should be added, and who needs to be involved in determining and approving these additions. 

The second way to avoid this mistake is to conduct regular audits of the navigation to evaluate both the current makeup and track what users are clicking on. Performing a navigation audit every quarter, or monthly if the site is growing rapidly, will keep things on track and identify areas of improvement in the navigation user experience.”

Incorporate chatbots

William Schumacher, CEO and Founder at Uprising Food, believes high-performing webpages are user-friendly. “Comfort and ease are what helps create good relationships with your clients, as the nature of assistance and the speed at which this assistance is provided are also the two most cited reasons that consumers feel they have had a pleasant company experience.”

So how can you solve this problem and connect with your audience via your website?

By introducing chatbots.

chatbots on Iphone screens

“Companies are looking to personalize their customer’s experiences, and one way we’re going to continue to see this through is customer support live chats or chatbots. Live chat is great because it gives consumers accessibility straight from your website without having to abandon to seek support elsewhere,” explains Schumacher.

14. Having generic 404 pages

In an ideal world, your website would be free of 404 pages altogether. But in this real world, we have to deal with 404 pages constantly. 

And error messages can “alienate your potential customer, spurring them to seek out another site for their purchase,” explains Yuvi Alpert, Founder at Noémie.

Solution?

“Make sure your 404 pages are programmed to align with the rest of your site’s aesthetic and include helpful links and resources to encourage your potential customer to continue browsing your site. This could include an FAQ, a search bar, or a link to check out alternative products,” says Alpert.

Here’s an excellent example of a well done 404 page.

The principles of design are essential in any design process

73% of companies invest in design to help their brand stand out from competitors

Are you one of them? Or are you making the following design mistakes?

15. Not embracing white space

“I noticed that designers had not kept a proper spacing standard when they lay elements on a page, and between each section, the padding or the margin is different,” says Caleb Riutta, SEO at Dusk Digital.

“This affects the flow between the sections and makes the page look less professional by disrupting the natural pattern. When users are on your site, they are usually scanning it, so when there are minor differences in the spacing, it creates a subconscious dissonance.”

example of a cluttered website

How can you avoid this mistake?

By setting up, “a standard padding or margin amount between the page elements and sections and to stick with it throughout the entire site. When you are deciding on how much to space the elements and sections, think about the targeted user demographics and keep their needs in mind. For example, on the site selling glasses, adding more space will aid the UI.”

Embrace the white space by making essential elements pop. 

This is a great example.

minimal website example
minimal website and its attention heatmap and percentage of attention analysis

As Swati Chalumuri, Founder at Hear Me Folks, says, “This ensures that visitors do not get distracted by non-essential elements or have difficulty loading the page on mobile devices.”

Another tip is to distribute things on your site. 

“Yes, the above-the-fold is what every user sees. But don’t try to stuff everything in there,” explains Fabio Rosato, Founder of Roadologist. “Place one or two elements max above the fold, and make them so that they can grab the user’s attention enough to entice him to explore your other content.”

“Overall, your website should be clearly read and digested, and easily connected with. That’s why white space is the perfect antidote, so to speak,” aptly sums up Thomas Hawkins, Founder of Electrician Apprentice HQ

16. Having illegible typography and content

Small font size.

Illegible font type.

Font color.

Not enough spacing between words and sentences.

Lack of contrast.

There are lots of problems web designers encounter when working on website fonts. Because if visitors cannot read your font clearly, they’re not staying around. 

As a web designer, you need to ensure you have a tight grasp of design principles and keep the user experience at the forefront.

“Once your beta is ready – send it to a few possible people in your target audience to review the site and get feedback,” recommends Julie Bonner, Marketing Director at Freefall Aerospace.

17. Inconsistent design choices

“A slightly different color. A wildly different font. Ample space after some headings, but not others. Page layouts that look as though they belong on different websites.

Most websites have at least a few inconsistencies. While they’re a sign that there are humans behind the site (not robots), the more inconsistent the design choices, the less professional the site feels.

Too much inconsistency undermines trust and authority,” explains Teresa Rosche Ott, WordPress Website Consultant at A Fearless Venture.

Consistent use of color, white space, fonts, graphic styles, and other design elements help create a cohesive appearance that gets out of the way and lets content shine. And good content – not just visuals – is really what a website should be about.

The best solution is documenting your brand colors, brand fonts and ensuring that they’re in sync everywhere in the digital sphere. 

Ott further adds, “Have your web developer set up a custom color palette so that as you add content in the future, your colors pop up in a color picker without extra steps. Or, if you’re DIYing, have the hex values for your colors handy in a text file so you won’t be tempted to guess or pick something you think is close (but isn’t correct or consistent).

Except for basic styles like bold or italic, avoid styling text in the editor. Instead, ensure your body text, headings, spacing, and other elements are controlled only by a stylesheet. If you don’t like how they appear, have your web developer or designer change your style sheet.

If you use WordPress, Reusable Blocks can help ensure that repeated content is the same wherever it appears. Some block plugins – GenerateBlocks Pro is a good example – make it easy to set up global styles and use them across a site.

Ensure featured images and other blog graphics use consistent styles and dimensions by having your designer set up templates in Sketch, Canva, or Photoshop. Then stick closely to that established design as you create new graphics.”

Pay attention to search engine optimization (SEO)

If your website isn’t ranking high on search engines, it’s not serving its purpose. 

There are several mistakes business owners make when it comes to SEO. Here are a few of them.

18. Creating unoriginal, bland blog content

“Publishers spend weeks or months designing an engaging and attractive website. Then they spend five minutes typing their blog text into the CMS before clicking Publish. It doesn’t matter how beautiful the rest of your website is if your original content, which will often be the first contact you have with someone, is dull, boring, and lazy.

 If you’re creating original content, you understand the power of search traffic and how that content can attract the right audience. Those people don’t see your perfectly optimized home page, your tightly designed about page, or your refined landing pages. They see your blog post. And if it’s a bland wall of text with a few stock images, you’re wasting a crucial first impression,” explains Sydney Myers, Founder at Dallas Hoops Cast.

Your blog pages are just as important as your home page and sales page, so work on their design and content, as well.

“Reading your content should be an experience that stimulates the senses. Pretend it’s a landing page or a sales page. Invest time in making every piece of original content as engaging as possible. Create original graphics, take your own photos, use charts and graphs to illustrate your point, embed videos, and design infographics. Give attention to formatting, white space, and branding,” adds Myers.

19. Leaving images without alt attributes

“From an SEO perspective, one of the most common web design mistakes I constantly come across is images without alt attributes that have not been optimized for HTML,” opines Sebastian Schaeffer, CTO and Co-Founder at DoFollow.

“You can make a page’s images stand out to Google by giving any photos that are in jpg, gif, or png format alt attributes in HTML. 

Make sure to include any keyword(s) you are trying to rank for in the description and keep the length to around, but no more than 150 characters in total. This provides search engines with an easily-understood description of the image that lets them know it is relevant and deserves to be included in Google Images.

Visitors often find websites via image searches, and the top-ranked images are those with effective alt attributes,” explains Schaeffer.

20. Using inadequate URL structure

“The way you label your pages impacts your rankings and all future SEO efforts,” says Thierry Trembley, CEO & Co-Founder at Kohezion.

Using a relevant URL structure will not only help visitors figure out how the pages correlate to each other and how to navigate between categories, “but search engine spiders also. Google can pull well-crafted semantics into a SERP and display them in place of a sometimes confusing URL string.

It’s a good idea to use some keywords in your URL – for example, words related to the product and service you’re describing on the current page. They often include random numbers and characters that don’t have any meaning.”

Wrapping up

When designing a new website, always keep the following tips in mind:

  • A strong, clear CTA that drives conversions
  • Crystal clear and purposeful messaging that speaks to your target audience
  • Track and optimize website analytics via Google Analytics
  • Make sure your website speed is optimized for a great user experience
  • Make it easy for users to contact you by placing contact information front and center
  • And lastly, optimize your website for mobile

Which of these tips are you already following? Let us know in the comments below.

About Author

Complete Guide to DATA-DRIVEN DESIGN

Get ebook for free. Just leave your email below.

You will be subscribed to our mailing list.