Facebook’s new Paper app for iOS is a gorgeous new iteration of the Facebook News Feed, incorporating clever interactions that allow people to intuitively view panoramic photos, scan news articles, switch between topics and create multimedia stories of their own. As appealing as Paper is, though, what’s still more interesting is the story behind how the app was created.
In the process of creating Paper, the Facebook team created a rapid prototyping tool for interfaces called Origami. Origami allows designers to create interactive mockups featuring complex, original animations without writing any code. The tool’s creation was spearheaded by product designers Brandon Walkin and Drew Hamlin, according to Fast Company’s Co.Design.
Taking Animated Protypes to the Next Level
Before Origami, designers often relied on static mockups created in Photoshop to present their interface ideas. In a world where interaction design is taking on increasing prominence, though, designers needed a tool that would allow them to bring modern animated prototyping to the next level. Enter Origami, a toolkit for Apple’s simple motion graphics app Quartz Composer. Origami expands Quartz Composer into a tool for interaction design, offering tools for creating switches, image scrolling, custom animations, transitions, text layers, buttons, hit areas and more.
Easy and Free to Use
Origami is designed to be as easy to use as possible and requires designers to create no code. In fact, Facebook reportedly trains its employees on the software in a mere hour and a half. “We actually spent a ton of time and energy trying to make the terminology and organization really approachable and friendly, so a student wouldn’t find it confusing or overly technical,” Walkin told Co.Design.
After using Origami to prototype almost every animation in Paper, Facebook released the tool for free on github last month. You can download Origami from Facebook, but first you’ll have to register for a free Apple developer account and install Quartz Composer.
