Get Your Edge Back

A lookbook where users drag and release to send characters crashing through to the next scene.

For Wrangler's Spring/Summer 2012 catalogue and our sixth collaboration with Wrangler Europe, we developed a lookbook where users drag and release to send characters crashing into the next scene.

Development of this project was a three part process. First up was the creative development and R&D period. We spent some time coming up with different ideas and then testing them to see if they could work. Once we had our final concept, our production crew and our director Arno Salters worked alongside Wrangler and their accompanying team to shoot the content for the site. (We shot this in Portland in one day.)

From there, we took the footage back to our studio where we posted out the mattresses that all the models were falling onto and polished up the transitions between the scenes. To ensure a smooth interaction, we made sure to have a high number of frames in the interactive assets. This allowed the user to slowly scrub the film back and forward on the timeline without seeing any jumps between frames. These transitions were created using After Effects; the changing perspective was faked by cutting up the image in layers, separating foreground elements from the background and then recreating the scene in post using matte painting, rotoscoping and distortion techniques.

Then came the design lockups, interaction design and film integration. In order to integrate the look and feel of the film into the site, we replicated physical behaviour on the UI elements. We also did numerous tests tweaks between the development and FX departments in order achieve a seamless integration of the interactive transitions with non-interactive film assets.

We even took the time to build a few Easter Eggs into the experience. There's two special sequences buried in the site -- can you find them? Here's a hint - it involves an impromptu swim.

  • Site Of The Day