prototyping

in Design

My Top UI/UX Prototyping Tools for 2016

At some point or another every designer will face a project that requires some prototyping preliminary work. Believe me when I say that deciding what tool is right for you can be overwhelming, and borderline discouraging. There is a vast collection of tools out there with a multitude of features that don’t always fit the exact need one is looking for.

So first things first, it’s important to know exactly what you want. In my case I wanted my tool to be compatible with mobile, tablet, and web. I was also looking for an intuitive product with collaboration capabilities, user/device testing abilities, good support, and most importantly free trial. My learning curve needed to be very easy so that I could teach my team how to use it without sacrificing too much ramp up time.

 

Narrowing Down The Right Tool For The Job

Now this actually took a while, because I was learning about these tools as I was trying some of them out. From twenty different prototyping tools, I managed to eliminate all options to my top five. Why did I choose these five tools you might ask? Because according to all my research, these tools had all the right benefits and features I needed to complete my project on time. So let’s refer to the list below. These are the features I required when I was researching the most suitable tool for my team.

 

prototype-tool-features

 

So, What Are My Top Five Tools?

 

principle-logo

Principle is a prototyping platform that makes it easy to create animated and interactive user interface designs. Whether designing the flow of a multi-screen app, or new interactions and animations, Principle lets designers create prototypes that look and feel amazing. Designers can choose a device preset, or enter a custom artboard size to create their favorite prototypes. With hover events and scrolling abilities, Principle makes it easy to make web and desktop prototypes that feel like the real thing.

 

principle-screen-shot

 

 

 

invision-logo

InVision is a web-based prototyping tool that gives designers high-fidelity in under five minutes. Designers can upload their design files and add animations, gestures, and transitions to transform their static screens into clickable, interactive prototypes. Advanced animations and transitions can be easily created into life like interactions by adding customizable “hotspots” that link your screens together realistically. InVision is cross platform compatible, and it showcases your ideas in any resolution. It also allows collaboration for seamless design communication with team members, clients, or stakeholders.

 

invision-screen-shot

 

 

 

marvel-logo

Marvel, not to be confused with the comic book company, is a simple design prototyping tool that allows collaboration. Designers can create screens directly in Marvel, with the ability to add images from Sketch or Photoshop. You can even sync designs from your cloud storage as needed. Marvel’s collaboration tool makes it easy to share projects and get real-time feedback on all designs. Clients, as well as colleagues, can comment directly on each screen or add annotations.

 

marvel-screen-shot

 

 

 

just-in-mind-logo

JustInMind Prototyper provides designers with the best design solution to prototype feature-rich mobile apps, websites, web products and/or enterprise applications, and more. Justinmind allows designers to share and test designs that run on real devices, and make your wireframe look and feel like the finished application. Create interactive wireframes with animations, and even data without ever having to worry about code. From start to finish, without any technical expertise or programming knowledge, it is the perfect tool to visualize designs before moving on to coding.

 

just-in-mind-screen-shot

 

 

 

solidify-logo

Solidify from  Zurb Studios, a company I’m quite familiar with. Zurb is known for their popular framework Foundation and Zurb University. They are a great company altogether, so I was quite excited to find out that they developed a prototyping tool that would fit my needs. Unfortunately they updated their platform at the time I was running my test, and their free trial was in fact a signup form for early access to their newly rebranded Notable Prototypes.

 

notable-prototypes-logo

notable-prototypes-screen-shot

This was a shame because I had such high hopes for this tool. Before I began testing, this tool was my top choice because of Zurb’s superb reputation, but it was all for not. Bad timing I guess? I’m still interested in testing this tool out, and now I’m more anxious than ever. If anyone has tried it out, or if any of the former Solidify user base was grandfathered into Notable Prototypes, please drop me a line in the comments, I’d love to hear about this.

 

The Breakdown

So now that we’ve gotten familiar with my prototyping tool selections, let’s see how they compare against each other. The goal was to identify which tools had the features I required, but also the benefits I needed to determine if my team and I could adapt it easily. Below was the criteria I came up with to asses these prototypes against one another.

  1. Learning Curve: How long it took me to create the prototype once the tool was up and running (this was determined by how intuitive the tool was); the shorter timeframe the more it gained my favor.
  2. Sharing: Ability for designers to share their prototype with others and/or work collaboratively on the prototype.
  3. Usability Testing: The quality of features that conduct usability testing with the prototype such as animations, interactions, modifications and linking mock ups.
  4. Support: Amount and quality of tutorials, help documentation, libraries (UI elements, widgets, icons), templates, etc.
  5. Device testing: Quality of features for testing the prototype on mobile, tablet, desktop and/or web app.

 

