Our friends at .net magazine (published under the title Practical Web Design in the US) asked us to share the thinking behind NVIDIA Speak Visual for their June 2009 issue.

We set them up with Speak Visual team leads, Pete Schirmer (Senior Developer), Damon Nelson (Associate Creative Director) and Grace Hwang (Senior Producer) to get to the bottom of the creative process behind developing a high-level site under tight deadlines. The article includes an interview with the team leads, uncovers key project milestones and provides a tutorial on how to integrate video into Papervision. Here is an excerpt.

NVIDIA showcase site Speak Visual won the Motion Graphics award at SXSW this year. Pete Schirmer, Damon Nelson and Grace Hwang of Odopod explain the thinking behind it.

What brief did NVIDIA give you for the Speak Visual site?
Grace: The Speak Visual campaign was all about expanding and creating awareness of NVIDIA. We were asked to create a rich and dimensional experience that truly reflected the graphic quality and creativity that NVIDIA products provide.

Can you describe the site for us?
Grace: The visual language of the site was part of a fully integrated effort, including print, television and wild postings. The central theme, Speak Visual, is embodied in the visual speech bubble, which is always seen superimposed over the mouths of creative people in similar, striking compositions. It acts as a container for their creative output.
The website is the hub of the campaign. The creators and their speech bubbles come to life here. Each creator is treated as a large-scale video portrait. When they enter the frame and touch the speech bubble, it activates with a video introduction to their work, narrated in their own words.
Users are invited to express themselves visually by posting their own work in the Gallery portion of the site. Artists will be chosen to have their winning work projected on buildings.

How did you approach the project?
Damon: The Speak Visual project was a tight collaboration between Odopod and advertising agency Cutwater. The first steps were all about syncing up the creative teams from both agencies, discussing the overall goals of the campaign. Using Cutwater’s existing brand guidelines for NVIDIA, Odopod was able to move very quickly into detailed design and motion prototyping. We knew we wanted to push our video and 3D integration capabilities, so it was important to develop working prototypes early on. These prototypes helped us determine what would be technically feasible in the final product.

What tools and techniques did you use? Why did you mix in FIVe3D, for example?
Damon: Papervision3D was used to create the cityscape you see on the homepage, with stills and video assets being streamed in and layered on-the-fly. For the gallery section, we chose FIVe3D over Papervision primarily for performance. The speech bubbles didn’t need to be actual 3D objects, so FIVe3D enabled us to use simpler 2D images and achieve a much higher frame rate. For the large video portraits of the artists, we did a lot of post- production to slice them up into distinct pieces. This enabled us to minimize the amount of video data by only using video for portions of the screen that are moving.
Pete: We used Flash, Photoshop, After Effects, Eclipse, FDT and Subversion. We also used a number of open source Flash and JavaScript libraries such as Casa Framework, Papervision3D, FIVe3D, SWFAddress, and SWFObject. And on the server side, we have PHP and MSSQL.

What were the biggest challenges?
Damon: Balancing the amount of 3D and video with the frame rate at which Flash could perform. The site needed to feel snappy, with smooth motion and clean graphics while pushing the technology to a new place. NVIDIA’s brand is all about graphic acceleration, so building a site that chugged was simply out of the question. In the end I feel like we found a good sweet spot. It’s been exciting to see how much Flash’s video capability has progressed in the past few years. We’re able to use more and more high-quality video assets at larger sizes, allowing us much more creative freedom.
Pete: For me, there were a few big challenges. In the initial comps there was a complex shadowing system on the 3D shapes that didn’t translate well into the relatively flat appearance of the Flash 3D engines. We had to try a number of techniques to find the right balance of Flash performance and visual richness. There was also the general challenge of optimizing the 3D and video performance to give us a smooth user experience.

How did you manage to seamlessly integrate the video content of the site?
Pete: A lot of the seamlessness came about through the design of the site and picking places where short video clips could add some visual interest. From a technical standpoint we tried to minimize the number of videos playing at any one time by having videos play on demand or in sequence. On the homepage for instance, there are never more than two videos playing at any one time. Thought has also been given to the loading strategy – storing the shorter clips in individual SWFs and preloading them. It seemed to give us a smoother experience than loading them on demand. The larger clips were progressive downloads, so we could have the video playing as soon as possible.

What kind of feedback have you received?
Grace: The response to the site has been overwhelmingly positive, not only from our clients and audience, but also from industry professionals and the media. It’s picked up quite a bit of recognition from the FWA and Communication Arts, and it’s been selected as a finalist for several awards. Additionally, we’re seeing more and more entries in the Gallery section of the site and we’re quite proud of the success and excitement it’s been generating among artists and all creative types.

What did you learn from Speak Visual?
Pete: We’re always learning new tricks and finding new ways to streamline our process. At the beginning of this project we had a slightly different approach to our research and development phase. Based on our previous experiences with doing 3D in Flash, we wanted to research some different ways of working with 3D. We spent a couple of weeks building prototypes and testing performance, quality and the limitations of different approaches. This process worked out to be much, much better than just picking one technique and trying to apply it across the whole site. We also researched a number of different solutions for uploading and transcoding videos before picking a third-party service that fitted well with our project goals.

Thanks again to the team at .net magazine for producing this article with us. Be sure to visit their site for more interactive showcases, news, and tutorials. And of course, visit speakvisual.com for the full experience. For additional questions and comments on Speak Visual, please use the comment field below.