Madness for Method
Joe Shepter
At first, the decision to design two Web sites for Adobe Systems' new advertising campaign rated as a simple task for San Francisco-based Method, Inc. The client was well known, and the project guidelines were the widest Method had ever seen: make it experimental, push the limits, and (please) try to do something cool.
But Method soon found the level of creative freedom a little disconcerting. The plan didn't call for a design review until two weeks before the project deadline, and by that point the designers at Method weren't sure their client would like what it saw. "We did the first presentation by conference call, and when we were finished, they didn't say anything for a long time," recalls one member of the firm. "We thought they hated it."
Finally, a voice broke the silence. "It's not what we expected."
The Method designers looked at each other, their stomachs knotted. "Would you care to elaborate on that?" asked Method CEO Kevin Farnham.
"It's just not what we expected." Another pause. "It's cooler than we expected."
The firm gave a collective sigh of relief - and with good reason. Adobe had given Method a task as unorthodox as the Young and Rubicam advertising campaign itself. The campaign consists of two ads, one featuring a granny popping a wheelie on top of a suspension bridge and the other depicting a group of men wearing burning ties. The ads have no text except the URLs of the Method minisites located at Smashstatusquo.com and Defytherules.com. In turn, the minisites serve to showcase Adobe's suite of Web design tools.
Adobe set a one-month timeline for the project, and the creative control it gave Method made for a few awkward moments in the beginning. "Design firms always say they want more freedom, but when you get it, you sometimes don't know what to do with it," Farnham says. Thinking a moment, he adds, "at first."
The team began by spending three days around a white board working out the concepts. "We knew that when you use a software program, you enter a world, and every program has a different world," recalls one member. "We decided to enlarge the interface elements to graphically recreate the feel of being inside those worlds."
The sites create their "worlds" in different ways. Smashstatusquo.com employs a 1,476x2,196-pixel background image, which is roughly three times the size of a normal Web browser. By clicking on buttons, the user can move around the page, navigating to different worlds for Adobe(r) Premiere(r), Illustrator(r), Photoshop(r), GoLive(tm), and After Effects(r). At every stop, rollover DHTML layers explain how the different tools were used to produce the site.
Defytherules.com, by contrast, is a single HTML page composed of more than 80 DHTML layers. Its navigation is controlled by a series of buttons. Whenever a visitor clicks a button, new layers slide into place over the old ones, producing a journey through the Web design process.
After nailing down the conceptual framework, the team then took hundreds of screen shots of Adobe product interfaces and used Photoshop to enlarge them and create the impression of being inside the products.
Olivier Chatelat, who served as the lead designer on Smashstatusquo.com, sifted through the screen shots and mapped out the site's background in Photoshop. As site building went on, team members produced the rollover effects as layers in Photoshop, and then optimized and saved them separately as GIFs and JPEGs. They then took the assets and converted them into a huge HTML page using GoLive. Method's Henrikk Karlsson, an intern from Sweden, created the site's unique navigation with GoLive Moveto actions that slide the background around to preset positions.
The Defytherules.com team was headed up by Thomas Noller, a German-born programmer and designer. His team adopted a slightly different approach, working heavily in Illustrator and Photoshop to create the imagery, and then carrying most of the assets immediately into GoLive. The huge number of layers made the task a delicate one, not least because of differences in the way browsers interpret them. Even so, the team had fun using ImageReady(tm) to make the granny's scarf flap in the wind.
Other Method designers like Aaron Day and Bob Connelly chipped in to add the sound and movies for the sites, but Adobe by and large stayed on the sidelines. "They didn't want to influence our creative direction," says Farnham. "They'd sometimes want a change in how we displayed a logo, but beyond that, they left it up to us."
And it was a good thing, because Method had its hands full with the aggressive deadline. In addition to three all-nighters, the team logged a considerable number of early mornings followed by short naps on the Method couch. Even so, they're not complaining. "Overall, it's been a great project," says ChÈtelat. "Adobe just put it in our hands, and that was nice. Then again, I don't want another job like this for a while. We've had no sleep, and most of us haven't found girlfriends." He pauses. "Actually, be sure you print that, it's important."
Joe Shepter is an Adobe.com editor.
