Part 2: Prototyping with Quartz & Facebook Origami
The perfect workflow and creating your first animations.
Hello again and welcome back Origami enthusiasts. In part one we learned why it is such a great tool to use for interaction and animation prototyping. By now you also should also have a rough idea which window does what and how to connect an input to a output. Before we start the Blinkist iPad app will be launching internationally soon so get your reading glasses polished.
Part 2 will explain how to set up a basic template and I will show you by a few examples that were created over the span of a weekend how to prototype your first key animations of your product.
For animations as for most parts of your app it is important to know that less but better always beats “let’s just put it everywhere so its fancier”. Before starting you should search for key moments between the people and your product that really matter. And exactly these are the parts that can be enhanced by putting in a nifty animation. Not only can it make the action just happing easier to understand by imitating a physical relation, but it also can trigger an emotional delight. Which is the ultimate weapon in making a difference between ok and wow.
How to create your workflow that keeps it simple
To avoid confusion and awkward situations where you sit 5 minutes trying to figure out what is going on in your file, create for every interaction one file.
As example #1 I want to show my team what happens when I add a book to my library. First I go into my graphic tool of choice and export only the assets needed, this can be anything from a high fidelity mockup to a rough sketch (yes you even can animate that to better communicate your idea) In this case it would be my list image that also includes the UI, one plus and one checkmark.
Our base file and how to position an image
Next let’s start out with our base template that I have provided here. It starts you off with a iphone screen but you can switch it in the settings of the blue Phone patch. Now the round-cornered rectangles left and right are usual patches. The sharp-cornered one in the middle (Render in Image) is a macro patch that means there is something hiding in there and it can be accessed to build your interaction in there. Double-click it and have a look inside.
Nothing much going on yet beside of a clear patch. What this patch does is basically adding a background color and reseting your composition so nothing weird visually happens. You can easily set the background color in the patch inspector. Just drag and drop now your images into the window to add them.
Perfect. But wait what is that? The list fits instantly, because its the exact size as our screen, but the plus and check got positioned right in the middle of the screen. That’s odd.
How the positioning works in Quartz
Positioning here works quite different of what you are probably used to in your everyday design workflow. But don’t worry once you got the grip its really easy. In the center of your screen right in the middle thats zero (0). Now depending on what value you put in your patch inspector as x/y coordinate it will either move to the right/left or up/down. So lets say I want my plus to be position around the top right under the topbar. That would be here. X: 268 & Y: 260. Its basically trial and error. You will get used to it.
Adding the needed patches and wiring them up
Our Animation will work simple. When I click the plus should be removed and the checkmark should replace it. We will achieve this by scaling both to either 1 or 0. We need following patches from the patch library (cmd + enter): 1x Hit Area (let’s you define a area to click on), 1x Interaction 2 (Defines if it should be clicked, taped, dragged etc.) , 1x switch (Either on/off and stays that way until clicked again), 1x bouncy animation(Animating a value with a bouncy spring) and 2 x transition(Defines the start and end value). In the following image you will see how everything needs to be connected.
What comes next?
Wow now what a ride that was. I hope you enjoyed and learned hopefully a thing or two. Next time there will be more great examples and solutions to everyday problems that everybody faces. I promise. The Blinkist iPad app will be launching internationally soon so get your reading glasses polished.
