Last year, a huge census on UX design was completed in the CZ. It's called Humans of UX and it got around 500 responses, which is not half that for a country of ten million.
I was really surprised that most designers named pencil and sketch as their favorite tool. As we are approaching the start of 2020s, I feel like there's so much more that we could be using to prototype, test and specify our designs.
With that in mind, I wanted to take a quick look at tools that came out in 2016 and 2017.
Let’s break down some of coolest ones.
Let me rate you
I put together a quick concept for an app in Sketch. It’s just a few interactions, no complex logic or filling out forms. Then I went through most of the design prototyping tools on the web and picked out my favorites. This page is a good, but largely outdated resource https://uxtools.co/
The list is split into two categories: 🍼 Clickers and 💪 Heavy-duty.
I’ll rate by usability, performance, importing capabilities, sharing and more advanced prototyping functionalities. Oh, and price. Let’s do it!
🍼 Clickers —Connecting screens prototyping
These are your basic prototyping tools. They can come in handy if you need a wireframe with a flow or your graphic design already one in Sketch. Or maybe you just need to quickly put together a prototype to test a hypothesis. It’s great for rapid prototyping, people smarter than me call this the “Right-fi” prototype.
Don’t expect to find any reusable symbol libraries, UI widgets or screen logic. Usually also work with just the very basic animations and transitions, nothing custom. I expect them to import from Sketch without a hassle. They usually don’t account for any responsive design versions at all.
Adobe XD ⭐️
⌨ ️OS: Windows, Mac
💵 Pricing: Beta, probably part of the Adobe CC
😍 Pros: Online sharing. Design and prototyping. Free for now. Fast and on both OS.
👎 Cons: Weak-ass prototyping. Couldn’t handle scrolling my group outisde of the artboard. Broke my iconfont. Bad Sketch import. Just pure basic flow. No styleguide, stylesheets or symbols. No integration to Adobe Cloud? Wtf Adobe?
📚 Summary: Adobe XD. Nearly 10 years ago, I remember talking to Tom Krcha, Adobe evangelist, about Adobe Catalyst, a kind of proto-Adobe XD.
Now that tool is finally in beta, most of you have probably tried it (since it’s free). Adobe is trying to market it as an alternative to InVision and Sketch, which is pretty ridiculous.
AXD doesn’t do a whole lot right now. Just a few basic design functions like typography and vectors, connecting screens. No timing, animations, styleguide, symbols or pinned navigation. Layers and artboards are uninspired at best. What seems tragic to me is Adobe not utilizing connecting this software to Adobe Cloud at all. Adobe, you have this great selling point and you don’t use it?
⌨ ️OS: Cloud
💵 Pricing: Free ( 1 prototype), 15$ — 99$ monthly
😍 Pros: Great import. Cool collaborative capability (commenting, inspect for developers, versions). Integration straight into Trello, Slack, Github.
👎 Cons: No design section. Pricing. No desktop app. Basic.
📚 Summary: I may make a lot of people mad, but I never got InVision success. Sure, it can import just fine, but that warrants you already have most of your graphics in high-fidelity. What if I just want to quickly put something together to test it or get feedback on? It doesn’t do any design at all, so I need to go back to Sketch to move my button 10 pixels. I’d rather stick to just about anything else, plus a lot of other tools are also sort of free to use.
Sketch + InVision Craft ⭐️⭐️⭐️
⌨ ️OS: Mac
💵 Pricing: Closed Beta
😍 Pros: Prototyping in Sketch is a dream come true. When it works, it’s amazing. Sketch already has a loads of great plugins, so you need very little to make it a powerful design/prototyping tool.
👎 Cons: So far it’s just a closed beta. A lot of bugs. Not a lot of functionality.
📚 Summary: This controversial tool was created as a Silverflows plugin for Sketch, which InVision immediately acquired. I got into a closed beta and if you want to, you need an invite. It can handle about the same amount of prototyping as InVision or Adobe XD, but doing it straight in Sketch just feels surreal. Time will show if it will become a gamechanger or another seldom used functionality in Craft.
POP (by Marvel) ⭐️⭐️
⌨ ️OS: iOS, Android
💵 Pricing: Same as Marvel, Free for 2 projects, 14$ monthly per user
😍 Pros: Great for turning paper prototypes into interactive mockups FAST. Sharing to Marvel app can be cool for you. Recording users while testing.
👎 Cons: Marvel buying this gem ruined a lot of its simplicity. Marvel pricing.
📚 Summary: POP used to be a great, basically free tool for turning paper prototypes into phone and tablet app mockups using photos and hotspots. Now that Marvel acquired them, it started pushing a lot of its features into POP, along with its pricing. This can be either a curse or a blessing, depending on what you wanted to use POP for. As far as I know, it’s the only good prototyping app for an ipad. (Is Adobe Comp still a thing?)
💪 Heavy-duty— Prototyping complex interactions
Here we move into the real deal. Expensive software for complex prototyping. If you need reusable symbol library, sticky navs, conditions and custom animations, you might wanna check out these robust tools. They usually contain improved productivity tools-versioning, sharing, usability testing. Common drawback is usually their pricing and a steep learning curve.
Axure RP ⭐️⭐️
⌨ ️OS: Windows, Mac
💵 Pricing: 29$ monthly / 495$ perpetual license
😍 Pros: If you want to prototype it, Axure can most likely do it. Styles and symbol libraries. It can somewhat handle responsive design. Good for web. Sharing and collaborating is fine. Big user base means a lot of hints, guides and tutorials.
👎 Cons: Prototypes always come out ugly. Awful usability. Very slow on Mac. Simple interactions take forever to prototype. You’ll get lost in a complex prototype fast. Responsive design and styles can be buggy. No import from design tools. Pricing is steep.
📚 Summary: Axure RP is a tool that corporations love, users hate and designers can’t agree if it’s great or it sticks. I worked in it for about 3 years and made one of the most complex prototypes in it. It’s very old-fashioned now, made to prototype websites desktop first. It’s been a long time since it received a major update. Even after a years of using it, I’d just love to take my laptop and throw it out the window when I find out that changing one style broke 15 pages of my responsive prototype.
Indigo Studio ⭐️⭐️⭐️⭐️
⌨ ️OS: Windows, Mac
💵 Pricing: Free essential, 25$ monthly
😍 Pros: Cool animation panel, screenpart (symbol) libraries, screenflow connecting is intuitive and just works, responsive design, fast prototyping means fast testing, indigodesigned.com allows you to create usability studies to test remotely.
👎 Cons: Silverlight engine is slow. No palette saving or typography details. Complex prototypes get really slow and break. Not a lot of collaborative design.
📚 Summary: Indigo is a not well known software for prototyping and simple design. It focuses on screenflow first, consistency between symbols and styles and validating design. I love the way the way it’s creators think about screenflow and inheritance, it’s very intuitive and surprisingly fast once you create a few prototypes. Animations are a blast and timeline is something that I really missed in other tools. Only Principle and Indigo do this really well. Kuddos on the free version guys. Please, for the love of God, ditch the Silverlight, make it Mac native and focus on bugs and usability just a little bit. You already got everything else. Be sure to give this one a try guys.
⌨ ️OS: Cloud
💵 Pricing: Free for 2 projects, 14$ monthly per user
😍 Pros: Design features. A lot of great common UI widgets. Importing from Sketch. Good enough for wireframing and high fidelity design alike. Free license.
👎 Cons: No desktop app. Just a basic prototyping here. No repeaters, conditions, symbols.
📚 Shrnutí: Marvel is halfway there between Invision and Principle/Indigo Studio. On one hand they made some amazing improvements to their Design section, so you can really build your wireframes even without a design ready. As mentioned, Marvel is now using POP as its mobile prototyping app, which helps a lot. I think a lot of people can benefit from using it, if you just want to link a few screens, maybe make some changes later and you won’t miss the desktop app like me.
⌨ ️OS: Mac
💵 Pricing: 129$ for a license
😍 Pros: Finally a modern tool for smart prototyping. Cool animation pane. Sketch import. Price is right.
👎 Cons: It’s pretty new, so it doesn’t do a lot and has some bugs in it. I miss a central screen flow overview, like Indigo has.
📚 Summary: Principle is a pretty new tool, mainly for app prototyping, based on fast linking, animations and a solid import from Sketch. You can also do some design in it, work with typography and import SVGs. I really love how straight-forward it is. After the import, Principle works who which layers have the same name and creates an animation between two artboards. Great trick! After a few hours of prototyping in Principle, you'll never go back to writing out conditions in Axure or linking hotspots in Invision. Principle is at its best when you use it to quickly bash out a prototype to test your assumptions about the user flow, microcopy or how you approach a problem. It's really sweet you can also record your prototype flow right in the tool, to send out to devs, clients or showcase it online.
10/10, Would bang again.
⌨ ️OS: Mac
💵 Pricing: It's free!
😍 Pros: Patches allow a precise control over all the different states and actions. Visual programming can help some people to get into coding more. Lightweight, imports just fine.
👎 Cons: Tedious. Unnecessary for most simple prototypes. Sometimes you can lose track of all the actions.
📚 Summary: I'm a bit puzzled by Origami. On one hand, it's awesome that a big corporation like Facebook creates a free tool for designers and spends resources on creating community around it. On the other hand, you'll probably be pretty confused by everything going on here, if you're used to traditional editing as in Axure or Marvel. Patches grid that Origami uses comes from visual programming, so you'll basically be creating code on your desktop. By creating patches with strings, you create simple conditions and rules. In the end, most of the prototypes I've seen are really complex and hard to wrap your head around. If I were you, I would absolutely give Origami a try though, it just might be your new favorite tool one day.
Framer Studio ⭐️⭐️⭐️⭐️
⌨ ️OS: Mac
💵 Pricing: 15$ monthly
😍 Pros: You can do pretty much anything in this one. You can use it prototype animations and interactions that can be used in final software. Excellent community around the tool.
👎 Cons: Pricing seems steep for something you can do for free without the aids (http://prototyp.in/) Don't buy in to the myth of code, that will developers just magically reuse after you're done. Most of the front end you come up with will have to be rewritten in your stack anyway.
Left on a cutting floor
Naturally, I couldn’t go over every single tool that exists. There’s just too many of them. My favorite combo is Indigo Studio for fast prototyping and validation, Sketch with Principle for a task flow and more high-fidelity interactions. It’s a lightweight and fast workflow that makes my life very easy.
A lot of people recommended I take a look at Figma, which is a cloud design editor with strong collaborative functionalities. UX Pin is a popular clicker with some design features. Balsamiq is a pretty cool alternative for a fast wireframing and validating ideas, but its usability is pretty low. Justinmind is the one that I tested but just couldn’t get into. It seems really outdated and has awful performance issues. iRise is a sort of Microsoft Excel of prototyping, focused on enterprise features. It really sucks and is not worth your time.
I’d love to know what’s your favorite tool. Are you sticking with Axure, downloading Indigo Studio or gonna give Origami a shot?