Instructional Graphics for the Web

Why is the "Web" so fascinating to so many individuals? Could it be the richness of information, control exhibited by the user, the ability to interact with individuals from around the world, or its multimedia richness (Duchastel, 1997)? During the next few months I'm going to address the technical and cognitive aspects of the "multimedia richness" for instructional purposes. This month I will focus upon the technical aspects of providing still images.

For the most part, the majority of images are provided in two formats, .gif and .jpg. Another format beginning to come onto its own is .png - more about this format later. This month I will discuss the visual elements associated with Web graphics. In later months I will explore specifics dealing with the technical formats.

Visual Elements

Color has been separated from graphics, because it involves more than developing a pretty picture. Color should be used to place emphasis and enhance the instruction, not detract from it. Colors need to complement one another. Text should always be black (people are used to this color) when providing instruction. If you must change color, use the change to provide emphasis only. However, usually underlining or bolding the text will provide enough emphasis.

The use of background colors can be a design nightmare, depending upon the color of the text being used. If using a dark background color make sure the text color is light and complementary. If using a light background color, then the text must be dark.. Never use dark on dark, or light on light - reading a sentence with a mono color background and a similar color text is extremely difficult.

If using background colors with color borders, be sure that your text does not “bleed” onto the borders. The only way to prevent this bleed is to use tables in formatting your page.

The use of gradient colors (color changes from light to dark/dark to light shades across the screen) for a screen background can have the same detrimental affect as the bleed problem with border colors for a background. The change in contrast can cause the text to appear to change in size and color.

Background images can also be distracting depending upon where the text and pictures are placed on the screen. Many times text will match the background image in different spots, causing the text to “fade” in and out of the screen as one reads the information. One other problem with using an image as a background is an effect known as tiling. Tiling is the repeating of the background from left to right and top to down in the browser window.

The best advice is to use a solid color background to eliminate these types of problems. However, if you feel you must use an image as a background, then it is best to provide it as a watermark. A watermarked page displays the image very faintly, thereby usually avoiding the distraction problem. If the watermark is designed so it appears within a 595 x 295 resolution screen (the lowest resolution possible), then it will show only once in the browser window. At resolutions greater than 64o help in alleviatin