| If you've decided to commit a good hunk of time to
creating a class web page, naturally you want your page to look
attractive and professional. In that light, the next step in
planning your web site is to learn about the principles of web design.
A really comprehensive, easy-to-read book for beginning web page
designers is The Non-Designer's Web Book by Robin Williams and
John Tollett. It is available from PeachPit
Press for about $30. Much of the information on this page is
from that book.
Basic Design Principles
Do's and Don'ts of Web Design
Basic Design
Principles
The four basic design principles that will make your web pages look
professional and well-organized are alignment, proximity,
repetition, and contrast. Keep
these principles in mind as you design your web site. You'll be
impressed with how good it looks when you're finished!
To see a PowerPoint presentation on these principles prepared by
Tammy Worcester, go to http://www.essdack.org/tips/webpageequal/sld001.htm.
The "example" pages used below are also Ms. Worcester's
creations.
I. Alignment
Choose one alignment--left, right, or centered--and stick with it.
Use the same alignment on the entire page. Don't mix alignments!
| Left aligned:
About Me
Curriculum
Grading
Rules
Links |
Center aligned:
About Me
Curriculum
Grading
Rules
Links |
Right aligned:
About Me
Curriculum
Grading
Rules
Links |
Also, avoid having text up against the left edge of the page.
Use a left page margin (found under Page Properties) or a block indent
(under Paragraph Properties) to move text away from the left edge.
Also, don't extend your text across the entire width of the screen; our
eyes have a difficult time moving that great of a distance. Some
experts recommend limiting line length to eight to ten words!
Beginners are encouraged to avoid using center alignment; it is
considered a "weak" alignment since the edges of the page have
no definition.
 | Example
1--Poor alignment. A combination of left- and
center-alignment was used, and the text begins against the left
margin and extends across the width of the page. |
| Example
2--Better alignment. The page has a strong left alignment.
The text was put in a column so the page is narrower and easier to
read. |
Back to top
II. Proximity
"Proximity" means that items that are close in relationship
are placed physically close to each other. Put a headline close to
the text it goes with. Put a caption close to the picture it
describes. Group things together that belong together.
Note how the subheadings on this page (Alignment, Proximity, etc.)
are placed closer to the text they introduce than to the text above
them, to which they have no relationship.
To get a blank line between paragraphs, etc., use the Enter
key. This will give you a "paragraph break." To
get a break without an extra blank line (as between the subheading
"Proximity" and the paragraph that follows), press Shift +
Enter. This will give you a "line break."
| Weak Proximity
Since the heading is separated from the text which goes with
it, there is no physical relationship between the two. The
reader may not realize that the heading actually accompanies the
text. |
Better Proximity
Since the heading is placed close to the accompanying text, it
is obvious to the reader that the two have a relationship.
Remember, use a line break (Shift + Enter) to go to the
next line without adding a blank line. |
| Example
1--Poor proximity. Note that there is equal space both
before and after the headings. |
| Example
2--Better proximity. The headings are moved closer to the
text they introduce and are made bold for more contrast. The
title lines are also closer together, making it obvious that they
are related. |
Back to top
III.
Repetition
By repeating certain elements on each page of your web site, you create
unity among the pages. Repetition makes it obvious that all of the
pages are part of the same site. Elements that may or should be repeated
on each page include: headlines, background colors or images,
navigation buttons, colors, graphics, fonts, etc.
| Example
1--Poor use of repetition. Click on the links within the
site. You'll notice that the various pages appear to have no
relationship. They could actually be pages from four different
web sites. They have no repeated elements which tie the pages
together. |
| Example
2--Better use of repetition. The same graphics and buttons
are used throughout the site. Each page uses the same strong
left alignment, also. |
This is an actual web site that uses repetition well:
Back to top
IV. Contrast
Contrast helps to draw your eye to what is most important
on the page. Contrast also creates a hierarchy of information and
lets you skim down the page, picking out what you need.
Contrast might be created by differences in font size or style,
color, graphics, etc. Contrast should be strong to be
effective--make contrasting items very different.
Each web page also needs a focal point, which attracts your eye first
and has priority. Everything else follows a hierarchy from that
point down the page.
| Example
1--Poor contrast. There is no focal point and no
hierarchy. Everything, including the title and the picture, is
given the same importance. The title is ALL CAPS, making it
difficult to read. |
| Example
2--Better contrast. Now the main title stands out because
it is larger than the other text. Also, the picture creates
the focal point since it is the largest element on the page.
Note the strong contrast between the black background and white
text. |
Back to top
Do's and Don'ts
of Web Design
Professional
Web Designers DON'T:
| Use gray backgrounds |
| Use distracting backgrounds that make the text difficult
to read |
| Crowd text against the left edge |
| Stretch text across the width of the page |
| Type entire paragraphs in bold, italics, or all caps (or
all three at once!) |
| Use default blue links |
| Neglect to underline links |
| Use huge graphics that take forever to load |
| Use tables with borders showing |
| Use anything that blinks or animated graphics that never
stop (or multiple animations) |
| Have "orphan" pages that don't link back to the
home page |
| Create pages without focal points (or with too many focal
points) |
| Create cluttered pages that lack strong alignment |
|
Professional
Web Designers DO:
| Use backgrounds that don't interrupt the text |
| Make text large enough to read, but not too large as to
look juvenile |
| Use narrow columns of text |
| Use link colors that coordinate with page colors |
| Underline links |
| Link every page to the home page |
| Design pages that download quickly |
| Use graphic elements (photos, subheadings, etc.) to break
up large areas of text |
| Use repetitive elements on every page in the site |
| Use strong alignment |
| Use contrast to create a hierarchy of information |
|
Assignment
Use the Web Design Checklist to evaluate one or more of the
class web sites linked on the "Get
Ideas" page. |
|
