Proto.io, Pixate, Origami: a Review of tools for prototyping applications that support Sketch

I re-created onboarding users IF from IFTTT in five high-level tools for prototyping, to understand the difference between them. It was a Proto.io, Pixate, Framer, Origami from Facebook and Form from RelativeWave. See how these five tools behave in comparison with reality.

. Why I chose these five tools. I noticed that recreating something loaded with animation (icons, moving in different directions and at different speeds) is impossible in most packages for prototyping. Most tools allow only to connect a static page, while more sophisticated systems allow you to animate different objects or layers within a given page.

I will stop there read more. In this tool you maketitle different screens of the application and then create links or buttons to connect them together.

You push the button in any place of the screen to go to another screen. Page tools also offer a selection of different transitions between screens. This can be, for example, the shading effect, a shift from right to left or from bottom to top and so on. Its pretty clumsy functionality, but its enough to generate layouts at the stage of consideration of the application behavior (what screens you need and how much they should be, how they will appear where the user must keep the buttons and so on).

Example pagination tools — Briefs, InVision, Notism, Flinto, Fluid, Mockup.io, Prott, POP, Marvel, Balsamiq, Keynotopia, and Red Pen. In some of them you can embed the animation or a scrolling area on the page, but you cant emulate them in any interactive activity in real applications. Each element of the source interface or the layer can be made clickable, pannable, scrollable and animated.

Prototyping the complete application of such an instrument can require quite a lot of time and effort (almost how to create a real app). But you can experiment with different interactions of the elements, types and duration of the animation for each. I tried out Proto.io, Pixate, Framer, Origami from Facebook and Form from RelativeWave. Honestly, there are other.

Axure and Indigo Studio — but they look more corporate (i.e., much more expensive). Someday I will get to them. So, lets go with the selected packages.

The web application player for iOS and Android. Proto.io is a surprisingly powerful app; it has many functions. But due to the fact that it works on the principle of drag-and-drop — press the button and select a value from the list — it is extremely difficult to find what you need.

The nature of the application prototype the IF is such that different objects move at different speeds. So I had to add some custom JavaScript calculations. Provided single-line text field was too small for long calculations, so for a full overview I had to store code in a text file on your computer.

It is also important that these JavaScript expressions can work correctly without any error warning. Be careful and check the console of the web browser if something doesnt work (I had an error caused by a variable that contained a negative value). And here is the order of annoying.

Every time you want to check the result of your changes, you first need to click on Save Project (save project) and Preview (preview). On the web. All just. You can generate a public link is like this.

(These links also open in a mobile browser and can be added to your home screen iOS as an app). You can also submit their work to the public at Proto.io Spaces. On the device. You can make their customers free accounts to view, giving them access to the project.

They will be able to run prototypes in iOS or Android. The difference is small. The animation is less smooth, although it can be caused by an abundance of interactivity with a custom JavaScript code for the scrolling. On the web it would work well, but on the device everything looks slow.

The playback speed better the simpler prototypes. Look at Proto.io Spaces (need to register to import the prototype on your account). Price.

$29 per month or $288 per year for five active projects. Also provides tariff plans for 10, 15 or 30 active projects and a free 15-day trial version. Desktop application for OS X and Windows.

Players for iOS and Android. Pixate seems to have occupied a middle ground between ease of use and functionality. It is possible to do much more than the more simple page-oriented tools.

Growth curve performance is not very steep, but after watching heaps of tutorials and video tutorials you will master this app. Also there are some demos that you can it apart to understand how they were created. Pixate Studio can use the iOS Simulator from Xcode (on Mac) to launch the prototype.

You can also connect with iOS or Android via local Wi-Fi. This is a great solution, especially because both the simulator and the app updated at the same time. The sixth page is missing, because the canvas width is limited by Pixate.

Pretty easy to learn to use the app. There are bugs. To work around the bug, sometimes you have to suffer.

View in the app. To download the filepixate. Mac or PC app. Price.

