Recently, I started looking for a good tool for prototyping and animating my ideas. As a result, market research has turned into a revision of the specializations of the tools of its arsenal and the polishing process of designing a new product.
To understand which tool I need, I summarized my current workflow. Designing a new product goes through the following phases:
- Modeling
creating a static product model: scrolling in my head, developing on paper, reflecting on static layouts; - Simple prototyping
simple paginated prototype, tests and correction; - Complicated prototyping
complex multi-layer prototype, tests and correction; - Unloading
preparation and packaging of project documentation, commissioning.
In the paradigm of such a process, my toolkit has acquired the following classification:
- Architect
Creation of the functional aspect (information architecture, structure, scenarios, mechanisms, etc.). - Visualizer
Creating a figurative aspect (identity, illustrations, semantics, etc.). - Tester
Check on users and collect feedback. - Rake
Creating a simple, often page-by-page, prototype in which the product foundation is scrolled in order to eliminate false and erroneous moves at the beginning of the path. - Emulator
Creating a complex prototype, as close as possible to the native environment. - Animator
This type of tool is often rarely related to the production process, so that the client does not resent unrealized early beauty shown and the developer does not faint from future torment. But to create concepts, interactive inventions and other experiments and fantasies - the very thing. - Documentary
Maintenance and execution of project documentation, creating a package for developers.
Everyone can create his own type of tool that solves certain tasks for the sake of his process. For example, someone can use separate tools for creating inspirational boards (moodboard). But I use them very rarely (and, perhaps, in vain), so I did not include them in the main list of tools.
')
So, based on the above classification, I needed a rake, an emulator and an animator. It does not matter whether this is one application from one company or three different ones, if only the tasks set are carried out easily, conveniently and efficiently.
Having defined the categories of the necessary tools, I clarified the point criteria and wishes:
- quick, obvious, intuitive familiarity with the product: there is neither the time nor the desire for a long training tool;
- easy and touch-free import and synchronization of layouts from Ps or Sketch;
- A prototype can be created for any platform;
- the animator must create complex animations as simple as possible;
- in order not to fence fantasies on complex prototyping, the emulator should produce the most native behavior as possible so that there are as few deviations as possible between the real product and its complex prototype;
- gif or output video;
- With a clickable prototype, I can share with colleagues and users, embed in a presentation, feel on different devices;
- reasonable price tag.
A sample of potential tools to the beginning of tests formed the following:
Once again, I’ll clarify that there is no unnecessary discussion: the sample includes tools that can potentially take on the range of required tasks (simple and complex prototyping, animation), and do not get tools that are architects and other specializations (Axure, UXPin, Balsamiq, WebFlow, Justinmind, Indigo Studio and others).
And once again I remind you that familiarity with the tools depends heavily on personal vision and understanding of the workflow and other professional preferences, so make sure you try the product yourself before your own verdict!
Now I had to take on a test drive each of the tools and lay down a generalized impression, holding a checklist of the features of my workflow and personal wishes. So let's go!
*** Pulse of the Fair of April 22, 2016 ***Adobe After Effects . The tool, which is certainly powerful, but was not created for interface animation, therefore, having made banal things in it devious ways for itself, I decided to put it aside. In the future I want to get to know more for other needs, but for now I will pass by to other times.
Adobe Expirience Design . It looks very nice, good for a quick prototype, which you can share a link or video file, poyuzat on the device. It is a pity that I can not see the feedback from the prototype. But this is only a preview, so anything is possible in the future. The Design tab is superfluous for me: I don’t have any idea how I’ll design it there, but it’s quite possible a matter of habit. Fortunately, time to play enough with the program and understand whether it needs a shaft (the program plans to become paid at the end of the year). Not good, so far only on the Mac platform.
Pixate . The prototypes made in this tool look very dignified, but I didn’t immediately have an interaction. It was great to click on the simplest mechanisms on my device, without wires, but this is still an emulator, so the output requires a more complex prototype. Due to the fact that it is free, I will try to learn at my leisure, maybe we can be friends.
Principle . The presentation minute video is exemplary: the potential of the product was quickly and without water, so I tried it among the first. The process started immediately, almost everything is very clear to me. Having rummaged a bit in tutorials, I tried out even more power of the tool. For some reason, I expected him to play the role of an emulator, but still it’s an animator: I still don’t understand how to do a full-fledged walk through the application's prototype how to do it without hassle, but to fantasize about some particular aspect mechanics is great for this purpose. It will be great if in the future, it will be improved precisely along this track of the animator, becoming a full-fledged, lightweight and sharpened variation of After Effects.
Flinto for Mac . In the queue for the sample was near the end. The more pleasant was the surprise of working with him: the acquaintance was formed simply with a bang, the functional flew very quickly, after running short official tutorials and testing on one’s own hands left an even greater impression. Fatty pluses for the transformation designer and for the possibility of adding several gestures to one object: in the current project I needed this. If I saw Principle as an emulator, then for some reason, Flinto seemed to me an animator. It turned out exactly the opposite: to create a complex prototype with non-standard animations in Flinto, I got it easier and faster than all the other products. At leisure I will definitely test another tool of this company - Flinto Lite.
Marvel . Probably surprised most, because he was going to try for a tick and did not expect anything special. The first acquaintance went completely unnoticed: after a few minutes, I was already browsing my simple prototype on a mobile, I could discuss with my colleagues or, through Lookback, test on users, send a link by mail or text message, insert a clickable prototype into the Behance presentation. Together with a clean and tidy shell, I left very pleasant impressions, making a weighty application for a full-fledged tool for the second stage of my process (simple prototyping). Decisive in this were precisely the share & feedback-capabilities. It is possible to create simple layouts, but for me this functionality is superfluous, as in Adobe XD.
InVision . Powerful tool with great prospects. Increased my weight with the purchase of Silver Flows, which I really, really wanted to try. And it’s not quite clear when I can do this: some goodies, like Inspect and Motion announced in September-August of last year, are still in a closed beta and when they come out - I still do not understand. Of the minuses, I note a slightly overloaded view: after Marvel looks heavy and dense, but these are personal impressions again. Therefore, for me, InVision remains a dark horse, which I will definitely watch out for: it has all the prerequisites to become a good integrated tool in my arsenal.
Proto.io . The prototypes made in it are impressive, but after a couple of visits the acquaintance did not work out. Most likely, I was prevented from loading the tool with the functions of an architect, which I did not need, and I simply didn’t have time to learn how to make a complex prototype because of the 15-day trial period, and I’ll pay 24 dollars a month for 5 projects. The most expensive offer in my sample. It is a pity, since it claimed to be an emulator and animator.
Atomic.io . The prototypes are impressive again, but this is more of an animator, although the makings of an emulator were noticed. The process was not entirely successful, but the trial period is monthly, so there is still an opportunity to study it in more detail, since there are official sources. Logically resembles Pixate.
Framer Studio . Announced features and prototypes leave a very pleasant impression. There are really a lot of opportunities, but it requires more detailed study. It will take more time to create a complex prototype, but the output will be a sample really close to the combat conditions. Released April 12, the new version leaves even more hope for a faster process of work and dating.
Origami Studio . I want to play with visual programming with impatience: the logic and process of work look very friendly and familiar to me. It remains only to wait for the new version, which was announced in early April. There is an alternative Form, but according to weight recommendations, Origami has more weight, so I am thinking of starting with it.
***Having walked around the fair, I made for myself the current intermediate results:
- Marvel practically closes the tasks of my second stage (rapid prototyping), so I first take him to my service as a rake and one of the testers, especially since at the stage of more detailed practical acquaintance, it will not be necessary to bluff it yet. Nearby there will be alternatives in the face of InVision and Flinto Lite;
- Flinto will test for the first time with an emulator, but in my developmental program I put the priority process of studying complex prototyping (Framer and Origami). In this topic, Anton Kartashov ignites well, with his materials and I will begin, like the RPC groups . Perhaps in the future I will try a bunch of Flinto, if you need to jot down a quick prototype more complicated, and Framer (Origami), when you need a more real emulation.
- Principle will take for a trial period as an animator, I don't need a After Effect turbodiesel right now.
- The rest of the tools, especially InVision, will be on the pulse to adjust your arsenal if necessary.
The nuances that I found during the search:
- Trial model prevented further acquaintance. It would be another matter if they counted the days of actual use as Principle. But in the course of a short-term acquaintance, when it didn’t happen to catch the product from the first or second time, I want to twist the tool from the other side and give it another chance. But in the end, due to various reasons, including simple employment, I could not meet the two-week period and our acquaintance did not take place. Therefore, the model of perpetual and not too heavily used free-of-charge use leaves a more pleasant impression of the product and the possibility of using it with further acquaintance on a paid basis with large capacities. In general, free-to-pay looks like a more attractive form of monetization in this market too.
- A tool with a highly sharpened, narrowly specialized functionality often leaves more pleasant impressions than the “combine” that solves these tasks along with others: it can not only do its job better than the “combine”, but it is just in the head on that shelf, on where you solve your problems, and not to occupy several shelves in a row, tangling with other tools. If you need a documentator - you can get Zeplin , if you need a tester - you can get Lookback and so on.
The battle in the market of prototypists is in full swing, so I will keep this topic on the pulse: in case of updating, the title will change the date (upd@day.month), in the comments I will indicate what exactly has been updated.
In the process of this research, the concept of my instrument was born, which I quickly shared in
this article .
I am pleased to get acquainted with your set of tools or your own classification. Or you can pick up and come up with alternative species names in the above (rake - hairstyle, proses; tester - distribution agent, huckster; emulator - pandora, copper pipes).
upd@29.04. Additional samples and new toolsAdditional samplesAtomic . Very decent product, be sure to try it. I saw in him something between Marvel, Principle and Flinto. And in this, depending on your work process, it is good or, as in my case, not quite. For my process, it is not sufficiently primitive (in a good sense of the word) and the difference in feedback possibilities for a “rake” like Marvel is not quite convenient as an “animator” like Principle and it does not reach the emulator. So for now, left with pleasant impressions about this product, I put it aside.
Flinto Lite . Clean and good rakes with an interesting work mechanism. True, I did not immediately catch up with the fact that the posting that connects the highlighted clickable zone to the target page and which immediately disappears, actually connects :) For this, you had to see the small “Target: landing page” in the left sidebar. In general, the tool is interesting, but if you run into a direct competitor to Marvel, then the second one has richer feedback and more pleasant price quotes.
Pixate . After a closer acquaintance, the work in the instrument became clearer, but I cannot say for the time being that it is suitable for me. However, do not forget: the program is free, so nothing prevents to put it in the store and periodically get it. Together with Flinto, they live at about the same level, so for PC-Schnick - this is a good alternative.
Framer . Once, more than ten years ago, I read in a magazine about a certain language, CoffeeScript. Having played a little with him, I decided to postpone it to other times. After exploring the Framer, this time seems to have come. It delivers a lot of control over the canvas and its objects, which I saw after a more detailed acquaintance with this wonderful tool and which essentially corrects the placement of tools in my field. Claims immediately to the role and animator, and the emulator.
InVision . It turns out, in addition to Silver Flows, they also bought
Macaw ,
Easee and
Relay . I'm afraid to imagine what kind of ship it will end up with, so I look forward to hearing from this farm with great interest.
New tools that you found for yourselfFloid . An interesting free tool for prototyping and uploading to HTML for the Mac platform. Many possibilities, but still damp, there are some trivial flaws. I tried it last week, now the site is unavailable. I don’t know what happened yet, but for every fireman I leave it here.
Koncept . Web platform for prototyping and UX analysis. The project is in closed beta. There are no graduations of the tariff plan: for one person, prototyping will cost $ 30 per month, and for an analyst that interests me more, they ask for $ 100 per month, and you cannot take only one analyst and you have to pay $ 130 per month. I do not know why they chose such a financial model: the prototype made by this tool is one on the site and there is nothing special about it, and I can’t even imagine what the analytics will have with such a price tag. After registration, I was given the 1154th number in the queue, so for now I just have to wait a bit.
Creo . The prototype created in this tool is magically transformed into a native application. First impressions of this product are similar to the nod a la Ace Ventura, who makes a man at the end of the demo video. Indeed, it is very interesting that in the end it will turn out on the official release, now the product is in open beta test.
Noodl . Noodl mentioned in comments with my review is really interesting, but it requires a separate acquaintance, which I delegated to the stage of acquaintance with visual programming.
The Protein . A very interesting Russian service that allows designers, developers and testers to work together on the design of interfaces. More detailed
story on the CPU .
upd@21.06. ConclusionHaving studied the market a lot, I decided to put an end to it and make this article the experience of entering prototyping. I learned everything I needed, made for myself the final conclusions on all the products that I wanted to touch and which had already come out. Here are the impressions and findings that have accumulated on my road.
Fuse . Plague constructor, similar to Creolabs and allows you to unload the real application for Android and iOS. Based on UX Markup - a kind of XML that is easy to learn, especially since there are a
lot of source code examples and
an active community . Free, is in open beta.
Pop Create a simple prototype from your own freehand sketches. Very simple and convenient. For two prototypes per person, you can use it for free.
CanvasFlip . Another great “rake” with the convenient creation of a simple prototype that can be sent to users for the test in many ways. The analytics is excellent: you can watch the conversion funnel, interactive heatmap, video recording of the session. It leaves a very pleasant experience, in addition, there is a simple board for project management. At a free rate of 5 prototypes.
Koncept . Almost complete analogue of Marvel with a small portion of analytics that did not impress me. And if the analogue can be used for free, the Concept still requires $ 130 per month.
Noodl . The new version 1.0 has gained not only fresh functionality, but also a specific specialization - the Internet of things. The developers, Topp Studio, provided the release with
excellent examples and lessons when launching a program that works, let me remind you, as an extension to Chrome.
Craft Prototype . The released beta version of the long-awaited tool, previously known as SilverFlows, was accompanied by optimistic promotional articles and not very encouraging
reviews from those who managed to use it .
Qwikly . Another tool that allows you to generate not just a prototype, but a real application. In development, release in the second half of 2016.
uilang . Very simple framework for designers, including for prototyping. The author also
positions it as a great start for a designer to begin to understand and master JS. Remarkable by the
transpiler (translator): enter a simple sentence like
clicking on "#switch" toggles class "active" on "#switch"
- and get some kind of js-code.
Blocs . For those who are lazy to write code - you can use the wonderful visual editor, which will turn the layout into pleasure.
Tumult hype . More advanced layouts (animation, physics, etc.) can be explored in this tool.
Scratch . Why not use the playground to study programming? :) The very basics never hurt anyone.
QtQuick . And after that, when the basics will be successfully captured and developed to a sensible level - you can try to write your first cross-platform application using this library. You can see this in the
introductory video .
Let me remind you that the group of
Russian Prototyping Club keeps a hand on the pulse of the prototyping market. I will continue my further study of prototyping in my
blog on Medium . Successes to all!