We've talked about the tools we use for more advanced animations and interactions. Principle and Flinto for Mac are best for that. Now we’re covering three prototyping tools that help designers like those on the Savvy Apps design team communicate how an entire app works and show all the flows in the app: Flinto Lite, Marvel, and InVision. These tools help designers realize user paths, with an emphasis on navigation, gestures, and transitions. Read along as we compare the key features for all three tools and highlight the best use scenarios for each.

Flinto Lite

Flinto Lite is an easy-to-use design prototyping tool that creates a simple, yet realistic version of an app using existing design assets. It offers what we consider to be the baseline of prototyping features.

Why We Like Flinto Lite

While it might not offer all the bells and whistles of Marvel and InVision, Flinto Lite's prototyping style is simple and fast. There's not much to get carried away with here. It offers the basics, and only the basics. Flinto Lite comes in handy for quick, low-fidelity prototypes that don’t require more than a tap gesture.

When to Choose Another Tool

Look elsewhere if you want more options for transitions, gestures, and collaboration features. Flinto Lite's competitors surpass the tool in everything from supported devices and sharing methods to user testing. It's saying something when the biggest upside to Flinto Lite is actually it's Mac app counterpart, Flinto for Mac. Access to Flinto for Mac comes with a Flinto Lite paid subscription.

Specs

8 devices: iPhone 6, iPhone 6 Plus, iPhone, iPad, Nexus 4, Nexus 5, Nexus 7, Nexus 10

7 transitions: Dissolve, zoom in, zoom out, cover left, uncover left, cover right, uncover right

Sharing options: URL, email, and SMS

One price plan

https://www.flinto.com/lite

Marvel

Marvel offers everything Flinto Lite provides and more. Its approach is to improve on the baseline of features with designer-friendly tools like Sketch import, customizable image layering, collaboration, and more. It supports the most gestures and devices of all three tools, and comes in a close second with transitions.

Why We Like Marvel

Marvel keeps it simple and intuitive. It doesn’t add unnecessary features but still provides more creative freedom than Flinto Lite. Here are some of our favorite Marvel features.

Sketch Plugin

Marvel's Sketch plugin feature (available via Sketch Toolbox or here) is a godsend for designers, particularly those who now complete 90% of their app design work in Sketch. It allows us to import our Sketch Artboards into our Marvel projects. You can also make changes to your Artboards in Sketch, and them update them in your prototype via the plugin. This saves us an extra step in exporting our screens and then importing into Marvel.

Hotspots

All three tools use hotspots to link different screens. This works by identifying a tappable zone over a certain area of the screen (i.e. over a button, tab, icon, etc.) and then selecting the destination screen. Think of hotspots as invisible buttons, but in addition to defining tappable areas, hotspots can also define areas that can be swiped.

We prefer Marvel's approach to hotspots. Unlike Flinto Lite, Marvel keeps the original screen in view when linking to another screen, so you can add multiple hotspots easily. InVision's hotspot technique makes designers select the screen they want to link to via a dropdown. The issue with the dropdown is that it’s difficult to get a full preview of the screen you’re trying to link to since there’s only a small, square thumbnail that displays a portion of each screen. Flinto Lite and Marvel's approach provides more context.

Additionally, Marvel allows you to duplicate hotspots to multiple screens so you don’t have to manually add them to each screen. This approach is helpful for persistent elements such as menu and navigation. InVision offers something similar with its hotspot templates. We've found, however, that how InVision handles hotspots doesn't always work as it should. For instance, there have been a few times when our hotspots completely disappeared on certain screens. We then recreated the hotspots, and it looked like only one hotspot was there. Later, the original hotspot reappeared and we had to contend with duplicate hotspots all over the screen. While this doesn't happen that often, it's frustrating enough to consider when choosing which tool to work with. We've never experienced anything like it with Marvel.

Image Layering

Designers can create more realistic interactions with Marvel's image layering and customization feature. This feature is something that is not offered at all in Flinto Lite. Not only can you layer an image with Marvel, but you can customize the layer's positioning, set the background color, and set the background opacity. InVision's layering options are limited in comparison. Marvel also provides a real-time preview of the layer positioning and opacity as you set up your layer.

For example, this first GIF shows a dialog layered on a “Question Detail” screen with the background behind the dialog set to 60% opacity using hex #000000. The dialog is set to appear on tap of “FINISH,” and disappears on tap of “CANCEL.”

This second GIF shows an example of a menu sliding in from the left and layered on top of the “Dashboard” screen. The background is again set to 60% opacity using hex #000000. It appears on tap of the menu icon, and is dismissed by tapping outside of the menu. Using the image layering option, rather than a flat image, creates a realistic interaction.

Paper Prototyping

