Design & UX
Article

3 Prototyping Tools Compared: Invision, Marvel & Justinmind

By Gabrielle Gosha
Wright Brothers glider in flight (inset: A crashed glider)

Testing through prototypes.

Here's an interesting image. This is Wilbur Wright flying a glider he and his brother built in 1902. The inset image shows one of their less successful glider tests. This was dangerous and dicey stuff.

Though for the Wrights, 'manned powered flight' was always the ultimate dream, this glider phase was absolutely critical to their success. Sketches and calculations alone were never going to solve all their design challenges. They needed to build – and crash – REAL prototypes to learn what they needed to know.

Web and app development is a similar prospect. Our creations are now complex systems reacting to events in real-time, and customizing themselves for each user and each device individually. We are no longer book-like pages – like the Wrights, to need to test prototypes.

Fortunately there are lots of options out there, so today I’m here to test out 3 prototyping saviors that are sure to help you make the transition from an idea to a reality. Best of all these all offer free options. Continue reading to find out which tool is the right fit for you.

The Applications

The three prototyping applications we will be looking at are:

For each of these three tools we will be breaking things down into:

  • Registration Process
  • Getting Started
  • The Interface
  • The Tools
  • Features

Justinmind

Justinmind screencap

http://www.justinmind.com/

First up we have the interactive wireframe creator Justinmind. This tool boasts that it is in the business of changing the way you prototype by making the process faster and communicating your ideas easier.

Off the bat Justinmind sets an inviting tone – the scrolling, container-less, animated slideshow that takes up most of the home screen gives you an idea of the interface and how it works which really had me wondering if it was actually going to be that easy. Of course the only way I could decide that was to create an account.

Registration

By clicking the black CTA calling for you to “Get Started Free” you are taken to a very simple registration form. On the registration page they let you know immediately that “no credit card is required”. This put my mind at ease that this wasn’t just going to be a 14 or 30 day trial before asking for some type of payment, you know unless I wanted to upgrade. Please note that there is a “pro” version of this tool if you really need the extras.

Create an account

After quickly registering, a literal 10 seconds on my part, I was informed that I was all set to go and prompted to download and install the editor.

While some people may be turned off by the prospect of having to download and install a program, I am actually all for it. This guarantees that I can get to work without having to worry about whether I have a connection or not.

The only negative I found with the installer is that you aren’t informed of the installation process or what platforms are compatible until after you click the “download and install button”. It would have been nice if the compatibility information was shown before you start downloading.

Install Justinmind prototyper

Note: With the download you will receive a 30 day trial of the Pro version before being switched to the “Forever Free” version.

Getting Started

For the record, it only took me two minutes to install the Justinmind Prototyper once it downloaded. Like most programs of this nature you’re given three choices, new, open and learn. Upon clicking to create a new prototype you are prompted to select one out of ten available device options which includes Google Glasses. How many prototype tools do you know have that option?

Select a device

Depending on the device you pick you are given certain preference options you can tweak based on your project needs.

Choose a prototype

The Interface

The interface

On first glance the interface looks polished and professional. For free software, you really do seem to get all the bells and whistles for your prototyping needs. Arguably the interface might appear slightly intimidating but if you’re familiar with Adobe products and used to similar interfaces and setups it isn’t that much different.

Make no mistake, Justinmind is not an Adobe clone and it may not be a quick pickup as far as learning it in a matter of five minutes. Just in case you do need a little assistance Justinmind offers an efficient and easy 30 second tutorial to get you acquainted with the prototyper.

The Tools

As far as the interface is concerned, while it is elaborate it is user-friendly and setup in a logical manner allowing you to get things done with little to no confusion. The left side of the screen will be your best friend while you prototype. Here you will find widgets that will help you setup your prototype and flesh it out.

Basics

Bsaics

Most people are used to using rectangles and squares when creating their wireframes but with the basic tools you are able to flesh out your prototypes more than you initially would have. In the basics box you will find that you can add everything from geometric shapes, tables, images, texts and more. These are all nice additions and from the looks of it the available basics can undertake multiple uses as item stand-ins.

Web

justininmind-basics2

The web widgets are excellent and fulfill most if not all of your needs when it comes to prototyping websites. Here you will find buttons, file upload options and various lists and checkboxes. Not only that but there are two sub-categories to prototype navigation and html.

