Firstborn harnesses the power of 3D in this project for Time Warner Cable.
When Time Warner Cable (TWC) approached New York-based digital agency Firstborn with a commission to for its Wifi-Denti-Fier, it wanted something simple but different.
"They wanted a simple bandwidth calculator to help customers choose the right Internet plan," explains Firstborn creative director Flavio Vidigal. "The big creative challenge was transforming a run-of-the-mill tool - an online calculator - into a concept that could be fun, easy to play with and, most importantly, engaging until the very end."
With full creative license to craft the world of Wifi-Denti-Fier, the team took finding the best fibre broadband deals to a new level. Vidigal explains: "Because TWC was so trusting, we were able to loop several Firstborn teams into the creative process - notably, our designers, 3D and motion graphics team and creative developers. The collaboration of all of these different disciplines took both our ideas and the finished product to levels far beyond the basic brief.
We were inspired by classic claymation and toy design
"We were inspired by classic claymation and toy design, so we wanted intricate animated 3D characters and environments that were emphasized by a clean and minimal backdrop. We developed a look that was 3D, yet felt both graphic and thoughtfully designed. That style was also integrated into all aspects of the UI."
The team was inspired by classic claymation and toy design
Super software
To fully create the look the team was after, they used a combination of 3D software and programming languages. "Sublime was the main code editor for HTML, CSS (using Stylus), Javascript (using Coffeescript) and ActionScript," says Vidigal.
"Maya was used in conjunction with Zbrush to create set pieces and environments, as well as to rig and animate. Photoshop was used for design and for the developers to extract UI elements. Adobe Media Encoder let us extract PNG sequences from 3D videos; CodeAndWeb and TexturePacker allowed us to generate character animation sprite images from the sequences; and After Effects was used for final compositing, layout editing and export. We even used a little Flash!"
The team used a combination of 3D software and programming languages to bring the project to life
Digital landscape
With the 3D aspect sorted, the team's next task was to ensure that the polished, interactive experience could support mobile, numerous desktop browsers and tablets - all with reasonable file-sizes.
"In today's digital landscape, it's tough to ensure a UI is fluid and scalable to the varying device dimensions and pixel densities," comments Vidigal. "To tackle these challenges, the studio and development teams collaborated very closely to find the right balance between pre-rendered animations vs. animations built in code.
"We ended up building modified code-bases for each platform," says Vidigal
"We ended up building modified code-bases for each platform. For example, Chrome users get 3D device-selection cubes and transparent videos, users without WebGL get Flash videos and 2D cubes, and users without WebGL or Flash (iPads) get PNG sequences.
"We also had to be aware of imminent web technology updates and what effects they might have. For example, we were developing for iOS 7.0, but knew iOS 7.1 was just around the corner, and that would re-enable chromeless browser features (hiding native toolbars)."
Have you seen any inspirational examples of 3D or web design recently? Let us know in the comments.
Thank you for reading 5 articles this month* Join now for unlimited access
Kerrie Hughes is a frequent contributor to Creative Bloq, and was once its editor. One of the original CB crew, Kerrie joined the team back in 2013 after moving from her role as staff writer on 3D World. Since then she's written regularly for other creative publications such as ImagineFX, Computer Arts and Digital Camera World. After a stint working for the police, Kerrie is back reviewing creative tech for creative professionals.
