share

DESIGN

8min read

Prototyping Tools Review: Proto.io vs. Origami Studio

Choosing the right prototyping tool 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 the basic differences between Proto.io and Origami Studio are and depending on what you are looking for, you will be able to adapt the right tool and make your everyday work smoother.

What is out there?

Prototyping is an essential part of digital products design. To start off, I categorized the available tools into two main groups depending on the complexity of the interactions you can create in them.

There are programs that provide basic logics like: InVision, Marvel, Adobe XD or Principle.

There are also those that come in handy when you want to introduce some conditions to the interactions, such as: Justinmind, Kite Composer, Framer, Axure, Origami Studio or Proto.io.

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 Framer. They are also widely used by companies like IDEO, Disney, BBC, Amazon, Evernote, PayPal, Facebook or Instagram.

The story behind the tools

Origami 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 Quartz Composer at first, but it wasn’t a secret that this part of Xcode environment is not the best choice for prototyping purposes. That’s why last year Facebook introduced Origami Studio - their previous prototyping tool but working with its own environment. Thanks to this move, its performance was greatly enhanced but unfortunately, creating Origami app prototypes is still reserved for Mac users only.

Proto.io 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!

As I stressed before, the two programs function quite differently from each other. While both of them might be described as layer-based tools,Proto.io gives you the possibility to create your layers on different screens. That small detail makes working on your app prototype much easier when it gets bigger and bigger.

Building mockups

image_mockups.png

If you work on your mockups in Sketch, 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 Sympli or Zeplin 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?

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.

Adding interactions

image_interactions.png

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! Simple inline formulas are usually more than enough. Origami Studio is a totally different story. It is based on what is called visual programming language. This means there is no actual coding (if you are scared by JavaScript). You play by connecting patches with cables instead. It might sound pretty enigmatic, but it’s not rocket science at all. Some basic knowledge of boolean algebra might be useful though.

Native platforms support

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!

Previewing

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.

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.

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 Origami prototype to your mobile phone.

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: Lookback, UserTesting and Validately which makes it much more convenient for user testing purposes.

Support

image_support.png

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.

It is not a surprise that Origami Studio, born in Facebook, creates a real Community 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.

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.

Sharing and Collaboration

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.

Price

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.

Summary

Choosing suitable prototyping tool might be confusing. The most important thing is to ask yourself several questions.

  • What do you need the prototype for?
  • Who will you share the prototype with?
  • Is it going to be used in user testing?
  • How big is the part of the application that you would like to prototype?

The difference between Origami and Proto.io could be compared to the difference between low- and high-level programming languages. 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.

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.

Proto.io is great when I 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 client a lot, especially remotely, sharing tools of Proto.io might save a lot of time for you.

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!

share


PrzemekUX/UI Designer

LEARN MORE

Contact us if you have any questions regarding the article or just want to chat about technology, our services, job offers and more!

POLIDEA NEWSLETTER

Sign in and expect sharp insights, recommendations, ebooks and fascinating project stories delivered to your inbox

The controller of the personal data that you are about to provide in the above form will be Polidea sp. z o.o. with its registered office in Warsaw at ul. Przeskok 2, 00-032 Warsaw, KRS number: 0000330954, tel.: [0048795536436], email: [hello@polidea.com] (“Polidea”). We will process your personal data based on our legitimate interest and/or your consent. Providing your personal data is not obligatory, but necessary for Polidea to respond to you in relation to your question and/or request. If you gave us consent to call you on the telephone, you may revoke the consent at any time by contacting Polidea via telephone or email. You can find detailed information about the processing of your personal data in relation to the above contact form, including your rights relating to the processing, HERE.

Data controller:

The controller of your personal data is Polidea sp. z o.o. with its registered office in Warsaw at ul. Przeskok 2, 00-032 Warsaw, KRS number: 0000330954, tel.: [0048795536436], email: [hello@polidea.com] (“Polidea”)

Purpose and legal bases for processing:

 

Used abbreviations:

GDPR – Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016
on the protection of natural persons with regard to the processing of personal data and on the free movement
of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)

ARES – Polish Act on Rendering Electronic Services dated 18 July 2002

TL – Polish Telecommunications Law dated 16 July 2004

1)        sending to the given email address a newsletter including information on Polidea’s new projects, products, services, organised events and/or general insights from the mobile app business world |art. 6.1 a) GDPR, art. 10.2 ARES and art. 172.1 TL (upon your consent)

Personal data:name, email address

2)       statistical, analytical and reporting purposes |art. 6. 1 f) GDPR (based on legitimate interests pursued by Polidea, consisting in analysing the way our services are used and adjusting them to our clients’ needs, as well as developing new services)

Personal data:name, email address

Withdrawal of consent:

You may withdraw your consent to process your personal data at any time.

Withdrawal of the consent is possible solely in the scope of processing performed based on the consent. Polidea is authorised to process your personal data after you withdraw your consent if it has another legal basis for the processing, for the purposes covered by that legal basis.

Categories of recipients:

Your personal data may be shared with:

1)       authorised employees and/or contractors of Polidea

2)       persons or entities providing particular services to Polidea (accounting, legal, IT, marketing and advertising services) – in the scope required for those persons or entities to provide those services to Polidea

 

Retention period:

1)       For the purpose of sending newsletter to the given email address – for as long as the relevant consent is not withdrawn

2)       For statistical, analytical and reporting purposes – for as long as the relevant consent is not withdrawn

Your rights:

 

Used abbreviation:

GDPR – Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016
on the protection of natural persons with regard to the processing of personal data and on the free movement
of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)

According to GDPR, you have the following rights relating to the processing of your personal data, exercised by contacting Polidea via [e-mail, phone].

1)       to access to your personal data (art. 15 GDPR) by requesting sharing and/or sending a copy of all your personal data processed by Polidea

2)       to request rectification of inaccurate personal data
(art. 16 GDPR) by indicating the data requiring rectification

3)       to request erasure of your persona data (art. 17 GDPR); Polidea has the rights to refuse erasing the personal data in specific circumstances provided by law

4)       to request restriction of processing of your personal data (art. 18 GDPR) by indicating the data which should be restricted

5)       to move your personal data (art. 20 GDPR) by requesting preparation and transfer by Polidea of the personal data that you provided to Polidea to you or another controller in a structured, commonly used machine-readable format

6)       to object to processing your personal data conducted based on art. 6.1 e) or f) GDPR, on grounds relating to your particular situation (art. 21 GDPR)

7)       to lodge a complaint with a supervisory authority,
in particular in the EU member state of your habitual residence, place of work or place of the alleged infringement if you consider that the processing
of personal data relating to you infringes the GDPR
(art. 77.1 GDPR)

No obligation to provide data:

Providing your personal data is not obligatory, but necessary for Polidea to provide you the newsletter service

Refusal to provide the above data will result in inability to receive the newsletter service.

Profiling

In the process of providing the newsletter service, we make decisions in an automated way, including profiling, based on the data you provide.

 

“Profiling” means automated processing of personal data consisting of the use of your personal data to evaluate certain personal aspects relating to you, in particular to analyze or predict aspects concerning your personal preferences and interests.

 

The automated decisions are taken based on the analysis of clicked and viewed content. They affect the targeting of specific newsletter content to selected users registered to receive the newsletter service, based on the anticipated interests of the recipient.