Multimedia Design for the World Wide Web

Define Your Audience

• As with any communication, in order to make sure it works you must first decide with "WHOM" you are communicating. This becomes perhaps, even more critical when extensive technology is involved, as it is when communicating via the WWW.

• You must take technical limitations in to consideration as well as audience composition. Think about what machine the person will be working on and what their connection to the Internet may be like (modem vs. direct link).

• What is their educational or occupational background? Will they understand technical jargon or be confused by it? Do they want to see pretty pictures or just get to the heart of the "data"?

• Once you have established with whom you wish to communicate you need to think about the best way to get your ideas across. This is where layout and design come to play.

Planning the Document Layout

• Start with an outline.

• Use HyperText to break up documents into more managable files, use links for sub headings. Create a Table of Contents and link to specific information.

• Consider the "printability" of the document. In some cases only anchor links are feasible if you wish your set of documents to be printable.

• Think about using graphics as attention getters, but don't get carried away, clutter takes away from content.

• Be wary of the "net surfer" who will scan for links and ignore the rest. You can't stop this behavior but you may try to control it by using critical text as links, not "click here".

Element Design

Text Design

Text is often the most important and least noticed part of an HTML document. In order to ensure that information is properly communicated it is important that text be easy to recognize, read and understand. These design tips may help.

• The number of characters per line and the number of lines of text per page should be limited. It is much easier to read large amounts of text when it is split into several pages or documents. Remember, HTML means "Hyper Text Mark-up Language", use links to help break up documents where appropriate.

• Check spelling and grammar. Typos can not only be annoying, they may keep links from working properly.

• Check equations, names, titles, and credits. Check all links. Add information as necessary, but don't say that documents are "under construction". The nature of the WWW implies that information will be changing periodically, and in fact, to keep us ers coming back and interested it should.

Style

Along with the logistics of text, style should also be considered. Font size and style do a lot to convey the implied meaning of text. Keep aesthetics and legibility in mind. For example bold or italicized text conveys more of an emphasis than does plain text. It's a good idea to be aware of the differences between Physical and Logical Styles in HTML.

Image Design

This is an example of what NOT to do when creating an image file.

Now, let's look at the elements that make up this image and how we can improve them.

Color

Color can be the most important element in image design. Keep these factors in mind when determining what colors to use and how to implement them.

• Deeply saturated primary colors (red, green, blue), do not translate well between video display systems (e.g. computer monitors). These colors have the characteristic of containing a majority of one color and very little of the other two. As these colors are moved through signal distribution systems they are prone to smearing or bleeding, making the image difficult to see.

• De-saturate colors by adding equal amounts of the other two colors, e.g., if one desires a bright, deep blue; set blue to 255 and red and green to about 70, not 0.

• Combinations of 2 primaries, such as blue and green making cyan, work well. One could have 255 of blue, 255 of green and 70 of red.

• Avoid very low luminance colors. That is, colors where the RGB values are all below about 70. The more your color palette tends towards the pastels, the better, as long as data remains effectively differentiated.

• Don't forget to make the background color one that compliments, not covers or overwhelms, the information in the image.

• When creating a file to be used as a transparent .GIF file make the background a solid color to facilitate it's elimination.

Image Size

Image size is very important when working on the WWW.

• Image sizes exceeding 640 pixels wide by 480 pixels high are not recommend for two reasons:

• They will be too large to fit on a standard 12" computer monitor.

• This is larger than the NTSC standard (the USA's video standard), and so will not convert easily to film or videotape.

• Consider how long it will take for an image to load over the network. If it will take a long time consider linking from a "thumb nail" (~ 1/4 size) image to the larger image.

• Consider the number of images on a single "page". Even with image caching now available too many images can quickly zap the memory on a standard workstation.

Line-Width

Thin lines are dangerous!

• Color surfaces translate better to computer monitors than lines, especially thin lines.

• When using vector graphics packages, where line drawings rather than surfaces dominate, lines thinner than three pixels, especially horizontal lines, do not transfer acceptably, unless you are using both a very high resolution image and monitor.

• Thin lines vibrate in an irritating manner as the single pixels try to define themselves in the coarse NTSC resolution.

Annotation

Using graphs and scales to chart data is a common practice in presentations of all kinds. It is, however, important to remember to explain to the viewer what these are meant to represent.

• Be precise.

• Be brief.

End Result

An example of a well thought out and carefully constructed image that works well in both NTSC and RGB.

Adding Images

To take advantage of the multimedia aspects of sophisticated browsers you should be sure to add images to your documents. Not only will images add zip to text, they may serve as vital pieces of information in their own right and draw attention to html pa ges.

• Images are an essential part of HTML.

• Images can be added to an HTML document with
  <img src=Image_URL>.

• Images are treated like text, they can be on the same line or separated with HTML page formatting characters.

• If the image file is a GIF file, then the filename part of Image_URL must end with .gif. Filenames of X Bitmap images must end with .xbm and so on.

Aligning Images

Extra commands can be added to the <img src=Image_URL> tag. One of the extra commands is the ALIGN= statement. This will allow you to align text with the image. The default setting is even with the bottom of the image. If you want the text aligned with the top, middle, left or right of the image you can add the ALIGN option as it is shown here:

This is aligned to the middle.

The align top, middle and bottom commands only affect the first line of text following the command. The align left and right commands affect all of the text in the paragraph.

By adding the <BR CLEAR=LEFT(RIGHT)> tag after the align left or right command you can make the second line of text move down to the line after the bottom of the image.

This is aligned to the left.

Information Science

Site Planning and Navigation Overview

• Organization - Make sure you plan a large site before you start to create it. A little planning goes a long way towards making things easier for everyone, users and creators alike. Remember that simplicity and consistancy are the keys to organization .

• Connectivity - Pick an element that will help tie your pages together. Some graphics, colors, or possibly a corporate image added to the pages that the user will recognize, will help with navigation by providing a familiar element. This will cut down on confusion and the chances that your user will get lost.

• Alternate Navigation - Provide your user with a couple of navigation options so that they may choose the one that is right for them. For example provide both a Table of Contents list and an Imagemap. The idea is to allow direct access to pertinen t information in a manner that is familiar and useful. You should make sure that your site has a flow that is not interupted, and only has the necessary hyperlinks, too many can distract from your original topic.

• Place Marking - Give the user an idea of where in the server they are compared to the level of entry. It is easy to get lost in Cyberspace, providing both a tracking system and an escape route is good policy. You should try to give the user an e scape sequence from any links that they have followed. Put a link back to the top from any page that is down more than a couple of links.

• Paths - It helps if you can get your user to follow paths through your site. Too much freedom can get you lost. Providing a restricted path ensures that a specific set of data must be traveled through. This is particularly useful for training. Don't overlap topics with cross linking, so that your user gets lost. If it is necessary for topics to overlap make sure the user knows that they are changing topics.

Contact [email protected] with questions or comments regarding this page. Last updated Dec. 17, 1998 -- For more information on NSF's PACI program see http://www.cise.nsf.gov/acir/ and http://www.npaci.edu/online/ All rights reserved. Do not copy or redistribute in any form. NCSA Access ©1998 Board of Trustees of the University of Illinois.