Take a look at the changes we've made to our privacy policy effective May 25, 2018. By continuing on this site you agree to the terms stated in this policy

Read More Close
Menu
Close

The Current

Thought Leadership

How to navigate the sea of prototyping tools

Prototyping tools abound. Here’s a compass to help you find your way.

If you’re like me and want the perfect, all-around prototyping tool,  bad news: there isn’t one.

Good news, though! There are a bunch of really great options depending on your purpose.

Read on for a handy, quick-access guide to which tool best serves your needs. Before you start, keep the complexity of your project in mind and be aware of how much time you have.


Something WITH CODE


FRAMER

 

HOW IT WORKS

Framer is a powerful tool for creating sophisticated, code-based interactions. Using CoffeeScript, prototypes compile into JavaScript making for happy developers. Framer projects can also be built to utilize to the accelerometer on a native device.

WHAT THE PROJECT SETUP LOOKS LIKE

From the start, designers can import files directly from Sketch or Photoshop. Every layer or object name created when designing can be called in the CoffeeScript syntax. Quickly start a project with any of the available pre-built functions. Resizing and editing objects directly in the preview window automatically updates the code.

HOW SHARING WORKS

Host Framer projects via URL to quickly share with clients or other team members. However, there is no means to leave comments directly on a prototype like other tools out there.

YOU SHOULD USE IT IF:

  • You are comfortable working with code
  • You want to create realistic code-based animations
  • You need to use live data from web services
  • You need to work with the accelerometer in a device

YOU MAY NOT WANT TO USE IT IF:

  • You don’t know what CoffeeScript or Javascript are
  • You need to build something quick and simple
  • You want to create a storyboard or user flow

WHAT PRICING LOOKS LIKE

  • A one-time payment of $129

Something COMPLEX AND SOPHISTICATED


JUSTINMIND

 

HOW IT WORKS

JustInMind is great for creating intricate prototypes. If you have used Axure before then you will feel comfortable with JustInMind. It provides a large library of drag and drop interface elements. Import data sets to simulate realistic functions such as sorting or filtering, and use gestural support for mobile interactions.

WHAT THE PROJECT SETUP LOOKS LIKE

Starting a project is easy, just choose from one of the preconfigured workspaces by picking a device and screen size. You cannot import from photoshop or sketch sadly, but you can import your screens as images. However, it may be easier to do the design work directly in JustInMind because of all the pre-built elements.

HOW SHARING WORKS

Export to HTML with a few clicks for testing and feedback. Individuals can comment on screens or specific elements. Teammates can also collaborate on a project on a check in check out system.

YOU SHOULD USE IT IF:

  • You like designing and prototyping in one place
  • You need to have multiple designers working on one project
  • You need to simulate data sets
  • You want parallax effects in your prototype

YOU MAY NOT WANT TO USE IT IF:

  • You prefer using another program to create wireframes/mockups
  • You want to create something quick and simple
  • You don’t have the time to get past the learning curve

WHAT PRICING LOOKS LIKE

  • JustInMind offers its basic features for free, which are rather limited. The Pro version, which includes HTML export and cloud collaboration, costs $29/month or $228/year.

PROTO.IO

 

HOW IT WORKS

Proto.io is a web based prototyping tool that is surprisingly intricate in the level of detail it provides. At its core, it is a screen based prototyping tool but offers powerful screen state animations through layers.

WHAT THE PROJECT SETUP LOOKS LIKE

An extensive library of editable UI elements make starting a project easy. Sync your individual assets from Photoshop or Sketch through Dropbox; though, you’ll need to reconstruct your screens in Proto. After that, any updates made to your assets in Photoshop or Sketch will be synced automatically.

HOW SHARING WORKS

A generated link can be used to share prototypes for testing with users through comments or video. Teammates can also add feedback to prototypes, but they cannot  work on the same project at the same time.

YOU SHOULD USE IT IF:

  • You need to show complex interactions
  • You need to design quickly using standard UI elements
  • You need to simulate real data

YOU MAY NOT WANT TO USE IT IF:

  • You prefer designing in a native app
  • Lag from complex interactions makes you cringe
  • You want to design something simple

WHAT PRICING LOOKS LIKE

  • $29/month or $288/year for 5 active projects. There are also plans for 10, 15 or 30 active projects

 Something LIGHT AND POWERFUL


FLINTO (For Mac)

 

HOW IT WORKS

Flinto is a lightweight, native desktop app that works well with Sketch and offers a slew of powerful animations tools. It’s one of the only prototyping tools that can create 3D animations. You create animations as screen transitions so any state change requires new screens to animate, though, a page can contain scrollable areas. Layers that change between states must be connected in the transition designer view in order to animate.

WHAT THE PROJECT SETUP LOOKS LIKE

Starting a Flinto project is easy if you are designing for mobile as it provides an abundance of device sizes. However, there are no presets for desktop sizes, so you need to put them in manually or start from a Sketch file.

HOW SHARING WORKS

Sharing and collaborating is limited with Flinto (for Mac). There is no option to host a prototype via URL or comment on a prototype unless you use FlintoLite, the web based version of Flinto with limited features. For mobile designs, a prototype can be viewed on Flinto’s iOS viewer app. For desktop designs, the client or user tester has to download Flinto as a trial to view the prototype.

YOU SHOULD USE IT IF:

  • You like a dedicated view just for designing transitions
  • You want to prototype an entire app
  • You design in sketch
  • You want to create 3D animations

