Behind The Scenes: Snowflake Workshop
SnowflakeWorkshop.com
Whenever I come across creative work that I like, my first thought is often, “How did they do that?” As someone who works in the industry and knows all the moving parts that go into a great project, I find others’ processes fascinating. But the resources for discovering this information are frustratingly few and far between. So to do my part in providing more of this kind of background info, I am going to try to spotlight a few of our projects here on the blog. Hopefully someone will find it helpful (or at least interesting) to see us pull back the curtain a bit and reveal our creative process.
The Challenge
Our client, Brinks Hofer Gilson & Lione, is one of the most respected intellectual property law firms in the nation. BHGL takes a progressive approach to client communications, and we have done a few e-vites for them in the past. This year, they wanted to send out an online replacement for a holiday card, and contacted us to do it.
Finding the Solution
Because BHGL has contacts from around the world and a variety of backgrounds, the use of specific holiday or religious symbols was off the table. So we shifted our attention toward creating something inspired by the season itself rather than by any one holiday. We decided that the winter season was an acceptable theme that might give us something to work with.
We found our idea in the overlap between winter and intellectual property. As we discussed the creative possibilities surrounding snowflake iconography, someone mentioned the old adage about no two snowflakes being alike. Light bulbs went off as we all realized this was a perfect metaphor for the intellectual property that BHGL works to protect. Our concept was to build a web-based tool that would allow BHGL employees to build their own unique snowflakes and send them to their contacts.
From Concept to Creation
Now that we had a concept, we had to figure out how to make it work. What would the interface be like? How would we build the snowflakes? How could BHGL get the maximum benefit from this tool?
Step 1: Refining the Concept
In trying to answer these questions, we became aware that most of us had done the childhood art project in which cuts made to folded paper had yielded a snowflake-like design. Because of the likelihood of many of our recipients also being familiar with this exercise, we decided it would serve as a good metaphor for our interface. Additionally, we realized that the moment of anticipation before opening the cut, folded paper made the process particularly rewarding. So we decided to build a tool that would give users a digital simulation of this process.
Step 2: Outlining the User Experience
Rather than just basing our interface on the idea of the original, we thought it would be interesting to completely simulate the folding and cutting in a way that made users feel as if they were actually having the experience of creating paper snowflakes. This meant an interface that was photo-realistic, and that allowed users to interact with real objects to create, save, send and view their snowflakes. The site would be divided into two sections: a workshop in which individual flakes were to be created, and a gallery in which to view all the finished snowflakes.
Notes from a meeting to outline the user experience
Step 3: Designing the Interface
We knew that we wanted the site to be photo-realistic, but we wanted it to be fun and slightly quirky. I felt like playing up the constructed nature of the interface would make for a more immersive experience by drawing on a user’s childhood experiences. A child’s world tends to have a very arts and crafts feel to it—crayons, construction paper, glue and glitter – drawings hanging on the refrigerator. This was the vibe we were going for.
I started to think about other work I’d seen that brought a tactile, or hand-made aesthetic to a digital, artificial application.
UPS
Gondry- Science of Sleep
Fan Video for Grizzly Bear’s Two Weeks
Two Weeks – Grizzly Bear from Gabe Askew on Vimeo.
Inspired by this work, I set out to design what our site would look like. For the workshop, I tried to picture the setting in which this kind of project might take place. What I came up with was a sort of workbench, or craft area. I populated it with the tools needed for the process, and built navigational features out of cardboard scraps. I went for hand-written type wherever possible, and vowed that every part of the site feel like it could actually be touch, handled, and interacted with.
Hand-cut portion of the logo
For the gallery, I tried to imagine how a child might display his finished work. After throwing out a few ideas (hanging from ceiling, refrigerator), I came up with the concept of a sort of puppet theater. I created a winter scene from cardboard cutouts, and used a snowstorm of paper flakes to display the finished products.
Hand-made elements for Snowflake Workshop
Step 4: Creating Video Assets
To really push the trompe l’oeil, we wanted to used live-action video of hands interacting with the snowflake. To do this, we had to script our actions to coincide perfectly with the placement of objects in the interface. We then filmed the live action against a green screen to allow for compositing later on.
Shooting green screen video elements
Step 5: Putting It All Together
All of the visual elements were rendered out as image files with transparent backgrounds and reassembled and animated using Adobe Flash. The video assets were then rendered with an alpha channel and composited into the animations. Finally, the animations were combined with an application written by our developer to create a functioning workshop. After adding music and sweetening with sound effects, the whole thing was tested and published online. We are pretty pleased with the final product and hope that everyone enjoys it. See the finished Snowflake Workshop
Behind the Scenes: Snowflake Workshop from Patrick Mouser on Vimeo.
Check back soon for an update by our developer about his process for writing the application that builds the snowflakes.
