7 Common Web Design Mistakes that Cost You Money

50 Flares 50 Flares ×
Web Design Mistakes

Photo credit: http://www.flickr.com/photos/93726493@N00/2451591110/

Do you know that your sidebar may cost you a lot of money?

To tell the truth it’s not the only part of your web design that may make you lose some bucks.
Give a look around the web and you’ll notice many silly (but common) web design mistakes.

Would you go in a restaurant with a dirty frontage and some rubbish near the entry?

I wouldn’t. Those things make you think that such restaurant is low quality and serves unhealthy food.

A similar thing happens when you land on a bad looking blog: you classify it as low quality, and you leave as fast as light.

Even if a first time visitor remains on an ugly blog, probably he won’t buy products because of the design. People need to know that you are reliable and professional to buy from you, but a bad web design gives a sense of unreliability.

Of course, a phenomenal web design will help you to sell more products, reduce bounce rate, increase your perceived expertise and better engage your readers, but it will cost you a lot of money, and probably you don’t want to invest them until you grow your business and can afford such investment.
The good new is that you don’t need a phenomenal web design, you just have to avoid 7 silly mistakes that can easily kill your business.

1. Unprofessional Overall Look

The first thing that you see when you land on a new blog is the overall look of the page.
If it doesn’t seem good enough you will leave the site in few seconds.

Let’s see an example of unprofessional look:

Web Design Mistake: Bad Overall Look

The overall look of this blog make it seems unprofessional. It may have the best content in the world, but you wouldn’t read it because of its look.

There are many design mistakes in this page, but I want to focus only on the overall look now.
As you land on this blog, you see a white page with a quite ugly picture, a green header with a very bad text (green text on a green picture is a huge mistake!), a very flat menu and a light blue background. Would you buy from this blog?
Of course not!

The biggest difference in the overall look of blog comes from the theme that you use.

I highly suggest you to take a premium WordPress theme instead of a free one: it’s on a completely different level in web design and seems professional.

WordPress Premium Theme vs Free Theme

There’s a huge difference between a WordPress free them and premium one.

There’s a reason because all the most popular bloggers have a premium WordPress theme (and usually, they hire a designer to bring it to the next level too): it’s because premium themes are far better than free themes.

I hear from many people that they don’t want to spend money on their blog. Well, it’s ok, but then I hear them complain about their poor results and I wonder “Why are you complaining? You want people to spend money on your business, but you’re the first who doesn’t spend money on it. This is hypocrisy, isn’t it?”.

Your blog overall look it’s too important to neglect it.

You could even choose a free WordPress themes, but in this case, you need to customize it and make it look great (with most of the free themes you’ll need to know codes or ask to someone who knows codes…but in the latter case you will spend less with a premium theme that you can customize by yourself).

Free WordPress Theme Customized

A WordPress free theme may look good with a great customization.

The overall design should look harmonious.
Pay attention to details.
Your background should fit well in the overall look.
And follow all the next web design tips :)

2. Bad Header

The header is a key element in your web design. It can help you to get the attention of the people or it can scare your visitors and make them leave your blog.

Surfing a little the web you’ll notice that most of the blogs have terrible headers. It’s probably the most undervalued element in the web design, even though it’s one of the most important part of the page.

First and foremost, if you want to insert a picture or a graphic work in your header, insert a great one.
A bad graphic work in your header is worse than a skunk in a sealed atomic bunker.

Web Design Mistake: Ugly Graphic Header

A bad graphic work in your header, and first time visitors will run away from your blog.

Many people make their blog title pretty flat and sometimes even unreadable. We’re talking about your online business card, you should make it great and readable!

Web Design Mistake: Unreadable Title in the Header

The title and the description are unreadable…this header need to be changed as soon as possible!

Your title is your brand, if people can’t read it, they won’t know your brand.
Your logo goes in the header too, and should be clear because, together with the title, it’s an essential part of your brand.

The header gives you the chance to show first time visitors what’s your blog about. This is crucial to make people decide if they are in the right place or not.

Great Header with Effective Headline

A great and clear header from Pamela Wilson of Big Brand System. This header is pretty simple, but it works great. The headline is perfect too.

Not including a headline (that should anticipate your Unique Selling Preposition) is a mistake that may cost you lots of customers.

Through the header you can even make a first attempt to connect with a first time visitor: you just have to show your picture.

Great Header with Picture

Ana from Traffic Generation Cafe inserted her picture in the header of her blog. It’s a great way to enstablish a first contact with first time visitors.

The header is a key to have a great overall look, and it’s also a big opportunity to hook your first time visitors, take care of it.

3. Wrong Color Scheme

