20 Reasons Why Your Website Design Sucks Part 1

Posted in Tips, Web Design • Posted on 75 Comments

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.

18 Written ArticlesWebsite

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.

75 Comments Best Comments First
  • alechko

    Wednesday, May 25th, 2011 19:08

    29

    Great and very usefull article! Waiting for the 2nd part!!

    +1
  • Ahsan Idrisi

    Wednesday, May 25th, 2011 19:10

    26

    Great article, good things

    0
  • Lex Koff

    Wednesday, May 25th, 2011 20:01

    27

    =))) thanks for the compelling article =)) some examples just make my eyes cry =)))

    0
  • Ginva

    Wednesday, May 25th, 2011 16:37

    25

    Wow, really interesting…. can’t wait for Part 2 :)

    0
  • Dianne Howard

    Wednesday, May 25th, 2011 09:19

    24

    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.

    0
    • Ruben D'Oliveira

      Wednesday, May 25th, 2011 14:53

      23

      Absolutely! Thank you for your input :)

      0
  • Neil Renicker

    Wednesday, May 25th, 2011 21:31

    28

    Thanks for the great, simple article. Had me laughing a couple times :)

    0
  • Afzaal Ali

    Tuesday, May 24th, 2011 14:06

    1

    20 or 10 ?

    0
    • Rean John Uehara

      Tuesday, May 24th, 2011 17:33

      3

      Part 2 will cover the next 10.

      0
      • Afzaal Ali

        Wednesday, May 25th, 2011 11:44

        16

        Thanks for editing title. Its clear now :)

        0
  • Erica

    Thursday, May 26th, 2011 05:43

    35

    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.

    0
    • Manny

      Thursday, May 26th, 2011 12:35

      44

      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.

      0
    • Ruben D'Oliveira

      Thursday, May 26th, 2011 15:25

      39

      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!

      0
  • John Kavanagh

    Thursday, May 26th, 2011 13:00

    36

    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

    0
    • Ruben D'Oliveira

      Thursday, May 26th, 2011 15:30

      40

      Hi John,
      Thank you!

      Yes, I noticed that and I really like your background concepts :) Congratulations for the great website.

      Take care

      0
  • Jay Dawg

    Thursday, May 26th, 2011 04:40

    34

    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.

    0
    • Ruben D'Oliveira

      Thursday, May 26th, 2011 15:17

      38

      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.

      0
  • aditia

    Thursday, May 26th, 2011 07:13

    33

    agree emboss and bevel are really hard to combined with other part I never used that

    0
  • Matthew

    Wednesday, May 25th, 2011 20:43

    30

    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.

    0
  • Ben

    Wednesday, May 25th, 2011 20:47

    31

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

    0
  • Michael Francis

    Wednesday, May 25th, 2011 22:44

    32

    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)

    0
    • Ruben D'Oliveira

      Thursday, May 26th, 2011 15:15

      37

      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.

      0
  • Jared Detroit

    Tuesday, May 24th, 2011 22:52

    8

    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!

    0
    • Ruben D'Oliveira

      Wednesday, May 25th, 2011 14:03

      18

      Thank you, Jared. Yes, Balance should be everywhere, everytime. ;)

      0
  • Dan

    Tuesday, May 24th, 2011 17:22

    9

    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 ^.^

    0
  • Ruben D'Oliveira

    Tuesday, May 24th, 2011 20:30

    7

    Hi everyone,

    I am glad you found the article useful.

    Thank you / Obrigado :)

    0
  • Tom Ross

    Tuesday, May 24th, 2011 14:18

    6

    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!

    0
  • Matt

    Tuesday, May 24th, 2011 16:23

    2

    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.

    0
  • Rey

    Tuesday, May 24th, 2011 13:40

    5

    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.

    0
  • Deree

    Wednesday, May 25th, 2011 00:06

    10

    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.

    0
    • Ruben D'Oliveira

      Wednesday, May 25th, 2011 14:11

      21

      Good tip, Deree.

      Thank you :)

      0
  • Renato Alves

    Wednesday, May 25th, 2011 00:53

    11

    Hi Rubem, I reallly loved your article. Looking forward to prat 2. Cya then! :)

    0
    • Ruben D'Oliveira

      Wednesday, May 25th, 2011 14:11

      22

      Thank you, Renato :)

      Part 2 will come out soon.

      0
  • Robbie Gee

    Tuesday, May 24th, 2011 23:12

    15

    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)

    0
    • Ruben D'Oliveira

      Wednesday, May 25th, 2011 14:08

      20

      I’m glad to know it was useful for you. Auto-play is irritating :P

      0
  • Mister Ortiz

    Tuesday, May 24th, 2011 19:06

    12

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

    0
  • Melody

    Tuesday, May 24th, 2011 21:35

    13

    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..

    0
    • Ruben D'Oliveira

      Wednesday, May 25th, 2011 14:00

      17

      Indeed, Melody. Visual hierarchy must be respected.

      0
  • Adán.

    Tuesday, May 24th, 2011 23:07

    14

    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.

    0
    • Ruben D'Oliveira

      Wednesday, May 25th, 2011 14:06

      19

      Olá Adán :)

      Thank you. Sure, no problem – I will send you some suggestions to indexofdvd email address.

      0
  • Lycress

    Tuesday, May 31st, 2011 08:51

    58

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

    0
    • Ruben D'Oliveira

      Wednesday, June 1st, 2011 22:36

      62

      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

      0
  • Dan

    Thursday, June 2nd, 2011 17:24

    64

    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.

    0
  • Igor Shevchenko

    Friday, June 3rd, 2011 03:13

    65

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

    0
  • Finley

    Thursday, June 2nd, 2011 02:15

    63

    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

    0
  • Harris

    Wednesday, June 1st, 2011 14:00

    60

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

    0
  • Ruben D'Oliveira

    Wednesday, June 1st, 2011 22:20

    61

    Thanks guys :) Part 2 will be out this month.

    0
  • jet

    Thursday, June 23rd, 2011 10:14

    66

    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.

    0
  • Scott

    Thursday, June 23rd, 2011 16:43

    67

    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…

    0
  • Phillip

    Tuesday, December 6th, 2011 05:57

    74

    HAHAHAA

    Thank-you I had a couple laughs.

    Wow!

    0
  • sonia

    Friday, January 6th, 2012 15:01

    75

    It’s very useful. Thank you very much!

    0
  • Marco Avellaneda

    Friday, August 19th, 2011 07:23

    72

    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

    0
  • Nick

    Sunday, August 14th, 2011 09:55

    71

    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?

    0
    • Gosha

      Wednesday, October 5th, 2011 12:37

      73

      I absolutely agree with you !!!

      0
  • Judy

    Friday, June 24th, 2011 06:13

    68

    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.

    0
    • Matt

      Friday, June 24th, 2011 15:20

      69

      @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…

      0
  • Richard

    Friday, June 24th, 2011 15:21

    70

    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.

    0
  • Jayman Pandya

    Tuesday, May 31st, 2011 11:51

    59

    Awesome read… Bring on the second part soon Ruben…

    0
  • David

    Friday, May 27th, 2011 04:05

    45

    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!

    0
    • Matt

      Saturday, May 28th, 2011 19:02

      56

      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.

      0
    • Ruben D'Oliveira

      Friday, May 27th, 2011 16:43

      48

      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

      0
  • John Mellencamp

    Thursday, May 26th, 2011 22:33

    46

    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.

    0
    • Ruben D'Oliveira

      Friday, May 27th, 2011 16:50

      49

      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

      0
  • Art

    Thursday, May 26th, 2011 11:14

    43

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

    0
  • Ruben D'Oliveira

    Thursday, May 26th, 2011 15:31

    41

    Thank you once again, everyone.

    Part 2 will come out soon enough.

    :)

    0
  • raverture

    Thursday, May 26th, 2011 10:44

    42

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

    0
  • Samantha Prinsloo

    Friday, May 27th, 2011 15:54

    47

    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 :)

    0
  • Ben D

    Saturday, May 28th, 2011 05:15

    53

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

    0
  • Sia

    Saturday, May 28th, 2011 11:30

    55

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

    0
  • Fredrik

    Friday, May 27th, 2011 19:42

    52

    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:)

    0
    • Ruben D'Oliveira

      Saturday, May 28th, 2011 17:17

      54

      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.

      0
      • Amam

        Monday, May 30th, 2011 14:30

        57

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

        0
  • Dodge

    Friday, May 27th, 2011 16:01

    50

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

    0
  • Pal SIngh

    Friday, May 27th, 2011 17:59

    51

    Brilliant Article, great info
    cheers man

    0
  • Richard Ambrose

    Tuesday, May 24th, 2011 12:52

    4

    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.

    -1
  • sonia

    Friday, January 6th, 2012 15:01

    75

    It’s very useful. Thank you very much!

    0
  • Phillip

    Tuesday, December 6th, 2011 05:57

    74

    HAHAHAA

    Thank-you I had a couple laughs.

    Wow!

    0
  • Marco Avellaneda

    Friday, August 19th, 2011 07:23

    72

    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

    0
  • Nick

    Sunday, August 14th, 2011 09:55

    71

    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?

    0
    • Gosha

      Wednesday, October 5th, 2011 12:37

      73

      I absolutely agree with you !!!

      0
  • Richard

    Friday, June 24th, 2011 15:21

    70

    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.

    0
  • Judy

    Friday, June 24th, 2011 06:13

    68

    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.

    0
    • Matt

      Friday, June 24th, 2011 15:20

      69

      @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…

      0
  • Scott

    Thursday, June 23rd, 2011 16:43

    67

    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…

    0
  • jet

    Thursday, June 23rd, 2011 10:14

    66

    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.

    0
  • Igor Shevchenko

    Friday, June 3rd, 2011 03:13

    65

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

    0
  • Dan

    Thursday, June 2nd, 2011 17:24

    64

    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.

    0
  • Finley

    Thursday, June 2nd, 2011 02:15

    63

    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

    0
  • Ruben D'Oliveira

    Wednesday, June 1st, 2011 22:20

    61

    Thanks guys :) Part 2 will be out this month.

    0
  • Harris

    Wednesday, June 1st, 2011 14:00

    60

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

    0
  • Jayman Pandya

    Tuesday, May 31st, 2011 11:51

    59

    Awesome read… Bring on the second part soon Ruben…

    0
  • Lycress

    Tuesday, May 31st, 2011 08:51

    58

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

    0
    • Ruben D'Oliveira

      Wednesday, June 1st, 2011 22:36

      62

      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

      0
  • Sia

    Saturday, May 28th, 2011 11:30

    55

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

    0
  • Ben D

    Saturday, May 28th, 2011 05:15

    53

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

    0
  • Fredrik

    Friday, May 27th, 2011 19:42

    52

    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:)

    0
    • Ruben D'Oliveira

      Saturday, May 28th, 2011 17:17

      54

      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.

      0
      • Amam

        Monday, May 30th, 2011 14:30

        57

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

        0
  • Pal SIngh

    Friday, May 27th, 2011 17:59

    51

    Brilliant Article, great info
    cheers man

    0
  • Dodge

    Friday, May 27th, 2011 16:01

    50

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

    0
  • Samantha Prinsloo

    Friday, May 27th, 2011 15:54

    47

    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 :)

    0
  • John Mellencamp

    Thursday, May 26th, 2011 22:33

    46

    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.

    0
    • Ruben D'Oliveira

      Friday, May 27th, 2011 16:50

      49

      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

      0
  • David

    Friday, May 27th, 2011 04:05

    45

    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!

    0
    • Ruben D'Oliveira

      Friday, May 27th, 2011 16:43

      48

      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

      0
    • Matt

      Saturday, May 28th, 2011 19:02

      56

      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.

      0
  • Art

    Thursday, May 26th, 2011 11:14

    43

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

    0
  • raverture

    Thursday, May 26th, 2011 10:44

    42

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

    0
  • Ruben D'Oliveira

    Thursday, May 26th, 2011 15:31

    41

    Thank you once again, everyone.

    Part 2 will come out soon enough.

    :)

    0
  • John Kavanagh

    Thursday, May 26th, 2011 13:00

    36

    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

    0
    • Ruben D'Oliveira

      Thursday, May 26th, 2011 15:30

      40

      Hi John,
      Thank you!

      Yes, I noticed that and I really like your background concepts :) Congratulations for the great website.

      Take care

      0
  • Erica

    Thursday, May 26th, 2011 05:43

    35

    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.

    0
    • Ruben D'Oliveira

      Thursday, May 26th, 2011 15:25

      39

      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!

      0
    • Manny

      Thursday, May 26th, 2011 12:35

      44

      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.

      0
  • Jay Dawg

    Thursday, May 26th, 2011 04:40

    34

    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.

    0
    • Ruben D'Oliveira

      Thursday, May 26th, 2011 15:17

      38

      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.

      0
  • aditia

    Thursday, May 26th, 2011 07:13

    33

    agree emboss and bevel are really hard to combined with other part I never used that

    0
  • Michael Francis

    Wednesday, May 25th, 2011 22:44

    32

    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)

    0
    • Ruben D'Oliveira

      Thursday, May 26th, 2011 15:15

      37

      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.

      0
  • Ben

    Wednesday, May 25th, 2011 20:47

    31

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

    0
  • Matthew

    Wednesday, May 25th, 2011 20:43

    30

    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.

    0
  • alechko

    Wednesday, May 25th, 2011 19:08

    29

    Great and very usefull article! Waiting for the 2nd part!!

    +1
  • Neil Renicker

    Wednesday, May 25th, 2011 21:31

    28

    Thanks for the great, simple article. Had me laughing a couple times :)

    0
  • Lex Koff

    Wednesday, May 25th, 2011 20:01

    27

    =))) thanks for the compelling article =)) some examples just make my eyes cry =)))

    0
  • Ahsan Idrisi

    Wednesday, May 25th, 2011 19:10

    26

    Great article, good things

    0
  • Ginva

    Wednesday, May 25th, 2011 16:37

    25

    Wow, really interesting…. can’t wait for Part 2 :)

    0
  • Dianne Howard

    Wednesday, May 25th, 2011 09:19

    24

    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.

    0
    • Ruben D'Oliveira

      Wednesday, May 25th, 2011 14:53

      23

      Absolutely! Thank you for your input :)

      0
  • Robbie Gee

    Tuesday, May 24th, 2011 23:12

    15

    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)

    0
    • Ruben D'Oliveira

      Wednesday, May 25th, 2011 14:08

      20

      I’m glad to know it was useful for you. Auto-play is irritating :P

      0
  • Adán.

    Tuesday, May 24th, 2011 23:07

    14

    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.

    0
    • Ruben D'Oliveira

      Wednesday, May 25th, 2011 14:06

      19

      Olá Adán :)

      Thank you. Sure, no problem – I will send you some suggestions to indexofdvd email address.

      0
  • Melody

    Tuesday, May 24th, 2011 21:35

    13

    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..

    0
    • Ruben D'Oliveira

      Wednesday, May 25th, 2011 14:00

      17

      Indeed, Melody. Visual hierarchy must be respected.

      0
  • Mister Ortiz

    Tuesday, May 24th, 2011 19:06

    12

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

    0
  • Renato Alves

    Wednesday, May 25th, 2011 00:53

    11

    Hi Rubem, I reallly loved your article. Looking forward to prat 2. Cya then! :)

    0
    • Ruben D'Oliveira

      Wednesday, May 25th, 2011 14:11

      22

      Thank you, Renato :)

      Part 2 will come out soon.

      0
  • Deree

    Wednesday, May 25th, 2011 00:06

    10

    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.

    0
    • Ruben D'Oliveira

      Wednesday, May 25th, 2011 14:11

      21

      Good tip, Deree.

      Thank you :)

      0
  • Dan

    Tuesday, May 24th, 2011 17:22

    9

    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 ^.^

    0
  • Jared Detroit

    Tuesday, May 24th, 2011 22:52

    8

    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!

    0
    • Ruben D'Oliveira

      Wednesday, May 25th, 2011 14:03

      18

      Thank you, Jared. Yes, Balance should be everywhere, everytime. ;)

      0
  • Ruben D'Oliveira

    Tuesday, May 24th, 2011 20:30

    7

    Hi everyone,

    I am glad you found the article useful.

    Thank you / Obrigado :)

    0
  • Tom Ross

    Tuesday, May 24th, 2011 14:18

    6

    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!

    0
  • Rey

    Tuesday, May 24th, 2011 13:40

    5

    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.

    0
  • Richard Ambrose

    Tuesday, May 24th, 2011 12:52

    4

    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.

    -1
  • Matt

    Tuesday, May 24th, 2011 16:23

    2

    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.

    0
  • Afzaal Ali

    Tuesday, May 24th, 2011 14:06

    1

    20 or 10 ?

    0
    • Rean John Uehara

      Tuesday, May 24th, 2011 17:33

      3

      Part 2 will cover the next 10.

      0
      • Afzaal Ali

        Wednesday, May 25th, 2011 11:44

        16

        Thanks for editing title. Its clear now :)

        0

Comments are closed.

54.226.7.15 - unknown - unknown - US