Pixate Studio is free. (It cost $149, until Google bought Pixate in July 2015.) Pixate Cloud — $5 per month per user or $50 per year per user. (There is a free trial for 30 days.). Works on Apples Quartz Composer for Mac. Have a viewer to test on your iPhone or iPad.

As you probably know, Origami was created by the Facebook design team that worked on Paper. Origami is not a standalone program, is a plugin for Quartz Composer, a visual programming environment that is part of the tools to develop for Apple.

You are programming in Quartz Composer, connecting patches to each other. Different patches play different roles, and Origami is more a set of additional patches created for the design of application interfaces. Many people (but not me) prefer to write code, but in case when you need to describe something like “if this, then do something with the value from this calculation; and if not..”, you still need to program, only by connecting a number of patches, instead of writing lines of code. By the way.

IDEO also created a framework for prototyping in Quartz Composer under the name Avocado. It has several features that will be quite handy for some projects. Bluetooth integration, interactive iOS-keyboard patch for flip cards. Layers also can be made movable.

But there will be difficulties. Of course, you can make record prototype from the screen, but it kills the very purpose of creating an interactive prototype. You can also try to do something in After Effects. The only true way to test a prototype on a different machine to have it on the same settings.

So, if your client has Mac, he can install Quartz Composer + Origami, to run your prototypes on your computer. Of course, the client will also have to register as Apple developer. The prototype can be played a little slower than a real application, but it depends on the car. Quartz Composer is quite demanding, so it might strain your computer, especially if you dont have a good graphics card (as in my Mac mini) or when multiple displays are connected.

My record for playing in 20 fps, even when using a single monitor. The documentation is not enough, but there is a very active community of users. Plus there is also the lessons, tutorials and educational blogs.

To download the fileqtz. Price. Free. You will need a developer account, but it is also free.

Framer Studio is a tool for prototyping on the Mac, but Framer.js only requires Safari or Chrome. No drar-and-drop, clicking on the button or connecting links — in Framer will have you coding.

Programmers, unlike designers will feel at home. But it is not all that difficult. Framer Studio is working on a simplified version of JavaScript — CoffeeScript. And the engine (Framer.js) runs just on JavaScript, which opens up many new possibilities. You can implement everything that is possible in a web browser, for example, to connect to the web server to work with data in real time or create a Twitter client which displays tweets in real time.

In one click you can generate a public page (like this one), which you can view in Chrome, Safari or mobile browser. A link can be added to the home screen as the iOS app. The same link can be opened in the viewers (this is, in fact, just the browsers-without-Chrome) for iOS and Android. A large prototype like my example will take several seconds to load into the viewer, but then it will play smoothly.

This prototype was able to do more than the other four. You can switch between “Sign in” (login), Sign up (register) and Reset the Password (change password) on the last page. In fact, you are not able to log in or register, but if the Farmer can recreate.

I have to write code for everything, for every aspect of your animation and interaction. You will need skills in CoffeeScript, and JavaScript. Watch online, download projectframer, Mac app.

Price. Framer.js, JavaScript framework, open source and distributed free of charge. Framer Studio costs $99. (There is also a free 14-day trial version). Mac-app viewer for iPhone or iPad.

Form is still a very young app (it launched only in September 2014), and its creators were inspired by what Facebook and IDEO are doing on the basis of Quartz Composer. The guys from RelativeWave may have thought.

“How would it look without Luggage Origami Quartz Composer?” Users Origami will be at home here; many of the patches are the same, but in Form are precisely the patches that you need. The prototype runs on a connected iOS app (via Wi-Fi or USB). You will notice that there is no readout values by double-clicking the connection between the two patches, if not connected to any device. Viewer on the Mac, in Quartz Composer, was definitely comfortable, and it looks like the developers have such plans.

Free iOS viewer can open the fileform, so you can just send the file to the client via e-mail, so he looked it up on your iOS device. I think their a little. Let me know if you find any difference.

The same as in Origami. With a complex prototype, youll receive a braking. Grouping of patches helps to maintain the normal review.

