|
We’ve all been there. You sit down at a presentation, wondering if the speaker will bore you to tears by reading slides filled with long sentences. Or will they lead you to learn something new, and use the slides not as a crutch, but rather as a series of visual cues to make their point? We all know a good presentation when we see it.
The Web is no different. As a visual medium, the Web offers communicators the unique challenge of saying in an image what it would take the proverbial 1,000 words to accomplish. It’s not always easy for communicators to find the proper balance of visuals and text that brings a web site’s look and feel to life, and more important, meets its business objectives. Here are some tips on how to do both.
Audience is everything
Every web site—no matter its purpose—communicates with customers. Whether it’s an intranet site communicating to employees or an outwardly focused site, your audience is paramount in the visual design of the site. Nonprofits want to persuade the audience as much as a commercial site wants to sell something. It’s the design and organization of the information on the site that often makes or breaks that initiative.
Communicators must be willing to edit themselves, get to the point—fast—and allow the design to compliment the organization’s call to action. We all know online readers don’t behave like book readers. Online readers scan your content, so you need to grab them fast, make them pause and then act. Visuals on sites can do that.
For example, a theatre company’s web site wants to communicate the mood of its latest stage production and entice you to buy a ticket or, even better, a season pass to its productions. A winning example of this is Steppenwolf Theatre Company in Chicago. Its home page is dominated by a large, black-and-white image of a man, mouth agape, that grabs visitors’ attention. All the images on the page are black and white, adding a uniform gravity to the site, and allowing the navigation tools in red and yellow to pop. The navigation bar doesn’t use the generic “More,” which has become wallpaper to the user, to entice people to read on. Rather, it uses an empowering yet simple word: “EXPLORE.” With one word on the navigation button, the web designer and theatre company get right to the point: They want you to explore the site, but more important, to explore their offerings by buying a ticket.
Less is more
The theatre company web site demonstrates the value of using each element on a site to push the user to a desired outcome. This is the opposite of throwing everything at a user, which can be overwhelming and add to the feeling of information overload. You might have flash animation, frames, multiple links, bright graphics, or hundreds of fonts and background images in your tool belt, but you don’t need to use every one of them to build a powerful site.
Successful web sites use these visual elements sparingly or combine them to create an overall mood that urges the user to pause and learn, buy or act. As both a designer and communicator, I often hear from clients, “But I think we need to add everything to the site.” Not necessarily. I like to tell clients that home pages, and in some instances entire sites, are store windows for your customers. Does a jeweler put every diamond or watch in his inventory on display in the store window? No. But, by creating vignettes of what he offers in his store window display, he hopes to have you stop in to see more.
For example, Apple has lots of products to offer consumers, yet its web site has simple navigation and plenty of white space to let the user’s eye rest. Again, a dominant visual on the site lets you know you’ve arrived, and the mood of the site tells you you’re in the right place for sleek, user-friendly technology.
Lead them down a path
Have you visited sites that were extremely hard to navigate? Most likely, you left that site in under a minute. Think of web design as your elevator speech: If you don’t draw your audience in quickly, they’re getting off at the next floor. Navigation is key to this. It should be so clear and easy to use that a child could find their way around, or at least help the adult find their way, as is often the case. Yet, there are many ways to structure navigation.
Often the topic of the site dictates the style of the navigation. On the avant-garde end of navigation is the music label SHSK’H, which makes exclusive use of Adobe Flash on its site. The revolving, mouse-reactive navigation is reminiscent of spinning records and makes users feel they are a part of the musical creations. The navigation reflects the experimental nature of the music the site is promoting, yet lets the user find what they are seeking.
On the more traditional, yet just as effective, end of navigation is the Whole Foods Market web site. The site reminds you of the store, and the navigation is clean, crisp and repeated at the bottom for any customer who is running their browser without images.
Think nuggets
Working hand-in-hand with a site’s navigation is how the communicator and designer segment information on the site. Web users don’t read, they scan, and the more you can break up information into small nuggets that lead to more, the better. Web content should be considered an outline: Point 1 leads to supporting information A and B and so on. The skills of creating headlines, subtitles, captions and lists that work in print can be translated to and enhanced on the Web.
Leave it to a traditional newspaper to effectively use headlines and other print-era tools on their web site to lead users through the volumes of news produced around the world each day. USA Today brings organization and clean, colorful navigation to the screen. Bonus: They figured out how to do it for mobile devices, too—check out the iPhone app for USA Today. That’s something else to keep in mind when designing and using visuals on your site: Most web sites and their designs will be viewed more and more on smaller mobile devices.
Capture the mood
Design should create the overall mood of a site. The use of photos, colors and other elements such as buttons all add up to set a tone. If your business is children’s toys, grays and cool colors might not be the way to go, just as you normally don’t see primary colors and zany photos on funeral home web sites. Designers can help set the mood of a site by setting up a palette of colors and using it consistently throughout the site. Often, designs go wrong when the visual contrast of all the elements is low, so they blend together and nothing stands out. Or the contrast is too high and every element screams, “Look at me!” leaving nowhere for the eye to rest. Often communicators forget web design is for the eye.
Destination web sites tend to be the best at using visual design to evoke a particular mood. Dara’s Garden, a resort in Tennessee, is no exception. The business objective of the site is clear: This beautiful garden and home is where you want to host your next special event. The mood is set with a wispy font on the navigation, a soft color palette and plenty of photos of the grounds. You relax just looking at the site, yet each page—with its “Plan a Visit” form—is a targeted yet subtle call to action.
Tim Ernst, ABC, is president of RavenWood Creative, a marketing/communication firm specializing in business writing, graphic and web design. Tim writes about technology and its role in communication on his blog Corvus. Tim is also vice president of IABC/Philadelphia. |
|