prototype-tools-evaluation-matrix

This chart shows my most favorable tool to least favorable tool based on my assessment.

 

In Conclusion

After my assessment, I was able to narrow down my choices to my final two which are Marvel and InVision. Surprisingly, of the four platforms, I can say they are all relatively great tools!

 

JustInMind: is the whole package perfect for web designers looking for an all-in-one prototyping tool. This tool is ideal for a power user who wants to prototype in web, tablet and mobile. The sharing capabilities are pretty basic in free trial, but JustInMind also has plenty of difficulty-based tutorials with an excellent support community. The only downfall to this tool is that the learning curve was a bit too complex for my needs.

 

Principle: Again another great tool with a better learning curve than the previous tool. Also great for the power user, but a little friendlier than JustInMind. This tool has the ability to do robust device testing and you can push animations and interactions to the limit. Collaboration capabilities are also pretty basic with Principle and they have a decent support community in place. The reason why Principle fell short for my team was also due to the learning curve. Although once I got things going it wasn’t too complex, my biggest concern was my teams ramp up time, and I was looking for something more intuitive.

 

Invision and Marvel: I have to say this decision was a toss up for me since these are both phenomenal tools. Both of these tools were very intuitive, easy to get going, and have amazing collaborative capabilities. A beginner could hit the ground running with these tools, and if they get stuck, both tools utilize intercom to put a strong support system in place. Designers can communicate directly with their support teams, all while never leaving the application. Both prototyping tools are compatible with mobile, tablets and web. Although these tools might not have robust animations and interaction capabilities like Principal or JustInMind. These tools had all the qualities I needed for practical and efficient use.   

 

In the end, my deciding factor was the UI and the clean aesthetic of Marvel. Although InVision went toe to toe with Marvel, I chose to go with Marvel because I felt that their UI was slightly better executed. Both of them had a minimal experience which I am in favor of, but when it came down to attention to details, Marvel hit the nail on the head. Thank you for reading my post and with that I take my leave and bid you all adieu

 

  • http://www.erlen.co.uk/ Erlen Masson

    Great post mate, I will definitely share this one. Funny thing is I have been using both InVision and Marvel on personal projects and seem to love them both.

    At work we use UXPin. You can go into super depth with prototyping but its very difficult and a long process. It taken me a long time to learn also

    For me Marvel is a winner too. Nice job man

    • Jesus Enriquez

      Thanks I appreciate the comment. Cheers!

  • Daniel Chinchilla

    THANK YOU….just what I needed. I´ve been using Marvel and I like it, but feel it sometimes perhaps TOO simple. I´ll give InVision and Principle a try.

    • Jesus Enriquez

      Thank you!

  • Yuanyi Zhang

    Hi, I’m developer of MockingBot (mockingbot.com), and i think it’s worth for you to have a look on it, it’s a very simple mobile app prototyping tool and free for public projects, below’s an short intro video:

    • J.J.Stone

      Hi ,Yuanyi Zhang. 我是mockingbot的忠实付费用户:)
      冒昧在这里提个问题,mockingbot上制作的原型,对于ie(特别是老版本ie)的支持,有什么好的方案?离线下载html5版本后发给客户,经常会遇到这个问题。
      可直接回复亦可回邮件: name.ryan@gmail.com
      Thanks!

  • Ailsa He

    Hi, thanks for sharing. Very useful. There is a new prototyping tool named Mockplus. I suggest you include this tool into the list as it is very easy to use. Mockplus is a desktop-based prototyping tool. It can be used to create both static prototypes and interactive ones very easily. Even newbie can master this tool in a very short time. It it not as complicated as Axure/Justinmind but robust than Marvel. mockplus.com

    • Mina

      Hey, Alisa, thanks forrecommendation! I tried Mockplus, it’s a good tool for ui/ux design. Fast learning and building interactive prototyping within minutes. And I can preview my works through the Mockplus app on mobile devices. That’s very convenient to test projects. Good job!