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.

Principle

Definition

Example

Balance

The ability to arrange all the elements so that no part is overpowering

If the title is in a bold green text, then the bold green color should be used again at the bottom. Shapes and colors must be repeated for good balance.

Harmony

The blending of elements to create an integrated appearance

Achieved by repetition of several of the elements such as repeating colors, shapes, and space

Emphasis

The ability to attract attention

An intriguing flashy image on the first web page will attract attention. Bold red text stands out. Text links should be obvious because of color choice.

Movement

The way the viewer’s eye moves around and through any design layout

Moving through a web site requires clear navigation tools and uniform layouts that are repeated on every page. Titles should be at the top of a page, text links at the bottom, image links in the same place on each page.

Rhythm

The repetition of elements that helps add balance and harmony to the whole

Consistent repetition of colors and layouts, content links and backgrounds

Contrast

Purposeful changes in elements and principles to add interest and emphasis

Use graphics with different shapes and sizes; overlap vertical and horizontal bars of color.