YOU MAY NOT WANT TO USE IT IF:

  • You need a live prototype URL for testing
  • You want the ability to directly comment and collaborate on a prototype
  • If you, your clients, or anyone on your team uses PC or Android

WHAT PRICING LOOKS LIKE

  • One-time payment of $99

PRINCIPLE

 

HOW IT WORKS

Similar to Flinto, Principle creates unique transition animations but a little differently. It does not offer 3D animations, but you can set up scrollable areas easily and edit animations using a timeline panel. To show state changes, layers need to have the same name to be linked. Drivers allow you to trigger powerful animations on the same page when interacting with objects.

WHAT THE PROJECT SETUP LOOKS LIKE

Import an active Sketch file to get started and like Flinto it also uses artboards. Use the built in window to quickly view and interact with your prototype.

HOW SHARING WORKS

Just like Flinto, the client or user will need Principle installed on their computer or have the iOS app installed to view a prototype. Interactions made in the preview window can be recorded and shared as videos or gif animations.

YOU SHOULD USE IT IF:

  • You want to create timeline based animations
  • You design in Sketch
  • You are looking to prototype a couple screens with complex animation

YOU MAY NOT WANT TO USE IT IF:

  • You want to create 3D animations
  • You need a live prototype URL for testing
  • You, your clients, or anyone on your team uses PC or Android

WHAT PRICING LOOKS LIKE

  • One-time payment of $129

ATOMIC

 

HOW IT WORKS

Atomic is an online layer-based prototyping tool that comes with an inviting interface and helpful collaboration tools. Add multiple designers to a single project, collaborate on the fly, and create transition animations that can be enhanced with timeline editing tools.

WHAT THE PROJECT SETUP LOOKS LIKE

Atomic comes with preset sizes for desktop, mobile, and AppleWatch. Import from Sketch using a plugin that uploads your layers or groups as images (not svgs sadly).

HOW SHARING WORKS

Share your prototype through a URL link to clients and testers. Both of whom can comment on screens of your prototype but not individual elements.

YOU SHOULD USE IT IF:

  • You need to share a prototype via a URL
  • You need to work with other designers on the same prototype
  • You want to create more than basic transition effects

YOU MAY NOT WANT TO USE IT IF:

  • You want a native desktop experience
  • You need to preserve vector shapes when importing assets
  • You want to create more complex animations

WHAT PRICING LOOKS LIKE

There are three tiers for pricing. $15/month for 5 projects, $25/month for 25 projects and collaboration and commenting tools, or $35/month for unlimited projects and priority support.


Something SIMPLE AND INTUITIVE


MARVEL

 

HOW IT WORKS

Marvel is a screen based prototyping tool that relies on hotspots to switch between screens. Screens can be overlaid on top of each other to display side menus and popup windows. You can design screens in the Marvel designer view, but it is fairly limited.

WHAT THE PROJECT SETUP LOOKS LIKE

Upload all of your screens as images directly into Marvel via drag and drop, dropbox sync, or through the sketch plugin. Link screens by creating hotspots. Marvel makes this step easy by providing thumbnails of your screens in the lower panel.

HOW SHARING WORKS

  • Marvel provides the means for your team and stakeholders to comment directly on a prototype. Prototypes can be shared to testers and stakeholders via URL.

YOU SHOULD USE IT IF:

  • You need to prototype quickly
  • You want to share your prototypes for feedback and testing
  • You don’t need a lot of bells and whistles
  • You need to use the pinch mobile gestures

YOU MAY NOT WANT TO USE IT IF:

  • You are looking to design your own transition animations
  • You want to display live data

WHAT PRICING LOOKS LIKE

  • Free: Unlimited projects with marvel branding and commenting on first 3 projects
  • Pro: $12/month for unlimited projects and commenting
  • Plus: $15/month adds ability to download offline prototypes for iOS
  • Company: Depends on team size

INVISION

 

HOW IT WORKS

InVision uses hotspots like Marvel but provides powerful sharing features, allowing for remote teams to collaborate on prototypes in a whole new way. It also provides project status reporting tools to let others know if a screen needs to be reviewed or if it’s ready for production.

WHAT THE PROJECT SETUP LOOKS LIKE

First, choose from a variety of screen sizes and devices. Import your screens via drag and drop or by using the InVision sync tool; however, your screens will not import in order and will need to be rearranged. Linking screens is as simple as creating a box over a button. When linking, you select the screen via a dropdown rather than thumbnails like in Marvel.

HOW SHARING WORKS

Collaborators can help build, comment, draw, or display their unique pointer over an area and lead a discussion. There is also a screenshot extension for chrome to capture inspiration or pre existing pages. Prototypes can be shared via URL to testers and clients or sent as zip files to be used offline.

YOU SHOULD USE IT IF:

  • You are looking for a strong set of collaboration tools
  • You want to share your prototypes for feedback and testing
  • You want a really quick way to prototype

YOU MAY NOT WANT TO USE IT IF:

  • You are looking to design your own transition animations
  • You want to display live data
  • You need to use the pinch mobile gesture

WHAT PRICING LOOKS LIKE

  • Free: 1 prototype
  • Starter: $156/year, or $15/month for 3 prototypes
  • Professional: $264/year or $25/month for unlimited prototypes and one designer
  • Team: $1,068/ year or $99/month for unlimited prototypes and 5 designers
  • Enterprise: Call for quote. For teams larger than 5

Be a FORCE FOR GOOD

VOLTAGE is a digital agency specializing in eCommerce, digital brand experiences, and web apps. Get emails and insights from our team:

Like What You Read?

Share it. Your followers will thank you.

Read More The Current