Aesthetics

Site Map Distance LearningHome Up Choosing a Theme Target Audience Organizing Your Site Site Navigation E-mail Addresses Copyright Law Aesthetics Mixing Colors

horizontal rule

 Web-site design can be approached from two viewpoints, the technical aspects and the emotional or aesthetic appearance of the site. The technical aspects are discussed in detail throughout this site.  In this page, let's take a brief look at the aesthetics of site design. Keep in mind as you read this page, that these comments are just the opinion of one person. Links for additional study are given at the end of this page.

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).

redhot, stop, aggression, lushness (red velvet), error, warning, fire, daring
pinkfemale, cute, cotton-candy
orangewarm, autumnal, Halloween
yellowhappy, sunny, cheerful, slow down, caution
brownwarm, fall, dirty
greenenvy, jealousy, a novice, spring-like (fertile), pastoral
bluepeaceful, water, sad, male
purpleroyal
blackevil, ghostly, death, fear, mourning
grayovercast, gloom, old age
whitevirginal, 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.

bulletColor Test
bulletEffective Color Contrast
bulletUsing Color Effectively (see additional links at bottom)
bulletWeb Pages That Suck

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.

Site Map ] Distance Learning ]Home ] Up ] Choosing a Theme ] Target Audience ] Organizing Your Site ] Site Navigation ] E-mail Addresses ] Copyright Law ] [ Aesthetics ] Mixing Colors ]

horizontal rule

Google
 
Web shire.net

Banner

 
Copyright 1998, 2011 Allen Leigh