Chapter 3 -- Creating Cool Graphics for the Web

Creating a Cool Webpage (Design Guidelines)

What's a cool Web page? Realistically, it's a page that accomplishes its purpose with style and panache. There are several rules of design to be followed that will keep you out of major trouble. They won't make you any more creative, but they will establish a strong foundation for your creativity:

1. Put your Web page on a neat background. I didn't say patterned or textured, I said neat. . . as in uncomplicated. Why? Because any text or graphic has to compete for eye time when placed on a busy patterned background.
2. Use neat type. Don't use outline, shadowed Olde English, or difficult to read script.
   • Good design uses a minimum number of appropriate type fonts and sizes. Choose a type font that projects the feeling you desire-- formal, informal, technical, or playful.
3. Use a neat design. Avoid the "plop" school of design, which encourages the placement of random elements with no overlap whatsoever.
   • Good design almost always uses a minimum number of elements. You want to avoid overworked or busy designs.
   • Good design is based on eye flow. The more eye movement required within a visual field, the less information can be received and processed.
   • Good design builds a sense of tension: large versus small, light versus dark, straight versus curved, asymmetrical versus symmetrical.
   • Good design uses color for emphasis and to build a sense of emotion. Warm colors come forward. Cool colors recede.
   • Good design builds levels of depth on the page. Use juxtaposition and overlap to give a sense of depth.

Pizzazz at the Expense of Effectiveness

Every graphic element you place on a page must have a function. Either it adds to communication efficiency or. . . remove it! Each visual element on a page must be processed and either used or discarded. The more visual elements a viewer has to discard, the less efficient the communication.

Developing a Good Eye

Everyone can learn to recognize and appreciate good music. Most can learn to play simple tunes on a piano. Some can learn to read music and play credibly. A very few become concert pianists.

Such is the case with visual art. Not everyone needs (or wants) to make their own Web graphics. But everyone should be able to recognize when good design principles are followed, when text is used effectively, and when color adds and doesn't subtract from a page.

The key to all this is developing what I call "a good eye." I used to tell my students that it isn't the answers they don't know, it's the questions. Invariably I would look at a student's drawing and start a question-like, "where is the. . . ?" and not even get the rest of the question out before the student realized why their drawing was wrong and told me the answer.

The trick to developing a good eye is to have a continuous dialog with yourself concerning the design. This technique can be applied to the design of the Web site itself as well. For starters, ask yourself the following:

• Where does it start? Where does it stop?
• Is it aligned? Is it straight?
• How do I get here? How do I get out of here?
• How many are there?
• Is it symmetrical? Is it asymmetrical?
• What color is it?
• How important is it?

Considerations related to Computer Displays

Just about everyone knows that a computer monitor is comprised of rows and columns of dots called pixels. Just like cylinders in a car engine, the more you have the more powerful you feel. But on the Web, it's not so much what you have, but how efficiently you use it. When making graphics for the Web, the following constraints are important:

[Finally, and possibly most important,] the relationship of these factors controls the amount of memory required to store and display your graphic. For example, create a great graphic at 1280 by 1024 (raster dimension) and your file size looks like the national debt. Increase the resolution to 1200 dots per inch and the raster dimensions stretch across the room. Increase the bit depth from 8 bits to 16 or 24 bits per pixel, and the file you used to transport around on disk [now requires something like a] writable CD-ROM.

Just keep this etched on your cortical matter: Always create the smallest, tidiest, most efficient graphic that does the job.

Up to 256 Colors at 72 to 96 dpi

Situations when you might entertain the use of graphics at higher resolutions and bit depths include the following:

• High-quality images intended for downloading, [or viewing on a separate Webpage.] These images are displayed on the original page at lower resolution or as a thumbnail.
• Images that need the extra resolution or color depth to even be useful. For example, a medical education site where tissue slides show slight coloration differences or fine detail.

Dithering

To overcome this 256-color limitation, a technique called dithering is applied to the image. This is sort of like halftoning in traditional publications. Dithering approximates intermediate colors (colors not on the palette) with a pattern of dots that, when viewed from afar, blend together in glorious shades. The best results are achieved when using a diffusion dither, which produces smooth transitions. A pattern dither produces geometric patterns that may be less desirable.

