Page elements should be visualized on paper before building them in the computer. Just as you drew a site map to plan the site, use cartoons and storyboards to begin blocking out the site’s appearance and navigational scheme. Many interface elements use visual metaphors, such as the classic Macintosh trash can. The Windows desktop is a metaphor for a familiar work space, enabling people to think of computing as an extension of their traditional work environment. When you design interface elements, tailor them to your expected audience. For building professionals, why not use visual metaphors for the hanging plan file, the flat file, the drafting board, and the product library? When presenting information about architectural space, why not stairways, doors, and hallways? A great example of adapting visual metaphors can be seen on the Chiat/Day Web site, which uses the metaphor of a factory to talk about advertising in a very effective way.

This advertising agency uses visual metaphors to explain its services.

Elements of interface design used on Web sites include:

• File directories: using nested folders, for example, allows visitors to see several layers of the directory structure, graphically displaying how the information is stored.
• Menus, including menu bars, text and iconic, at the top, side, and/or bottom of a window; pull-down menus; tear-off menus; cascading menus; and contextual (pop-up) menus
• Dialogue boxes
• Paging and scrolling devices
• Split-screen and windowing capabilities, such as HTML frames
• On-line form elements, including text blocks, buttons, check boxes, pop-up selectors, and submit/reset buttons
• Navigational graphics, such as buttons, imagemaps, and icons
• Progress bars, which add a time element to the information mix, by providing information about the status of downloads, volume adjustment, jump to end, jump to start, and the like.. Much information is displayed in a small area of screen space.
• Customizable features, which allow users to interact with the interface by changing the way information is presented to them.

Assemble Resources

After organizing your site with a site map and blocking out your design ideas on storyboards, your final preparatory step is to assemble the raw material that will make up your site. In all likelihood most of this material will already be on hand. For many companies the first Web site is an electronic version of an existing printed document, such as a brochure or portfolio. In this case you’ll be using existing resources in the form of text documents and graphics that were originally created for printing. If you are preparing new written or graphic material for the Web site, do this first, using tools meant for the job. Write your copy with a word processor. Scan your photographs. Copies of text files, illustrations, photographs, and other electronic media that may be used on the site should then be assembled and placed in a single root folder on your hard drive. As you build pages from this material, you will be creating links between items in this root folder and then transferring the whole folder en masse to the server. Keeping everything in one place minimizes the likelihood of misplacing files or breaking links.

Assemble the raw materials of your site - text documents, photos, illustrations, flash animations, quicktime video snips, etc. into a root folder.

Next month: Basic HTML