Interactive Hug

Working with a client like The UFC is fun because of our long standing relationship with them. Their trust in us to create a unique site that promotes their event in the most immersive way possible, creates positive-pressure in the design team and fuels our desire to push the limitations of what we can produce. All the projects we do at Red are extremely collaborative but this one in particular felt like an absolute creative mesh. 

UFC 100 created by Red Interactive, 2009

Mute Witness trailer

The lead creative team consisted of Christian Harden (Chief-Developer), J.R Fabrito (Designer & Papervision-Stud) and a host of other superstars. If any one of them had been swapped out for another equally talented Creative, who-knows how different the project may have turned out. Once the design and tone of the campaign had been set, each member took that styling and ran with it to build individual pieces that each had their unique touch, but collectively worked in the overall unit.

Choose an Effect and Let it Ride

A general rule of thumb I’ve used for years now is to find a cool animation style and use it as the theme for the transitions and button rollovers, which dictate all the other animation in the site. This aspect of the process has become such a staple for me that I ‘ve amassed a library of animation effects that are always on hand just waiting for the right project. For UFC 100 it was what I call, the “force glitch”. I bought an After Effects plugin from VideoCopilot about a year ago called Twitch, and this seemed like the perfect opportunity to bust it out.

A Few Design Tips for Papervision

• 3 Layers. In developing this navigation we remembered that Papervision always looks coolest with at least three levels of depth. We placed imagery in the foreground (splotches), middleground (nav) and background (wall). We would’ve like to have added more elements, like the swirly graphics behind the fighters you see in other sections of the site, but we were already walking the performance line by then.
• Handheld Camera. We attempted to re-create the reality camera style that’s currently dominating movies and television. We kept the camera randomly moving to give the feeling that someone’s actually holding it rather than it being part of a pristine digital world.
• Figures Facing Camera. Subtle but important is to ensure that all images containing figures should always remain facing the camera, no matter how the user rotates the scene. When the images don’t face the camera they look like paper cut-outs, which reveals the simplicity of the 3d environment.

Take Inspiration

I’m constantly inspired by the media around me – I think it’s a real talent to allow your work to be shaped by art that moved you. For UFC 100 we were directly inspired by the teaser trailer for one of our favorite video games, Modern Warfare 2. This simple trailer inspired the foundation of the Art Direction. Another good example would be UFC 94, designed and developed by Jared Kroff and Adam DeVincent. They payed homage to the Artwork of Sin City to create a fresh design with its own individual creativity.