Colors are extremely important.

The unprofessional overall look of a blog is often due to a bad color scheme (other than a bad theme and a bad header).
There are many case studies and scientific researches beyond colors and color schemes. It means that colors have a crucial role when it comes to design.

Too many colors and your blog seems a very low level one.

Web Design Mistake: Too Many Colors

There are too many colors here. 3,2,1…let’s push the back button! :)

When you bombard your visitors with many colors you’re distracting them: they can’t focus on your message (headline, menu and blog post titles) because all the colors are taking their attention.

My advice is to use 2-4 colors. Using the right scheme you could use up to 6 colors, but if you are not 100% sure about them, probably you’ll have better to insert fewer colors.

Great Color Scheme

Bamidele Onibalusi of YoungPrePro shows us a perfect example of an appealing color scheme.

Notice that the opposite color mistake is pretty common and dangerous too: flat color schemes are pretty boring.

Web Design Mistake: Flat Color Scheme

There’s too much white in this site. It has a quite clear look, and it’s a good design for some reasons, but it will bore you pretty soon because of the excess of white spaces

Colors should be mixed in the right ration.
If your blog is too colored, it will have a bad impact on your visitors. If your blog is too white, it will be too flat.
The most important concept is that you have to balance colors.

Notice that you should use colors and white spaces to make people pay attention to certain parts of your blog.

Perfect Use of White Space

Here’s a perfect example on how to use white space to highlight important parts of your blog by Caleb Wojcik of Pocket Changed.

White spaces can be used to highlight some parts of your blog such as headline, blog post titles, your optin form or your product image.
If you want to highlight something just put some white space around it, and make the object colored (or black).

4. Overcrowded Sidebar

How many overcrowded sidebars have you ever seen online?

I guess too many. There are sidebars in some blogs that are more crowded than the main streets of Los Angeles at 5pm!

The blogosphere is full of blogs with way too many ads in the sidebar.
Do you know that it’s a counterproductive approach?

The more items you do have in the sidebar, the fewer people are driven to click on them. Simply nothing can standout and grab the attention of a person – without mention that a sidebar full of ads makes you look spammy, and as a result your online reputation will be irreversibly damaged.

Web Design Mistake: Spammy Sidebar

This sidebar has an endless amount of banners…definetely spammy!

The sidebar has a key role in your business.
Your sidebar should accomplish one of the following three tasks, and possibly all of them:

  • Make people subscribe to your email list
  • Make people buy your stuff or your affiliate products
  • Make people read more content on your blog

All the other goals are not required. As a bonus task you may want people follow you on social media, but it’s not as important as the previous tasks.
This doesn’t mean that you should add, your Facebook box, Twitter feeds and other social network widgets on your sidebar. Keep your sidebar clean.

As a general rule you have better to keep 3-5 items in the sidebar. If you insert less items, your blog may seem empty, in the opposite scenario it will look quite messy.
It means that you should choose carefully what you insert in your sidebar.

5. A Non-Obvious Overcrowded Menu

The menu is a crucial part of your blog because the people who arrive on it for the first time need to know where to go.
It should be clear and immediate.

I’ve seen many blogs with non-obvious page names in it. That kind of menu doesn’t help you to decide where you should go on that blog, and this is a big problem: when people don’t know where to go on a blog, they click the back button.

Web Design Mistake: Non-Obvious Menu

Even if you see the whole blog, you won’t guess what these pages are about. Does “jobs” stand for “find a job” or for “offer a job”?

Try to make the page names in your menu obvious. Think like a first time visitor who doesn’t know anything about your blog, and help him to figure everything out fast.

It means that you should also cut complex page names out of the menu, keep it simple.

Immediacy is the key to a functional menu.

Of course, a menu with too many pages isn’t immediate. You don’t people have a hard time trying to figure out what’s on your blog.

Web Design Mistake: Overcrowded Menu

This is probably the most crowded menu that I’ve ever seen in my entire life! Just too complex…

Insert just the most important pages in your menu. As a general rule, have 3-6 pages in your menu and try to avoid the cascade menu.
Cascade menus are quite complex, and because people can’t see every page in them, they will damage the immediacy of your menu.

Immediate Menu

Daniel Gonzalez of Conversion Love shows us a very immediate menu. It’s wonderful, you don’t need much more than this in your one.

6. Too Many Ads

Ads have the huge power of making you lose potential customers.
If ads are your main monetization strategy, leave them on your blog, but if you are selling a product or a service, delete them from your blog.

It’s not only because people who click on ads will leave your blog and probably will never return: it’s because ads make your blog look messy, spammy and unprofessional.

