|
|
| There are several principles of design pertinent to the Web. Among them
are proximity, alignment, repetition, and contrast.
These four principles affect how Web pages are perceived. |
|
| |
|
|
Proximity refers to the distance between elements on a Web page and how
the elements relate to one another. These elements include text, navigation,
headings, and so on.
Generally speaking, elements that are close together appear to have a
stronger relationship than elements that farther apart.
The illustrations at the right demonstrate the difference that proximity
makes. The wide spacing of the weak layout is caused by the dots being
placed far part.
Touch the image with your mouse pointer to see the difference proximity
makes. The three dots in the strong layout create a more robust image and more
powerful feeling because of the closer spacing. In the weak layout the
dots to not look related. However, in the strong layout there is a greater
sense of the dots being related because the are closer together. |
 |
| |
|
Odd spacing causes the weak layout of the illustration on the right.
The two lines of the header are too far apart, the caption under the photo
is too far away from the photo, and the body of the text should be farther
to the left. The bottom line which reads, "Call or e-mail us for
a catalog" is so far down on the page that it looks almost as a throwaway
line.
|
 |
| |
|
|
One of the most critical principles of design is alignment. Like proximity,
alignment can enhance or detract from the appearance of a Web page. But
in addition, it can significantly affect the readability of material on
a page. |
Center alignment
makes finding the beginning of a new line of text much more difficult.
Each line tends to be a different length. As a result it is much more tiring
to read text with center alignment. The eye is constantly guessing and searching
for the start point.
In addition, center alignment causes odd line lengths. These odd lengths
cause a sort of "choppiness" in how the text reads. It lacks the
smooth flow that tends to occur with left alignment. |
| |
|
| On most printed
pages in Western culture, the text is aligned left and reads from left to
right. This provides a consistent starting point for each new line. The
eye of the reader becomes used to easily finding the beginning of a new
line. |
Right alignment
seldom serves a useful purpose if readability is a concern. While it may
be used in an artistic manner, the use of right alignment for significant
amounts of text should be avoided. Sometimes right alignment is used to
set small portions of text off from the main body. This can be a satisfactory
application of right alignment. But it must be used with care. The odd starting
points of the text cause the eye to search, as noted above. And the appearance
in bulk of such text can be off-putting to some viewers. Always remember
that site visitors tend not to read anything that is too difficult or annoying. |
|
|
The alignment style for an entire page, not just the text, must be selected.
Proper alignment will create strong associations and a pleasing presentation.
This version of the page has improved horizontal and vertical alignments.
Touch the image on the right to see the alignment lines. |
 |
| |
|
