Arid Lands Newsletter--link to home pageNo. 38, Fall/Winter 1995
The Whole Wired World

Case study: A graphics manual for a content-rich web site, by Merrill Parsons

"Everything that can be invented has been invented."
--Charles H. Duell
Commissioner, U.S. Office of Patents, 1899

Preparing a graphics program for a World Wide Web site during this period of molten expansion of the medium inspires a designer to leave her engine running. This new method of communicating information is both exciting and frustrating. We are all finding our way as the possibilities and capabilities of a fundamentally new information delivery system become clearer and incrementally more easily within reach.

While technical aspects of the Web interface develop and change, some things do stay the same. The overriding goal of a Web site is to convey information to the user. One variable is how effectively this information is delivered. The visual display of information can determine whether someone will visit, stay, and explore the site, or simply click themselves hundreds of miles away, having become frustrated in navigating the site, reading its content, or waiting for the information to load.

The International Arid Lands Consortium (IALC) Information Server (1), for which I designed and continue to design digital graphics, is a content-rich Web site: its focus is information rather than entertainment. Its graphic system and visual identity, therefore, are based upon the goal of providing the least impeded delivery of information-in this case, mostly text. Many visitors who spend time here are not lounging. They are on a mission of sorts and want to locate information sooner than later.

Mission: Graphic Design for Information Delivery

Functionality is key in this medium. Establishing the content, information hierarchy, and appropriate links is the invaluable work of the site designer. The visual style and layout is developed by the graphic designer, who may or may not be the site designer. This article addresses issues encountered by the graphic designer. Following are thoughts for consideration when developing a graphics program for a World Wide Web site.

Anticipating change and providing flexibility are essential components of a designer's toolkit for Web site development. But while the mchinery of production may change as the Web interface develops, the basic concepts and concerns of information delivery for a graphic designer hold steady. The comments and recommendations that follow take advantage of the enhanced graphical features of the Netscape Navigator browser, as it is the most commonly used and advanced browser on the Web today.

Designing for the Future: Graphical vs. Text-Only Browsers. There are those who continue to use text-only browsers that are unable to display images, but the wave of development of World Wide Web browsers is in the graphical realm. Netscape and Mosaic, among others, display images (photos, drawings, icons, etc.). The future iterations of these products will include more refined animation and video as the technology progresses. This is the path of progress and eventually everyone who can access the Web will be using such browsers. Therefore, Web design should be approached with a graphical interface as the medium of exchange. One may want to include text display considerations and alternative tags for text-only browsers, but be prepared to eliminate this aspect down the road.

Do You Have a Good Mechanic? Maintaining a Web site can be time-consuming. The graphics program should be developed with that factor in mind. Are you designing graphics and layouts that require constant updates? Will you have qualified staff available to handle the chore? This aspect can quickly become a clarifying factor for design decisions.

Who Is Your Audience? A visual style is most effective when tailored to the sensibilities of the intended visitor. In addition, the design must reflect the personality of the site sponsor. Addressing these two focal aspects of the visual style assists in determining the general design sensibility of the Web site, which will then be reflected throughout the site.

The IALC site represents a multi-faceted environmental and development organization that operates as both researcher and disseminator of arid lands information worldwide. Visitors range from researchers to environmental policy makers to casual visitors. As the Web grows to include more visitors from other countries, consideration of language and visual navigation tools will become increasingly important. This seems to dictate design that is both straightforward for information gathering and visually representative of the arid lands focus.

Holding the Web Together

All of a site's visual elements must work together to convey a sense of cohesiveness, so that the visitor can explore in a seamless way. The information is the top priority; a user shouldn't have to wonder if he or she is still at your site. Movement forward, backward, and across the site should be instantly accomplished via navigation tools that eliminate the guesswork.

Consistency of layout, color, type, image, and icon usage is key to visually holding your Web site together. Departures from this consistency are appropriate for emphasis and attention or for special features, such as, to cite one example, in The IALC Online Newsletter (2).

Visual Priorities within the Web Site. One goal of graphic design is to attract and engage the attention of the viewer. In Web site design this is critical. You, as a site developer and digital publisher, are competing with thousands of others for a visitors' attention. You need to make the best possible first impression if you expect the visitor to stay at your site long enough to qualify as a user. This is generally accomplished at the "home page," the initial screen of your site. These screens, or "pages," often are general in nature and operate as navigational bases, or "tables of contents," for the site, from which the visitor will depart to explore and to which she will return for more options.

Even in a heavily informational site, these initial screens are very important. A well designed, visually pleasing page will say to the visitor that he can anticipate a well-crafted, logically-organized site to explore.

The linked screens following the initial screen do not necessarily need to be graphically exciting, as their purpose is to convey specific information without distraction. However, these pages must be well designed for the reader in terms of layout, type usage, readability, and ease of navigation.

