Taking Your Talent to the Web | 7
Taking Your Talent to the Web
BRAND THAT SUCKER!
We've discussed navigation and interface in terms of the user's needs, and they of course come first. But what of the client's needs? Meeting them is the role of branding.
A corporate website is the online expression of that company's brand identity. Making sure that the navigation fully supports the company's brand identity is crucial to the success of the site (and sometimes to the success of that company). Build the most navigable, information-filled site in the world, and if it lacks a coherent brand identity, nobody will remember it, nobody will tell their friends about it, and nobody will bother to bookmark it and return.
For over 100 years, advertisers have been working to build our joyful world of branding. When your stomach hurts, you reach for Alka-Seltzer (not an antacid). Sneeze, and you reach for Kleenex (not a disposable paper tissue).
Figure 3.19 What's the "best" place for navigational menus? That's up to the web designer. Caffe Mocha runs its menu bar horizontally across the middle of the page (www.caffemocha.com).
Like millions, we may express our individuality through Levi's. You may choose Gap to show the world how different you are. Neither of us, as we don our separate uniforms, is likely thinking about the folks who picked the cotton, or groomed the silkworms, or trimmed the fleece from the sheep. Consciously or unconsciously, we're identifying ourselves with images created in small offices, thousands of miles from where the cotton grows and the silkworm arches toward the sun-images created by brand advertising.
Branding, branding, branding. McDonald's does not sell cereal mixed with the flesh of cows; it sells food, folks, and fun. Marlboro sells the myth of the freedom of the Wild West. Camels are not for everybody, but then, they don't try to be.
Branding is not limited to products. Although his verbal gymnastics, half-spoken vocal delivery, and angry social consciousness predate Rap, Bob Dylan can't perform Hip Hop; it would conflict with his brand image as the spokesman of the 1960s generation. But David Bowie can do hip-hop or drums-and-bass because his brand identity is that of an ever-changing, ever-current chameleon.
And how come Seinfeld can quip wisecracks about supermarket checkout lines but will never mine his personal sexual experiences for comic material? Hey, it's not part of the brand.
How does this relate to the task of web design? As a designer, you know the answer to this one already. Whether you're building a corporate site or a multimedia online funhouse, your first task is to understand and translate the existing brand to the web medium or to create a new brand from scratch.
Good interfaces reflect the brand. Sleek, high-tech graphics complement a sleek, high-tech company-or one that wants to be perceived that way. A "friendly" GUI is necessary for a "friendly" company such as AOL. (You in the back, keep your sarcastic observations to yourself.) It goes without saying that the company's color scheme, logo, and typographic style must be reflected in your web graphics and that existing print and other materials are often a guideline to what is appropriate for the site.
Smart web designers go far beyond the obvious. In addition to graphic design elements, savvy web folk craft interfaces whose very functioning reflects and extends the brand. A "fun" brand needs more than cute graphics. Its sectional titles should be fun to read and its menu fun to interact with. This may mean taking a cue from the world of gaming. It may mean building the interface in Macromedia Flash.
A movie studio's interface should not resemble that of a bank. A company that sells active wear should encourage active participation, through games, message boards, or contests. A literary site's interface should quietly promote reading, instead of busily distracting from it with funky dancing icons. (A literary site that avoids long copy belies its own brand identity.) The interface of a religious organization's site dare not resemble that of an e-commerce site, lest visitors along with moneylenders be driven from the temple.
IBM's brand image is that of a big-time solutions provider (www.ibm.com). If you're asked to design their site, it had better be technologically solid, visually impeccable, and easy to use. Anything less will send the wrong brand message.
- Technologically solid, in this brand context, doesn't mean a deluge of plug-ins or a reliance on safe, old 1990s web technologies; it means online forms that work, search functions that deliver usable results, and enhancements that shine in new browsers while degrading well in old ones.
- Visually impeccable means that imagery and typographic choices must play in the key of the brand. Type should be clean and readable- not fussy, not grungy, not softly feminine or boyishly abrasive. Photographic images need not be disgustingly corporate (two suits at a monitor will take you only so far), but images of crime, drugs, or bongo jams will obviously be inappropriate.
- Easy to use means easy to use. Why even mention it? Because if visitors find their way to content they seek on the IBM site, it reinforces the overriding brand idea that IBM provides solutions. If users get lost or don't know which button to push, it will send the opposite message. Sending the wrong brand message could harm a brand identity the company has carefully built up over generations.
Branding the WaSP
The Web Standards Project (WaSP), mentioned in Chapter 2, evolved from conversations between a number of frustrated web designers and developers. While some members brought high-level technological knowledge to the project and others brought "marquee value" (their names alone adding instant credibility to anything the WaSP might say or do), your humble author focused on creating a brand identity that would be both memorable and consistent with the task at hand.
Many names were bandied about; we pushed "The Web Standards Project" for a variety of reasons, not least of which was its ability to be referred to in short-hand by the acronym WaSP. Call us shallow, but we believed that this aggressive little insect was the perfect metaphor for our group. We also knew that a memorable identity was needed to keep the effort from becoming so technologically- focused as to confuse potential members.
After all, by agitating for compliance with web standards, we were taking on giant companies such as Netscape and Microsoft in spite of being a small grassroots effort. Which tiny creature has the power to disturb a giant? The wasp. It's a purposeful, productive beast with a powerful stinger, and while you may be able to swat away one wasp, you don't want to mess with an angry nest. The site's verbal tone and visual approach came straight out of this simple little brand image-from the color palette (wasp-yellow, gold, and black) to the tone of voice (www.webstandards.org).
When Kioken Inc. (www.kioken.com), a leading New York web shop, was charged with designing a site for the high-end retailer, Barney's, they carefully considered the client's brand identity as a provider of well-made, tasteful, and luxurious clothing. To put it bluntly, Barney's goods are well above the means of most of us working stiffs, and Barney's customers like it that way.
Kioken crafted a sophisticated, Flash-based interface like nothing else on the Web (www.barneys.com). If you were a savvy web user, owned a fairly powerful PC, had a fast connection, and were equipped with the latest Flash plug-in, you were treated to a unique showcase of Barney's clothing. Just navigating it made you feel smarter than the average web user.
If you were not an experienced web user, owned an old PC, had not downloaded the latest Flash plug-in, and were stuck with a slow dial-up modem connection, Kioken (and their client) figured that you were not really a Barney's customer anyway. A certain elitism was as much as part of the interface as it is of the store. The Barney's site may not exemplify democratic humanism, but it is a perfect web translation of the client's brand.
Some critics faulted Barneys.com for failing to provide an e-commerce solution. You could look at Barney's clothing, but you could not buy it online. The criticism betrays a misunderstanding of the client's brand identity. You expect to be able to buy jeans from Sears' website, but to buy Barney's clothing online would be wrong for such a highfalutin' brand.
Interfaces that deeply and meaningfully reflect the brand will encourage repeat user visits and repeat assignments from your clients. As a web designer grounded in traditional art direction and design, you are better equipped than many working professionals to create brand-appropriate web interfaces: interfaces that don't just look like the brand, they behave like it.
Interfaces that look and act like the brand and that guide the right audience to the most important content or transactions form the foundation for the best sites on the Web-the ones you are about to design.
Created: May 07, 2001
Revised: May 07, 2001