To download the fileform, Mac app. Price. Free. The Mac app used to cost $79.99, but when Google bought RelativeWave in November 2014 (just one month after launch), it was free.

In the last few weeks came two entirely new tool for sketch prototyping applications, and they are based on completely different principles of work. Principle and Flinto for Mac. The third tool, Tumult Hype 3, not this new.

I have had this tool for HTML5 animation, starting with version 2, but I never really used it and had no idea how to apply it to prototyping applications, have not yet received a comment from one of readers. All three programs offer animation based on layers, and they allowed me to reconstruct a fairly close clone IF from IFTTT. And these clones in comparison with the original.

. Mac app player for iOS.

Animation with the timeline may be familiar to those who have used Adobe After Effects or — remember these times. Adobe Flash. (It should be mentioned that in Proto.io was also the animation with the timeline between States on the page.) Principle uses the timeline at the bottom of the screen to animate objects between pages. And there is a second timeline.

Scale Drivers (drivers) on top of the screen, which actually is a scale of values, you can apply a constantly changing position or rolling drag layer to animate other objects on the same page. Scroll left or right in the prototype IF changes the position of almost all objects. As in this prototype page scrolling (like the carousel) will move the many other objects, I had to plan carefully and well post key point on the timeline.

I even had to place my screen in a see-I-real-designer portrait mode. (Dont need it anymore. I used the first version of the Principle, in which it was impossible prosquality the list.). But, again, the average draft will not contain so many moving parts that are paired with a single gesture for scrolling.

In Principle there is a built-in window for preview, which also allows you to record video or animated GIF of the prototype. It works perfectly. View from a mobile device also on the level. Connect your iOS device via USB and open Principe Mirror — it is automatically recognized.

Any modifications that you make immediately tightened, you dont even need to save anything. The prototype will also continue playing after you disconnect USB. The iOS app Mirror Principle can open and play files Principle. (Board of professional.

Triple-tap with your finger will restart the prototype.) Remember that files are not saved in the app, so it is better to store the fileprd in the Mail app or a different location to reopen in Principle Mirror. There is little, except for the white buttons on page 6 — it is not clickable. I tried to add this button state touch down (pressed), but every interaction, no run scroll, or drag gesture, it needs a new page. You can easily duplicate an existing page and make some changes, but in this case its a big page, and all changes to the drivers on the original page caused unpredictable movements of objects, when I clicked the button.

. To download the fileprd, Mac app (you can download a free trial version). Price. Principle costs $99.

There is a 14-day trial version, are only those days when you use the program. Mac app player for iOS.

At first I thought “This looks like page-by Flinto (web application). The only difference is that you can slightly modify the transitions between pages. Think”. But transitions are and return the response.

Using the swipe gesture to go to next page, you can control the speed of the transition with his finger (as is often done in native iOS apps). In addition, the object on the page can also be animated during the transition, so I could do the prototype, divided into seven pages, with the transition between them. But this does not mean that it took me more time to create a prototype. Transition Designer (separate from the canvas view where you can quickly switch between the initial and final States of the transition) — very quick way to set up the transition because of the instant visual display of changes.

I finished the prototype in Flinto IF faster than in any other I am testing the tool. The approach based on transitions, has no flaws, though. If you want to animate different settings of one and the same object with different duration (mean opacity and position), then youre out of luck. As an example.

Rays behind icons iOS page 4 remain visible when you swipe to the next page because I was not able to reduce the duration of the opacity change. In the Mac application has a viewer, and you can through Wi-Fi to use the iOS app to view your real time. You can use both of the viewer simultaneously, and you do not even need to save the results of your changes.

Free iOS app can open filesflinto, so you can just send the file to the client by mail, and he will be able to access it on your iOS device. Icons Instagram and Google Calendar are behind when swipes to page 2, because page is located either on top of each other or behind each other. Four rays of light behind the iOS icon appear and disappear too early too late due to the fact that separate timing for the opacity change was impossible; same thing with the notification icon. A swipe back will also reveal some artifacts of the animation.

