Monday, June 1, 2015

3 Prototyping Tools Compared: Invision, Marvel & Justinmind

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://ift.tt/zS1yKH

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 thing I would say negatively about 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. Admittedly the interface might seem 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 and appreciated widget tool is the parallax section. Now, to be honest I don’t use a prototype tool during the rare occasions I do prototype so I don’t know how common it is for a wireframing tool to offer parallax prototyping. Either way it is certainly a cool tool to have especially if you are working on a design that requires parallax and you want to give the client an idea of how everything will work. There are 12 different parallax movements for you to use.

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

justinmind-proto7jpg

Features

Justinmind has a lot of features and tools to your disposal which you can look at here. But what is really important for the free user to determine if Justinmind’s Prototyper is for them is 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.

Continue reading %3 Prototyping Tools Compared: Invision, Marvel & Justinmind%


by Gabrielle Gosha via SitePoint

No comments:

Post a Comment