How to Quickly Create an Animated Mobile Prototype

Imagine me holding a ball. Now imagine me dropping the ball.

What did you see? I am sure the answers will vary depending on the person.

Describing an interactive process with a static medium leaves us open to misinterpretation. In this piece, I’ll explain how to use animation to create more useful mobile wireframes and prototypes. Feel free to follow along in UXPin with a free trial since this is a hands-on piece.

When it comes to mobile, there is always an interaction before there is motion: Touch a button and something moves. As explained in the free Guide to Interactive Wireframing, we usually use the techniques shown below to demonstrate motion and movement in a wireframe: 

Figure 1: Annotating motion in UXPin .

In the top image, the interaction is a “Tap”.  Tap the button and the next screen appears. The middle one is a bit more explicit by adding the word “TAP”. In the bottom example the interaction is a “Swipe”, as indicated by the arrow. We all understand that.

What we don’t understand is how we get from screen-to-screen with a tap or a swipe. Does the next screen magically appear?Does it zoom in? Does it zoom out? How fast is the motion?

Now comes the fun part: Try explaining that to the client or others not involved in the process. Each person will “see” it differently.

Rapid prototyping just might be the solution

You don’t normally tackle animations when you’re wireframing, but it can be helpful for complex designs (like mobile apps with plenty of microinteractions).

Photo credit: UXPin based on Tyler Tate via UXBooth

A common UI/UX workflow starts with a lo-fi wireframe and works towards a functional prototype. As we move through the process we start with a simple “Here’s how …” and finish with “Here’s what …”.

With interactivity and motion, the “Here’s how …” starts with initial motion concepts and, as we move toward the “Here’s what … “ , the motion becomes more refined as time,speed, distance, easing and effects such as zooms and opacity changes are added and tweaked.

Does this mean extra work? Not really. Let me show you how to do it. 

Creating a Rapid Animated Prototype

In this demo, you’ll learn how to make an interactive iPhone prototype with working, animated icons. The end result will feature a button that, when clicked, transforms into a new app view. 

The goal of this rapid animated prototype is to help visualize how content might move around in a design. It’s not going to be visually polished, but that’s OK. We only want to communicate the behavior of the animation as quickly as possible.

Using the collaborative wireframing and prototyping tool UXPin, we’ll cover common concepts including:

Creating elements
Ruler guides
Corner radius
Colors
Alignment
Groups
Advanced animation

If you haven’t already, go ahead and start a free trial, then follow along below.

1. Create a New Wireframe

We’ll start the project as a wireframe, and turn it into a prototype as we add interactions and animations.

2. Add a Phone Element

You can scroll through the library of elements — or type cmd-F (Mac) ctrl-F (Windows) to bring up the “find an element” search field. Find and click the phone body.

3. Resize the Phone

The phone is pretty big by default, and may not be fully visible on your screen. If so, tap the “properties” icon (circle-i) to enter exact measurements based on whatever fits your screen.

4. Define a Consistent Working Area

Drag guides out from the rulers to the edges of the phone’s screen. We’ll use these to help us resize the button’s background exactly where we want it.

5. Give the Phone a Background

The phone element’s “screen” is transparent by default. We want to make that black, which will contrast well with the animated background to come. Add block element to your wireframe, then resize the box to fit within the guides, and color it black.

 

6. Make a Button

Add another light blue box, sized appropriately, and set a corner radius of about 10px.

7. Make More Buttons

To duplicate the button, hold down the option/alt key when you drag the icon. Do so three times to make a row of buttons.

8. Distribute the Icons Horizontally

Getting icons perfectly even isn’t easy by eye, so select all three buttons and use the  “distribute horizontally” function, in the alignment toolbar at the top of your screen, to put the same space between all three buttons.

9. Center the Buttons

Let’s get picky with our pixels and center the row of buttons in the black screen. To do so, group all three buttons, select the group and the black screen, and finally choose the “horizontal center” function.

10. Make Many Rows

Like option/alt-dragging one button to make a row of three, you can option/alt-drag the group of three to make a series of rows.

11. Add an Action

In this demo we’ll make the upper right button animate.

Start by ungrouping the top row and selecting the right-most button. Then tap its “interaction” icon — the button with the lightning bolt. Finally, click “add advanced animation.”

The advanced animation editor comes with a “start” state (what the screen looks like before the user taps a button) and a step one (what happens after the user taps). Make sure you’re in step one.

12. Make the Change State

Changes in each step indicate what will happen when users click the button. In this case, the button itself will change its size and shape: remove the button’s border radius and resize the button to fill the guides.

13. Make the Close Button

The best way to return to the default state is to make a new advanced animation within the button’s advanced animation.

To do that, find the bottom left button — that’s tricky because it’s the same color as the new background, but if you click in the right spot, its handles will appear. Fix that by making it a darker shade of blue.

14. Give the Close Button an Action

This part’s easy.

Click “advanced animation” in the close button’s interaction menu. Then click to step one. Notice how the screen has reverted to its icon-full, black-background state? That’s exactly what we want. Just click save — and that’s it.

In this demonstration, we’ve created an animated iPhone wireframe in which one button expands to fill the screen, and another button resets the demo.

Try it yourself and you’ll see why animations are cool: they let users see exactly what their actions do.

When you’re done and want to share the interactive wireframe with someone on their device, just just click the “share” button  on the top, right hand side of your screen and then click the SMS tab. Type in the phone number, and go ahead and send the interactive wireframe.

 

Alternatively, you could also generate a QR code or send the design to the person’s email.

Next Steps

Wireframing motion is not time consuming but whether to add it to your workflow depends upon the budget, complexity and scope of the project.

There are, however, a few advantages to the technique:

It is iterative – You can easily change everything from timing to the very nature of the motion. For example, maybe the images should move from left to right or from top to bottom. All you need to do is change the positions in the UXPin interactions panel rather than starting over.


It is visual – Being able to show motion is a lot more precise than describing motion.


It can be refined – Yyou can concentrate on how things move throughout the entire process from wireframe to prototype. You can “tweak” the motion established at the start of the process rather than adding it as an afterthought later on.


You can play low risk “What If …” games – The very nature of this technique is it is iterative. By using boxes and circles you can quickly answer such questions as “What if the images bounced into place?” or “What if a button shrinks or expands when it is tapped?”

Now it’s your turn. Practice what you’ve learned by playing with UXPin with a free trial.

You’ll see that animations in wireframes and prototypes don’t just help you communicate ideas better — they also help you explore interaction design much easier. Considering how today’s most popular sites and apps are rich with animation, you definitely want to get started as soon as possible.