I've made animated prototypes for my General Assembly UX Design project, here's a video showing me using it, and the steps to make your own.  It's pretty fun!

Introduction

After numerous iterations of sketching and wireframing, and with my course end date quickly approaching, I decided to make some Material Design mockups of my course project, Fate.

(Fate is an app that saves you money by helping you stop buying food that you never eat.  It begins with a smart food bin that tracks what you waste, to then feedback to you what you shouldn't buy when you're next in the supermarket.  You can read more about it here: www.willjohnsnow.com/index.php/work/fate/)

The next step in the course is user testing, and I really wanted to sell the experience of using the app as much as possible, which for me meant animating the interactions in my mockups.  Simple PNGs wouldn't cut it - I'd have to use animated GIFs instead.

The principle is the same as using regular PNGs for prototypes using Marvel (www.marvelapp.com) - marking your hotspots and linking to other screens.

With animated GIFs, you have to think a bit more - begin your GIF with the interaction animation playing out and then end it on the next screen they'll interact with.  There's not (yet) an option in Marvel for a hotspot to link to a GIF, play that GIF through and then jump straight to another PNG, so this is your best option.

You'll make your hotspots on that final ending screen of the GIF, which technically means the user could press the hotspot mid-animation, but you'll just have to hope they don't.

Make sense?

Here's what I did, and how you can do it too:

The Guide

First, know your destination.

Before making your mockups, you first should know what tool you'll be using, and what device you'll be trying your prototype on, so that you can get the correct image dimensions for each of your mockups.

I decided to give Marvel a go (www.marvelapp.com).  Once you create your prototype project with them, you can visit its page on your mobile, which gives you the option of "Adding it to Home Screen" so you can launch it like a proper app.

I had to go this route as animated GIFs wouldn't work properly on my phone (a Nexus 4) using Marvel's Android app.

Launching the prototype from my home screen meant that both the soft nav buttons at the bottom, and the Android status bar at the top of my phone screen are present when viewing my prototype.

The resulting screen space I'm left with is 768 wide by 1134 high.

I worked these out by taking a screenshot of my phone and measuring the image in Photoshop.

Getting these dimensions are vital, because if the image is too long, the user will have to scroll to see the rest of each screen ... which massively ruins the illusion of using an actual app.

(As a side note, the dimensions I used means when viewing the prototype on Marvel, using a desktop browser, the prototype doesn't fit properly inside the phone skins they offer.  Annoying, but for me the main priority is to have a prototype properly fitting my phone.)

With your dimensions set, you can then...

Step 1: Create Mockups

I used Adobe Illustrator to make my mockups, after trying both Axure and OmniGraffle (have a PC but want to try OmniGraffle?  Read my how-to guide here: http://willjohnsnow.com/index.php/2015/06/23/omnigraffle-on-a-pc/), I just wanted to use something I was used to and quick with.

Annoyingly, bringing Illustrator files in to After Effects doesn't work, so once I made my mockups, I had to export each element as a PNG (just make a new document and copy from your master in to there, then export from there.)

Step 2: Animate!

After Effects is a wonderful application, and one I've enjoyed using for many years.

Animating app interactions is so simple, just movement, scale, rotation and opacity really, and the PNG elements render so quickly, you can create a lot of wonderful animations in no time at all.

(I used a framerate of 24fps for my animations, but so long as each animation is only a matter of seconds long, I think you could push it higher.  My resulting GIFs play a little stuttery, but I don't know if that's because of the framerate, my phone, Marvel or all three.)

You can't export to GIF from After Effects, instead you have to export as a Quicktime (using Animation format) and then fire up..

Step 3: Photoshop to make GIFs

If you go File > Import Video to Layers, you can bring in the Quicktime file, then go File > Save for Web... to bring up options for making a GIF.

Make sure you set the looping options to Once, not Forever, so the animation plays once then waits on the final frame.

Also, as we've just used simple colours for our interface, the GIFs will be a small file size.  (I used a photo of a receipt for some of mine, in which case I had to limit the colours to 64 and raise the lossy from 0 to 20, but it still came out at over 11MB for a GIF - ouch.)

Save the GIF, then...

Step 4: Upload GIFs to your Marvel project

www.marvelapp.com is a great (free) website to link together your screens to make a prototype.

Marvel provides numerous options for great transitions between screens, but animated GIFs are great when there's stuff happening within a screen that you want to show to really sell the experience of using the app.

Create your hotspots on your GIFs just as you do with regular PNGs and voila, when you play your prototype you'll have some great animations!

You can view the finished prototype in a browser and choose a phone to 'play it in', but you can't beat actually using the prototype on a phone itself.

On your phone, open a browser and go to your Marvel project, and then follow their instructions for adding it to your homescreen.  If you measured your screen correctly, you should now have your own prototype fitting in your phone screen, with awesome animations... enjoy!

Brucie Bonus:

Have a Chromecast?  Cast your phone screen while using your prototype to a TV screen for a kick-ass demo of your app.  Finger/Thumb taps won't show up, but it's pretty cool!

My Prototype

The Fate interface is made up of three main tabs - only 2 are shown here.  Once I've finished the third one, I'll do a proper video walkthrough of the app.

The scenario here begins with Fate recognising the user has entered a supermarket, and notifies them it's available to help the user shop for what they need - not what the supermarket is trying to sell them, or whatever impulses they get:

This kind of work shouldn't be done while sketching and wireframes are still being iterated, but with my course nearing an end, and with user testing coming up, I wanted to something a bit interesting to show.

Plus - it was great fun to do!