If you start your design on paper, you can use Marvel’s apps for iPad, iPhone, or Android to turn your sketches into prototypes just by taking photos. While technically you can do this in Flinto Lite and InVision it would be more complicated. You'd have to upload your photos from your phone to your computer and then to InVision or Flinto Lite. Marvel makes it easier by having you use their app.

Open Collaboration and Commenting

Marvel supports team and stakeholder feedback with its collaboration features. Anyone viewing the prototype can add comments and annotations directly to the prototype even if they don't have a Marvel account. To add their feedback all they have to do is enter an email address before their comment is posted so that Marvel can notify them when new comments are added. InVision also offers this feature.

Lookback Integration

Marvel (and InVision) make user testing iOS prototypes super simple with Lookback integration. This feature actually records a user’s taps and gestures as well as their reactions via their device’s camera and microphone. The end result is a complete look at the user’s session, including a timeline with all of your screens laid out in order.

When to Choose Another Tool

Marvel steps past the basics that Flinto Lite provides. Still you might prefer to use another tool like InVision if your team requires more collaborative features. Marvel also only provides the left flip transition whereas InVision offers both left and right.

Specs

11 transitions: Fade, push left, push right, slide left, slide right, slide up, slide down, pop, flip, flow, slide fade

9 gestures: Click or tap, hover, swipe right, swipe left, swipe up, swipe down, pinch, pinch out, double tap

Devices: Web, Apple Watch 38mm, Apple Watch 42mm, iPhone 6, iPhone 6 Plus, iPhone 5S, iPhone 5C, Nexus, Galaxy S5, Lumia 920, HTC One, iPad Air, iPhone 4S

Upload options: Sketch and Dropbox

Sharing options: URL, email & SMS, embedding (Medium, Bechance, Squarespace, Wordpress), publishing

Variety of price plan options

https://marvelapp.com/

InVision

InVision takes many of the useful import and customization options from Marvel but also offers more powerful collaboration features. It provides the most transition options of all three tools and comes in a close second in gestures and devices.

Why We Like InVision

If you need a tool that allows you to easily create prototypes and incorporates collaboration features, InVision may be that app. These collaboration features seem more geared toward larger remote teams. InVision's LiveShare feature in particular may be enticing to those teams that do not already have preferred collaboration tools in place.

LiveShare

InVision's LiveShare tool allows group collaboration in real time. Teams can view their prototypes at full resolution, and each person has their own pointer with their name attached. Although LiveShare has a voice chat component, InVision could really take it to the next level by introducing video chats. Overall, LiveShare is a nice perk to using InVision, but it’s not a necessity for all teams.

Workflow and Project Management

While Marvel allows designers to sort prototypes into folders, InVision improves on this feature. Designers can assign statuses to projects and have alerts sent out to other team members when a project's status changes. InVision's workflow feature lets team members to assign tasks, track changes to projects as well as make to-do lists and due dates. That's helpful for larger teams without existing workflows in place.

Slack Integration

Another handy collaboration tool, InVision's Slack integration connects InVision with Slack for instant notifications regarding your projects. Any changes you make like replacing or adding screens, comments, and project statuses are automatically synced with the Slack channel of your choice.

Draw or Write Directly on the Prototype

Like Marvel, InVision allows anyone to comment directly on prototypes with an email, though the commenting interface isn't as clean and focused. InVision gives the added benefit of allowing commenters to draw a sketch or write directly on the prototype. This feature is great for getting quick ideas out to team members and getting feedback from stakeholders.

When to Use Another Tool

While InVision's collaboration features are impressive, we feel like they may be too much for some teams, especially for teams who already use other collaboration and workflow tools. It's also a good idea to be wary of Slack integration as in our experience that sort of feature can get unwieldy fast. In general, InVision offers many of the same features we love in Marvel, though sometimes not at the quality we expect. The Sketch import, for example, is clunky and requires you to reorganize your screens into an order that works best for your prototype. And then there are the hotspot bugs we mentioned earlier.

Specs

12 devices: Web, iPad, iPhone 6, iPhone 6 Plus, iPhone 5, iPhone 4, HTC One, Samsung Galaxy S4, Nexus 7, Nexus 10, Apple Watch, Android Watch

Transitions: Dissolve, push right, push left, slide right, slide left, slide up, slide down, flip right, flip left, flow, pop, slide dissolve

Gestures: Tap, double tap, swipe right, swipe left, swipe up, swipe down

Upload options: Sketch, Dropbox, and InVision Sync.

Sharing options: URL, email, SMS, embed, download

Variety of price plan options

http://www.invisionapp.com/

Concluding Note

While each tool has elements we like, overall the Savvy design team is using Marvel. In the past we almost exclusively used Flinto, now Flinto Lite, but its feature set hasn’t changed much. The Flinto team seems more focused now on Flinto for Mac. As InVision offers a number of collaboration and workflow features we don’t need and Flinto Lite is falling behind other prototyping tools, Marvel seems to strike the right balance of not being too basic or complex.