Design:
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:

• Don't get text-heavy
• The nature of our work is still essentially text-based, but try to break it up--
  into smaller sections and with appropriate graphics

• Don't get small
• Avoid using type in sizes any smaller than 12-point

• Provide adequate contrast between type and background
• People are used to seeing dark text against a plain, light background. Give them what they are used to. Dark brown text on a dark gray background, for example, is a no-no. Don't use reversed light type on a dark background for lengthy passages. Avoid using very bright background colors--they impair legibility and look amateurish. And avoid extremely busy background graphics on pages containing large passages of small text.

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

• Plan your pages and overall design first, and worry about the specifics of the graphics and titles later. This doesn't necessarily mean sitting down and drawing a flowchart, but have a general idea of how you'd like to set up your pages.
• Gratuitous images are worthless. Think about how your images help tell the story of your text, and avoid overloading your space with extra information--not only can it lead to synapse-snapping mental overload in the visitor, but too many image files can annoy even the most stoic of surfer. Bottom line: throwing in that extra image of Hawthorne just because you've got it is not a good idea.
• Keep your backgrounds sedate and avoid mixing too many fonts on one page. Information is best conveyed when the medium is accessible and easy on the eyes.
• Movies, sound files, and other multimedia tools are, as we've seen in the previous section, surprisingly easy and a lot of fun, and will be an important part of the web-- but right now they are still on the cutting edge. You need to consider the value of including these elements versus their file sizes and the ability of visitors to utilize them. As of this version of the guide (7.96), designing for Netscape only is a reasonable guide, given their 75-80% market share. However, there's still 20-25% who won't be able to see your multimedia work. Keep them in mind by giving them appropriate options.
• Internet users have different-sized screens, ranging from the 9" Mac Classic up to the 21" NEC display. Keep that in mind especially when creating banners--you want something that will look good on all types of screens. A good guideline to remember is that a monitor is 640 pixels high and 480 pixels wide.
• Speaking of monitors...most of the world is still stuck with 8-bit, 256 color screens, so that graphic that looks so incredible on your monitor may be less than amazing to a curious viewer at home. The best bet is to take a look at your image on a number of different screens to check the color and pixelation (every screen is unique), and to use the NewCLUT color palette found at the Designing Web Graphics site
• Plan extra time to get your graphics in top shape. Photoshop is not the most easily accessible program on Grounds (especially 3.0), so plan ahead.

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!