3 - Rules to Avoid Bad Designing

25/08/2010 17:38

 HERE ARE THE 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. 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

ASSIGNMENT:  

Redesign the school we site.  Follow all principles - use Photoshop to do this and then explain in detail what rules were broken and how you fixed them.  There should be at least 15 changes to this web site.  The change is 1 point, the explanation of the change is 2 points each for a total of 45 marks.