Web Page Design: From Planning to Posting

Elements of design

Web Page Design: From Planning to Posting
Elements of Design

How do you make your pages look more professional? How do you transform them from cluttered to clean -- from boring to brilliant -- from dull to dazzling? Just apply four basic elements and watch your pages go from "woe" to "Wow!"

Alignment:

Alignment refers to the way objects are lined up with each other on the page. You can view an example of the difference alignment can make at the following web page links:

Alignment Example 1 - This "before" page shows a combination of centered and left aligned text. The text also stretches across the entire page, making it difficult to read.
Alignment Example 2 - Notice how much cleaner the "after" page looks! All text is left aligned, giving the eye a vertical path to follow. The text is also moved in from the left side of the page and is divided into columns, making it easier on the eyes.

Proximity:

Proximity refers to the closeness or spacing among objects on your page. "Before" and "after" examples of proximity are linked below:

Proximity Example 1 -The "before" example shows unnecessary spaces between headers and their related text.
Proximity Example 2 - In the "after" example, headers are moved closed to their text and are made bold for contrast. The title lines are also moved closer together look more unified. Notice the difference made by changing the alignment also.

Repetition:

Repeating certain elements throughout your pages and your site will tie it all together. To see examples of repetition, click the links below:

Repetition Example 1 - Move through the links of this web site. You'll notice that the pages don't have any common themes or icons to tie them together.
Repetition Example 2 - In this second example, graphics are added in the title area and as buttons in the body area to provide a common theme throughout the pages of the site. Notice also the changes in alignment and proximity and how they affect the overall look of the pages.

Contrast:

Appropriate contrast on you pages will create a hierarchy of information and will draw the viewer's eyes to the most important items first. View the differences of contrast in the examples below:

Contrast Example 1 - In this "before" example, the title text is all the same size and is all caps. The eyes are not drawn to any section of the page because the elements tend to compete with each other.
Contrast Example 2 - In the "after" example, you see a contrast in text size, and the eyes are drawn to the most important elements first. Although a black background is not generally recommended, in this case the white on black contrast makes an elegant statement.