Project profile:
Bringing the Nike Air Max site to life

by Ann Marsh

Long ago, I traded in my running shoes for a yoga mat. But if a website could lure me back to the pavement, it would be the Nike Air Max site designed by Big Spaceship. Experiencing the site, I recalled my most sublime runner's high (only this time set to an orchestral rock-and-roll track with swirling effects). I'm talking about the site's Run on Air feature, in which you can view a female runner, decked out in Nike gear, sprinting through a motion graphics landscape set to music. And for you hoopsters, there's Ball on Air, which features a male athlete adroitly dribbling a basketball through a similar motion graphics atmosphere. Hit a key, and you'll send either athlete through a hail of illusions.

AlertThis content requires Flash

Download the free Flash Player now!

Get Adobe Flash Player

In early May, Nike asked Big Spaceship to design a website that would convey a real sense of the new Nike Air Max shoe. Gone is the old solid midsole; the new Nike Air Max supports the entire foot on an unbroken pocket of air. Hence the tagline, "More air. More world."

According to Big Spaceship Cofounder and CEO Michael Lebowitz, Nike had one requirement for the site: It needed to show individuals running farther and playing longer — going where they've never gone before — with the new shoe. "The idea is that everything you've never seen is just beyond where you always stop," says Lebowitz. "That was part of the overall brand guidelines. That was all we had to work with. There were no specifics. It was one of the best briefs we've ever received."

Given this creative freedom, the team honed in on classic athletic archetypes: runners and basketball players. The idea is to show that moment of being in the zone or experiencing a runner's high. The site is an attempt to take a slice of that moment and turn it into an interactive experience.

I talked to several people at Big Spaceship, who generously shared tips and techniques for creating the Nike Air site.

Recipe for success

Ingredient 1: Motion effects

Big Spaceship designed countless motion effects to create this otherworldly experience. In fact, developers created a web-based tool called the Visualizer so that they could create enough motion effects in time for launch. The Visualizer, now available to the public, enables anyone with a SWF file to collaborate and create motion effects. By innovating to create an application that would streamline production, Big Spaceship was able to generate loads of motion graphics on a tight deadline (two months from concept to completion).

Why so many motion graphics? For starters, the creative minds at Big Spaceship wanted to give users the ability to trigger a symphony of motion effects by using the keyboard. See for yourself. Open up the Run on Air or Ball on Air feature and start tapping away; watch the site come alive. Depending on the keystroke, your input moves the runner through waves, zigzags, and corkscrews of energy as well as a spinning 360-degree blue sky. A small elephant, swimming inside a small bubble, floats across the screen. The basketball player emits a ghostly doppelganger of himself dunking with ballet-like grace and power.

"I like that people don't know what to call it," says Big Spaceship's Minister of Technology, Joshua Hirsch, who oversaw production of the Nike Air website. "I've heard it described as a toy, a game, an interactive experience, to name a few."

Some of the effects are real time and code-based, attached to video. Others, like the elephant, were animated. Getting the effects to run over consumers' low- to high-speed connections and differing processor speeds necessitated time-consuming performance testing. The original idea of rendering effects simultaneously was abandoned in favor of one at a time. People with low-speed connections or slow processors will find fewer active keys, but this core experiential portion of the site, known internally as "the symphony," offers magic at every speed.

Ingredient 2: A new way to loop

Arrive at the introductory page of the site and you'll see two of the shoes materialize on-screen. They touch down like side-by-side spaceships with the air pockets emitting streams of light. Next, two athletes appear, each behind the shoe that best fits his or her sport.

A woman stretches her arms before running. A man tosses the ball from one hand to another. The site is yin-yang balanced. Man, woman. Blue, red. Two shoes. Two athletes moving side to side as if to the rhythm of a hypnotist's pocket watch. Back and forth, back and forth they move to an ambient beat that beckons you to experience the site.

There's a trick to this compelling rhythm. Garrett Nantz, who directed the video components of the project, despises sites that use sloppy video-editing techniques. One such common technique is reversing the action to create a seamless loop. The problem with this method is that the reversed video looks blatantly unnatural since it reverses the laws of physics.

