On this page you will discover information about basic Web page design concepts and how they can be used to enhance your project.
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
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
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
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
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.
When the dots are closer together they appear to have a stronger relationship
The blue lines show how the elements on this page are aligned.