Welcome back to our blog series on UXD tools we use at CRi. This time, we’ll be talking about the prototyping tools we use. If you missed our first UXD Tool Spotlight, we talked about using Sketch App, which is a vector design program designed specifically for user interface designers.

Today we’re looking at InVision and their plugin for Sketch, Craft. InVision is a prototyping tool that works seamlessly with Sketch, has nice communication and collaboration tools, project management tools and a design-to-development handoff platform. Craft is a Sketch plugin created by InVision that makes syncing with InVision fast and helps to generate content quickly.

Why InVision for Prototyping?

There’s a handful of good prototyping tools. We’ve dabbled in an array of tools such as Proto.io, Origami Studio, Pixate and a few others. Some of these are direct InVision competitors. Others, like Origami Studio, are more for individual detailed interactions, as opposed to building out an entire app.

So, back to the question, “Why InVision?” We started using InVision before the Craft plugin was available. Even then, it was quick to import Sketch files and get a prototype set up quickly. With the addition of Craft, it became even faster with exporting screens and setting up hot spots directly in Sketch. Now you can build an entire prototype without even leaving Sketch. We felt the built-in interactions better suited our needs compared to competitors. And everything seemed organized and intuitive.

How does it work?

I’m going to walk you through how to use InVision via the Sketch plug-in, Craf. Remember, this can all be done manually through InVision’s website as well if you’re creating mockups using another tool.

1. Create your screens

Simply create your screens how you normally would. Organization is helpful, especially when naming art boards. Keep in mind we will be using layer elements as hot spots. Once you have your screens designed and laid out, it’s time to link them together.

2. Create hot spots

This is where Craft comes into play. With Craft installed and enabled, you can click on any layer and hit “C” on the keyboard to turn it into a hot spot. You then click on the screen you want to link to, choose the interaction (such as tap or swipe), and transition. Many native transitions like push left and right are provided. If you have one layer copied on multiple screens and they all link to the same screen, simply copy and paste and your hotspot will paste with it. Once all screens are hooked up you’ll see arrows from layers to screens to help visualize the flow.

After selecting the “Show More” layer and pressing “C” on the keyboard, you can select the Expanded artboard and select your gesture and transition.

After linking your layers to artboards you can see the flow, shown as arrows.

3. Export to InVision

You will need to make a new project in InVision, or select an existing one. Select your project in the Craft menu and export. Make sure to include hotspot when exporting.

 

Remember to select “Include hotspots when syncing”.

4. Finish Setup in InVision

Final things you’ll want to make sure of is setting fixed headers and footers if you use them, such as the nav menu at top or a tab bar at the bottom. You can also configure things such as device, status bar color, upload an image to use as splash screen and upload an icon that will be used as the app icon.

 

Set your final settings on InVision’s website, such as fixed headers and footers, status bar color, etc.

5. Test Your Prototype!

You can do this in a web browser and click through instead of tapping. Or you can share the link to your phone and open it in your browser. You can then “Add to Home” and it will place an app icon (the one you set before) on the home screen. Now when you launch it from the home screen, it doesn’t show any of the browser UI, just your prototype.

For most realistic experience, view the prototype link and “Add to Home Screen” to place an icon on the home screen that will launch without browser navigation bars. The app icon is the icon you set for the project.

Spend a little more time and you can build dozens of pages, link them together and have a prototype so realistic you’ll have to convince people it’s just static images. Play with different transitions, setting scroll positions, different interactions and create rich experiences before a developer even touches it.

Use it to test with users, demo to your stakeholders, or show it to devs so they know exactly how screens should relate to one another.

Oh, this can all apply to the web also and works extremely well there too. Simply share the public link with stakeholders or future users and let me navigate through the prototype first hand for the most realistic experience.

What else can InVision do?

Well, the fun doesn’t stop there, but this article does. We’ll save that for another time. Can’t wait and want to learn more about InVision and Craft? Visit www.invisionapp.com. Want to learn more about Sketch? Read last month’s article Sketch App – UXD Tool Spotlight.

If you want to interact with the prototype example in this article, visit https://invis.io/72CP8FYV8

 

If you want to learn more about our user experience practice and how it fits into our custom website and mobile app development process, visit our User Experience page.

Sean Davis
I’m a User Experience Designer who’s been with CRi since 2015. I have years of experience in interface design and have a degree from the University of Nebraska concentrating in graphic design. In my free time I nerd out about fonts, dream about interior design and get my hands dirty working on cars.