All your questions about prototyping, answered
Why you should prototype, what tools you can use and so on
Experience is a good thing today, in the design industry we all have to work on computer in order to be productive: no one can build a satellite with a pencil or code an application with a stone. But, we are not always using our computer in a way that allows us to be the most time efficient. So many designers know the strive of the deadline and the waste of time in huge and messy Illustrator file, or struggling with After Effects in order to show to the front end developer what he wants as the finished animation for the latest version of a new app. Besides all this waste of time, the need for feedback is also becoming greater everyday, refining the user experience has become a major factor. Usually it takes a lot of time to code a decent prototype, not everybody can afford to spend weeks on it. Especially when you know that you will have to do it again shortly after the first feedback. The quick prototyping tools that are making so much noise today are born from this needs of efficiency, particularly for startups, but that doesn’t mean that they have the monopoly of them.
Anyway, today let’s look at the different existing prototyping tools, what they do and why you should use them.
“You cannot create experience. You must undergo it.”
Why?
First of all, the question: why should you try and adopt those new tools? Well, right now when we are designing an app or a website, we use heavy big badass software such as Photoshop, Illustrator (even paint for the craziest among us). But it is not the best solution anymore. It was a good answer when we were designing static stuff, only looking at the aesthetic style. It was like an artist and his canvas, putting drops of pixel like paint with precision and accuracy in order to freeze a mental image on the art board. The present web and application world is not that any more, designers have to change as well. We now have to think about wireframing, function, animation, gestures… All those new aspects have to meet the feedback of real people before being put in motion in the real world. Today a design masterpiece is not made in a single go, it requires feedbacks, trials, failures, iterations to finally achieve something not too bad. That’s why spending two weeks on a single Photoshop file is not relevant anymore. From the sheet of paper with a few messy strokes to the beta prototype, each step needs to face the judgement of the user. We can’t go from scratch to end in one go without meeting the reality.
Who?
Most of the tools we are going to talk about are very young and made for startup. They are meant to be learnt very easily and quickly, the main goal being to be used as fast as possible with the minimum learning curve. You don’t need to spend two weeks in a darkroom trying to understand the weird logic of the engineer who creates the software, you just need a coffee and a bit of spare time. Technically, everyone can learn and use them, but they were built to help designers to go faster.
The tools
The tools Here we are, no more chitchat of mine, let’s hit it!
The softwares will be divide in three different groups, the first one displays the one made for wire framing in order to create early prototypes, it will help you check if your app flow is good and consistent. The second group is for the software that will help you create specific features, allowing you to simulate accurately a detail on one of your screen and show exactly what you expect from the coder. The last group is for the all-in-one app, they can make the most advanced global prototype, a bit more time consuming, but you will be able to simulate a wider range of interaction and the aspect of a fine prototype without any line of code.
Each of them will get three different marks :
- Learning : I evaluate, as a designer, how hard it was for me to get into the software, the higher the grade, the easiest it was for me, and if the grade is low, it mean that I struggled with it.
- Efficiency : with this one I try to judge if I could go fast enough to the result I wanted and if the time spent on it was worth it. The higher the grade, the better it is.
- Personal feeling : Finally, I give you my very personal feeling I got as a global experience with each of them.
The two first challenger : Marvel app and InVision, as a starter let me just say that they are both VERY good. Marvel app and InVision are providing a very simple and easy tool to test your user journey, see if the buttons are at the right place, or if the layout of the elements is in the best order. They both have an app that you can download on your phone, it will allow you to test your work on it, you won’t be limited by just watching your work on just your computer. You will get a better “feel” of what you have done. Both of them are web app only.
Marvel app is probably the best if you are working alone, because it has much more interactivity possibility and more advanced tool, but on the other hand, it is not made for sharing and feedback from other team member.
Learning : 8/10
Efficiency : 8/10
Personal Feeling : 9/10
InVision on the other side is the top notch if you are working with a team, allowing you to work on a single file all together. If you have to collaborate with different people at the same time, and they are not in the very same room as you, this is definitely the most suited for you.
Learning : 9/10
Efficiency : 9/10
Personal Feeling : 8/10
Here we go for the second round!
This selection is made of software that is really good at showing very specific features. What I mean is, when you are thinking of some very cool stuff that you want to explain to your coworker and your words are just not enough, doing it in After Effect might sounds like getting a tank in order to kill a fly… But now you have the tool for this kind of moment! You will be able to show to everyone (fairly quickly once you get use to it) the cool ideas that are swarming into your mind, will it be a cool transition or the behavior of a specific button. All the software of this section is a selection of desktop applications.
The first one is Origami, it was developed by Facebook but it kind of feels like they stopped updating it. Anyway, it was one of the first of its kind, so it’s worth mentioning. It has a kind of messy look when you open it and you might feel disoriented at first. It’s probably the one that made me struggle the most to get it. It works with some “bricks” that you connect to each other in order to get the different element and animation you are wishing to get. It has a lot of possibility if you are willing to give it some time. This software is only available on Mac.
Pricing : Free
Learning : 1/10
Efficiency : 4/10
Personal Feeling : 3/10
Let’s talk about Edge Animate, it’s part of Adobe creative cloud suite and it’s awesome. This software is really cool because it’s the first one I encountered that managed to mix a timeline workspace, like After Effects and some very easy coding. The result is brilliant and very easy to understand, those of you who are used to playing with Adobe software, you will feel just like home. Since you are using code and timeline at the same time the result is very precise, there is also a lot of versatile ways to use it, some of you might want to focus more of your efforts on the coding and some just play with the timeline with some easy “start” and “stop” actions. It also works very well with Adobe Muse, which is another element of the Creative Cloud Suite that allows you to create website without coding. Anyway, I really recommend you to try it, it might be something that will change your way of working for the best.
Pricing : well… part of the creative cloud.
Learning : 5/10
Efficiency : 6/10
Personal Feeling : 9/10
Here comes Framer studio , this one is interesting because it is very different from the others. First of all, it uses code. Yes, no more playing around, this one without making your brain melts, needs some coding knowledge. So, don’t expect to do everything by drawing square and circle, you just won’t get away with it. It has some nice export functions from sketch and Photoshop. Framer studio is available only on Mac I think, but it has been built on a resource that you can found on GitHub and use it on a Windows computer, but it requires some more work.
Pricing : It will cost you 99$ to get it, but like the others there is a free trial.
Learning : 4/10
Efficiency : 6/10
Personal Feeling : 5/10
And finally the very young and promising Pixate, ihat was recently bought by Google, so it gives you the potential of this thing. This one is very thoughtful and fellow designer will love it. No coding just logic and graphical element to give you a very smooth result in a very short amount of time. They really focus on bringing to life the features that are stuck into your mind. They also have some great simulator in the soft itself and you can also download their app on your phone so you can see your work coming to life in front of your eyes. It runs on both Mac and Windows.
Pricing : It’s free!
Learning : 8/10
Efficiency : 7/10
Personal Feeling : 8/10
And the last section, a lot of tears and blood were shed in this glorious day but… okay I will calm down! So in this section let me introduce you some prototyping tool, which are really made for a more global approach. What I mean is, you will be able to simulate almost all of your apps or any screenish thing you want. Well of course that means that if you want to make everything looks “real” you will have to spend some time on it, but it will still remain infinity faster than using coding.
Let’s begin with the mysterious Project Comet that Adobe will release early 2016. From what I saw from their teaser it will probably belong in this category of prototyping software, I know it’s a bit early to say what it will be like but… I have great hope.
The software Atomic is a all in one web app, you can build everything from scratch by using their websites or you can import your assets in them and create the different animation and transition directly in the website. It allows different kind of interaction and they have a nice, but basic use of the timeline for your transition. Also they offer a great possibility to send the prototype via a link, the people who received it can directly send you feedback through it, really useful.
Pricing : from 15$/month to 35$/month
Learning : 7/10
Efficiency : 6/10
Personal Feeling : 7/10
Proto.io is similar to Atomic, or maybe I should say that Atomic really looks like proto.io, they do kind of the same thing. This one is also a web app, it’s been around longer than Atomic and it has even more possibilities, so you can go really far in the details. Their library contains a vast amount of graphical assets, you can just click and drag them on your page and work with them if you want it. But I just didn’t get a really good feeling with the workflow and i was kind of slow with it… anyway a safe choice with this one.
Pricing : 24$/month to 160$/month for greater number of prototype
Learning : 6/10
Efficiency : 5/10
Personal Feeling : 8/10
And here is Principle, this one is a desktop app and while i was using it i had a really nice feeling with it. It’s easy to understand it, you can do almost everything you want in a few clicks, there is just the system of group to understand in order to transform any element into draggable object. They have a system with two different timelines, one is for the transitions from one screen to another, and the second one is for the continuous animation inside a screen, like when you are scrolling an object and its environment reacts to it. The only kind of bad point for this one is that your workplace will be crowded in the blink of an eye. Every time you make a new animation, even it’s just changing a color of a button, it creates a new art board. In the end you will have a huge amount of them all over the place, so try to keep it tidy or you will be lost in your own work. It’s important to take note that it’s only available on Mac.
Pricing : 99$
Learning : 8/10
Efficiency : 8/10
Personal Feeling : 8.5/10
Now let’s go with Flinto, this is kind of my favorite one, so be nice with it. Flinto possesses both a web app and a desktop app, i only tried the desktop one and i have to tell you, it’s the smartest one i have seen so far. Let me explain why. They found a very clever and graphical way to create transition between the different screens. They don’t even use a timeline, you say you want an interaction between one screen to another and then you enter your animation. Once in it, there is a beginning state and an end state, all you have to do is make the change you wish to see happens between each other and say how long it has to takes… simple, ludic, I found it truly awesome and different from the others. Just like Principle it’s only working on mac.
Pricing : 99$ but i may recall a student version wish is half price.
Learning : 7/10
Efficiency : 8/10
Personal Feeling : 9/10
Adobe Muse is very different from the others who were very smartphone app focus, this one was entirely made to create website. So it doesn’t offer the same option at all, but i found it very cool as well. If you need to work on some website you might want to take a look at it. Also I came in contact with Adobe Muse because it operates well with Edge Animate, and with both of them working together you can create some pretty badass website within hours. It is still lacking a lot of tools, such as responsive design possibility, but they have a new version coming up very soon. Like the others creative cloud applications, it is a desktop one. (i know there is also a lot of different other apps and software that can prototype and even create website without coding, but this is not the objective of this post)
Pricing : It’s in the package of the creative cloud from Adobe.
Learning : 5/10
Efficiency : 6/10
Personal Feeling : 8/10
“Fake it till you make it”
To end it
Well, that’s all for now, i know i didn’t talk about ALL the prototyping solution, but i only wanted to show you the one i tried. I will get my hand on some others as soon as possible, and probably complete this article. I’m talking about Justinmind, Fluid, Floid.io, Axure, UxPin, Solidify, Motion (the soon to be released app from InVision)…
Also, I’m just expressing my personal feeling through my eyes of designer, you may and you should have your own opinion and i would be glad to hear it in the comments section. Don’t forget that there is no best tool, just use the one that is more suited for you.
Don’t forget to like or share if you enjoy or learned some stuff, and if you liked the illustration, you can find some more on my dribbble here.