Design with Black and White (and Shades of Gray)

Traditional publications made careful use of color partially because color meant more expense. With display publications, color isn't any more expensive than black and white. Unfortunately, when color is so easily available it is often misused and overused.

Color was also carefully used because even though everyone loves it, there isn't much evidence that color increases the effectiveness of communications where color isn't the subject. (Color would be critical, for example, in recognizing changes in skin color with chemical exposure or identifying the RED tag.)

In fact, judicious use of grays can be almost as effective as color for making visual discriminations. Unfortunately, Web graphics are limited to using the grays available in the indexed color palette. [Again, for this site, the 216 "safe" colors + 16 shades of gray.] In-between grays can be dithered to give the impression of having the full 256 grays available in 8 bits of color depth.

Anti-Alias (and Display Fonts)

Anti-alias is especially effective when displaying text above 24 points. Because most text will be a solid color, the stair-stepping around curves is often distracting. By applying the anti-alias technique, intermediate pixels are calculated on either side of the normal outline, giving the appearance of a smoother curve. Figure 3.13 shows the detail of a serif, without anti-alias on the left and with anti-alias on the right.

Figure 3.13: The use of anti-alias to give the appearance of smoothness.

An anti-aliased letter like that shown in Figure 3.13 can break apart when reduced because original pixels may not match up with pixels at the new scale. When enlarged, the image may become unsightly when its anti-aliased pixels are enlarged.

Blurring is another technique that yields slightly different but effective results. Blurring an area alters all the pixels within the selection, not just those on the outside.

Creating your own graphics

Like most things in life, more is usually better, and in bit depth and resolution this is also true. Although you will be displaying graphics in 8 bit, 256 color, you will want to start with more color and resolution than you need. This gives you greater flexibility in making the image look the way you want it to when you reduce the color depth and resolution.

(USA) Copyrights and What's Fair Use (as of 1996)

A copyright is a grant of exclusive use for a period of time. For something to be copyrightable, it must embody unique intellectual property. If something doesn't pass this test of uniqueness, it is considered to be a common design of industrial utility. That's why automobile shapes can't be copyrighted. That's also why font shapes can't be copyrighted. It's fair to estimate that less than half the material carrying copyright notice is actually copyrightable, that is, would be deemed unique intellectual property in a court of law.

Copyright protection is granted upon the simple act of making something of unique intellectual property. There is no search-- as there is when applying for a patent. You don't have to prove anything when applying for a copyright. You don't even have to apply for the copyright as long as you can prove creation date.

Every copyright carries with it a presumption of fair use. That is, a copyrighted graphic can appear in a news report or a magazine article without infringement because that's considered fair use.

How can you get around this? Use the following guidelines when planning Web graphics:

• Use your own graphics whenever possible. This isn't 100% safe because you still run the risk of making something that looks an awful lot like something that was copyrighted. Two people can independently create two images that are very similar.
• Use graphics in the public domain: Any graphic over 75 years in age, any graphic you paid for as a taxpayer (government publications), or any graphic of common industrial utility (shapes, outlines).
• Graphics for which you have purchased copyright use, such as clip art or CD collections. Be careful here. Some of these products carry bizarre limitations on their use. Some grant out-right use but others restrict how many images can be used per publication, or what kind of publications the images may appear in.

The likelihood that your use of some material carrying a copyright will be challenged in court is directly proportional to the economic resources available to the copyright holder. Like Clint Eastwood would say, "Do you feel lucky?"

Protecting Your Original Work

Personally, I wouldn't put anything of real creative value on the Web. The ease with which images and page source code can be captured is part of the Web's allure, one of the reasons its potential is difficult to estimate.

The Web can be a teaser, though. Put enough information out there to generate interest. Want the real thing? Send $9.95 by midnight tonight. If you want to add some protection, put the copyright (©) symbol and a statement of ownership beside anything you think you want to protect. This will scare the timid away.

The flip side of this is that some of the information found on the Web is of no value whatsoever, or even dangerously incorrect. Buy a book of conversion standards from a publisher, and you can almost guarantee that the numbers were checked by outside reviewers, proofread, edited, and backed by the author. Much information on the Web should carry a "Consumer Beware" disclaimer.