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 640 x 480, tiling will occur, if only a little bit. To help in alleviating this adverse affect, be sure to use a background color to fill in any extra space that occurs.

Examples (all open into new windows)

Gradient Background

Solid Background

Background image (For 640 x 480 resolution screen) There is a download time to display background image.

If you look at the background image page above in a higher resolution you will notice the tiling across the screen. This is NOT a good design. To alleviate the tiling problem for those with a higher resolution, the background image was saved at a resolution of 1024 for the width. There is no tiling in the vertical (depending upon browser and computer type used) because there is not enough information in the vertical on this page and the 768 pixel length of the image is more than enough to accommodate the textual information- this is not the case for the 640 resolution image. Using images less than 640 pixels wide will greatly increase the tiling effect

In all cases, using this image for a background is extremely distracting. The wording fades in and out of the image and is completely unreadable in the dark areas. Of course one could really "mess up" the viewer by coloring the text in the darker areas so it is readable. Using background images will also increase the download time for the page and does not add any value. Downloading these three pages will take time-the 1024 longer than the others.

Background image as a watermark There is a download time to display background image.

With the watermarked image all of the text is readable. However, this is still NOT a good design because the text continues to fade in and out of the darker areas of the image. The best advice is not use a background image at all, you just don't know how the image will interact with the learner's computer settings, which probably is not the same as the developer's settings.