Practical Ecommerce

Learning from Bad Web Design

Editor’s Note: This article was originally published by Web Marketing Today. Practical Ecommerce acquired Web Marketing Today in 2012. In 2016, we merged the two sites, leaving Practical Ecommerce as the successor.

Recognizing bad web design is often easy. But it can be difficult to know what makes it bad. In this article I will give you examples of bad web design and explain what good design practices could be used instead. Note that many of these examples are extreme cases of bad web design and there is more than one mistake in each example image.

The World’s Worst Website Ever showcases the worst web design mistakes.

A Few Basics

Many design mistakes can be corrected. However, there are a few cardinal sins in web design. This includes scrolling marquee text, pop-up flash animations, flashing animated GIFs, and automatically playing music that cannot be disabled. These are all examples of what not to do.

Function vs. Design

Function should always take precedence over design. It does not matter how good something looks if the user is unable to use it. Things like browser compatibility, site load time, and Flash usage should be carefully considered when designing a site. The backbone of any site is functionality.

Always test your site in multiple browsers, optimize site load time, check that your site scales correctly, and make sure your site can be viewed on mobile devices.

Lack of Site Structure and Alignment

Structure and alignment is important in all design — web design is no different. A website will look jarring if its design elements and content do not follow some kind of layout. One way to avoid this design pitfall is to use a grid system, such as a 960 or 1140 pixel grid. At the very least, have a predetermined structure for your site to dictate logical placements for design elements and content.

The Slide Rule Universe lacks consistent alignment.

Bad Typography

Typography mistakes occur in several ways. Text can be too small to read or too large to fit within the site. Too many fonts look chaotic and disjointed. Sites can use font faces that do not fit with the theme of the site. Sites can use non-web safe fonts that don’t display correctly.

Shop In Paradise uses many competing fonts and displays some fonts in images.

When using typography for site design, choose a consistent font or set of fonts that fit with the theme of the site. Use font stacks — i.e., a list of fonts that browsers can use on your site — to ensure fonts display correctly in every browser. Make sure your text isn’t too small to read or larger than is necessary.

Inconsistent Styling

A common web design pitfall is inconsistent styling. All headers, sub-headers, and content should have the same design attributes. For example, if your title header is an orange, sans-serif font on one page, it should be the same orange, sans-serif font on every other page. If one of your links is red with a dark red rollover state, all of your links should be red with a dark red rollover state. Mixed-and-matched design elements create chaos.

Sixties Press lacks consistent site styling.

No Navigational Hierarchy

This is the perfect example of function taking precedence over design. Site navigation is one of the most important pieces of functionality provided to a user. Keep your navigation links in one place and link to important information first. Use fly-out or dropdown menus to give your navigation a hierarchy and keep your site from becoming cluttered.

MrBottles uses different navigation methods throughout the site.

Poor Color Schemes

Color sets the mood of a site and can even influence user behavior. Too much color can look obnoxious while not enough can look bland. Site colors should work well together to highlight your site without competing for attention.

George R. R. Martin’s site uses pale colors that could set the wrong mood.

Poor Use of Contrast and White Space

Contrast and white space help lead users eyes through your site. Sites with too little contrast are difficult to read and strain the eyes. Sites with little white space feel crowded. On the other hand, sites with too much contrast are also difficult to read and sites with too much white space feel empty.

This site has difficult to read text because of too little contrast.

Too Many Links

Just as too much text can be overwhelming, too many links can also detract from a site. I have already mentioned how navigation links should be arranged hierarchically with additional links provided in fly-out or dropdown menus. The right amount of well organized and identified links gives users a sense of direction. Too many links will only confuse and overwhelm users.

Almost everything on the Arngren site is a link.

Summary

While many of the site examples here are extreme cases of mistakes in web design, the same principles can be applied to any site. The next time you visit a site and feel like something is “off,” try and pinpoint what is not working about the design and learn from the experience.

Drew Coffin

Drew Coffin

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

  1. Janet Baudevin September 18, 2012 Reply

    Great Fun and very instructive too. The ‘World’s Worst Website’ is so horrendous it makes you quite sick to look at it! Good tips, thank you

  2. Vincent Flanders September 18, 2012 Reply

    The editor of this site knows it all.
    Probably he is one of those a useless one man band designers–geeks that never cross browser tests his work.
    Look at his BIG mistake in the navigation bar.
    Click on ARTICLES and a transparent nearly unreadable ‘menu’ appears, and on the home pag it is disappears behind the images!!!!
    HOW STUPID CAN YOU BE?
    Plus he still uses the HOME button. It is now common knowledge that clicking on the company name / banner that this will take you to the home page.
    Just UNBELIEVABLE. Might work on some geek-browsers but not on mine.

    Vincent Flanders.

    • Kerry Murdock September 18, 2012 Reply

      Thank you, Vincent, for the feedback.

      Can you tell us what browser you are using? We would like to correct the drop-down menu error that you’ve described. We can’t replicate it in any PC or Mac browser we have here.

      Best wishes,

      Kerry M.
      Publisher

  3. Tim Blake September 18, 2012 Reply

    Nice article Drew. It’s similar to an article I wrote a while back http://blakedesignsolutions.com/2012/7-reasons-why-your-business-website-is-failing/. Perhaps your readers — with the exception of Vincent ;-) — would enjoy reading it.

    Kerry, as far as what Vincent is talking about, I did see one issue with your top navigation. I’m using Safari 1.5.7 on a Macbook Pro, running OS X 10.6.8. Occasionally all of the menu items are overlaying one another so that you can’t read any of the words. A simple refresh seems to fix the problem.

  4. Sacramento Dentist September 23, 2012 Reply

    What are you thoughts on template design websites? You know where the webmaster has several templates that you choose from and as the website owner you can drop in your own content?

  5. Drew Coffin September 23, 2012 Reply

    I have a few thoughts on template design sites. I would say it really depends on the template, how much it is customized, and what the site will be used for.

    First of all, if the template is poorly designed or structured, it should obviously be avoided. However, I have seen beautiful templates that can be easily customized to fit a site brand or style.

    That being said, if you are using one of these well built templates, I would always recommend tailoring them to fit your brand or site style.

    For example, there are a lot of great templates built for WordPress and I have seen the same template customized for several sites with each one looks unique. I would never recommend throwing your logo and content into a default template used by fifty other sites. Have it customized.

    Finally, it really depends on what you are using the site for. If you’re a small business that just wants a web presence with a few pages to a site, a template could be perfect for you (and less expensive). On the other hand, if you’re a large business that needs a lot of pages and ecommerce, you should probably have a fully fledged, custom site.

    Again, it really depends on the template, the amount of customization, and what the site will be used for. But I do think there are instances where a customized template is the way to go.

    Hope that helps!

  6. Mikie November 24, 2012 Reply

    Yes, because when you dgesin a website you can make all the changes that you want, you decide what type of website it is, and in simpler words you’re in control. Its the same with your life. You decide how you want your life to be, just like a website. However it’s a lot more difficult.

  7. JC May 10, 2013 Reply

    If you really want to find poorly designed websites, just do a search for yellow book websites by putting “yellow book usa, inc. all rights reserved” in your Google search. Can find a write up regarding these poorly designed sites and disadvantages here, let me know what you think: http://northwoodswebdesigns.com/blog/disadvantages-of-using-yellow-book-pages-for-your-online-web-presence/

  8. shahzaib September 3, 2013 Reply

    There are some irritating elements in web design which push visitors away . Poor qualities with a live example make your article more substantial & interesting. Thanks for helping us.