Aesthetics in Web Pages

Overall Appearance

A web site can be viewed as if it were a picture. It needs to look balanced and pleasing. Colors and fonts need to harmonize with the theme of the site and not be centers of attention themselves. Page backgrounds need to be subdued such that they act as frames for the text and graphics without overpowering and controlling the pages. The layout of each page needs to direct eye movement to the key part of the page.

Page Layout

First, keep your pages short. Short pages load faster than long pages and get higher rankings by the search services. It is easier to create pleasing pages that are short.

Next, in general, avoid centering the key elements of a page (of course, there are exceptions to this). Instead, think of a page as being divided both horizontally and vertically into "thirds". Place graphics and text into the "thirds". The center "third" can be used, of course, but avoid having everything centered.

In addition, think of a page as a "teeter totter". If you have a large graphic in the left "third", for example, you need something in the right "third" to balance it. The "something" in the right "third" should not, in general, be straight across from the object in the left "third", because you also want vertical balance. You could also have smaller objects in the center and right "thirds" to balance the large object in the left "third".

Finally, avoid filling your pages with "clutter". There needs to be a lot of background that is visible so the pages don't look like they are overflowing with trivia. Don't use more that two or three colors in each page. Avoid having text in many different colors. Some pages are so full of clip art, photographs, hit counters, awards, animated icons, graphical links to browser manufacturers, etc. that they look like the proverbial "junk" drawer. New designers often violate these suggestions.

Color

The emotions of people who have visual sight are greatly affected by color. In designing your web site, choose colors that create emotional feelings that are in harmony with the theme of your web site. To help us understand how colors affect our emotions, let's review the emotional impact of common colors that are given by Crystal Waters in her excellent book web concept & design (New Riders Publishing: 1996, pp. 111-112).

red	hot, stop, aggression, lushness (red velvet), error, warning, fire, daring
pink	female, cute, cotton-candy
orange	warm, autumnal, Halloween
yellow	happy, sunny, cheerful, slow down, caution
brown	warm, fall, dirty
green	envy, jealousy, a novice, spring-like (fertile), pastoral
blue	peaceful, water, sad, male
purple	royal
black	evil, ghostly, death, fear, mourning
gray	overcast, gloom, old age
white	virginal, clean, innocent, cold

In giving this list, Waters cautions us, that "A key point about color theory is that it's called color theory for a reason--there are no rules." (p. 112)

Safe Colors

Not all colors can be reproduced on every monitor due to monitor and video board differences. A color that is dazzling on one monitor may be a drab gray on another monitor. If you want your web pages to look (as much as possible) the same on all monitors and browsers, you should confine your choice of colors to the "safe" colors. However, most people now have newer computers that reproduce millions of tints and shades, and the use of "safe" colors is not as important as it once was.

Further Study

The technical aspects of web design make web sites work with browsers and monitors. More importantly, however, the aesthetic appearance of web sites make the sites work with people! Here are sites for for further study of aesthetics.

There are web sites that give the hexadecimal values for the safe colors, but you can easily mix your own to get additional colors. Read the Color Compatibility page for the hexadecimal representation of colors.