Website Design Mistakes | Top 10 + Solutions [2024]

As always, here’s the video guide:

If you’re reading this, then you already know the importance of building a website.

But if you’re not a professional website designer like we are, it’s really easy to make various mistakes that can wreck your site.

The mistakes covered in this post can make your website look unprofessional and make your visitors more likely to click on that X button, which we don\'t want.

But before we dive into the mistakes and their solutions, we want you to get into the right mindset.

Your mindset should be this:

Whenever designing your website, your ultimate objective is to minimize the amount of brainpower the visitor needs to use while on your website.

The easier you make it for them to read, navigate, and click around on your website, the more successful your website will be.

Website design should look for any and all ways to minimize time and mental bandwidth visitors use to get what they want.

With that said, let\'s get started!

Mistake #10 – Buttons That Blend

A button, especially at the very top of your homepage should be your most important call-to-action.

It should lead them to read more or check out your product

A lot of people get caught up in making their whole website match that they forget that this button should stand out apart from everything else.

This is the one thing that you want them to click on the most so it\'s much better for this button to be a completely opposite color that stands out.

You want your visitors’ eyes to be immediately drawn to this button.

For example, if it\'s the same color as the rest of your website, they might just skip right over it because it doesn\'t look important enough.

Our favorite colors to use are blue orange or green and you want to make them very saturated and bright, like in the example below.

Mistake #9 – Too Many Calls-to-Action

While we\'re talking about call-to-action buttons, 1 or 2 is perfect but 3 or more presents visitors with too many options and your visitor is less likely to click on any at all.

If, for some reason, your website needs more clickable call-to-actions, just leave the most important one at the top and then create a bottom header below your main section with a lot more clickable buttons.

That way, they\'re still at the top of the page and people can find them easily but your main call-to-action is the single centered focus.

The reason you don\'t want a bunch of call-to-actions right at the top is because we want to minimize the amount of time it takes for your viewer to find exactly what they need.

Giving them fewer options is actually better. It makes them more likely to click and reduces their stress in deciding what option to click.

Simplifying a website visitors options also makes it more likely that they’ll stay and actually click the link instead of having information overload, exiting your website, and going elsewhere.

Mistake #8 – Too Much or Too Little Spacing

We see lots of websites that are too crowded and that makes it really difficult to focus on one piece of information, let alone the most important piece of information.

On the other hand, we also see lines of text that are way too spaced out and it kind of just throws off the whole balance of the website.

A very helpful rule of thumb is to group lines of text together that are supposed to go together and then create space around that group like a heading and a subheading.

Mistake #7 – Poor or Overly Complicated Writing

Writing can take way too long to read and it\'ll crowd up your website with a lot of unnecessary information.

The key is to simplify, simplify, simplify.

You understand your content at a level 10 but you should be writing it at a level 1.

The copy on your website should essentially read the mind of the visitor and answer their questions before they even know they want to ask them.

Here’s a helpful exercise:

Try asking a few friends to check out your website. If they have any questions at the end, then you know you have something that you need to rewrite.

One way to think about your writing is like a slippery slope.

This concept comes from legendary copywriter Joe Sugarman.

Basically, you want your readers to feel like they’re slipping down a slide when reading your copy – the words on the page.

That means grabbing their attention with a short sentence.

And another one.

Maybe one more.

Now they’re starting to slip and you keep the slide slick with simple sentences that build one on top of the other.

The key is to stay focused on one big idea (as best you can) for each section of writing.

This whole section, Mistake #7, has only been about simplifying your writing. We’re not talking about any other subject.

But when you’re ready to move on to another subject, use transitions like:

What you write is only one piece of the puzzle. The other piece is how the words look on the screen.

Mistake #6 – Poor Tracking and Leading

This is a really subtle mistake that is commonly overlooked when writing copy for your website.

“Tracking” is the amount of space between individual letters or words in your writing.

The tighter the tracking, the harder your text will be to read.

