The road to choosing the best prototyping tool

Something really interesting happened in the design world in the last few years. There was this burst of prototyping tools, pretty similar, to be honest, with only a few ones to stand in front. I’m sure that there was this need to create a way in which designers would be able to express their ideas better and faster to the client as well as to the developers, without having to implement, review and re-implement. An idea that would take days to implement can be tested in a few hours with a prototyping tool. I would have loved to see, though, different approaches and maybe more features with some of them.

I started rummaging the internet for opinions and reviews, hoping that I needn’t try all of them, but all I could find were general reviews and general comparisons. I was pretty amazed that people would say only ‘use what’s more convenient for you’. Then I found a topic on Designer News on Flinto, and then a huge list of evil-minded comments. People were just blathering around instead of sharing constructive feedback.

So I found a pretty complete list of prototyping tools and started trying some of them. I made a final list and broke down in a few categories my favourite ones:

Node-based: Origami , Avocado

WYSIWYG: Atomic , Principle , Flinto

Code based: Framer

Hotspot based: InVision , Marvel , POP

These aren’t all the tools that I tried, but they are the most relevant. I found that for wireframing and checking out quickly if the app flow makes sense InVision seems the most simple, usable and useful. You can stock and share the screens and prototypes with your colleagues or clients, giving them the possibility to leave comments. You can use Dropbox, Google Drive or Box to keep the files synced, which is really cool. You can also create boards, for moodboard or style guides, for example.

Let's merge our forces!

I also liked that, unlike on Flinto, Principle has a couple of basic but really useful tools that come in handy when you don’t want to export a gazillion of png’s with different text, or different backgrounds. You have a shape tool and a text tool, you can set rounded corners to a shape, clip a photo in it, set a text size, and so on. Flinto felt a bit unwieldy for this matter.

Let's not forget to thank the guys for contributing to our evolution!

I also liked how easy you can create animations with a really natural feel, and I love the algorithms based on friction and elasticity, as it feels more close to reality.

I also learned that Origami is to be used only when you have settled down on an idea, you have an as-much-as-possible final flow and design and you want to help your fellow developers with implementing the animations. Origami exports code for Android, iOS and web, and talking to a few developers they said that the code is indeed helpful for translating the created visuals into realistic code. The downside is that it can get pretty nasty to work with, it has a harsh learning curve and I would personally use it only when I know exactly what I want to do, as I wouldn’t want to spend too much time blundering, the only result being frustration for wasting too much time for a small animation.

I’m still waiting for a more complete product, as now I have to jump from one to another to be able to continue my design flow. I’d actually love to see a merge of powers for a faster growth and much better products.