20 Reasons Why Your Website Design Sucks Part 1

We all have or have heard about those clients from hell, those that really love pink pages with red text. Even worse, what about those people who call themselves “web designers” with expensive prices and services listed on their really messy, horrible and amateur portfolios, just because they made their uncle’s business page and they liked it. Unfortunately, many people believe that web design is all about personal style and smart IDE’s with pre-built buttons. Let me tell you something – they are wrong. I love to play football, but that doesn’t make me a professional player, and Dreamweaver does not make you a professional web developer. Web Design and development demands knowledge, practice, daily effort to learn and study, and passion, like professional football players. (Design conventions: Necessary guidelines in order to improve a specific design.) No matter how good or bad personal style is, the truth is that everyone has one. However, when design conventions are left out of a project, the result will be a bad or uninteresting design. That is exactly what happens with those terrible clients, when they try to implement their personal style without knowing anything about design conventions.

1) Balance

Balance is a basic principle in design. It is directly connected to every element, and helps you control the design flow of your page. There are two important concepts in balance – symmetrical and asymmetrical balance. With Symmetrical Balance, elements have equal weight on both sides, leading to a formal and traditional web site, however, with asymmetrical balance, elements have a different weight which leads to a different and unique layout. I decided to include this topic because its importance is major in layout design. If incorrectly used, it can lead to the total ruin of your layout. Above is a good example of asymmetrical balance. Did you notice the “DECO Windshield Repair” text on the right, and the background map image on the left? Although those elements do not have the same weight, it feels perfectly balanced. However, if you hide the text on the right, the page will lose its balance very quickly. Now take a look at the white bottom section, those three columns don’t have the same weight, but it’s perfectly balanced because the left text (“You can’t be everywhere…”) has equal weight as the top right text on the red background. Balance The result is a “cross balance”, meaning that the weaker and strong elements create a balance between them. I consider this to be of huge importance in asymmetric balance. The website above fails in so many ways that I could use it as example in the remaining nine topics below, but let’s stay focused on this one. Do you feel the balance? Yes, you are correct, there is no balance. The left side has plenty of images plus a video of the person standing, which results in the left side having more weight than the image on the right.

2) Bevel and Emboss

I had to include this one. It’s really annoying to see the misuse of this layer style. For those who are starting, I understand that you think bevel and emboss is a nice effect and it should be everywhere on your page, but it’s not. Bevel effects should be used sparingly. There are plenty of tutorials on how to transform bevel and emboss into a powerful technique, but if you don’t know how to use it, don’t use it at all. Bevel and Emboss

3) Distracting Backgrounds

Implementing a busy background distracts the user’s attention, hides important information, and disrespects visual hierarchy. If your background image has a higher visual impact than everything else, users won’t catch the message of your website and will leave quickly. Background John Kavanagh’s website makes good use of background images, respecting visual hierarchy and also content information. Reading is left to right, and in this case, the user’s attention follows the buildings on the left towards the Eiffel Tower and London Bridge on the right, consequently leading to navigation (which is not visible in the image). This is a perfect example of how background can be used as a “tool” for design flow. Distracting background Above is a perfect example of what not to do with your background.

4) Lack of Detail

If your website sucks, it’s probably because you didn’t care about the minor things. When you think your design is complete, you need to start from the beginning and try to apply detail on every single element. As soon as you finish with detail, you need to start again and consider where it can be improved. A single stroke, light effect, or shadow makes the difference between a good and a great design. Detail Blackberry’s website is a good example of what you can achieve by spending time with details. Detail Detail, detail, detail. Lack of detail For a company with the size and impact of Microsoft, their website is far from great. It’s definitely a good example of lack of attention and detail.

5) White Space

White space refers to the space between elements, and it does have nothing to do with the color. If you don’t know what I am talking about, stop your design projects and read about this subject – How to Actually Use Negative Space As Design Element. White space defines the space/distance between your site elements, providing good readability, focus, and design flow. It also gives your website a clean and professional look. Clean layout is not the same as minimalist, think about clean as the opposite of cluttered where content is all over the place. One other thing you should consider is to use the same height between elements, so if you have three divs vertically aligned, and the middle div is 50px from the top div, it should also be 50px from the bottom div. This is not mandatory, but helps you achieve a good balance between elements. White-space Uberspace’s website makes good use of white-space. White-space Just looking at the image above, gives me a headache. The quantity of information is overwhelming, but the way it is displayed is even worse. Cluttered information makes the user feel lost and unhappy. Avoid it!

6) Flash Intros

Once upon a time, having a flash intro in your website would make you a web design ninja. There are plenty of great intros out there, and plenty more of really bad attempts. Nowadays, most visitors want quick access to information and when you demand them to wait, they leave. If you want an intro in your website, make sure it has a point, it adds value and that it is well made. Flash intros

