Chapter 10 Understanding Form and Substance: The Dilemma of Web Style

CONTENTS

Developing a Genre of Web Design
Surfing the Web with the First Wave
Designing for the Web's Next Wave
Creating a Swipe File of Web Style
Next Steps
Q&A

To design effectively for the Web you need to be part designer, part computer geek, and part psychologist. The designer part of you sees a world of color, light, form, and balance. You feel a need to manipulate these variables and in doing so, make the world more visually attractive. The geek part of you eats up baud and bandwidth, push and pull, and client and server. These technical things make your world more efficient. The psychologist in you can study and evaluate, then anticipate a client's needs and actions. Which words, colors, actions, and feedback does the client need and expect? The psychologist in you knows this.

Combine designer, computer geek, and psychologist, and you get a new kind of animal-a Webmaster!

Workshop

It's possible to create interesting designs using HTML text; however, it isn't easy. In this example, the company name is created in three sizes with a horizontal rule scaled to run part way across the page. To fit the word FABRICS across the width of the bar the <PRE> tag is used so that space bar characters are recognized. The Hypertext Markup Language (HTML) code that drives this formatting is displayed below the text.

The Web has developed its own style or genre, which is its own way of presenting visual, textual, and numeric data. Understanding the genre means understanding what it takes to be successful. Say, for example, you want to write Western fiction. Cowboy novels have their own genre or their own set of rules that you must understand if you want to sell your stories. Web design is unique in that you're in on the formation of a genre-sort of like being Guttenberg's woodworking assistant.

The style of the Web, unlike other publishing genres, is intimately tied to its technology. You don't need special equipment to read a book, magazine, newspaper, or report. A Web publication, on the other hand, simply can't be accessed without a network connection, browser software, and appropriate hardware. Of course, some of these issues will be addressed when the Web comes in over television cable. With the right controller anyone with television cable should be able to surf the Web.

Note

Glance at Figure 6.9, which is Penton Publishing's home page (http://www.penton.com/). Three things stand out. First, the choice of the photographic subject establishes the tone for the site. It screams "Yo, this is a place where we have fun!" The icons are informal, suggesting a loose, rapid sketch style. Perhaps the guy at the beach sketched them on a bar napkin. Finally, the font reinforces a personal, hand-written note style. Taken together, these three elements create a definite style.

This reliance on special technology is both the strength and weakness of Web publications. This is its strength because of the almost limitless possibilities, and its weakness because of the inherent limitations in delivering Web publications to a wide audience. This is the dilemma of Web style.

Developing a Genre of Web Design

The genre of Web style contains the following:

Appropriate interactivity. The fundamental difference between traditional print and Web publications is that the Web can be interactive (see Figure 10.1). Use it! Lose this interactivity and you should probably choose a different publication medium.
Geography. If you look at the site diagrams in Figures 8.11 through 8.14, you'll see that they strongly resemble street maps. This structure can be extended to the Web pages themselves as shown in Figure 10.2. Taken to the extreme, if a Web site has a valid structure, it may actually subcreate a valid world.
Characters. The impersonality of many Web publications often makes them sterile. If you populate your world with interesting characters, it will come alive (see Figure 10.3). You can do this in a static way with photographs or dynamically using video or animation resources.
Story line. Boy meets data. Boy acquires data. Boy loses data. Same old story. What's the story line in your Web site? Southwest Airline's Web site provides a virtual travel desk (see Figure 10.4).
A hook in every section. Something on the page invites further exploration. This could be something like "tip of the month" or a link to a really cool site (see Figure 10.5).

