1. RULES TO AVOID BAD DESIGN 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. 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. Avoid bright & neon colors. Less is always more and bright colors can make your page hard to read, and thus annoying Be subtle- no strong backgrounds that overwhelm your page. Example of a bad animated page and bright colors. Here Here Example of bad background. HereHere

2. RULES TO AVOID BAD DESIGN 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. A page without a navigation system and bad design. A page without a navigation system 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. Example of a bad website.Example of a bad website. example 1example 2 Is this a good example of a background? Click here for the answer Example two is the correct background. In example one, the background not only clashes, but overwhelms everything else going on. The second background in the small box makes the text illegible. In example 2, Much Better- note that the background doesn't clash with the foreground, but especially look at the little box and it's background.

3. RULES TO AVOID BAD DESIGN 3. Keep it simple. Use variations of the same colors as design elements- don't mix too many different colors. Good example.Good example. 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. Too much information and not enough organization.Too much information and not enough organization. Keep the page small- long load times mean people won't come to your page. 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 ???!?!?!?! What is wrong with this page? Click here for the answer 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..

4. RULES TO AVOID BAD DESIGN Make a bad site better. 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--- HEREHERE Click here to go to the next page. 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 HERETHISHERE Step 1 Step 2

5. RULES TO AVOID BAD DESIGN Fix this page. I want you to take this page and make it a good site. Copy the code and change things to make it a great site. When you are done, send it to your homework folder. Site to change. HereHere Lesson plan adapted from : http://www.un.org/events/workshop/dpi-unitar/2003/dreamweaver/bad-design.htm