| |
|
| Repetition is
not only saying the same thing several times to get a point across. It is
also the use of a consistent theme throughout a Web site. While all the
pages on a Web site do not have to be exactly the same, there should be
enough similarities to create a consistent look and feel to the site. This
consistency is one of the things that help make a site easy to navigate. |
|
The Contact Us page in the illustration on the right has several differences
over the previous page. The camera logo is smaller, the header text is
higher and smaller, there is a page label in the upper right hand corner,
and there is a drawing instead of a photograph.
But, the basic design elements repeat, thus giving the page a familiar
appearance and feel. The camera logo and it's position repeat, the navigation
repeats, the position of the image is the same as on the home page. Although
this is a different page, there is a strong sense of familiarity.
|
| Touch the blue button on the right to see the parts of the above page that repeat. |
 |
|
| |
|
| |
|
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.
|
 |
| |
|
|
Contrast
works in several different ways. Perhaps the most obvious example of contrast
is the color of text against a background. It is much easier to read text
that contrasts highly with the background. |
Can
You Read The Text Below?
This is an example of poor contrast. The color
of this text is not different enough from the background color. Higher
contrast is far easier to read.
This text is much easier to read than the
text above. Tests indicate that white wording on a black background
is harder to read than the black text on a white background that is
to the left. |
| |
|
| However,
contrast can also include all sorts of differences between elements. Under
some circumstances, contrast is used to make something different so that
it stands out. This helps to indicate what is important. |
Example
of How Contrast Provides a Warning
alternating black and yellow strips are a universal warning signal that
indicate danger nearby. It is important to note that they are also the decoration
of the honey bee. The bee uses them to warn predators that they sting! |
|
|
|
There are three examples of contrast on the page. When you click one
of the buttons below, an explanation will appear in a popup window.
| Click
this button to discover how alignment is used for contrast. |
 |
|
| Click
this button to discover how color is used for contrast. |
|
|
| Click
this button to discover how white space is used for contrast. |
|
|
 |
| Note: White space isn't always white! The phrase "white space" is a graphics design term and it refers to the space between objects in a design. So the area between text and a photograph is "white space" even it is another color. |
Both of these examples have lots of white space. The one on the left has white space that is really white, but the one on the left has gray colored white space! |