Try adding a little bit more tracking to give your words some room to be read easier.

“Leading” is the amount of space between lines of text.

This can also be referred to as line height. And once again, adding a little bit of space between lines of text can make things much easier to read.

We built a bunch of websites before realizing this one and it would have been awesome if somebody had told us this sooner.

Mistake #5 – Lacking Consistency

Having lots of different fonts and different font sizes is going to make your website look unprofessional and very inconsistent.

Try only using two different fonts and try to set definite font sizes for both H1 and H2 headings.

For example, H1 could be set at 36 points while H2 is 18 points.

Use these numbers throughout the rest of your website. This will ensure that everything looks clean and consistent and all you have to do is bold your text whenever you want something to stand out.

You’ll also notice in the image above that we designated one font for headers and the other font for normal text. This adds another visual layer that can enhance the look and feel of your website.

The idea is to work smarter, not harder.

Mistake #4 – Poor Image Choice

Now, there\'s nothing wrong with using a stock photography website to get your images.

A few of us here at CaPW are photographers and we still don\'t want to go out and shoot ourselves every time we need sweet photos for our sites.

So we use pixabay.com or pixels.com ridiculously often.

But some photos can be too busy and distracting to absorb text or other important information on your website.

To overcome this, try using images that have a bit of empty space in them. That way you can put text over the top without them conflicting.

Or you can just try adding a background overlay.

A background overlay should be 50% or more white if you have black text, or 50% black for white text. Then you could use pretty much any image and still read the text.

Mistake #3 – Long Paragraphs

Long paragraphs immediately look really daunting and viewers might just skip over them to go find shorter pieces of information.

We recommend adding a few breaks every two or three sentences to make it easier to absorb.

This is as simple as just hitting the return key twice every two or three sentences.

It doesn\'t matter if somebody\'s reading a book or a website, people tend to read the first sentence of every paragraph to scan for the right information, so it makes the most sense to put the most important pieces of information in the first sentence of every paragraph.

And we know all you english majors reading this aren’t going to like this advice, but the reality is, internet readers (and readers in general today) prefer shorter, punchier writing.

Proof: the average reader online has the attention span of a goldfish.

Shorter paragraphs encourage people to keep reading and it helps to keep them focused.

Mistake #2 – Centering Your Logo on the Header

Placing your logo in the center of your header may feel good because you\'re being different than everyone else but it does have a downside.

There is a reason most people put their logos on the left side:

Internet users have been conditioned to click on the logo to go back to the homepage since pretty much the internet was created.

So as soon as you put your logo in the center, you\'ve now added an extra quarter second, maybe even a full second or so for the viewer to actually figure out how to get to your homepage.

This extra step reduces the user experience.

And like we said earlier, minimizing the amount of brain power they need to use is key for a great user experience.

It\'s best to stick to conventional methods and do what people expect – minimizing confusion.

Mistake #1 – Unresponsive Website Design

We left this for number one because having an unresponsive website is a sure-fire way to lose 50 percent of your visitors.

Not at all kidding…

Over 52% of global web traffic comes from mobile devices.

Making sure that your website also looks good on mobile is extremely important.

There is nothing more frustrating as a website visitor than to go to a website and you can\'t even click on the buttons or read the text.

But it’s not just users who want your website to be optimized for mobile:

Google wants it too.

In fact, on July 1st they’re rolling out mobile-first indexing.

This means that websites built to work well and look good on mobile phones will automatically start ranking higher in search engines than websites not optimized for mobile.

This is a major change and will upset a lot of website owners.

Which is why this is our #1 recommendation.

Making your website responsive to mobile is great for your readers and it’s especially great for SEO and ranking higher in Google.  

If you want to make a beautiful and fully responsive website, then check out this tutorial we made that walks you step-by-step on how to do exactly that.

An ugly, dysfunctional, hard-to-operate website can quickly be turned into a beautiful, easy-to-use home for your blog or business.

If you follow all the steps in this guide, you’ll be well on your way.