Don't Call it Pain,
Call it Building Character

Disclaimer: Although we talk about great design in this section, it does not display good design in and of itself for many reasons, including time and space considerations. Keep this aphorism in mind when using this section: "Do as I say and not as I do." :-)

The most intimidating thing about creating web sites is the design. Although some jump right in with no regard for design principles (as evidenced by the thousands of strange and very ugly home pages out there), it is important that your images mean something, and are not thrown together or gratuitous. And for those of us who don't feel as though we're particularly creative visually, producing a page which will be viewed by millions around the world can be incredibly scary.

Help for designers and non-designers alike

The Non-Designers Design Book by Robin Williams (no, not that one...) is a great resource for those of us not necessarily graphically inclined. Williams includes help on appropriate type faces and colors, as well as the four basic principles of design:

  1. Proximity
  2. Alignment
  3. Repetition
  4. Contrast.

Briefly stated, Proximity is the grouping of items together on a plane in meaningful relationships--the Internet Underground Music Archive does a very good job of making their images and icons work together to tell a story, set a mood, and direct visitors through their site.

Alignment is the spacing of elements on a plane, in which the eye flows in a comfortable direction around the page. Placement should not be arbitrary, but considered: along with Proximity, Alignment allows the images to tell a story. The human eye feels most comfortable viewing images placed in thirds (both horizontally and vertically) so avoid placing elements directly in the middle of the plane.

Repetition of elements throughout your design and your pages allows for a unified theme; LVLInteractive's site uses an electrical wire theme, as well as their use of space, to great advantage.

Finally, contrast can help break up any feeling of monotony on a page; the banner on the first page of this handbook is a great example of using contrasting fonts to advantage. The rule of thumb here is: if you use two different fonts in close proximity, make sure they are very different, for example, a delicate serifed font laid over a bold sans serif font.

More design tips

Williams' guidelines are a good general introduction to design. Here are some more specific tips, thanks to the June 1996 issue of Macworld:

And here are some words of wisdom from battle-hardened web-weavers:

Be patient and persistent

Like everything on the web, creating graphics and designing the look of a page takes a lot of trial and error. Take a look around the web, see what you like, and take what's useful (the AS@UVA site is a good place to start). However, you'll be amazed at how well you develop your own design eye and style after only one or two projects. Remember, too, that rules are made to be broken: don't be afraid to be creative! Now that you have the basics of scanning, using Photoshop, and creating great multimedia, you can knock 'em dead!

Home Graphics Video Design

Compiled by

Julie K. Rose and Michael R.H. Owens

last updated 7.10.96