Nantz wanted to keep the athletes active throughout the site. Trying to balance the activity of the athletes with file size proved a challenge. Nantz abandoned his initial plans of looping together up to five video sequences at once and stuck to one short film clip for each of the four looping spots on the site. For the looping involved in this project, Nantz developed a technique that he likes to call Body Part Replacement. He would analyze the different body parts of the athlete and doctor images of their hands, feet, and heads to look like they were looping back into their original position.

In the case of the basketball player on the intro screen, Nantz did a slight cross-dissolve of the basketball as it spins back into the player's right hand during the two-second clip. Look closely at that right hand and you'll see that the ball moves too quickly on its axis in order to return to its original position at the beginning of the loop — much more quickly than when the ball passes into his left hand. To complete this visual trick, Nantz cut and pasted to replace the man's right arm. For his face, Nantz found a frame where he could loop it back into its original position. For the running sequences, both two seconds long, Nantz also cut and pasted the basketball player's and the runner's body parts.

In the fourth loop of the runner warming up, Nantz's handiwork flits past in two short frames, barely discernible to the naked eye. Nantz's challenge here was more difficult. He couldn't find any frames in the ten-second loop that matched closely enough to cross-dissolve or cut and paste. To solve this considerable problem, he found a solution using morphing. In this case, he morphed her image back to the loop's starting point. You can just catch his patch after she finishes stretching her right arm and swings both arms down by her sides. He used an After Effects plug-in called RE:flex to accomplish the morph, taking care to keep the end result from looking too "liquidy."

Ingredient 3: A soundtrack with pulse

Stephen Hodde, Big Spaceship's resident composer, started with an abstract and orchestral ambient score to create the site's otherworldly sound. The direction gradually shifted toward a more energetic sound to convey the athleticism of each sport. The runner is propelled forward by a driving beat under a chiming vocal counterpoint. The basketball player dribbles to a scratchy, synthetic hip-hop groove.

As customers navigate around, the score ebbs back to ambient. But wherever you go, you're followed by the key of E major, providing a sense of continuity throughout the site.

Ingredient 4: A steady rhythm

"The last thing we want in a site like this is for either the runner or the baller to slow down," Lebowitz says. On every processor, at every connection speed, the developers wanted the athletes to keep pace with the music and keep moving quickly.

To accomplish this, they made use of a common hack to Flash. They added a silent streaming sound clip, which forces the sound rate to stay constant by dropping frames if necessary to sync the video with the music. During filming on the video shoot, the athletes ran to the beat of a click track.

Ingredient 5: Breaking video out of the box

To communicate the site's vision to Nike, Big Spaceship showed prototypes of the On Air concept, built with a public-domain video clip of a person running in black and white. However, to achieve the look they really wanted, they had to shoot original video and manipulate that video in a new way tailored for the web. They used high-definition video and shot straight to a hard drive.

To capture both athletes running in an empty dream space (that would later be altered to include animation and motion effects), the video was shot in a large studio. Every object in the studio, including the treadmill and basketball backboard, was painted green to be edited out of each frame later in After Effects.

"Green is a color that is so unnatural that it's easier to remove," Nantz says. "However, it reflects so much into the skin tone that you have to dial it out." The removal process doesn't work perfectly and requires clean up later on.

During the shoot, which was accomplished over the course of one ten-hour day, the production company kept a can of green paint around to cover up patches where the paint flecked off the all-green treadmill, basketball backboard, or floor during repeated takes.

Nantz says he felt particular satisfaction breaking video out of the box. Certainly part of the site's allure is the peculiar and intriguing use of video that holds one's attention by breaking new ground.

"We're just beginning to understand what is different in producing video for the web as opposed to producing traditional video and film for TV and cinema," Nantz says. "It's nice to know this experience could not have been even remotely the same if it had been on film or TV."

A former staff writer with Forbes magazine, Ann Marsh has written for several publications, including Fast Company, Business 2.0, BusinessWeek Online, Fortune Small Business, the Los Angeles Times, and The Boston Globe.