Figure 10.1 : This page from MMWIRE (http://WWW.phillips.com/mmwire/) presents a clearly interactive way to locate services within the site.

Figure 10.2 : An interesting way of presenting structure and a thumbnail of the subject matter within each section by the Pittsburgh Tissue Engineering Initiative (http://wwww.pittsburgh-tissue.net/).

Figure 10.3: This interactive site lets you engage in a mystery with clues and surprises. Find it athttp://cool.infi.net/mystery/.

Figure 10.4: Sothwest Airline's (http://www.iflyswa.com/) story line is that you're at their Web travel desk. Click on the graphic that describes what you want to see. Neat, huh?

Figure 10.5 : Everyone likes to win something. Inns & Outs (http://www.innsandouts.com/) uses hooks to keep you interested in their product by taking a Sunday insert approach.

Surfing the Web with the First Wave

The first wave of Web surfers had little interest in its commercial value or in how to use it as a vehicle for distributing information. It was legalized hacking, like snooping with a license. On the first wave road the pioneers of the wild Web. No rules. No boundaries. They tamed it for the settlers who followed.

Designing for the Web's Next Wave

You're part of the Web's next wave. You want to put down roots, build a society, and start a family. The very reason you're here differs from that of the early voyageurs. As a developer of Web publications

You see the Web as one piece of the information puzzle. You know enough about print, direct mail, catalogs, television, and the Web to make economically viable decisions.
You have the knowledge to match the medium to the message, to put a twist on Marshall McLuhan's mantra ("The medium is the message"). Would you distribute an annual report as a newsprint insert in the Sunday paper? Would you deliver visual information over the radio or tactile information on television?
You have few technological needs, but you do have productivity needs. You may never have to deal directly with HTML, Virtual Reality Modeling Language (VRML), GIF, JPEG, Shockwave, or Java.
You recognize that the Web is not an end; rather, it is the means to an end. The Web will be replaced. The need for information won't.

Creating a Swipe File of Web Style

A collection of art examples is called a swipe file. I'm not encouraging you to steal anything (see the section "Copyrights and Fair Use" in Chapter 3 "Creating Cool Graphics for the Web"), but make intelligent use of resources available to you. Use them to foster your own creativity. But be careful! The biggest mistake you can make is to grab examples off the Web with no plan in mind. You just end up with tons of files, and no way to use them. Follow these steps when you're planning to use graphics:

Decide how you are going to store the images. Since you probably won't need access to them all the time, keeping them on removable media such as Zip, SyQuest, or magneto-optical is a smart move.
Decide how you are going to organize the images. You may want to use products like Fetch or Hijaak Pro to build libraries of images that can be searched visually or by keyword. Grab the images in 8-bit format (BMP, PCX, or GIF in Windows; PICT on a Macintosh).

Create a directory structure that makes it easy to find the examples you want. The following is an example: Web Graphics Examples Disk

Button Directory
    Realistic Buttons
    Iconic Buttons
Background Directory
    Solid Background Subdirectory
    Tiled Background Subdirectory
Text Directory
    Interesting Fonts Subdirectory
    Font Shadow Subdirectory

Use a consistent and logical file-naming system. Consider the following naming conventions:

rndbut01.bmp          A round button
sqrbut01.bmp          A square button
bmppat01.bmp          A bumpy pattern
chrome01.bmp          A chrome material

If you're handy in a raster graphics program (such as Photoshop or Painter), you might organize the images into a contact proof sheet (see Figure 10.6). Organize proof pages with similar content. Include the uniform resource locator (URL) in the image so you can revisit the site.

Figure 10.6 : A contact sheet of montage Web graphics for swipe file reference. Note that the URL for each is placed below the figure.

Next Steps

Now to apply your understanding of Web graphics style:

Flip through Chapter 11, "How to Avoid the Ten Most Common Web Mistakes," to see how to avoid common mistakes in Web design and graphics.
Develop a sense of typographic style in Chapter 12, "Using Text in Design."
Become aware of the diversity of graphics you can deliver to the user as covered in Chapter 19, "Understanding Advanced Graphic File Types."

Q&A

Q:	Do my Web pages have to look like everyone else's? I want to develop my own style.
A:	Go for it! But to reduce the frustration level, spend some time surfing the Web, taking notes, making screen grabs, and viewing source code. Find pages you like and create prototype pages. Remember, before Pablo Picasso developed his own unique style, he was a classically trained artist.
Q.	I want to include small video clips of our key personnel in our new Web site. It this feasible?
A:	Certainly, but consider what may or may not be gained (see Chapter 18, "Delivering Animations at Your Web Site"). First, you must deliver the video in a format and in a quality that is effective. Too large a format (like 320¥240 pixels) and download times may render the video unusable. Even then, your client must have the appropriate video helper application or plug-in to view the clip and enough hardware to view it at an effective frame rate. Whew!
Q:	I want to make my Web site available to the broadest audience. How can I do this?
A:	Secure the service of a server provider who won't fold next week. Then, create a URL that is a natural for your company. If your company is called BIZ Fasteners, try to use a URL such as `http://www.bizfast.com/`. Don't forget to put the URL on all your correspondence.