Real-time frontend data binding architecture with Vue.js
A how-to on our cutting-edge web and app development
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
VOLTAGE is a digital agency specializing in eCommerce, digital brand experiences, and web apps. Get emails and insights from our team:
A how-to on our cutting-edge web and app development
Discover how we can upgrade your website marketing leverage using SMS text messaging