In the beginning there was darkness, and then there was InVision.

InVision is increasingly becoming part of my everyday workflow. I use it all the time. I’m almost addicted to it and this is my love letter to InVision. This is why InVision is important to UI Designers.

Before we begin, I’ve recently launched my design business Bossanova. Please view some of my projects over at bossanova.io, thank you. Right, on with the blog!

Below you will read some points about what makes InVision great for UI designers but more importantly why I use it. From now on I will refer to InVision as IV, as nobody wants to read that brand name over and over.

1.  Create prototypes

This may seem an obvious first point, but the core reason why I started paying for IV in the first place was to create clickable prototypes for my clients. I remember a time when I would export my designs as Jpgs and email them across as attachments, I can’t even recall the last time I did that. I just use IV!

The benefits of creating a prototype are many, but for me the primary reason I build clickable prototypes are to put my designs into my clients hands. They can view them online or download them to their devices using the IV app.

It’s only when a client has the designs in front of them, at full resolution that they will really be able to visualise the direction that I’m taking them. Sometimes, you can open a file and have it at 98% and it just won’t look right, you’re 1px borders are suddenly lacking in life and creates all kinds of problems when gaining feedback. IV stops this by ensuring the designs are displayed correctly.

2.  Easy Feedback

IV is also useful when looking for feedback and comments. Clients can easily create a free account and add as many comments as they like, I’ve had designs with thousands of comments over the course of the project, each can be ticked off and filed neatly for future reference. Another benefit of gaining comments from IV is that you can reply, comments don’t get lost in emails, they’re right there on the page that you’re working on.

I’ve also had projects on IV that have had extensive developer notes added to it, adding a ‘note’ instead of a comment means that processes and requirements can be passed over to those working on the project.

3.  Inspect

When you upload your designs via their amazing free Craft Sketch plugin (also available for Photoshop) IV does something rather wonderful, it takes all the design information and converts it into a language developers can work with.

Inspect turns your Sketch file into CSS code, it can highlight colours, borders, backgrounds, fonts, shadows… you name it, Inspect can let you peak under the hood of your design.

What’s even cooler, is if you make assets exportable by selecting the layer in Sketch ( > Make Exportable ) and syncing your design with IV Craft, those assets will also be available for clients to download as whatever you’ve selected the item to be exported as. This is a life saver as many clients or developers may not always have Sketch installed… but they want you to send them all the assets, well if you keep a nice and tidy Sketch file, making sure you enable exporting for each layer then IV does the hard work for you.

4.  Speed

Anyone who’s ever worked with designing websites and apps in Photoshop will know it can be a time-expensive way to work. If you’ve used Sketch you know that you’re workflow has just been sped up by around 10x. BUT creating prototypes, especially complicated products that have LOADS of pages can also cost you hours and hours of your time.

Fear not, now with IV Craft’s new (ish) Prototype tool within Sketch, you get to link artboards effortlessly. You simply press ‘C’ and drag and drop those pretty blue arrows to where you want the links to go. It really couldn’t be easier. Sure, it has it’s issues and I’d like to see IV enable artboards to be linked via different pages but it is a time saver.

Plus while we’re talking about speed, their Craft plugin let’s you auto generate content for your designs, like images from Unsplash.com and body copy, names, addresses… you can duplicate your content and autofill each duplicated box with different content automatically. If you’re working on an iOS app design, or an Android design then they have library items such as keyboards or menu bars that will speed your design along, it’s so simple. Drag and Drop and within minutes you’ll have a great looking template to base the rest of your design off. (This is really cool for new designers looking to get into UI/IX)

5.  Stay Organised

IV helps you keep your designs organised by letting you add sections to your prototypes, so rather than having a large project with 100’s of images, you can divide them up to be by section, or feature. So next time the client asks you to review a dashboard, you can quickly find it without having to remember where in the project those files lived. Their search is really good too, searches file name which is a huge plus.

PS. Freeland is amazing too…. Part of their Craft Plugin

This only really scratches the surface, I really could go on, but I won’t.

If you want to Join InVision and get roughly a months free service, use this code: http://get.invis.io/mecxh8v

Images courtesy of Invisionapp.com