Software Developer Blog

InVision - www.invisionapp.com - create online collaboration and design tools to help people "Design Better. Faster. Together".

InVision's Products

InVision offers five main products: Boards, Craft, Freehand, Prototypes and Specs. This article isn't going to cover Craft, which is a plugin for Sketch, or Specs which is a new developer handover tool, but instead focus on the main three project design tools: Boards, Freehand and Prototypes.

Boards are collaborative spaces for projects where you and your clients can upload files, screen shots, styles, colours, URLs or notes and place them on a pin-board to share and set the design mood of the project. Nice to have for kick starting a project and keeping track of related files.

Freehand is a whiteboard utility which can be shared and used in real time for brainstorming and collaboration. It becomes more useful once you discover the prebuilt templates which provide elements for drawing flowcharts, wireframe components, organisation charts, systems architecture and more. Great for online meetings and drawing quick diagrams.

Prototypes is where you upload your finished designs and receive client feedback. Clients can play the design artboards and interact with them or comment on them; Editors can change the text copy online so designers can incorporate in into the design using Write and InVision Studio; Developers can interact with the designs and download assets and styling. 

Designing and Prototyping

Although InVision allows uploading of images of your designs, enabling you to use any design application you like, these images are limited to rasterised images only as vector image formats are not supported.

This means InVision’s interactive prototyping capabilities won't be available and developers won’t be able to inspect the design or download the assets or styling information.

Clients will however be able to see and comment on the designs.

If you want to use the more advanced features, you’ll need to use one of the supported applications: Sketch, Illustrator, or InVision Studio. The lack of Inkscape support isn’t surprising but for some may be a disappointment.

This bring you to your first decision when using the platform, which of the support design tool to use?

Those familiar with the tools will know they’re all vector graphics applications; that Sketch and Illustrator are both professional paid for products and Studio is free; and that while Sketch only runs on Mac OS Illustrator and Studio work on Windows too.

I went with Studio as I wanted to try it out, besides Sketch and Adobe Illustrator have their own alternative ecosystems - besides InVision - and would add more to the overall cost of design.

InVision Studio

InVision Studio is a simple, cut-down vector graphics editor, with enhanced integration with InVision’s online collaboration ecosystem. 

Features - 7/10

Studio's feature set is extremely basic, yet surprisingly, I found myself liking Studio’s simplicity.

It can draw basic shapes and paths, which you can group in layers, select, manipulate, and style in terms of colour and thickness, but many simple features are missing like stroke styling, skewing, and scaling for example, and while Studio’s AppStore offers some great extensions it doesn’t come close to making up for the shortfall.

On the plus side integration with for InVision’s Freehand and Prototyping tools works well.

Importing – 4/10

Studio can only import Sketch and SVG files. I imported an SVG created with Adobe Illustrator and was presented with a jumbled unusable mess. I didn’t try Sketch but can only hope support is better. 

Exporting – 7/10

As well as saving files in Studio’s own format it can export selections to SVG. Overall, I found these worked well and rendered correctly in browsers.

There is an option in the properties window to export to JPG and PNG but these failed to work.

Prototyping 8/10

Simple event driven point-and-click and time delayed interactions and effects are available, such as fade in on a left swipe, or scroll up when a button is clicked.

These work by transferring the user's viewpoint from one artboard to another artboard which shows a different rendering..

I created a clickable carousel effect without difficulty and found the result very effective.

Responsive Design 5/10

You can create custom artboards of any size or pick a preconfigured template matching your target device.

Studio however has limited support for scaling and responsive components, text resizing is especially awkward and interferes with workflow.

On a positive note, mobile and tablet device previews work well and feel very natural.

Stability 7/10

Studio was easy to use and for the most part stable. Some edge case features – such as device mirroring - failed to work, and it did occasionally run slowly but overall, it was stable and a joy to use.

InVision's Pricing

All of these products - Boards, Freehand and Prototyping - for free option but you’ll be limited to one project, design, and prototype (more or less).

The pro version costs $8 USD per month and will allow you to use unlimited projects.

If you’re using Sketch or Illustrator to design your applications, then you’ll need to factor the cost of their use too. 

Summary

The more I use Invsion and InVision Studio in particular the more I like it. I love its simplicity. 

I also feel the price is more than reasonable. 

If you need to use something with more muscle than Studio, then you have the option of using Sketch or Illustrator.

That said, if you do need to use a 3rd party tool, I suggest you checkout the online collaboration and prototyping tools which come as part of it's respective ecosystem, you may find the tool has better integration with those and is more economic to use that way.