Dreamweaver - Bad Design Examples

(How to learn from other people's mistakes)


--- If you've ever watched a really bad movie and said to yourself: "this would be so much better if they only did this..." Then this is the lesson for you. By looking at bad design we will figure out what 'they' did wrong so we can avoid the same mistakes. Remember that design isn't just about aesthetic values, it's also about "information architecture." Good design isn't just to impress the eye, it's to convey information efficiently.


1) Don't annoy your viewers

  • Don't use frames unless you have to! - Frames are annoying and cause people to lose their way when navigating your site. Unnecessary Frames
  • No animated GIFs. These seem cool at first as you learn web design. But they take up a lot of space and the way they keep moving over and over again makes them annoying. Also the generic ones you can download for free are usually very tacky. The worst website in the world
  • Avoid bright & neon colors. Less is always more and bright colors can make your page hard to read, and thus annoying Just does everything wrong 
  • Be subtle- no strong backgrounds that overwhelm your page. The Worst background ever

2) Follow the rules

  • Make a site map. Your site will grow and people will want to have an easy way to find everything
  • Have a navigation bar immediately apparent (and easy to use.) This way visitors to your site have an idea of the kinds of things you have on the site. Page with no navigation scheme and bad design
  • Don't put any giant images or titles on your page. Make everything small and simple, so your page loads faster and no one element overwhelms your visitors. Website about bad websites that is a bad website 

3) Keep it simple

  • Use variations of the same colors as design elements- don't mix too many different colors- West Point History page - good use of difficult darker colors
  • If in doubt, keep it out. If you overwhelm the visitor with information or with choices, they will just go away. Boil everything down. Remember you are conveying information- not putting on a show Page with too much information, not enough organization
  • Keep the page small- long load times mean people won't come to your page. Dreamweaver reveals the approximate page size in the lower right corner of the window of the page you're working on. A page that is 60k (not too big) will take around 9 seconds to load for a user with a 56k modem. A page that is 150k will take 23 seconds, probably way too long to ask people to stare at a blank or incomplete screen. How do you keep a page small? Keep it simple!!!! The largest website I've ever seen- neat, but who has time? (650k)
  • Don't use a lot of different fonts. See how annoying this line is and how it doesn't fit in with the rest of this page ???!?!?!?!
  • If you find you're having trouble pulling off a design or an idea on your page, try starting from scratch with something simple. You can spend a long time trying to make a flawed design work, much longer than re-examining the design from a simpler perspective. Apple Computers - keeping a complicated site simple

Let's try these rules in action:

Let's do a quick redesign of one of our bad examples- HERE , to show how a few quick decisions can make a better website...

1 - All we have to do is apply the rules we went over above
a) take out the ugly background (Add a simple background image or make the page white)
b) make the fonts consistent (make them all Arial and black)
c) no loud colors (take out all those loud colors in the title and text and anywhere else)
d) no giant images or letters (make the title smaller)

Just by doing those things, the page already looks better--- HERE

2 - Let's simplify the page even more
a) take out all those border edges on the bottom of the page- the red is loud and there are borders within borders
b) make the main table more attractive by giving it a fixed size and more rows so it doesn't stretch across the page
c) put the introductory text in a table to rein it in a little
d) get rid of those horizontal rules, they're unnecessary
e) make a table for the title, with a simple background color, then change the color of the text so it stands out more
f) put the whole part of the page in a table and give the table a border that matches the background color of the title table

Now our page looks like THIS. It may not win any awards, but compare it to the old version HERE

If we have time...

Here are some examples of bad backgrounds using our mission sample page -
Example 1- The background not only clashes, but overwhelms everything else going on. The second background in the small box makes the text illegible
Example 2- These backgrounds are more subtle, but they don't pick up on other elements on the page
Example 3- Much Better- note that the background doesn't clash with the foreground, but especially look at the little box and it's background. If you make a table, then set its background to white, you can put it within another table with a different background for some interesting results.

Here are some examples of bad use of fonts-
Example 1 - Why is the top green? Why use italics for the navigation? If you can't answer questions about the design elements on your page, take them out and simplify them.

Here is a list of all the examples used in this lesson- plus a few more

Good Examples-
Apple Computers - keeping a complicated site simple    http://www.apple.com
West Point History- good use of difficult darker colors  http://americanhistory.si.edu/westpoint/index.html
Premonition Records - Good use of tables - http://www.premonitionandmusic.com/html/index2.html

Examples of Good Design from Mission Websites ....
Armenia - Good simple navigation scheme, nothing you can't do.
Australia - Straightforward- probably not done by an expert, but perfectly simple and well put together
Mexico - Lots of information, but put together well
Nicaragua - Practically nothing here content wise, but they avoided common mistakes- no waving flag, no horrible background. It's a good starting point...

Bad Web Design Examples-
Self - consciously bad website   http://www.angelfire.com/super/badwebs/
Websites that Suck    http://www.webpagesthatsuck.com/
The Web Page from Hell    http://www.ecnet.net/users/gas52r0/Jay/
The worst website in the world    http://www.geocities.com/webtekrocks/
Bad commercial site    http://www.ukappliance.co.uk/
Crazy site     http://www.00fun.com/kittyhello2.shtml
The Worst background ever     http://www.mewspage.pwp.blueyonder.co.uk/
No navigation scheme and bad design      http://www.tradeshop.com/master/custom.shtml
Too much information, not enough organization    http://www.oc.ca.gov/
Bad Frames    http://www.thecompaniongroup.com/tcg.html
The largest website I've ever seen- neat- but who has time? (650k)
Just does everything wrong      http://www.scopesys.com/
Bad Design      http://www.idealease.com/
Website about bad websites that is a bad website   http://www.powow.com/ammo/