Facebook paper keynote

Facebook recently released their Paper iPhone app, along with Origami: a prototyping toolkit for Quartz Composer that they used to prototype that app. Origami and Quartz are great, but they can be too technical and complex for the average designer and entrepreneur to use.

I took on the challenge of creating a quick prototype of Facebook’s Paper app using Apple Keynote, complete with transitions and interactions, in less than 15 minutes. I designed 5 different slides, each representing a different app screen, then added hyperlinks between UI components and linked them to different screens to enable interactivity, and then added magic-move transitions between slides to animate the interface.

Paper slides

Result: I was able to create an interactive prototype of Paper’s UI with animated transitions without writing code, and without messing with complex connectors and parameters in Quartz Composer.

Conclusion: Hats off to Facebook for creating (and sharing) Origami. Quartz is a great tool and Origami adds some useful interactions to it. For me, Apple Keynote was far more productive (and far less technical) for creating this prototype.

The video below shows how the prototype works, and the step-by-step process that I used to create it in Keynote. The same process can be done with Microsoft PowerPoint.

Prototype Your Web and Mobile Apps Using Apple Keynote