Of course, you can insert them in the right way and make them look good in your design, but you have to be really good at this for doing it.

The most common ads excess, as said before is in the sidebar, but it’s not the only one. There are many blogs which insert ads in the header (huge mistake!).

Web Design Mistake: Ads in the Header

Forbes is terrible when it comes to ads – there are too many of them in it. This one in the header is an example.

Many bloggers insert ads in the content of their blog, with terrible results – ads in blog posts make you look really spammy.

Web Design Mistake: Ads in the Content

This banner inside that blog post is horrible…readers won’t like it.

Many people even bring this kind of ads to the next level: they use text ads in their blog posts, a sure way to have messy, unreadable page (please, don’t do it!).

Web Design Mistake: Text Ads in the Content

The post begins…and a text ad interrupts it. Rise your hand if you hate this kind of ads.

I’m completely against ads, because they’ll make you waste more money than you could earn with them, but if you want to insert them in your blog, don’t exaggerate and try to keep an equilibrium.

7. Unusual Page and Text Colors

Have you ever noticed that 99,9% of the most successful bloggers use black text on a white page for their posts?

It’s just because it’s the most readable content format.

Forget about using strange colors for your page and/or text because you’ll only make people leave your blog without reading your content.

Web Design Mistake: Text and Page Colors

After reading two senteces of this, probably your right eye will be dead. The left one will follow in the next 3 words…

Avoid grey both in text and page background too. Very dark grey text on a white page it’s ok, but why using it when you can make your text black?
The same is true for the opposite case: black text on a very light grey could be ok, but it’s better to use black text on a white page.

Your content is the most important part of your blog, you want that everyone reads it – losing some clients because of your blue text isn’t the smartest idea in the world.

StudioPress Professional WordPress Themes

Your Time

What do you think about your blog design? What would you improve in it?
Leave a comment with a link on your blog and I’ll be more than happy to check it out and give you a feedback about your web design.

Mauro D’Andrea

Name: Email:

