<p>Published on <a href="http://ift.tt/2p0xBhX">| Prototyping: From UX to Front End &mdash; Medium</a> Polidea <img alt="" src="http://ift.tt/2nY5MCr"></p>
<p><a href="http://ift.tt/2dbGP20">Choosing the right prototyping tool</a> for designing mobile apps may be challenging, especially taking into consideration the great choice designers have. After reading this detailed review you will learn what <strong>the basic differences between Proto.io and Origami Studio</strong> are and depending on what you are looking for, you will be able to adapt the right tool and make your everyday work smoother.</p>
<h3>What is out there?</h3>
<p>Prototyping is an essential part of digital products design. To start off, I categorized the available tools into <strong>two main groups</strong> depending on the complexity of the interactions you can create in them.</p>
<p>There are programs that provide basic logics like: <a href="http://ift.tt/Milx48">InVision</a>, <a href="https://marvelapp.com/">Marvel</a>, <a href="http://ift.tt/1QRkntr">Adobe XD</a> or <a href="http://ift.tt/1GuheZO">Principle</a>.</p>
<p>There are also those that come in handy when you want to introduce some conditions to the interactions, such as: <a href="http://ift.tt/1Ch4zKr">Justinmind</a>, <a href="https://kiteapp.co/">Kite Composer</a>, <a href="https://framer.com/">Framer</a>, <a href="https://www.axure.com/">Axure</a>, <a href="http://origami.design/">Origami Studio</a> or <a href="https://proto.io/">Proto.io</a>.</p>
<p>I will review the last two, because they both support sophisticated logics, but are quite different and don’t require any advanced coding skills like <a href="https://framer.com/">Framer</a>. They are also widely used by companies like IDEO, Disney, BBC, Amazon, Evernote, PayPal, Facebook or Instagram.</p>
<h3>The story behind the tools</h3>
<p><a href="http://origami.design/">Origami</a> is a prototyping tool built by Facebook and used in their everyday work. They shared it with the community in 2013. It was working with <a href="http://ift.tt/1XfTkv7">Quartz Composer</a> at first, but it wasn’t a secret that this part of Xcode environment <a href="http://ift.tt/2omct4w">is not the best</a> choice for prototyping purposes. That’s why last year Facebook introduced <a href="http://origami.design/">Origami Studio</a> — their previous prototyping tool but working with its own environment. Thanks to this move, its performance was greatly enhanced but unfortunately, it’s still reserved for Mac users only.</p>
<p><a href="https://proto.io/">Proto.io</a> was launched in 2011 as a commercial web platform for creating prototypes for iPhones and iPads. It quickly transformed into a complex environment enabling prototyping for numerous devices. The fact that Proto.io is a web application makes it easier to use but sometimes may slow down your work. Also, don’t try to play with this one during weekends in the countryside. Internet connection is vital!</p>
<p>As I stressed before, the two programs function quite differently from each other. While both of them might be described as <a href="http://ift.tt/2nY6CPg">layer-based tools</a>, Proto.io gives you the possibility to create your layers on different screens. <strong>That small detail makes working on your prototype much easier, especially as it gets bigger.</strong></p>
<h3>Building mockups</h3>
<p><img alt="" src="http://ift.tt/2ombJMX"></p>
<p>If you work on your mockups in <a href="http://ift.tt/1Ls7nHW">Sketch</a>, all you need to do is to copy layers from Sketch and paste them in Origami. They will stay fully editable. Simple, right? Proto.io has its own plugins for both Sketch and Photoshop. They work in almost the same way. Unfortunately, all layers are exported to static graphics, so they are not editable in Proto.io. Text objects get rasterized too. This usually means that if you want to work on micro interactions, you need to build some of the components inside Proto.io. Exporting whole artboards as pages is a big plus though. Thanks to this feature, you don’t need to create pages and position every single object on them. Still, the whole concept reminds me of Photoshop Generator era, before <a href="http://ift.tt/2nXYs9C">Sympli or Zeplin</a> were known. On the other hand, Dropbox sync takes care of project assets changes made in Photoshop or Sketch and updates them automatically in your prototype. How cool is that?</p>
<p>Both Origami and Proto.io offer a pretty wide selection of native iOS and Android components. They are customizable to some extent, which can considerably boost your work. Also, I’m really impressed by some of the components in Origami, like Alert View, which automatically adapts to the number of buttons.</p>
<h3>Adding interactions</h3>
<p><img alt="" src="http://ift.tt/2om4Paa"></p>
<p>While designing in Proto.io, the whole library of interactions is there, waiting for you to be applied to any layer of the screen. Since they are predefined, there are some unquestionable constraints, but the main upside is the speed of building your prototype. What is more, you can use variables which ease out adding more complex interactions. Also, you can create interactions by introducing JavaScript while defining variables. But what is even more exciting, you don’t need to have a good command of JS at all! <a href="http://ift.tt/2lNg4Ia">Simple inline formulas</a> are usually more than enough. Origami Studio is a totally different story. It is based on what is called <a href="http://ift.tt/1h6eLO7">visual programming language</a>. This means there is no actual coding (if you are scared by JavaScript). You play by connecting <a href="http://ift.tt/2nXMnS8">patches with cables</a> instead. It might sound pretty enigmatic, but it’s not rocket science at all. Some basic knowledge of <a href="http://ift.tt/2ombGjS">boolean algebra</a> might be useful though.</p>
<h3>Native platforms support</h3>
<p>What made me fall in love with Origami Studio? Great support for different mobile OS features like: device orientation, microphone, camera, accelerometer, gyroscope, vibration and even Haptic Feedback of iOS. That really shows the prototyping capabilities of the tool!</p>
<h3>Previewing</h3>
<p>You can check your Origami prototype while working on it. The preview window is always open, which means no time wasted for saving or building! Previewing with Proto.io is not so flawless. You have to remember to save the prototype first. Then you need to open new web browser tab with the preview. It might be irritating, especially when you try to iterate fast.</p>
<p>No mobile prototyping tool would be practical without the option to preview your work on mobile. Both reviewed programs go with the mobile application for Android and iOS, but they work slightly different.</p>
<p>Origami Live simply mirrors the prototype you have currently opened on your Mac. It uses either USB cable or wi-fi connection. You can then save the prototype to your mobile phone.</p>
<p>Proto.io App is much more sophisticated. As it is a web platform, once you log in to your account on your mobile phone, you can preview all your prototypes as well as the ones that were shared with you. You can also save the prototypes on your device in order to access them offline. A great advantage of Proto.io is its integration with three user testing platforms: <a href="https://lookback.io/">Lookback</a>, <a href="http://ift.tt/Hbatki">UserTesting</a> and <a href="https://validately.com/">Validately</a> which makes it much more convenient for user testing purposes.</p>
<h3>Support</h3>
<p><img alt="" src="http://ift.tt/2omfrWx"></p>
<p>Every designer chooses a set of tools appropriate for certain project demands. We need to switch between them and look for novelties and changes. That’s why we love trying new methods and tools. It may become a nightmare though, especially when there’s not enough documentation and no place to look for help. Both reviewed programs are equipped with detailed descriptions of their features. It was much easier for me to navigate through Origami’s list of patches than through Proto.io’s user guide but it may be due to the fact that Proto.io is much bigger.</p>
<p>It is not a surprise that Origami Studio, born in Facebook, creates a real <a href="http://ift.tt/1jfN2ty">Community</a> around the tool. You can ask for help, see what other designers were able to create and look for events connected with Origami. On the other hand, it gets tricky when you try to browse different topics to find out if anyone had the same problem you’re experiencing.</p>
<p>Proto.io provides more traditional, forum-styled help. You don’t necessarily feel as a member of the community but the customer service is somehow more organized. It is quite easy to browse through topics that are interesting for you at the given moment. They also provide free online webinars for those who would like to improve their skills.</p>
<h3>Sharing and Collaboration</h3>
<p>When it comes to showing your project to other people, Proto.io facilitates the process a lot. Since the tool is web-based, the easiest way is to pass on a link so that the viewers can add comments to your work. Live Version — an option which enables automatic changes to your prototype — helps to keep it up to date automatically. This may be very useful when you try to iterate quickly. Each publication shared with a reviewer turns up at their Proto.io App as well. Origami Studio is less developed when it comes to sharing and collaboration. You can share a prototype to a person who has Origami Live on their mobile phone.</p>
<h3>Price</h3>
<p>Origami Studio is kind of a gift from Facebook to the community, so it’s totally free. Just download it and use it! Proto.io is a commercial product. There are different plans in their offer, but the cheapest one is US$24 a month with a number of users and projects restrictions and with annual billing discount.</p>
<h3>Summary</h3>
<p><a href="http://ift.tt/2omyiRx">Choosing suitable prototyping tool might be confusing.</a> The most important thing is to ask yourself several questions.</p>
<ul>
<li>What do you need the prototype for?</li>
<li>Who will you share the prototype with?</li>
<li>Is it going to be used in user testing?</li>
<li>How big is the part of the application that you would like to prototype?</li>
</ul>
<p>The difference between Origami and Proto.io could be compared to the difference between low- and high-level programming languages. <strong>The first one gives you access to cool stuff, but you need to put more effort to make use of it. The other one has quicker, ready-to-use features, but it is always somehow constrained.</strong></p>
<p>Origami Studio is great when it comes to checking things out and making sure what parameters should be passed to developers. It may be challenging though to prototype a bigger fragment of the flow in it.</p>
<p>Proto.io is great when you want to conduct some user testing of bigger parts of the application or simply check a piece of the flow. It’s harder to prepare custom animations here, but I find adding sophisticated logic much easier and quicker. Also, if you plan to communicate with e.g. <a href="http://ift.tt/2bbb5bv">a client a lot, especially remotely</a>, sharing tools of Proto.io might save a lot of time for you.</p>
<p><strong>All in all — both tools are highly recommended and the choice should depend on individual preferences. The most important thing is to keep an open mind and look for more! I certainly will!</strong></p>
<p><em>Originally published at </em><a href="http://ift.tt/2omj7aT"><em>www.polidea.com</em></a><em> by Przemek Pomaski</em></p>
<p><img src="http://ift.tt/2nXPOYV" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2oma9ue">Prototyping Tools Review: Proto.io vs. Origami Studio</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Prototyping Tools Review: Proto.io vs. Origami Studio

Top Stories