Communicating Animation Ideas

This post is inspired by a conversation I started on Designer News. The more and more I design mobile apps, the more I’ve come to understand that communicating animation ideas is really important as well as really challenging. Static mockups, whether mobile or not never tell the fully story. The two main things I’ve found that help the most when implementing designs for mobile apps are: communication and animation examples. Communication meaning clearly articulating the vision of the animation and examples meaning, giving examples of your animations ideas and visions. But what if you want to take it a step further and as a designer, work on defining specific interactions before development? I’ve had some conversations and done some research that I’d like to share with you.

The Best Results Require Some Amount of Coding

There are many animation tools and libraries but not many (or any) that really help you animate your app with no coding. The best animations look as if they’re a real app – to the point where you can’t tell the difference. This just can’t be done without code. The closest thing I’ve found is Flinto. As for transitions, Flinto supports: Push Left, Push Right, Slide Up, Slide Down, Flip Left, Flip Right and Dissolve.

You can really utilize Flinto to the fullest extent for using it during the wireframe stage, which helps to visualize how users will get around your app. When presenting to clients, this will make seeing the app in visual design for the first time much easier to comprehend.

For example, here are two screens of a wireframefor an app. Using Flinto, I can start to show how the user gets around even during the wireframing stage; in this example, the sidebar only. (view in Flinto).

And here is the same app, visually designed. When the team or client sees this again, they’ll be seeing it for the second time and will already have a comfort level with understanding what’s going on. (view in Flinto).

Flinto is great for conveying basic transitions but doesn’t yet support more complex animations like bouncing, shaking, flipping and easing, etc. However you can use animated GIF’s in Flinto to add additional interactivity.

Adobe After Effects

After Effects lets you import slices from PSD files and animate them. There is undoubtedly a learning curve if you’ve never used it. The payoff is you can do literally anything from an animation point of view. If you ever used video editing software, you mind After Effects easier to learn. Other people have mentioned using some combination of After Effects, D3.js and Quartz Composer for the purposes of creating varying levels of interactive prototypes as well as Motion 5 by Apple.

Framer.js

In their own words, “Framer tries to solve some of these problems by providing a very lightweight framework modeled after larger application frameworks.”

Framer requires some coding but not as much as if you were to do it on your own from scratch using some combination of HTML, CSS and jQuery for example. Framer allows you to design and build prototypes in the browser and the basic idea is that you only need a few simple building blocks like images, animation and events to build and test complex interactions. For a quick example, check out this Facebook news feed.

Creating Animations From Scratch

This also yields very good results as you have full control, however it requires a pretty good knowledge of front end development. There are some fantastic libraries for helping with the animations.

Animate.CSS

“Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.” The best way to see what they’re talking about is to go to the site and begin clicking around on different animations.

Animo.js

Precomposed Touch Gestures

Precomposed Touch Gestures is a set of basic, precomposed touch-device gestures in a neatly organized zip file for you to use in product demos or presentations. These gestures are available as raw Quicktime animations. They’ll work in your video editor, and Photoshop.

More Solutions

Keynotopia

Although not great for really animated prototypes, you can create pretty solid interactive prototypes using Keynote and Keynotopia templates.

Tumult Hype

Using Tumult Hype, you can create HTML5 web content, interactive content and animations. Tumult Hype works on desktops, smartphones and iPads. No coding required.

Proto.io

InvisionApp

In Closing

If you design mobile apps and you’re looking for ways to animate your interactive prototypes, you may want to figure out which solution is best for you and take the time the learn it. The up front time investment will allow you to communicate better with clients, teams and developers.

Like this? You should sign up for my newsletter.

9 thoughts on “Communicating Animation Ideas”

I love animations! Although I am not using them for iOS prototypes but directly on websites. I dug my self into Adobe Edge Animate (http://html.adobe.com/edge/animate/). It’s rather easy to use compared to After Effects.

Jess – excellent post and a fantastic collection of extremely useful tools. I’ve been using InvisionApp for a few weeks now and love it. It’s not quite as polished as Flinto, but the prototyping aspect will get better. Where it really shines is having the ability to collaborate with developers and product managers alike…

Hey there! Thanks for this article, it’s really helpful (since I am trying to figure this topic out as well).
I would maybe add 1 tool you’re not mentioning – Pop (https://popapp.in/). It’s kind of like Flinto and InVisionApp but directly in your phone (you can actually take pictures of mockups and create transitions in Pop). It also has all the basic animation transitions.
Can be very useful on the first stage of design but I also used it with final mockups that gives even a better idea.

A good article, though I don’t agree with this part: “…many animation tools…..not many (or any) that really help you animate your app with no coding……This just can’t be done without code”.

It can be done without code!
You can create some super-realistic “animations that look as if they’re a real app – to the point where you can’t tell the difference”, BUT ONLY if you master your animation tools (After Effects, Flash, etc) and know your platform coding capabilities and limitations (you don’t need to code but you need to know what your coding platform permits), plus you have a strong understanding of animation theory and insights: timing, easing, transitions (types, where/when to use them) staggering, delays and so on.

When animation are done at full depth and at a professional level, the results will stand as main guidelines for the developers when they implement them into the app/web.