Tutorial: Elements of Web Design
As my favorite character StrongBad (http://www.homestarrunner.com) would say: “Augh! I can’t take it anymore!” My minor in college is web design and last semester I took a class about the art and design part of making a web page. It taught us what makes a good page and now I can’t stand to look at a really bad page for more than a few seconds! So I thought I would share some of the main points from my class to help out all you budding webmasters out there. Hopefully it will also make you unable to stand bad design so you can suffer with me!
*On a side note I will be using web pages for examples and I won’t be asking permission but I won’t be including titles or addresses in the pictures if I am referring to your page negatively. However, if you see your page and you want me to remove it just e-mail me at batgirlwi@yahoo.com and I will take it down right away.
There are four basic principles of web design: contrast, repetition, alignment, and proximity. And look they even make a nice acronym that you will never forget (crap).
Contrast
Google is almost an
extreme example of contrast. Look how they make the title in large
colorful type but they then make the rest of the text in small neutral
colors. They want the logo to stick in your head so you will remember
them.
Repetition
Creating repetition
can be as simple as having a main menu bar that is duplicated throughout
on every page. This site also uses repetition in how they use the same
color scheme (gray and dark gray) throughout their site.
Or you can have a
main menu bar on the side that is the same on every page. (Notice that
this site also uses a common color scheme of blue and white throughout the
page.)
Alignment
Do you see the strong
left alignment on this page? It forces your eye to travel down the page.
Now just imagine if this list of links was centered. It would look pretty
yucky wouldn’t it? Something like this...
This is so icky, I don't understand why people do this. At the very
least you could put the information into more than one column.
Proximity
I cut off everything
from this page except for the text content because that is the only
important part for this example. Look at how this person grouped together
all the items under Choose Your Path: but then separated those items from
the next paragraph. It might seem obvious but I have seen many pages were
they have extra room so they spread everything out. You don’t have to be
afraid of blank space! Some final tips to remember
The
basic idea behind contrast is to avoid making elements on that page that
are just similar.If the
elements are not the same they should be very different.
IF is one of the most effective ways to add visual interest to your
page.(There are many ways to
do this: large type with big type, thick lines with thin lines, or a
smooth texture with a rough texture.)
It is important to repeat visual elements throughout your web page.
This will help to organize your site and create unity within the page.
(You can repeat color,
shape, texture, sizes, line thickness, etc.) Repetition allows the viewer to recognize all the sections in your
page are related and that they all fit together.
Nothing should ever just be plunked down on the page.
Every element (type, color, size, line…)
should have some visual connection with another element on
the page. This will creat a
clean, sophisticated, fresh look.This
principle also bring up two issues that bug me a lot. First: You must have columns on your page, NEVER make text
content go from one side of the page to the other.
Not only does this make it hard to read but it also looks boring.
(Although if you choose to have a side menu bar you don’t need to
worry about this.)Second:
Don’t use center alignment on everything.
It is ok to use it to offset elements (like all the pictures on
this page are centered) but using it all the time will make your page look
ordinary and dull.
Any items related
to each other should be grouped close together. When multiple items are
in close proximity to each other they become one visual unit rather than
several separate units. This helps to organize information and reduces
clutter.
~ Squint at your
page. What elements stand out at you first? If nothing does then you
need more contrast on your page.
~Don’t use too many
animated gifs. They take forever to load and they don’t really add to the
viewer’s experience.
~Using texture
backgrounds: if it is even a little hard to read get rid of it.
~When picking colors
for your site don’t use the whole rainbow about three main colors is
enough. Make sure the colors look good together and are readable.
~Finally, look at big
company pages. They pay their webmasters big bucks so their pages are
usually good examples of design.
-More Link Exchanges-
Layout Design Copyright 2008 by MyrrhLynn. Shining Wind Copyright and property of Nextech and Amusement Vision and Sega, and Tony Taka. Image from Minitokyo.net
