How We Made our SXSW In-flight Safety Guide for the @SocialCamApp Contest with @Airbnb
I was catching up on a conversation between all the marketing heads of Social Cam, Airbnb, and hipmunk since I’d missed my flight and would be in the air during our planned call to discuss promotion. They’d secured super-talented Dustin Curtis to design the contest landing page and there I was on my Virgin America flight when it hit me – we needed to throw in some art for the announcement (everyone loves putting images in their blog entries — something about higher clickthrough rate, right?).
The concept was sitting right in front of me. Here’s what I immediately sent to our designer, Shaun. Little did we know this would be a huge hit and Social Cam’s contest would take SXSW by storm.
I asked him to create a parody in-flight safety guide to explain the tasks required to win our fabulous Fiji getaway. Behold the awesome he produced. I’ve asked him to add commentary along the way so you can see the design process; all text you see from here on out is from Shaun (who you might remember from this awesome photoshop).
Whenever I get a new project, I immediately start doodling in my moleskin just to try an get a rough idea of how I may want things laid our, or how I want to present things in general. My goal is to find the best visual way to present a concept without relying on words; as a dyslexic, I don’t like to inflict reading on others unless absolutely necessary.
One of the main parts of the graphic was visualizing the dual-platform aspect of the app, which seemed to work pretty well with each logo looking over the cloud.
More rough drafts. My roughs are usually really rough, as I’m doing my best to keep up with the ever-running-cartoon in my head.
For some reason, when I read “make something up,” I had a flash in my head of a man in a suit pig-jousting with a monkey. For the sake of keeping things from being too-distracting, it slowly developed into the current image.
Alexis sent me this picture of an in-flight safety guide, likely taken whilst on one of his adventures. Weirdly enough, it is more difficult to find legitimate images of safety guides than it is to find satirical ones. Aside from providing me with a style guide, these images help me sample colors to get that authentic look.
Using my faithful Wacom tablet, I convert my initial roughs into slightly-less-rough roughs of each major section.
I usually save headers for last. The reason is usually because how the project was initially planned vs. how it comes it can vary, so I usually end up re-doing it anyway at the end. Sometimes, though, I have the luxury of Alexis giving me a vision in the form of a doodle.
Header has been designed and branding is put into place.
Most of the time, the first thing I design is the part that is most confusing. In this case, it was these steps. Based on some mock-ups of the app, I was able to figure out most of what needed for these sections, but I couldn’t really nail down the best way to show it. Once it was figured out, then I could move on to vectoring the sketches.
Slowly but surely, I try to figure out the best palette and tones to use starting with whatever requires the least amount of detail.
Starting to vector the characters.
Alexis sends me an update on how some of the characters will likely look so I can update the safari section.
More rough vectoring, trying to fill in as many similarly-colored things as possible with no regard to cropping or masks.
Finished up vectoring of all characters + vectoring the Facebook and twitter logos to fit the style of the project. Last step is popping in text and including some 1-pixel fine-line details.
And finally, we get this. Thanks to all of you who played!