160 WHO: Riding the Project Life Cycle: We Never Forget a Phase

How to Do It

“We considered that very solution, Burt, but these studies show it would take 50% more time than we have—and we found that companies who tried that technique actually did worse than companies who did it the way we’re suggesting. Marcie, could you show Burt that Tragic Failure Report you were sharing with me before the meeting?”

A good web designer will sometimes lie in the service of a larger truth. Pretend we didn’t say that, and we’ll pretend you don’t know exactly what we’re talking about.

Selling your ideas is not limited to unselling bad ideas, of course. And it’s also not limited to explaining technology. You’ll have the same design and brand identity discussions you’ve been having for years. They still want the logo bigger. They still prefer the obvious to the original. They still know just enough to be dangerous to themselves and the project.

Identify color comps

You’ve finally determined the direction; in this phase, you figure out what the client needs to see next. Typically, you’ll be creating comps of the website’s front page and one or two internal pages. These comps are not functional web pages; they are simply realistic renderings. At the same time, you (or you and an information architect) will be developing storyboards or wireframes outlining the flow of the site, from front page to order form, from bulletin board to help page. You will not comp all these pages; you simply need to know how they work.

Create color comps/proof of concept

Having identified the color comps necessary to prove the site concept, you execute them in Photoshop or another design tool. Today’s web pages almost always interact with the visitor—changing in response to mouse movements and other events. Representing those interactive changes in a comp may sound like a challenge, but it’s really not.

For instance, on most sites, an icon or menu item will change appearance when the visitor’s cursor rolls over that icon. This change in appearance, not surprisingly, is called a rollover. A comp can demonstrate the active

Taking Your Talent to the Web

161

rollover state by showing one icon that is different from the others (“rolled over”). To make the effect crystal clear, capture an image of a mouse cursor and lay it on top of the “active” icon in Photoshop (Figure 7.1).

Present color comps and proof of concept

You have presented, articulated, and sold ideas to the client. Now you do it again. The only difference is that the work is farther along in the process. In addition to explaining the rationale behind design decisions and discussing the underlying technology, you also should be prepared to aurally

“sketch” what you have not yet comped up.

The client is interested not only in what you are showing; she is equally interested in what you are not showing. “Are all the sub-pages like this one? Will there be photographs on the message board pages, as there are on the content pages? What happens if the search shows up empty? What will that page look like? Does my hair look okay?”

You need to satisfy the client by describing (or “verbally storyboarding”) these non-rendered pages. Prepare in advance. After all, you need to know this stuff as badly as the client does. By having your answers ready, you’ll shorten the approval process when it comes time to design the next stage. (Client: “Oh, right, that’s the area we said would have the yellow menu bar. Now I remember.”) You also will further instill client confidence in the design team.

After the presentation, you will almost certainly need to make modifications. Web clients are no different than other design clients. They all have needs they can’t quite articulate until they’ve seen some work. As in your current job, you must know the difference between minor changes, which may actually enhance the site, and major changes that could throw the entire project off course. It is your responsibility to communicate the full impact of suggested changes.

Figure 7.1

Is this a screenshot of an active rollover on a web page? Or is it a Photoshop comp? Only its hairdresser knows for sure.