Proto Mobile

I'm mostly a web designer at Foursquare, but sometimes I get to do design work for our iOS and Android apps too. We pride ourselves on paying attention to the details of interaction and animation, so often I want to prototype some sequence of taps or animated events to see how it feels before the client engineers put the work into building it.

I found myself in such a situation recently, and decided to give Quartz Composer a try. I'd used it for a couple things before, and there had recently been some interesting blog posts about how the Facebook Home team used it as a prototyping tool. I watched this great set of tutorial videos, and then gave it a shot for my project.

While QC is a powerful tool and makes a lot of complex effects very simple, it was too clunky for sequencing interactions. Making effects respond to click events or cursor location, for example, required far too complex a series of nested patches, making prototyping much too slow a process for my purposes.

I found myself thinking how quickly I could achieve the same effects using HTML, CSS and JavaScript. With jQuery, binding an animation to a click event is one line of code, as is tracking the cursor position or hiding an image. Given how many people are creating full-featured apps that consist mainly of web views, it seems obvious to use web languages as a prototyping tool.

I put together a small framework that makes this kind of prototyping easy. I needed my prototypes to work on both desktop and mobile, so I could easily send them around to the whole team for feedback, but also give people a quick demo on my phone to see how the interactions were feeling.

Proto Mobile is a slightly polished up version of what I came up with. The main thing it does is use a media query to give you a container that will render as a preview of an iPhone when viewed on a desktop browser, but will render full-screen with no chrome when viewed on a mobile browser. It also includes a little timeline class for creating time-based series of JS events, as well Animate.css for easy CSS-based animation, and jQuery for event binding and such.

More info and a working example can be found on the GitHub page below. I definitely welcome feedback; this was a quick and dirty project, and I'd love to iterate it into something even more useful.

Proto Mobile on GitHub