Choosing a Prototyping Tool for Designers
It seems like the design industry gets a new prototyping tool every month, but there are some obvious front-runners that get the most attention. Does that mean those tools are better than the rest? Does the tool you use actually matter? Note: this article is quite old; newer options are available. We’ll write an update in the future. In the meantime, check out this site for useful information on prototyping tools. There are many factors that play into the selection of a prototyping tool, one of the most important is popularity. To remain competitive in the design world, you should stay familiar with the bigger players: Adobe Xd, Sketch, etc. That said, let’s dive into the factors we considered for our team.
- OS compatibility
- Price
- Ease of use
- Interactive / live prototyping with app support
- Responsive prototyping
- Wireframing and high-fidelity options
- UI Kits, pattern libraries, and design resources
- Stakeholder sharing features
- Designer collaboration
- Version control
- Developer Exports
OS Compatibility
Obviously, the first factor to consider when choosing a prototyping tool for designers is the OS compatibility. It’s not likely that your team is going to buy new devices to use a design tool. If you’re in an all-Mac environment, you can use anything you want. If you’re in a mixed environment, or all-PC, you have fewer options. Many of the tools that push the boundaries of prototyping are Mac-only. Since our team is all-PC (sad, I know), we had to stick with prototyping options that were cross-platform. While it certainly limits our choices, it doesn’t mean we’re any less capable of doing our jobs. I also need to mention web-based prototyping tools: I wouldn’t use them at this point. If you’re reading this article, you probably need more robust solutions than what a web-based tool can provide.
Pricing
Does pricing need an entire paragraph? Probably not, so here’s a quick guide. Pricing varies widely; most of these apps require a subscription. Expect to pay a minimum of $20 per month, per user. The obvious winner here is Adobe Xd as it includes the entire suite of applications with your subscription.
Design Efficiency
Design efficiency is relatively subjective. A clean UI and readily available interactions help make you more efficient, but taking time to learn a tool will always make you more productive. I recommend watching some videos of designers using the application before deciding your favorite UI. Even with that extra research time, you may find encounter roadblocks. Talk to the support team for the app to see if they can resolve the problems. Most of the support teams for these tools are extremely responsive because they want your business. Competition drives these tools forward.
Mobile Apps
Not many tools include an app that you can use for your prototypes. Many of them end up being web-only if they have a live prototyping feature. We ended up choosing a tool called Justinmind for this feature since it included an app that syncs your prototypes from your account. When you open the app, all the prototypes become available to test on that device. It’s great if you’re prototyping apps or testing your mobile layouts on iOS and Android. Since we originally looked at tools, several other apps have added this functionality. If it’s important to you, check around.
Responsive Prototyping
Responsive prototyping is a difficult concept for design tools. Very few have implemented it, and even fewer have been able to do it well. We ultimately chose to remove this factor from our comparison because of its limited availability in early 2017. We’d certainly like to consider this in the future, but at this point it’s not ready. Since our company uses Bootstrap 3 for responsive layouts, we decided to build separate templates for the corresponding breakpoints. We could do this with any software, but we like the templating/screen system that Justinmind used at the time.
Wireframing and High-Fidelity Prototypes
Depending on your design workflow and the overall user experience integration at your company, you may need a tool that handles both wireframing and high-fidelity prototypes. At our company, we have tons of meetings discussing layout and content architecture. In our process, we don’t need software for wireframing as we usually do those on a whiteboard during a meeting. We determine our basic layout and move to a high-fidelity solution so it’s easier for our stakeholders to understand the visual concepts.
UI Kits, Pattern Libraries, and Design Resources
Most of the major players distribute design resources like iOS UI assets, Material Design icons, etc. If you’re designing for a specific platform, you should investigate what UI kits are available to you for that software. If there are first-party kits, they’ll likely be maintained for future releases. Relying on third-party assets can be hit-and-miss, but some designers are more current than the bigger companies… so your mileage may vary. Asset management is also important. Many tools allow you to add assets to a library for use in other prototypes. Instead of copying/pasting assets between projects, you can just insert them directly from your library saving a significant amount of time for each project. Some tools can even integrate with an external pattern library — I haven’t used this yet, but knowing the advantage of pattern libraries in development, I imagine it would be awesome from a design perspective.
Prototype Collaboration
Let’s talk about collaboration. Unless you’re a solo shop, it matters. Actually, it still matters if you are a solo shop. As designers, we need to share our designs with other designers and stakeholders to gather feedback and improve our designs. The coolest aspect of collaboration is real-time sharing: you can have multiple designers working on the same prototype at once. This allows for a real-time collaborative process that’s new to the modern design world. Several apps have this option, but it’s not common. Another aspect of collaboration – stakeholder feedback – was a huge factor for our team. We wanted a commenting system that would allow our stakeholders to ask questions about specific design elements. At the time, Justinmind was the only tool that included commenting features without additional software or paid subscriptions. Lastly, do you need version control? Well, that depends mostly on your design process. If you have only one designer working on a prototype at a time, version control isn’t necessary and would be a glorified version of the undo button. If you will have multiple designers in a single prototype, it’s worth looking into a version control system. For our team, we decided against it because it was in its infancy in early 2017. Most of the major tools have some sort of version control system available.
Developer Exports
So many tools offer some sort of export feature that you should be able to give to a developer so they can start coding. At least that’s how it’s supposed to work… but it never does. Some tools simply give you the specifications for each element (this is cool), while others generate HTML, CSS, and JavaScript automagically for you. Auto-generated code is never as good as code purposefully-written by a human and audited by another human. Simply put: unless you’re using an integrated pattern library with pre-defined code for the elements in your prototype, it will not end up being accurate and should generally be avoided. That said, we ignored this as a factor when we were shopping for a prototyping tool. Eventually, we would like to see a complete integration with our atomic pattern library (for development) and the design libraries within our prototyping tool. That would allow us to design and code entirely within one source of truth. Sign me up.
What Tool Did We Pick?
In early 2017, Justinmind fit our needs the best. However, I would certainly like to revisit this process at some point in the future. Justinmind isn’t perfect; no design tool had everything we wanted. It’s also not a very popular design tool; it’s been around for a long time but has struggled to gain market recognition. Other tools see significant improvements, but Justinmind is relatively slow at feature additions. As the other tools get better, we will revisit their features every few months. It won’t surprise me if we end up on Adobe Xd at some point in the future, but in early 2017, it was a bit too new for us to consider it. Sketch is another very popular option, but it’s Mac-only so we couldn’t use it at Bio-Techne. Whatever tool you decide to use, make sure you’ve considered all the features we discussed in this article. Tools matter; they won’t make you a better designer, but they’ll certainly make you more capable as one.