Parallax

Parallax

One interesting widget tool is the parallax section. Now I don’t know how common it is for a wireframing tool to offer parallax prototyping, but it is certainly a nice option to have, especially if parallax effects are central to the way your app works (presumably not often though). There are 12 different parallax movements for you to use.

Note: Depending on the device you are prototyping, your widget tools will change in accordance to your device. The only menu that will not change is the basics. For example here is the widget options for prototyping for Android:

justinmind-proto7jpg

Features

Justinmind offers many features and tools but if your trialling the software, you’ll be most interested in seeing the difference between the Pro and Free versions:

Free vs paid options

The Bottom Line

Justinmind Prototyper is a great program for those trying to get some sophisticated prototyping results. The interface is nice and there are some great tools for users to work with.

The downside however is that there is a learning curve if you aren’t use to this type of prototyping layout and the tools that come with it. Plus the Free version is very limiting which is a bummer considering it promotes itself as “The Best 100% Free Wireframe Tool for Mobile and Web”.

The best 100% Free Wireframe tool  for Mobile and web

They say it right in the tab description.

Marvel

Marvel

https://marvelapp.com/

Second on our list of tools is Marvel which a lot of designers will have probably heard of before.

Marvel is a web-based app that takes the need for coding and throws it out the window. According to Marvel themselves their app “is the easiest way to turn your sketches, images and mockups into realistic mobile and web prototypes”. After just having come from Justinmind that touted nearly the same thing I was definitely interested in seeing if it would hold up to their word.

Like Justinmind, Marvel’s homepage instills a sense of “this will work for me” especially considering they have testimonials on the homepage as well as displaying a small list of prominent users that have utilized their tool. Like Justinimind the only way to give Marvel a fair evaluation was by creating an account.

Registration

On the homepage you have the choice to either go ahead and sign up for an account or to run the demo to see if you really want to commit to an account with Marvel. Signing up for an account is ten seconds tops. All you need to do is give a name, email and a password for future login purposes.

Getting Started

Unlike Justinmind, there is no download button waiting for you after you have successfully registered. Instead you are taken directly to your Marvel dashboard. You’re thrown right into the mix by being prompted to either “create your first project” or “watch a demo video”.

marvel2-1jpg

The demo video serves as a tutorial for those new to Marvel and is a great asset unless you don’t mind learning everything as you go. While not a strike against Marvel it would be nice if their demo video didn't open a new tab sending you to Vimeo. For me it would be more beneficial to have the video embedded somewhere in their site e.g. a tour page. Regardless it is a helpful tool and Murat, the author of the videos, also has other Marvel dedicated demos/tutorials for your viewing pleasure.

Video tutorial

The Interface

Before you can get started actually prototyping in Marvel you have to go ahead and already name your project. If you’re working on something top secret you have the ability to password protect it, which is a nice little touch for those who are wary about web-based tools.

Because there is no downloading required the minute you name your project you are dropped into the main interface system that makes up Marvel. To be honest I was rather relieved at the simple layout that you often see with these type of web-based tools. There is nothing fancy about the setup but that’s completely fine as it makes

Marvel easy to learn. Uploading images is as simple as clicking a button, literally. There are a lot of options in regards to the type of files you can upload including PSD, JPG and GIF. You can also add your images via Dropbox or Sketch. Marvel also has apps for those needing to do some work for Android and iOS.

marvel3-1jpg

When you add an image you do have the choice to do some editing to it. While there is no complex editing system there is the ability to make some changes or to even completely replace your image should you not be happy with it. There is the ability to add transitions if you want as well. You can also preview how it will look by clicking the corresponding button on the editor.

marvel3-2jpg

marvel4-3-1jpg

Note: That using Sketch via Marvel requires you to download their plugin and if you want to use their apps for Android and iOS you’ll need to download via the links that go to the Google Play store. Dropbox is the only option that opens up within Marvel.

Tools

Any half-decent prototype editor is going to have tools for you to use and Marvel is no different. In the top right of your interface you will find a navigation bar that carries the tools that will help you get things done.

Add Team

