Mobile Prototypes With InVision Craft

Better, faster, stronger

Prototyping tools have gone from nice-to-have to essential in most workflows. They inform smarter design decisions by showing the work in context. We received beta keys for the new Prototype feature in Craft, InVision’s Sketch plugin. A few hours into tinkering with it and we’re dreaming up ways to utilize it on projects.

Prototyping Quick and Dirty

Prototyping is super effective for quickly making designs feel like a fully realized interface. By keeping visuals a little rough, simple prototypes allow you to quickly make changes and explore more solutions. Often the early portions of design can be spent mulling over design decisions while only viewing it on artboards inside Sketch. Quick prototypes provide a change of scenery and valuable context into how the design works.

Every interface designer makes numerous assumptions about how their design will be used and what their users will be thinking. Quick prototypes make it easier to test those assumptions right away.

Craft Prototype syncs with your phone by USB or wirelessly over a local network and design changes are reflected in the prototype in seconds. A lot of great ideas get even better when small tweaks can be made to improve the usability.

See an example of a menu interaction.

Craft Prototype is dead simple. I quickly went from messing around in a test file to prototyping a current project in 15 minutes. The plugin feels like magic by omitting the complicated exporting process to the phone — it’s all handled within Sketch.

Sketchy Prototype Workflow

We’ve used multiple tools in tandem to create a usable prototype. Often it takes jumping between two or three separate applications to realize a vision of the interface. It’s a workflow that gets tedious quickly, especially when refining the small details like typographic leading or button color. Keeping a lot of those steps within Sketch makes everything so much more efficient.

Prototype interactions in seconds with a few clicks.

A prototyping tool directly in Sketch is straight-up wizardry. The Sketch integration doesn’t make the entire workflow feel cumbersome—amazing.

There could easily be an overabundance of features that bloat the prototyping process and make it annoying to use. With only a hotkey and a few mouse clicks, you’ll have a hotspot linked up and ready to go. Page transition options are straightforward presets, enabling a lot of flexibility without worrying about tons of choices.

After setting up hotspots you’ll have something like this.

Making The Experience Real

Design software doesn’t give the designer a good sense of how an interface is used in context. Typically you have a bunch of artboards that represent various screens. Certain details might seem ideal inside Sketch but impractical when using it in context.

We’ve found that Craft Prototype is a lot more than just linking screens together. Each interaction can be tied to a gesture, like tap or slide, making the whole experience feel more native to the device. There are enough transition options for the prototype to feel like a real app without slowing down the process.

Here’s the final prototype in action.

Stuff We’d Like To See

We’re really stoked about using Craft Prototype on more projects. It perfectly fits into our workflow and already improved some products. With anything there’s always room for improvement, so here are a few things we’d love to see in the released version.

Desktop prototyping:

Prototyping software focuses heavily on mobile experiences. Craft Prototype would stand out above the competition by expanding to other platforms.

Hotspot presets or repeatable styles:

InVison’s web interface provides options to apply templates to multiple pages. Since designs commonly repeat interaction patterns, template presets or styles would further streamline the process.

Options for sharing prototypes:

Prototypes go directly from Sketch to phone for viewing. More valuable collaboration would be possible if anybody with access could view prototypes.

Improving The End Product

Our workflow and projects have been streamlined by implementing newer tools like this. Are you using Craft Prototype or another tool? We’d love to hear what what works for you.

Kyle is a Digital Designer at Parliament where he helps brands like Icon Motosports crush it, hard.