Backtracking doesnt seem to always work perfectly. To download the fileflinto, a Mac app (download the free trial version). Price.

Flinto for Mac costs $99. There is a free 14-day trial version. Mac-app viewer for iOS.

And another app with a timeline for animation. This prototype looks more like a hacker product. You will notice that the animation doesnt fully correspond to your touches.

This is a close option. In fact, the gesture for horizontal shift will scroll through the pause in the timeline. I think I was lucky that I still managed to make a prototype in the Hype, because this program cannot reproduce all the kinds of mobile interactions. But I always wanted to learn how to use Hype.

Its a cool tool.. for creating HTML5 animations. Function preview in Hype (⌘⏎) key opens the project in your browser or in the app Hype Reflect, running in the same Wi-Fi network. The draft Hype is just a web page, so you can download it to a folder and send the link by mail.

Or even easier — post to Dropbox directly from Hype. You cant go back to the previous page because each page is a separate frame with the trigger to load the next frame, when you watch the animation till the end. Also there is no way to skip first or last page and see the continuation of the animation.

Hype can also be used to create beautiful interactive websites. Version Pro ($49,99) also allows to do adaptive layouts. Animations do not work so smoothly as in other tools. Maybe not the most appropriate tool to recreate every detail of the interactions of the application because they were created not for this.

To download the filehype. Price. Tumult Hype 3 costs $49,99. There is a free 14-day trial.

I also tested Axure and Indigo Studio. Even the commentators mentioned (or advertised) a few other tools. PencilCase, Atomic, Justinmind and Mockingbot. And that thing with Apples iAd Producer.

Can I use that for prototyping. It seems that is a popular tool, and it is even perceived as the industry standard. My neighbor coworking is very fond of him. But it creates a design of the sites and in sites not being used a lot of gestures.

Here is what is missing Axure and many other tools. In a simple scrollable window gesture scroll or shift can start something else. Silverlight.. It requires installation of Silverlight, but on my car does not even Flash.

However, much harm I brought it. I would mention Indigo Studio to the same category as Axure. This is mainly a tool for clicking, prototyping websites, and not for interaction in mobile applications. Scrolling and shift need to simulate.

Update. The guys from Infragistics tried to recreate the IF statement to show what Indigo Studio. Wait.. What.

All this, of course, true, but at the same time in the PencilCase was very difficult to implement many simple things. In addition, applications inhibit. Another page-by tool.

It is impossible to make a scrollable view, but you can do vertical scrolling on mobile devices using a small crutch. Automatically generated transitions between pages is pretty good. And with the latest update they are configured with the timeline. I have skimmed through this program, but it seems that she also has serious limitations.

For example, there is no way to create a page-by-page scrolling or a carousel, this must be simulated by swipe. (See attached video sample galleries. Swipe and the app then animates the next photo — no dragging or shift to next photo). The same thing.

Gestures are limited to using the keyboard for triggering the action. An vertical continuous scrolling. I wanted to try it because of this publication: Linda Dong. IAd Producer is a very handy one.

Also there is a page-by-page scrolling (carousel) in the toolbar, but this scroll cant run other animations. There is an impressive JavaScript API that is familiar to iOS developers. Looks like a JavaScript version of UIKit (including data sources and delegates). So Yes, it is possible to recreate the IF statement, but you have to dig deep into JS API for tracking touch gestures.

2015 was the year of tools for prototyping. If you have not worked with any of these tools and want to quickly create a prototype for a particular application, use.

But if you are willing to spend time learning a powerful tool, or they cannot realize in full, using Principle try. If you work on Windows — Pixate or Proto.io for rapid prototyping and Framer.js (with CoffeeScript if you want) to the more complex things. In any case, it is better to be able to work with different tools.

Try to feel the difference and appreciate the opportunity. I met with all of them, so in my practice I will use them in zavismosti from the situation.

Source: google.co.uk/blog/

Leave a Reply