If you have an upgraded account you will be able to make your project into a collaborative venture. This will allow you to share your work between teams whether it is for critique or for someone else to take up the rest of the work. For most freelance designers who are accustomed to working on their own, not having this option won’t be a deal breaker considering everything else.

Add team

Settings

While working on your prototype you will want to make sure that you are working with the most optimal settings. In the settings tab you can decide your prototype frame. There are in total 17 different devices you can choose from. You can then tweak to your wants and needs. Marvel also has some general, iOS and security options you can play around with if needed. It would be nice if this was added to the beginning of the project file creation process however.

Settings

Download

Marvel does allow you to download your prototype with the options of either PDF, ZIP, APK or IPA. Unfortunately to do so is going to require you to upgrade to either their Pro or Enterprise plans.

Download options

Preview

The Play tool that Marvel offers is much like Justinmind’s “simulate” option. By clicking play you can “take your prototype for a spin”. In other words you can see how it will work in real time.

Preview

Share

Regardless of whether you are using the free or pro accounts you can always share your work. This can be beneficial if you are looking for feedback either from clients or collaborative partners. URL links, emailing and texting and embedding into a site like Behance are all free and viable options for Marvel users.

Download options

Features

Marvel likes to keep things simple with their features. Unlike some editors they don’t try to throw everything in including the kitchen sink. With the ability to load images from other programs like Sketch or prototype from paper with their mobile apps their features make sense. For more on their features look here.

Just like with Justinmind, it is necessary to look at what you get with Marvel’s Free app versus their Pro app:

Plan options

Bottom Line

Marvel wins big when it comes to keeping everything simple in regards to use and interface. Subsequently some users may not be into the simplicity finding it too simple compared to other prototype editors along with the free account limitations.

Invision

Invision App

http://www.invisionapp.com/ The last of our free prototype tools is Invision. Like the other two, Invision prides itself in making prototyping accessible for everyone. In fact their tagline reads “Design Better. Faster. Together”, but it is their “the world’s leading prototyping, collaboration and workflow platform” that really encouraged me to give them a try. At first glance Invision certainly looks very professional and it seems they mean business, listing some of their big name company users.

Of course names don’t mean much if their free prototyper doesn’t live up to the hype so naturally I needed to make one more account.

Registration

To get started with Invision you have to click on their bright pink CTA prompting you to get started as they remind you that the prototyping editor will forever be free.

I found it interesting that once I clicked on the button I wasn’t taken to a new page. Instead I was directed to the bottom of their page to sign up. It was an odd implementation in my opinion but all the same it was another form for me to fill out.

Invision

Getting Started

The Invision prototype editor is just like Marvel as in it is a web-based tool so when you sign up you are taken directly to the dashboard. The dashboard compared to Marvel’s has an overall nicer look and a better feel to it. Clicking on elements just seems more natural with it’s clean layout and large thumbnails.

You’ll notice that when you first get to the dashboard you’ll be greeted with a message to the right that encourages you to get started by viewing a quick demo video.

invision3jpg

The dashboard has three preloaded demo projects for you to work with and get a better feel of how the tool can work for you. I thought it was nice how they don’t start you off with a blank project.

Instead if you’re wanting to prototype for a mobile device, web or work on a basic wireframe there is a project already built for you to play around in until you’re comfortable with your skills.

invision3-1jpg

The Interface

Invision definitely has a clean interface system. It is a mix of Justinmind’s complexity and Marvel’s simplicity that personally had me feeling like Goldilocks in that it was “just right”. The actual workstation, no matter what type of device your prototyping for, has an overall nice simple layout as all your tools are at the bottom of the screen. This may be a bit jarring for those accustomed to their navigation and tools menu at the top but it is something you can easily work with.

invision4-4jpg

Each project has a Screen tab that works as your particular project’s homepage. You will find all of your screens here that are for the project you’re currently working on. It is set up sort of like a thumbnail gallery giving you a quick summary of what each screen holds.

invision4jpg

Along with the Screen tab you also have an Activity, Comments and Asset tab which will come in handy especially if you’re collaborating or needing to share work with a client. All tabs you will notice continue the clean look which makes it easy to understand how everything works without being caught up with all the features.

Drag and drop upload

Web app prototype view

invision4-1jpg

Tools

