There are now numerous tools available online for prototyping websites, applications, and other online experiences. Each of these tools is relatively budget-friendly and offers a range of similar features. Today we are going to focus on the three that we use most in-house: Adobe Experience Design (Xd), Atomic, and InVision. Our projects vary from organization to organization, and so the needs for the prototype also vary. Sometimes we want advanced functions like clicking and dragging elements, and other times we need to set up the prototype in a short time-frame and just want something to click through smoothly. So far we haven’t been able to choose a favourite prototyping tool, so took the time to compare them.
| Adobe Xd | Atomic | InVision | |
|---|---|---|---|
| Accessibility | Downloaded application | Online application | Online application |
| Cost | 30-day free trial, then $19.99/month | Free: 1 prototype $19/month: unlimited prototypes $39/month: unlimited prototypes, 10 users $59/month: unlimited prototypes, unlimited users | Free: 1 prototype $15/month: 3 prototypes $25/month: unlimited prototypes $99/month: unlimited prototypes, 5 users |
| Sketch Integration | Replaces Sketch; N/A | Downloadable plugin: can upload artboards from sketch as flat images, or with layer data | Downloadable plugin: uploads artboards straight from sketch |
| Editing Layout | All pages at once | Individual pages | Individual Pages |
| Interactions | Hot Spots | Hot Spots, Components/Symbols, Variables, Scripts, and an Animation Timeline | Hot Spots and Custom Layer States |
Information as of June 2017.
The first area to compare is accessibility. Looking at how we can access the service and make changes to our prototype is important. We work collaboratively, and so several team members may end up prototyping a single project. In this case, having a desktop app with two logins may not work best for your set-up, but having a single login to an online application may work perfectly.
After evaluating accessibility, we can look at cost. We believe in investing in items that better our business, but like to ensure they are doing just that. If your business already has a Creative Cloud account for other design software, Adobe Xd will probably be your best bet as you can just download it from the cloud of available applications. Adobe Xd is still in Beta, so we’re hoping as it gets more refined, the functionality gets even better.
The final area we evaluated is Sketch integration. Sketch is our go-to design tool for designing interfaces, and so integrating it with prototyping seamlessly is our goal. Adobe Xd replaces Sketch, but maybe because it is in Beta, we find it doesn’t have all the functionality that Sketch does. Atomic has a great Sketch plugin that allows you to send full artboards with or without all your layer data. This is very helpful for setting up animations in Atomic later. InVision also has a Sketch plugin, but only lets you send full artboards. InVision’s animations work a little differently though, and layer data isn’t helpful for prototyping – so it is a great tool also.
Overall, each of these prototyping tools offers very similar functionality. At this moment, we don’t have a favourite, but depending on the custom animations we require, we might lean towards Atomic or continue searching for a more customizable prototyping tool. We see value in each of them and will continue testing all three until we are satisfied.
Do you have a favourite prototyping tool? Make sure you let us know on our Facebook and Twitter.