Navigation. The infrastructure of the Web site relies on wayfinding tools to provide the nails and glue with which to keep the whole cohesive and usable. Visually, the structure should be broken down into easily digestible divisions and components. Layers of information can be assigned to different levels of screens, all logically accessible from the home page. These successive layers of information are treated across the board with consistency of design.

This unfolding onion of a landscape requires signposts at each level so that visitors can find their way back to indexes and general information, especially if they have landed in an obscure level from another Web site. Navigation buttons or such devices should be generously present throughout the site for ease of movement.

Each screen of the IALC site, for example, includes one or more navigation buttons. A Home Page button at each level assists in finding the source of the site. Buttons for any function that are specific to that screen (order forms, comments, etc.) are present as well. These buttons are located at the bottom of the screen, so that the user, having read the proffered information, is ready-and able to continue exploring the site.

Default Considerations. For displaying Web pages, each browser has a default mode that sets the type style to be used and parameters for text and background colors. Because many visitors do not choose to alter the default display mode of their browsers, the designer should assume that the default mode is ground zero from which to design.

Designing for the most technologically advanced and popular browser will help keep your Web site in forward motion and minimize design updates.

Different browsers have varying default styles and the designer should keep this in mind. The graphics program for the IALC site employs, to a measured extent, the Netscape browser's defaults as the basis for design. A sampling of how your pages look in other browsers is essential, however, in order to avoid gaps in readability from browser to browser. Just remember that the user can choose page-display parameters that change how text and other elements are displayed on an individual screen, creating a possible graphics nightmare.

We look to future iterations of the dominant browsers to display pages as they have been designed. Programming as much as possible into the page layout language, as increasingly is possible with such proprietary applications as Adobe's Acrobat (3) and Sun's Java (4) -- both of which go well beyond the capabilities and intent of the HTML code readable by virtually all browsers -- helps to maintain the design intent.

Go Easy On the Eyes. Type usage is somewhat limited at this point in the development of the HTML language and should improve over time as additional features are incorporated. Some browsers, such as Netscape, default the type used for text blocks at 12-point Times, a serif typeface. This can be rather small for continuous readability on a computer screen. Times 14-point is much easier on the eyes and should be programmed, if possible.

The line length of a text block is a major issue for readability. Many Web pages are designed to let text lines run as wide as the open view window, often creating extremely long lines of text. It is difficult to read long lines of text because one has to track back over a distance to reach the beginning of the following line. Eye strain can result.

The Home Page. This is the first page the user sees -- provided he has arrived at your site via a direct link to the top of your hierarchy, of course -- and should, therefore, make a "splash." Its display should reflect the general character and identity of the Web site. Here, type usage can be altered, colored, and used differently from that used in the rest of the site. The home page may include images, logos, background textures, etc., but any elements that are common to all pages (i.e., linked text) should be treated consistently from page to page.

Backgrounds. We've all seen Web paghes that have multiple images in the background, such as "bricks" or colored patterns. The text overlaying these backgrounds is barely readable and one must struggle to make sense of it. While backgrounds certainly do convey a graphic identity, utility often loses out to "design ego" and the visitor experiences frustration because of illegibility.

For general readability, especially if the site is text-heavy, as is the IALC, a high contrast between the type and background eases readability. A browser's default gray is low contrast and visually uninteresting. Programming for a white background is a good choice, especially if there are varied graphics throughout. They will read better as well.

And Finally, Who Has All Day?

Larger files take longer to load on browsers and keep visitors waiting. Many users will become impatient and leave the site before the Web page has revealed itself. Minimizing the memory requirements of each Web page will pay off in higher visitation and use. A good rule of thumb is to keep image files at 20 k (20 kilobytes) or less.

bar denoting end of article text

Principal Internet Resources Cited in this Article

1. The IALC Home Page

2. The IALC Online Newsletter #6: Table of Contents [29 October 1999, file not found]

3. Adobe Acrobat

4. Sun Java

Design Resources on the Web

Sight (Yes, they really spell it that way.) 1: Hit Me [March 2000, site not found]

Sight 2: A Necessary Resolution [March 2000, site not found]

Sight 3: The Word Made Pixel [March 2000, site not found]

Sight 4: Mortice Madness [March 2000, site not found]

Sight 5: Curse of the "Interactive"[March 2000, site not found]

Sight 6: Stay Liquid[March 2000, site not found]

The Web Masters' Page [20 Nov. '98, site not found]

A Unified Field Theory of Design, by Nathan Shedroff [March 2000, site not found]

Web Wonk: Net Tips for Writers & Designers


Merrill Parsons is a Tucson-based graphic designer with experience in design venues as diverse as museum displays, print publications and packaging, graphical user interfaces for online services and CD-ROM titles, and World Wide Web pages. You may reach her by e-mail at parsons@theriver.com.

About the Arid Lands Newsletter

Link to ALN home page Link to index page for back web issues Link to index page for pre-web issue archive Link to this issue's table of contents