Hello everyone. If you are just joining the Origami party I suggest you first read the first part of this series “App Prototyping: Getting started with Facebook Origami”, which will introduce you to the Origami and Quartz Composer philosophy, GUI and teach you how to get up and running with you first Origami project.
What Are We Making?
In this article, I'd like to show you how to put together an attractive prototype equipped with animations and interactions in a few easy steps.
[caption id="attachment_115723" align="alignright" width="325"]
There is no better way to learn than by doing, so for this tutorial we will be prototyping a vacation photo sharing app.
For your convenience, if you don’t want to go through the trouble of designing a lookalike app just to follow this tutorial, you can find all the assets used in our example below by following this Link.
Before we start
Before we get going, there are a few key points that you'll find helpful in understanding the way Origami works.
Coordinates
[caption id="attachment_115732" align="alignright" width="200"]
The first item you should keep in mind is the coordinates system. In contrast to building with quartz composer patches, Origami patches such as Layer/Layer Group or Text Layers use pixel coordinates.
Progress Values
Values in the range of 0 to 1 are a common concept in Origami prototyping. When putting together an animation you will need to wire a 'switch patch' that triggers either a 0 or 1 and is connected to a transition in which you configure different animation properties.
Like a common light switch, switches can only be in one of two positions – values of either 0 or 1, or ON and OFF, or Start and Finish. Switches are commonly used as triggers for other patches.
[caption id="attachment_115729" align="alignright" width="234"]
Keyboard Shortcuts
Luckily Origami comes equipped with a lot of keyboard shortcuts that speed up the prototyping process even more.
Shortcuts can be used when hovering the mouse over the work canvas.
You can find a full list of these shortcuts at the Origami's official documentation page by following this link.
Folder Structures
While the location of your assets doesn’t directly affect the development of your prototype, it is convenient to keep all of your assets in one folder with the Origami project. So, just in case you mess up the wiring of a patch, you can just remove the layer completely and easily re-add it in the project again.
[caption id="attachment_115730" align="aligncenter" width="550"]
Let's start prototyping
First we need to start a new Origami Project. If you don’t know how to do that, follow the instructions on the first article of this series as we mentioned earlier.
[author_more]
App Prototyping: Getting Started with Facebook Origami
Prototyping for Android with Material Design
The 100 Year Old Trick to Writing at 240 Words Per Minute
[/author_more]
When starting a new project, I like to import all of the image layers that I intend to use and arrange them how they will logically appear in the prototype.
This saves a lot of time when you are dealing with a smaller project with just a few components like the one we are using in the example.
You can add an image layer by dragging and dropping pictures straight into the canvas. Alternatively, you can manually add an image layer from the patch explorer window.
[caption id="attachment_115721" align="aligncenter" width="640"]
Since we are building a 2-page prototype, it is good practice to use 'Layer Group Patches' so we don’t get lost in all the wiring that will go on for each page. Create a layer group patch by pressing 'G' on your keyboard (or by dragging and dropping the patch from the patch inspector).
After successfully adding the images in the Layer Group patch, you will notice that the Layer Group contents are not being rendered in the viewer. Don't panic!
The issue is we haven’t yet told Origami to render the output that comes from the layer group patch on the device screen. To do this, we must add a new layer patch and wire the Image output of the Layer Group patch into the input image property of the Layer patch as shown in the GIF below.
After dividing the components of the second page and adding them to the layer group, you will notice that the items on the second page overlap those of the first.
There are many ways to solve this depending on what you are trying to achieve. Since we want the second page to slide in horizontally, we can move it out of the way by changing the X-position property of the patch to -800. Easy.
To configure and change patch properties, just click the patch inspector icon in the canvas window.
[caption id="attachment_115727" align="aligncenter" width="640"]
Great! Now we want to go to that second page when tapping the “Explore Now” button on the app's welcome screen. We also want the second screen of the app to slide in elegantly – maybe even with a groovy little bounce while it does so.
To accomplish that we are going to drop 5 patches into our work canvas. Don't worry if this sounds a little complex or overwhelming – you will see that it is fairly easy to wire them together once you understand the logic.
What we will be using
In the Patch Explorer window you are going to search for the following five patches:
- Hit Area patch: This is the place on the screen where you want to catch events
- Interaction 2 patch: This patch catches interaction events from a layer patch (or the whole screen if not connected to any patch).
- Switch patch: Switch patch uses exactly like a light switch. It starts out as off and when you flip it will turn on.
- Transition patch: This patch takes a number in the range of 0 to 1 and converts it to a number within a range starting with Start Value and ending in End Value.
- Pop Animation patch: This patch animates a changing value with a spring.
Connecting the Dots
We've got our patches – it's time to wire them together.
First we set up our Hit Area patch on top of the “Explore Now” button to catch the Tap event through the Interaction patch.
After the Interaction patch catches the tap event on the hit area, it will trigger the ON state in our Switch patch, which will then send a value of 1 to the transition patch. This tells the transition patch to start increment from -800 to 0.
These incrementing numbers will be passed through a pop animation, the progress of which will be wired to the X-position of the Layer it's connected to.
For this effect to work like the example, you should first change the patch properties of the Layer Group (which contains the output of our second page) to -800 X-position and give it an Anchor Point of the value of Center.
[caption id="attachment_115724" align="aligncenter" width="985"]
Since we have set the start value of the transition to -800, the Layer patch will zoom in from -800px horizontally off screen, before bouncing to a stop in the center of screen, thanks to our Pop Animation patch. To achieve the same effect to the example prototype, just change the Bounciness to 20 and Speed to 6 of the Pop Animation patch (but feel free to tweak it).
Continue reading %Origami: How to Build Terrific Prototypes in Minutes%
by Mateo Prifti via SitePoint
No comments:
Post a Comment