7) Music

So I have my headphones on, I open several tabs, and suddenly I jump from the chair because irritating music starts playing. I then search for the correct tab and when I find it, I search for the mute button and guess what, there isn’t one. I don’t want to mute my speakers so I close the page and I won’t return to that loud place. Loud and boring music coming from your website is really annoying, but not having a way to shut it down, is an exit ticket from your website. Music

8) Tables

This is a controversial topic, some people defend the use of tables and others not so much.  This topic is not meant to convince you not to use tables, but to use tables when and where you should. Personally, I do not remember the last time I’ve used tables, I simply don’t like it. However, for tabular data, tables are the best choice, since it increases readability and organization. Tables Shopify’s pricing page is a good example of how great the use of tables can be for tabular data. Tables Never use tables to style your layout!

9) Colors

The wrong choice of colors can ruin an entire website. Contrast, saturation, types of colors, target audience, style, etc. There are many factors you need to consider when choosing the right colors for your website. If you don’t know where to start, Tina wrote a great article about this subject – Colors in Web Design: Choosing a right combination for your Website. Using too many bright colors, or a similar contrast for your background and foreground elements, or even warm colors along with cool colors, you are basically forcing your visitors to leave. Colors Color needs to fit perfectly, according to your target audience, style and personality. If you enter the website above, please be sure to use sunglasses.

10) Overflow

Unless you’re building a website with horizontal layout, showing a horizontal scroll bar is a mistake and looks bad. Make sure your layout is optimized for a resolution of 1024 x 768 pixels, this way 98% of your visitors will be able to visit your website without problems. If you really want to use a bigger background image, be sure you hide the horizontal scroll bar, using the CSS property overflow-x: hidden.

Notes

I hope you have found this article useful. I’m preparing part two, so if you have any suggestions, feel free to make them.

Ruben D'Oliveira

