 | ||
|
| ||
| ||
|
| ||
July 16, 1996
If taking a client out onto the Web is a new experience for you, take a look at how one nationally known firm, Tim Girvin Design, developed a Web site for The Nature Conservancy of Washington. See how they applied their design know-how and technical savvy to extend their client's brand awareness campaign into cyberspace. (Be sure to visit The Nature Conservancy of Washington Web site at http://www.tnc-washington.org 
to see examples of the design guidelines and considerations discussed in this article.)
Introduction
The Design Team
The Design Process
In Conclusion
Appendix: Biographical Notes
Face it--there's a lot of just plain old bad design on the Web. If you don't believe me, take a look for yourself. A good Web site provides a delicate balance between visual appeal, technical functionality, and valuable content. Let's take a look at how Tim Girvin Design worked with The Nature Conservancy of Washington to develop their first Web site, and see what advice they can give to designers moving onto the Web.
Over the past several years Tim Girvin Design has emerged as one of the nation's top design firms. Clients range from the entertainment world to the food industry and include Planet Hollywood, The Disney Institute, Garden Botanika, and Nabisco. Tim Girvin Design works in all media and specializes in helping clients build their brands.
"At Tim Girvin Design, we have tried to develop high performance teams that provide finished design by using the unique skills of many talented people," says David Brede, Digital Media Director.
Tim Girvin Design's Web design team for The Nature Conservancy of Washington project consisted of the following members (biographical notes are provided at the end of this article):
Team members' collective experience has taught them many things. Here are some helpful hints for you to apply to your own work. Examples cited are taken from their recent experience designing the Web site for The Nature Conservancy of Washington.
Finding out what your client really needs is the first step in any design job. To do this, Tim Girvin designers recommend holding a series of meetings where you, the designer, ask the right questions; then sit and really listen to the answers.
Whether they're designing a CD-ROM, doing print work or developing a 3-D animation, getting to know the needs of the client is always the first step for Tim Girvin Design. "Our approach doesn't change because we are working on the Web," says Senior Designer Brian Boram.
Before they could do their job as designers, they had to discover what the Nature Conservancy of Washington does, how they do it, and most importantly, why they do it. This last question often reveals the raison d'etre for any organization and adds a powerful level of information to the design gestalt.
According to Dave, this can be one of the most time-consuming areas of the development process, but it's vitally important and pays big dividends down the road when done well.
Once you've listened to your clients, it's up to you to distill all this information and help them prioritize their needs. At this stage, you're still discussing high-level issues, as well as the philosophical approach. It's almost time to jump into all the technical stuff, but not quite yet. Tim Girvin Design has found that at this stage, the more they can build consensus about the value and purpose of a Web site with their client, the happier everyone will be with the results.
Use all the information you garner from discussions with your client to set some general objectives for the site. This will ensure that you and your client are speaking the same language. Showing your clients tangible images of what you have in mind will really help clarify this and lay the groundwork for the development of the site's visual metaphor.
Once the Nature Conservancy of Washington's needs had been determined, the design team presented a preliminary set of images and words that represented the objectives this Web site should meet. According to these objectives, the site should be:
I know, I know. You're just dying to get to all those groovy bells and whistles. But hold on, you're not quite there yet.
Along the way, the design team does try to educate their clients about the technical constraints of Web design, but they don't let it become the focus of their discussions at this point. "We don't want our client's expectations to get out of whack with what we can actually deliver," says Brian.
"But we never come at the design process from the perspective of what the search engine can do," adds Dave. This approach underscores the importance of the site's content and ensures that later on, technical decisions will be made to serve, not sacrifice, design.
Brian comments, "The theories of good design don't change just because we're working on the Web." But adding the dimension of interactivity definitely complicates matters and adds immediate limitations as well as opportunities to what you can do. Because of this, making the multitude of technical decisions is best done after your objectives and visual metaphor are clearly defined. So don't jump into this particular vat of boiling oil until you've applied your creative efforts to the next part of the process.
Brainstorm, scratch your head, play with words and images, sit down, stand up, take a walk, sharpen every pencil in the office. In other words, do whatever it is you do to come up with that one big idea that will dictate the site's look.
For the Tim Girvin Design team, all their creative head scratching resulted in the development of two visual metaphors growing out of the objectives for the site.
The first and more structured of the two was based on the building blocks of biodiversity. The goal of this metaphor was to make the site a showcase for nature. The second approach was more organic in form, and the images were designed to emulate nature's looseness.
"The Web page must reflect what the Nature Conservancy of Washington does. This is essential," says Brian. And even though the Nature Conservancy of Washington is best known for its efforts to preserve land, their most important goal for the Web site was to increase the user's appreciation of the vital importance of biodiversity.
This knowledge, plus the computer monitor's love of crisp, clean, tight lines, made the first visual metaphor, based on the building blocks of biodiversity, the obvious choice. And now, what you've been waiting for: It's time to get technical.
At this point design opportunities and technical constraints start walking more closely together down the path to cyberspace, sometimes nudging, sometimes pushing each other for room. Just remember that the technology is supposed to serve your design, so don't use a bell or a whistle when a pleasant little chime will do.
According to Aki Morino, Associate Designer, this is where the road can start to get a little rocky. He cites color and file format limitations and resolution problems, to name only a few stumbling blocks. But let's not forget about potentially time-consuming detours with cross-platform authoring issues, typography troubles, HTML headaches, table trials, and AVI aggravations. At this juncture, the road to cyberspace starts to look more like the Oregon Trail. (See Decreasing Download Time Through Effective Color Management and Style Sheets: A Brief Overview for Designers for helpful information on some of these topics.)
"In print, things are easier. You choose your stock, your color of ink, your type. You print it and it doesn't change. But with the Web, the user May not have a video card, or a fast connection, or the capability of viewing millions of colors," Aki adds.
Remember, the technology is changing (sometimes weekly) so even though it May seem like your creative hands are tied right now, things will improve over time.
In a sense, the Tim Girvin Design team had to design graphic elements for the lowest common denominator in computer hardware and software. But they didn't let that limit their vision. It's important to plan a Web page with an eye toward the future. "If you base your design concepts on current technological limitations without looking to the future where technological constraints will be less, you're just hurting yourself--and your client," says Miles Matsumoto, Digital Media Programmer.
Small file sizes are a must if your graphic elements are going to work on the Web. One of those 10-MB files you're used to working on could take up to three hours to download!
According to Brian, the design team decided to limit each Web page to a maximum of 40K to conserve download time. This meant not taking full advantage of the Nature Conservancy of Washington's great photo collection, and limiting the size of the photos and other graphics they did use.
This led to the use of graphic elements that were more illustrative than photographic in nature. They also kept the shape of the illustrations simple, elegant, and rectangular to reflect the building block image.
Earlier in the process, the Nature Conservancy of Washington had emphasized the importance of showing the relationship between humans and nature. The team created several graphics to reflect this. "We had to come up with a balance, though. Too many people and we lose the connection to nature, too many animals and it might seem a little like a zoo," says Aki.
Check out The Nature Conservancy of Washington's home page , where each section has a visual representation of the word used to indicate a destination within the site. The designers added a background image to each block to make the foreground image appear more alive. It also prevents the problem of dithering, which might occur with an 8-bit browser palette and a flat color background.
At the second level of content, they created the illusion of randomly placed images surrounded by lots of white space. "Wildlife is not settled in one space. This goes along with the original building block concept," Aki comments. Also, by making the background as clean as possible, each graphic element really stands out.
Giving the site a "sense of place" was of key importance to the team. They decided to go with classic page treatments that are like borders to serve as a navigational device. With this plan, the user will always know where they are within the site and will always feel connected to the whole.
Color plays an important part in giving definition to each location within the site. In choosing the palette, the design team decided to stick with rich earth tones and other colors that could be found in nature.
Now it's time to start focusing on the content. Nothing is more disappointing than a site that looks fantastic but has absolutely nothing to say.
To determine the narrative flow, the team started "building fences" around the content; limiting it to specific things that helped the Nature Conservancy of Washington accomplish its goal.
The screen image was optimized for 800 by 600 pixels, excluding the browser shell. This is necessary because users often choose their own window size. This, in turn, can change the page layout and the benefits of all that carefully thought-out design can be lost. To prevent this from happening, Aki says they set the area in which they wanted the image to occur at 550 pixels wide.
If at first you don't succeed...
The Bookshelf Page posed some particularly challenging design problems. The navigation bar on that page downloads as one big graphic (about 20K). "I had a really hard time optimizing it for faster download time," says Aki, who had to adjust the color scheme many times to make it work.
He adds that because he works on a Macintosh®, which has a different color palette from Microsoft® Windows® and Microsoft Internet Explorer 3.0, he had to go back and forth between systems to see how the layout would work on each.
"When you bring HTML-coded print onto the page, the user May want to change the style of type, which can have disastrous effects on your layout," says Aki, who had to plan for that contingency.
Fortunately, Microsoft Internet Explorer 3.0 has type control, so if the user doesn't have the first type face specified by the designer, the designer can choose multiple options that will be acceptable from a layout point of view.
Another design challenge on this particular page was the woodpecker image. For Netscape® Navigator®, the woodpecker is static, but with Microsoft Internet Explorer 3.0 another image comes in from behind and starts the motion. Aki explains that they had a problem because the software program used to bring in the background image had only certain image sizes, which were larger than the static image. "We had a basic software incompatibility problem we had to solve," says Miles.
To resolve cross-browser issues, the designers also ended up using GIF animations, which work equally well in Netscape Navigator and Internet Explorer 3.0, and created a color palette that established 216 colors common to both browsers and both platforms.
Coding brings up a whole new set of problems, so don't even bother to start that process until you figure out exactly what you want to code. That means having a finalized design and solving all those pesky design problems first.
With the Nature Conservancy of Washington site, no coding took place until all design decisions were made and the big problems solved. "We built the site on Microsoft Internet Explorer 2.0 and expanded it to involve Microsoft Internet Explorer 3.0, shifting most of the programming over to Metabridge at that time," explains Miles.
There are many solutions to your design problems. Creativity, persistence, and some research can unearth solutions that work for you.
"Designing for the Web is all about options," Dave says. He recommends that designers read as much as they can about what's going on in the world of electronic media. Aki and Miles agree. Keeping current can mean cruising the Internet, talking to other designers, and reading various publications.
Brian feels there's much to like about the changing technology; it makes designers think harder about solutions to design problems.
Everyone agrees that the best part of the project has been working with the great content The Nature Conservancy of Washington provided them. The second best part has been working on the cutting edge of new Web technology.
As you venture onto the Web, make yourself, your clients and the rest of us a promise to add only well-designed, appropriately functioning, content-rich sites for us to visit and enjoy. This will be much easier if you remember to:
WAGONS HO!
The Tim Girvin Design team working on The Nature Conservancy of Washington Web site consisted of the following members:
David Brede, Digital Media Director
As the computer has transitioned from word processing to CAD/CAM to desktop publishing to multimedia to digital video and the Internet, David Brede has been an active producer, programmer and director. Recent projects with Tim Girvin Design for Microsoft and Apple have given him the chance to collaborate with designers, programmers, and digital artists.
Brian Boram, Senior Designer and Studio Leader
Brian Boram was trained as a traditional graphic designer and is experienced in print campaigns for small arts organizations and large corporations alike. Recently, he has turned his energies toward developing an evolutionary process for designing for the Internet, because implementing design systems and maintaining graphic integrity for a paradigm in constant flux has proven to be the ultimate design problem. He specializes in creating solutions that build worldwide awareness for Tim Girvin Design clients, by applying the conventions of fundamental design to this most unconventional of new mediums: the Web.
Aki Morino, Associate Designer
Originally from Osaka City, Japan, Aki Morino came to Seattle in 1988. He attended both the Art Institute of Seattle and the University of Washington, where he received his Master's Degree in Graphic Design. He has a strong interest in multimedia and likes to design for both the American and Japanese markets.
Miles Matsumoto, Digital Media Programmer
Born in Seattle, Washington, Miles attended the University of Puget Sound and graduated with a Bachelor's Degree in Computer Science. His interests include multimedia, graphic design, and the Internet. His primary job at Tim Girvin Design is to help designers interpret new technology so that they can apply it creatively when solving design problems.
Luanne Brown writes both fiction and non-fiction for multiple media.
Photo Credit: Gary Irving/PhotoDisc; Neil Beer/PhotoDisc
Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top