Tested: Our Favorite Prototyping Tools Reviewed

Written By: Jared Wick
Published On: February 1, 2018

These four prototyping tools are doing some heavy lifting for experience designers. Our design team put them to the test to decide which tool would most enhance our workflow. We love software that helps us work more efficiently while improving the outcome of our efforts and all of these tools have the potential to do just that.

framer-icon Framer:

framer.com

Framer is a top-notch prototyping tool and the #1 choice of our design team for a piece of software that will enhance our capabilities. Our testers loved Framer's easy-to-use interface, smart layers, interaction library, and simple coding structure. Framer also stands out for its built-in prototyping and easy iOS testing via its user-friendly app. 

GOOD:

  • Excellent for testing medium to high-fidelity mockups on real devices
  • Best for final-stage testing of the customer journey
  • Integration with the iPhone app is seamless and worked the first time I tested
  • Animations, transitions, states in custom code can make the experience feel native

BAD:

  • Not good for low-fidelity wireframes
  • Not suitable for flow charts or mapping IA
  • Is not designed for building other diagrams

uxpin-logo UXPIN:

uxpin.com

UxPin is a lot like Framer so I won't dive into too many details. This is another great product with a unique approach to design systems and reusable elements. One of our main takeaways was that UxPin is more than twice the price of Framer at $30/month per user vs. $12/month for Framer. If the cost per user is not a concern, then you might want to see if UxPin's unique design system functionality would be of benefit to your team.

GOOD:

  • Good for testing low to high-fidelity design concepts
  • Easy to convert low fidelity to high fidelity
  • Can build and test in any browser (no app)
  • Collaborative - multiple users can work on a single project
  • Can add interactions to elements, can mimic CSS animations
  • Additional design system functionality is very nice

BAD:

  • Not very intuitive, need to watch tutorials
  • Can't do flow charts or other diagrams

sketch-logo Sketch:

sketchapp.com

If your team is looking for a photoshop replacement - perhaps something easier to learn - then Sketch is an excellent tool for your team. It has nice libraries of pre-built UI elements to help make the process quick. The downside - prototyping functionality is only available through plugins such as InVision, Marvel which increases monthly costs.

GOOD:

  • Good for creating high-fidelity design concepts
  • Symbols panel saves reusable elements like logo, icons, cards, etc

BAD:

  • Prototyping Interactivity is provided by plugins, not Sketch
  • Mobile app doesn't provide helpful featureset and rarely works 

axure-icon Axure:

axure.com

Axure has a slightly different focus from the other tools on this list: low-fidelity design iteration. The Axure work-space uses a sticky grid system, enabling users to mock up layouts quickly. The main takeaway with Axure is that it won't suffice for pixel-perfect design concepts or realistic interactions. Axure doesn't support animations, and even basic interactions can be complicated to configure and sometimes produce undesirable results. 

If you also need a great tool for building diagrams or flow charts Axure should be on the top of your list.

GOOD:

  • Good for building simple flow charts and diagrams
  • Good for building low-fidelity wireframes for early-stage testing
  • Adequate for illustrating minimal interactivity
  • Interface is snappy, easy-to-use

BAD:

  • Interactivity is often clumsy and not easily executed
  • Native device testing not supported
  • Not designed for rigorous, final-stage experience testing

Summary

Someday we may have one tool to serve all our UX needs, but for now my team is going to use two of the tools above. We need Axure for building slick diagrams fast. We also need Framer for its more sophisticated interactive prototyping capabilities.

If your design team is looking for a new prototyping tool, there are dozens of options out there. We narrowed our list to the four tools described here before signing up for each one to get a closer look at their capabilities. Your team will undoubtedly have a unique set of requirements and should test the tools that you believe will fulfill your needs.

 

 

framer-icon

Framer

uxpin-logo

UXPin

sketch-logo

Sketch

axure-icon

Axure

Low-Fidelity

✔︎

✔︎

✔︎

✔︎

High-Fidelity

✔︎

✔︎

✔︎

Easy To Use

✔︎

✔︎

Interactive Prototypes

✔︎

✔︎

Animations

✔︎

✔︎

Reusable Elements

✔︎

✔︎

✔︎

Native App Testing

✔︎

✔︎

Collaboration

✔︎

✔︎

✔︎

Diagrams

✔︎