I am a Portuguese UI/UX designer, visual designer and writer. I have a Bachelor's Degree in Information Technology and Multimedia and I'm addicted to web technologies and design. Feel free to check my work on Behance or Dribbble. You can also follow me on Twitter.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Marco Avellaneda says

    thanks for your help in discuss the essence of the desing, im starting in this, and i see very beautiful web pages, and i see my job and i realize the bad work i do, but im trying to learn, so thankyou. sorry for my english

  2. Nick says

    I think I just found one of my favorite sites… Good job. I find most the articles on this site are funny as hell and also informative. So why not learn more about web development and laugh at the same time?

  3. Richard says

    Good post, I’ve given it a couple of bookmarks.

    I agree on your point about choosing colours which compliment each other. The right combinations can be the difference between someone clicking the Buy button…or the “x” in the right corner of their browser.

    We have had a look at how different colours promote different reactions.

    For example, red is an emotional colour which is associated with danger, power and passion. It’s extremely visible, and that’s what makes it the colour of choice for road signs, national flags…and web site highlights. Using red sparingly is a great way of enhancing calls to action such as “buy” buttons or text links. It almost forces the viewer to look where you want them to.

  4. Judy says

    Ruben,

    Great information, but in the spirit of improvement, I feel compelled to tell you that your grammar sucks. “Reasons Why” is not correct; it should just be “Reasons”. And please, please stop using only a comma between what should be two complete sentences. Writers who don’t pay attention to grammar aren’t really a lot better than web designers who don’t pay attention to design.

    • Matt says

      @Judy

      Good thing this is probably Ruben’s second language huh? ;-)

      I understand that it’s fun to jab at people you don’t think are as “good” or “smart” as you are though. I bet you’re wonderful company…

  5. says

    Let’s hear about POP-UPS, slide-in advertisement panels, nag screens, redirects, and other sneak-attack javascript “Suprise” advertisements. What a way to ruin a website design, as well as chase your visitors away…

  6. says

    Thank you. I can now design a website without any hesitations how it will look like. Your tips are very straight forward and it helps me a lot. Thank you.

  7. Igor Shevchenko says

    Awesome stuff for newbie like me, I’m planning to redesign my blog. This was helpful.

  8. says

    Whit space can make all the diference in a webpage. Also, this article made me realize I need to go back in and add some more detail to my personal website. Thanks for the article.

  9. Finley says

    This is fantastic, great tips ever. I hate tables as well. I’ve got nothing against them but div tags rule all the way. I’m a great believer of white space. it gets me organized on my get organized website
    _______________________________________________
    “A person who aims at nothing is sure to hit it.” – Francis Bacon

  10. Harris says

    Great tips although the wrong people are reading them. There should be a police dept for bad designers, lock em up.

  11. Lycress says

    How do you feel about the (in my opinion) overuse of sites with big banner sliders on every page?

    • says

      Hi Lycress.
      You are right about the overuse. Sliders started to be widely used as a web design trend a couple of years ago and that’s because they can be a great asset on a website – (for instance) showing several products in one single container is amazingly useful. But as trends, I believe sliders will start to “fade” soon enough.
      Nevertheless, they are widely used because they are very very useful to most people, in several areas. Overuse is bad, but it does not make your website suck, it makes it traditional.
      :)
      Thank you

  12. Sia says

    Websites with background music are really irritating and thats what happens with me always! ;)
    Waiting for Part 2 ! :)

  13. says

    Damn! I just finished designing a table for my SEO packages Web design packages pages – starting to second guess now…

  14. Fredrik says

    If u dont use tables what should u use instead, if u want to show like the picture taken from Shopify (first picture section 8)? I you can plz post a url to:)

    • says

      Hi Fredrik,
      You should use tables for tabular data. For layout you should use CSS. The Shopify example uses tables and illustrates what you can do with it.. but just for tabular data.

      • Amam says

        Yeah, agree. Table will make our code hard to organize compare to div.But, its good for tabular data.

  15. Dodge says

    Very good, and made me chuckle a lot too. Some really good tips, examples and analysis. Looking forward to part 2.

  16. says

    I LOVED this article! I couldn’t have said it better myself! Unfortunately I am asked to do many website evaluations, and 90% of them are the crap you speak about above. I am still trying to find a ‘nice’ way of telling them to just let me redesign the thing!
    Looking forward to Part 2 :)

  17. John Mellencamp says

    All in all, great article.

    Though, I think most of us that visit 1stwebdesigner.com have a firm grasp on why Mary’s World ‘O Cats website is number one on websitesthatsuck.com. Perhaps, try to find sites that aren’t so far on the other end of the spectrum, but still could benefit from the corresponding point above. Because, at least to me, some of the meaning gets lost when you compare a site designed a year ago to one whose heyday was during the Clinton Administration.

    Anyway, just a thought.

    • says

      Hi John.
      Thank you for your input. You would be amazed with the number of “designers” that still make websites similar to the examples I gave.

      Nevertheless, thoughts are always welcome and I believe you have a point. I will try to do that on the second part.

      Take care

  18. says

    Excellent article, now if there were a way to get clients to understand they are not designers. I’ve even worked for a company where the owner wanted to dictate design of websites his company built but didn’t know anything about design principals. Could letting a non-designer dictate design fall in this category?

    For the second set to this series you could touch base on distracting animations, lack of optimization with large images, or maybe poor typography. I’m sure I could think of more but those three came to mind. Great post Ruben!

    • says

      Hi David.
      Yes, you are correct. Letting non-designers in charge results in bad design. It’s really hard to change their mind, sometimes impossible. On those cases, everything we can do is to minimize the damage.

      Thank you for your ideas, I will try to include those.

      Thanks

    • Matt says

      David, I’m not sure if you are aware, but your Ping Designs logo is extremely close to looking like a Swastika. Maybe it’s just me, but that was the first thing I thought of when I saw it. And when it’s rotated at an angle, like on your website, it really drives that home. Anyway, I’m not saying this to bash you in any way, and if I am the only one who sees that, please disregard this post, but at least take a look at it. Thanks.

  19. Art says

    usability and color – this is what we should start doing the design. Thanks for the article!

  20. raverture says

    What I do not really like are the flash intros and distracting backgrounds. And looking forward for more tips in part 2.

  21. says

    Hi Ruben,

    Great article and thanks for the mention of my website – always nice to be used as a positive example! :)

    For what it’s worth the background on my site changes constantly depending on the time of the day and the weather. The structure you identified always remains the same but with the weather here in Manchester predominantly being cloudy or rainy, the background is sometimes more distracting than others – with over 120 different iterations it’s difficult to get that balance always right!

    Thanks again and congratulations on a very complete and insightful article.

    John

  22. says

    Could you please elaborate on why you should never use tables to style your layout? I used tables nested within tables nested within tables on my website.

    • says

      Hello Erica,

      Maveric just said almost everything. You should use tables only for tabular data. Tables are bad for Accessibility, SEO, page loading time, usability, printing, redesign, etc.

      Feel free to make more questions.

      Thank you!

    • Manny says

      Hi Erica,

      Couldn’t help but notice your content on tables, below are a few reasons why you shouldn’t use tables for your layout:

      Valid XHTML – This is the number one reason to use CSS for layout. If you use tables for layout, you are writing invalid XHTML.

      Tables are Inflexible – While it is possible to create table layouts with percentage widths, they are often slower to load and can dramatically change how your layout looks. But if you use specified widths for your tables, you end up with a very rigid layout that won’t look good on monitors that are sized differently from your own.

      Nested Tables Load More Slowly – The most common way to create fancy layouts with tables is to “nest” tables. This means that one (or more) table is placed inside another. The more tables that are nested, the longer it will take for the Web browser to render the Web page. In Internet Explorer, this results in images and text bouncing around on the screen until they figure out where to place them.

      Tables Hurt Search Engine Optmization – The most common table created layout has a navigation bar on the left side of the page and the main content on the right. When using tables, this (generally) requires that the first content that displays in the HTML is the left-hand navigation bar. Search engines categorize pages based upon the content, and many engines determine that content displayed at the top of the page is more important than other content. So, a page with left-hand navigation first, will appear to have content that is less important than the navigation.

      Just a few reasons why not to use tables. Hope that helps.

  23. Jay Dawg says

    Earlier, I was telling myself “Geez, this site posts anything…” and I thought about unsubscribing. It turns out that this site offers anything with a reason, however; and this post definitely makes up for it. Thanks. You used the perfect examples, too.

    • says

      Thank you! Great to see that you changed your mind :) I’m Glad you will stay with us. Also, if you have ideas for future articles, feel free to make them.

      Take care.

  24. Michael Francis says

    I look forward to the next article. I don’t mind too much when other people use bad design, it helps my business. But I definitely do not want people to think my site needs help! Ruben, what do you think of my design? (Click on My Name)

    • says

      Hi Michael,

      Thank you. Glad you like the article.

      Regarding your website, I would change some things there. I would remove the flash animation, the navigation buttons should be with the same colour and typography. Give it a little more white-space too, and be careful with color contrast.

      For more tips, you should go to sites like http://www.conceptfeedback.com/

      Thank you and good luck.

  25. Ben says

    Your right about tables. They need to be used correctly. They are best as you said for tabular data.

  26. Matthew says

    The Web King site blew my mind. I’m shocked at what people consider a well-designed, creative website. Talk about flushing your money down the toilet.

  27. says

    This is an interesting post. In this competitive world in order to stand out you need to be unique. Being unique and different gives a positive impression. Great tips. A generous share of information. Thanks.

  28. Robbie Gee says

    This is some really great info!

    There are soooo many ‘web designers’ out there now-a-days that just don’t have a clue about design factors & how you never get a 2nd chance to make a 1st impression, I hope some of them get a chance to check out this here post & take some notes… :o)

  29. Adán. says

    Hi, Ruben! tudo bom?

    well your post us very usefull!

    I learned to design a self-taught, so i desing horrible!! hehe.

    despite that, I like the design and try to learn in order to make a good website
    and I totally agree with your tips,

    but I try to create a comfortable and practical design, but I always end up making a mess.

  30. Melody says

    Putting hard to see text on a crazy patterned background is pretty much like saying you don’t want customers to see your product/service..BIG no no..

  31. Mister Ortiz says

    Awesome post. All of these are very true. I’m all about White Space and Minimalist Websites. Thanks for sharing!

  32. Deree says

    Nice points and great example sites, I’ve got only one thing to add…

    “If you really want to use a bigger background image, be sure you hide the horizontal scroll bar, using the CSS property overflow-x: hidden.”
    Another option would be to put the big background image as a background to body (or html)-element like this:
    body { background: #000 url(thebiggerbackground.jpg) no-repeat center 0; }. No need for overflow then.

    In the example the background would be faded to black. When using big backgrounds, always remember to think about the big screens too, so they don’t end up with ugly border when the image ends and their screen doesn’t.

  33. Dan says

    Thanks for some great tips on here. Some of the more blatant mistakes I would never make, but I found the bits on overflow and detail really useful ^.^

  34. says

    I really like your point about balance. I don’t know if I’ve ever really thought of it that way but it makes sense that you have to be balanced from left to right and top to bottom. Your other points were good as well but I think have the fun was just seeing the awful designs!

  35. Tom Ross says

    Great article. It’s amazing how many websites still make these mistakes. I still see most of them each week in my 30 minute redesign series. Particularly agree with the attention to detail, Microsoft’s site really sucks!

  36. Rey says

    Great first part list, webking.com is the best of the list, love the design. Animated gifs, tables, repeating backgrounds … As for Flash Intros it is a no no, only on specific landing pages, can’t wait for canvas/html5 intros with no “tools” to block them.

  37. Richard Ambrose says

    Re: Point 10,
    “Unless you’re building a website with horizontal layout, showing a horizontal scroll bar is a mistake and looks bad. ”
    This is true. Your website has a horizontal scroll bar and it does look bad. I use that css property on all my websites.

  38. Matt says

    Great roundup of classic mistakes and design don’ts – to be honest I’m still too shocked at the Web King at number 8 to comment any further.