Principle

Definition

Example

Color

What the eyes see when light is reflected off an object. Color can be light, dark, bright, or dull.

Less is more. Solid white background and black text are best for readability on the web.

Good color combinations:

• two primary colors for graphics such as blue and red with gray, white background and black text

• three monochromatic colors such as light blue, royal blue, navy, and black graphics, white background and black text.

• warm colors such as light yellow background, gold, red, and white graphics, dark red text

Black-basic for lettering, use gray shadows

Blue-easy on the eyes, pleasing for graphics, combine with red, white, and gray; try with greens or contrast with warm colors

Red-for emphasis, attention getting

Yellow-for highlighting, not good for lettering unless against black background.

Line

A path of a moving point through space

Horizontal lines are used for emphasis and to separate areas of text-use sparingly.

Vertical lines are formal, help organize information on the screen-use on the left.

Space

The distance between, above, below, within, and around things

Use blocks of text within empty space. Do not have too much wasted, empty space. There should be more empty space at the bottom than at the top. Use tables, repeat same amount of spacing throughout.

Shape

An area clearly set off by one of the other elements

Repeated shapes unify and add continuity. Use same shapes or graphics on every web page in a web site.

Form

A three dimensional shape

The appearance of three dimensional objects or text is eye catching, but use sparingly. Use shadows behind the title text.

Texture

The way something feels or looks like it might feel

Adds variety and comfort-do not use bright or bold textures in the background.