Basic Web Design Concepts

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

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 are farther apart.

The illustrations at the right demonstrate the difference that proximity makes. The wide spacing of the dots causes the layout to be weak.

Touch the image with your mouse pointer to see the difference proximity makes.

The closer spacing of the three dots in the strong layout create a more robust image and more powerful feeling. 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 they 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.

Alignment

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.

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.

The alignment style for an entire page, not just the text, is part of the page's design. Proper alignment will create strong associations and a pleasing visual style.

This version of the page has improved horizontal and vertical alignments.

Touch the image on the right to see the alignment lines.