In the world of software development a prototype is a working, rudimentary version of an app (or site), and is usually built for the purposes of testing and gathering feedback.
A well-executed prototype will always provide a more reliable idea of how your finished app will work than even a dozen static mockup pages can.
But not all designers and teams are equipped to build such prototypes. Coding something from scratch takes time and specialist skills, while many online tools require some sort of subscription.
Happily, just over a year ago Facebook released Origami - a free tool for designing modern UIs and interactive prototypes without the need to write a single line of code.
It's certainly been battle tested – Facebook has used Origami to build several of its flagship apps such as Instagram, Messenger, Slingshot and Facebook Paper.
Introduction
Facebook Origami in itself is just a big stack of Quartz Composer 'patches' that make it easy to develop working mockups that include demonstrate animations and other complex interactions. Patches are pre-existing modules of animations, graphics or interactions. You can think of patches as the bricks you use to build your prototype.
The best way to understand Quartz Composer is to think of it as a visual programming tool that can take input parameters and output results. It allows you to import your Sketch or Photoshop layers in the form of patches, and then wire them together with animations and events, till you've crafted an experience that mimics what your finished app will be like.
Once you get a hang of Quartz Composer, you should be able to almost effortlessly pull together prototypes in no time. There's a more detailed rundown on the history Quartz Composer here. To download Origami, follow these steps at their official website under the download section found here.
Origami: An Overview
Code Export
When the prototype is approved, it is time for the engineers to make it happen. Obviously this can be a very challenging process for both designer and programmer, who need to work together closely to ensure the end product closely matches the prototype.
Issues can arise when this end product isn't a close enough replica of the approved prototype.
But thanks to Origami's Code Export, engineers can easily tackle this hassle by exporting the code needed to have the identical animations in iOS, Android and the Web.
Sketch Integration
Origami's Sketch integration allows you to directly link your layers designed in Sketch App with your prototype. This means every time you edit your design in Sketch, the updates will be automatically reflected in your Origami project.
Presentation Mode
With presentation mode you can beautifully present your prototypes in front of audiences in fullscreen mode featuring different background images, a human hand holding a device and touch pointers.
You can control the prototype directly from an iPhone or iPad if you have any, or through the trackpad of your Apple device.
You can find a more detailed information on the individual features in the official Origami website, by following this link.
The Interface and Basic Tools
When you boot Quartz Composer you are first greeted with the "Template Chooser" window. To start a new Origami project, go to: "File > New Origami File" or ⌥⌘N.
After creating your Origami project you will be prompted with three overlapping windows. To give your workplace a better and cleaner look go to: "Window > Resize to Thirds" or ⌃⌥⌘0.
1. The Editor Window
The Editor window is your main working space – a work table where you drag and drop your patches and assemble the best combination of animations and interactions by wiring together different layers of your design.
From the Editor Window you also have access to other tools and windows, like the Patch Library, Viewer Window, Patch Inspector and basic tools buttons such as Back/Forward and Zoom in/out.
Continue reading %App Prototyping: Getting Started with Facebook Origami%
by Mateo Prifti via SitePoint
No comments:
Post a Comment