BAD DESIGN
(How to learn from other people's mistakes)
INTRODUCTION
--- 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.
|
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
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. |
|