Create Uber Fast Prototypes

Quick hack to show interactions

Cardboard: Great for Prototypes, Not Great for Water

There are plenty of prototyping tools out there. In my own work flow, I use Atomic (check ’em out). Yet, I find those are best used for higher fidelity prototyping since they take a good amount of time to build.

Lately, I’ve been using a hack that involves a Sketch plugin, browser tabs, and CloudApp. The end product is a 5–10 second GIF. This method has limitations, but it’s great for illustrating a point. To get started, first download Cloud App and the Sketch plugin that previews a Sketch Artboard in a browser tab.

1.) Create the steps in the sequence as Artboards in Sketch.

Two Artboards in Sketch

2.) Export the Artboards to your browser using the plugin Sketch Browser Preview.

In the example below, I’m using Chrome.

3.) Cue up Cloud App and select the area that you want to record.

4.) Hit Start. Tab between all of your Artboards, starting with the first frame in your sequence. Hit Finish after the last tab.

If you don’t want your cursor to appear in the GIF, make sure that it doesn’t go into the white area that’s recording. In this case, I do want my cursor to appear.

5.) Voila! A GIF that illustrates your sequence.

CloudApp will create a link to view your GIF. You can then drag it onto your desktop for easy sharing. Here’s the GIF I made below that shows what happens when you click on “View Product Details.”

Hope this helps other people create quick prototypes, too. Let me know in the comments if this worked for you. Also, if you have any other ways you’ve found to mock up an interaction, I’d love to hear about them.

Thanks for reading!