There are a good number of tools provided in the prototype editor but there are some that will come in handy more than others. Of course you do have the ability to upload screens to your work as well as choose particular browser size but there are five tools that will definitely be important to Invision users.

Preview

The preview mode is where you can see how your prototype is shaping. Not only that but you will be able to interact with your elements to see if you have any issues within your project.

Preview mode

Build Mode

Within the build mode you can interact with your hotspots. This mode works by using the click and drag method allowing you to group hotspots together so that you may then apply the changes of your template to any of your other screens.

Build mode

Comment Mode

With the comment mode you have the option of either commenting on assets, leaving notes for your teammates or even adding sketches.

Comment mode

History Mode

The history mode in the editor will certainly work as your ally. Should you need to; you can use this mode to view earlier versions of your project screens as well as past comments.

History mode

Configuration

Not all of your projects will be the same or need the same treatment and so with the configuration tool you can add changes such as background color and a change of alignment.

config

Note:There is also a LiveShare button that allows you to present your project and real-time while the Share button allows you to share via url, email or text. If you want to share via download you’ll need to upgrade your account.

Features

Invision has a boatload of useful features that can really make prototyping and collaborations a painless endeavor. To learn more about their features as well as new ones go here.

As far as features go with Free versus the Pro accounts you pretty much get everything the pros do with a few exceptions i.e. inability to download projects and you can only create one project per free account:

options

Bottom Line

Invision really does present a great vision of how prototyping can work. There may be a slight learning curve at the beginning but what the editor offers makes learning easy if you have a few minutes to spare.

Aside from the downloading aspect and the one project limitation with a free account Invision is a strong competitor.

Ok. Your turn. Which prototype tool is your favorite? Is there a different tool you use?

  • TheoWorlds

    Nice finds. Some notes:
    inVision does not have wireframe UI creating tools. For that I would also recommend also checking https://balsamiq.com/.

    As for simple prototyping by linking screens via hotspots, I there is also Firefly. Less features, but simple and also priced accordingly (especially when you work in a team) – http://www.fireflyapp.com. Works well for websites and web apps prototypes. No free forever plan however, only free trial.

    • Don Droga

      Balsamiq is shit

  • Asma2

    Great! http://www.codly.io is another nice tool , can convert your Photoshop design into native code in seconds , just from Photoshop

  • http://www.thebusinessphilosopher.in/ Aishwarya Chaturvedi

    I am currently fiddling with POP (Prototype on Phone) on my iPhone. Works out nice.

  • http://diegopau.com DiegoPau

    You mean Principle? Which one is best in your opinion: Flinto or Principle?

  • http://diegopau.com DiegoPau

    Thanks a lot for all this information! Its really useful to me :)

  • Tulio Castilho

    This comparison is a bit misleading. Marvel and InVision can be compared, but comparing them to Just in Mind is just wrong, this is a complete prototyping tool, the other 2 are just for finalization and collaboration, quite different approachs!

    • Jack Bellis

      Tulio, can you elaborate? It might be exactly what I want to know… whether InVision is as full-featured for prototyping as my tool, Justinmind. I’m working with an independent team that is using InVision and they’re using it solely for “clickable mockups,” meaning a fixed (and very limited interaction flow). I use JIM for almost complete interactivity (any-path) simulation… which I find critical for data-intensive apps. Thanks

    • Don Droga

      These are different options dumbass

  • Jack Bellis

    Regarding>>> Plus the Free version is very limiting which is a bummer considering it promotes itself as “The Best 100% Free Wireframe Tool for Mobile and Web”…

    As a long-time JIM user, I can understand this statement as making a distinction between “wireframing” and “prototyping”… if you accept that wireframes are more static. So the free version of JIM, which—if I have it correctly since I last looked 2 years ago(?)—lets you paint with all of its visual power, but limits interactions to only inter-page clicks. There have been a lot of free or nearly free tools since that time, and they seem to have pretty strong visual widgets, so it’s hard to know of one being the best, of course. That is just routine marketing speak. But knowing as I do the breadth of utility that JIM provides (pages/outline/properties/etc) even for its mere visual tools, it’s not an unreasonable claim, just a subjective one.

  • Rafia Shujaat

    Marvel for $0 has now only 2 Projects to its Pricing chart as of 2016.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.