Comments

  1. Thanks a lot for this awesome collection of mistakes. Sometimes you think that it can’t be true what people offer you as a professional blog and yes, you are right, I leave as quick as I can. Especially, when I see a green header with green font and neon something on it – nothing can make me stay.
    The first impression is important – online and offline.

    • You’re welcome, Monja!

      Exactly: too many times we think that look doesn’t matter, but the reality is that look plays a key role in today world.

  2. Thanks for linking to my post, Mauro.

  3. I agree with all your points except the one about avoiding grey text.

    The reason is the “immediacy” you talk about. Sometimes you can’t avoid having way more text on a given page than users want to process. Varying shades of text can help it be “scan-able”.

    For example, take a page that’s a long list of post titles and excerpts, like a category archive page on a blog. That’s a common look.

    If everything is black text on a light background, everything pops out and looks sharp and crisp. That’s a good thing right? But even with just short excerpts, it doesn’t even take ten posts to make that a lot of information that my eye is noticing all at once. I’m overwhelmed!

    You can make it easier on my by keeping just the most important text black (probably the Titles if I’m trying to find a certain post.) Then lighten the excerpt content to a dark gray, since I’ll read it next if I see a title that looks promising. Finally, all the meta info (tags, post-date, the author) can go one shade brighter.

    Now we’ve created a hierarchy of information just using shades of gray and text. Instead of seeing a splash of black text when I land on a page, I notice the titles before anything else and can easily “scan” them over. It saves me a lot of reading, and your users don’t like to read any more than they have to.

    • I’m sorry, I wasn’t really clear in my post, I was referring only to the body of your blog post/page. I think that you have to use different colors for the text in your pages (my headings for example aren’t black), but black text should be the standard when it comes to the body of your blog post and pages.

      I agree with you, it’s useful to use different colors to establish a hierarchy of information – but not many colors or you risk to overload the visitors.

  4. Vkool says:

    Another post full of brilliant insights. Thanks for sharing your in-depth knowledge and experience about the dos and donts for proper web design.

  5. kle says:

    Tricky one! I’m trying to fix my blog design since ages, but i didn’t manage to get a satisfying look yet. In my case i am quite confused on what it would actually better for my blog. I have a premium theme but i think it is still chaotic. On the bright side, my blog don’t need to be necessarily professional, is a travel blog and the owner is quite humorous :) so i need to align the idea people have about me with the design (but still make sales). Very very tricky. Thanks for the great post!

    • Hi Klelia, design is something that can you always improve, no matter at which point you are.

      Aligning your blog design with your personality is a great thing to do, keep doing it. People follow a blog because of the person behind it, not because of its design – design is a tool, not the goal.

      I’m glad to hear that you liked it!

  6. Am guilty. I have to go back and go over my pages now to give them the needed lift.

  7. I did not care much about how to design my blog when I started it. I just designed it as I wanted. After reading your post today, I have found that I should re-design some parts of the blog so that it will be more economical.

  8. saniya says:

    Brilliant post. This is exactly I’m trying to do nowadays, havent verbalized it yet like you did.
    One thing I could add to this.
    First thing I did was to delete my facebook account and no Tv either for me. I know, I know. But my thinking was if I want to rebuild myself, develop myself and my writing, I need to eliminate all the distraction and focus on the important things. And so far it works well.

  9. just learned this, but one of the biggest mistakes is not using custom sidebars for your pages. Using a standard sidebar isn’t a good idea. For example, if I have a post about a chair makeover, then I should customize my sidebar to feature more chair makeovers, or my affiliates for tools used in reupholster or something. In other words, make your sidebar customized for your page’s content. Use the custom sidebar plugin.

    Thanks

    • Hi Shital, thanks for the advice, I love that concept.

      Anyway, I wouldn’t say it’s a mistake, instead I would call it an advanced strategy – like for example geotargeting and other things like this.

      It’s a great idea when you have a complex business, but for simpler ones I think it’s not necessary.
      For example I adopted this strategy for a client who had a complex business with many products. But I wouldn’t use this when you have to sell just one product.

  10. money says:

    I hardly create comments, but i did some searching and wound up here 7 Common Web Design Mistakes
    that Cost You Money. And I do have a few questions for you if it’s allright.
    Is it only me or does it look as if like some of the comments come across as if they are left by brain dead individuals?
    :-P And, if you are writing on additional places, I’d
    like to keep up with everything new you have to post. Would you list
    of the complete urls of your communal pages like your Facebook page, twitter feed,
    or linkedin profile?

  11. Lashay says:

    Ahaa, its good discussion on the topic of this article here at
    this webpage, I have read all that, so now me also commenting at this place.

  12. I think the admin of this site is truly working hard for his web site, since here every data is quality based data.

  13. Greetings! I know this is kinda off topic but I’d figured I’d ask.
    Would yyou be interested in trading links or maybe guest writing a blog post or vice-versa?
    My bog goes ovber a llot of the same subjects as yours and I think we could greatly benefit from each other.

    If you might be interested feel free to send me an e-mail.
    I look forward to hearing from you! Great blog by the
    way!

  14. you are аctually a jսst riɡht webmaster.
    The website loading velocity іs amazing. It sort օf feels that yoս’re doing any unique trick.
    Moreߋver, The contents are masterpiece. уou’ve dοne a wonderful
    task in this matter!

  15. Please let me know if you’re looking for a article author for your site.
    You have some really great posts and I think I would be a good asset.
    If you ever want to take some of the load off, I’d absolutely love to write some content for your blog in exchange for a link back to
    mine. Please blast me an email if interested. Thanks!

  16. Hi I am so delighted I found your blog, I really found you by error, while I
    was browsing on Google for something else, Regardless I am here now and would just
    like to say thanks a lot for a marvelous post and a all round exciting blog (I also love the theme/design), I don’t have time to read through it all at the minute but I
    have book-marked it and also added in your RSS
    feeds, so when I have time I will be back to read much more,
    Please do keep up the fantastic work.

  17. When I originally commented I appear to have
    clicked the -Notify me when new comments are added- checkbox and now whenever a comment is added I recieve 4 emails with the same comment.

    Is there a way you are able to remove me from that service?
    Cheers!

Trackbacks

  1. BizSugar.com says:

    7 Common Web Design Mistakes that Cost You Money…

    Do you know that your sidebar may cost you a lot of money? To tell the truth it’s not the only part of your web design that may make you lose some bucks. Give a look around the web and you’ll notice many silly (but common) web design mistakes. Would yo…

  2. [...] attention to the most common web design mistakes: your blog will either hit or turn away first time [...]

  3. [...] 7 Common Web Design Mistakes that Cost You Money – Mauro D’Andrea at blog-growth.com [...]

  4. order flowers now

    7 Common Web Design Mistakes that Cost You Money

  5. bar stools with backs

    7 Common Web Design Mistakes that Cost You Money

  6. best divorce attorney West Bend

    7 Common Web Design Mistakes that Cost You Money

  7. PX3 Turtle Beach

    7 Common Web Design Mistakes that Cost You Money

  8. Best DUI lawyer in DC

    7 Common Web Design Mistakes that Cost You Money

Speak Your Mind

*

50 Flares Twitter 27 Facebook 12 Google+ 11 50 Flares ×