If you like this post consider signing up for my newsletter
Animation video courtesy of Creative Dash
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.
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 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 A powerful little tool for managing CSS animations. Stack animations, create cross-browser blurring, set callbacks on animation completion and more.
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.
Although not great for really animated prototypes, you can create pretty solid interactive prototypes using Keynote and Keynotopia templates.
Using Tumult Hype, you can create HTML5 web content, interactive content and animations. Tumult Hype works on desktops, smartphones and iPads. No coding required.
TAP- Fireworks touch prototype tool for iPhone, iPad
Fireworks prototype work for the Apple iPhone and iPad by Unitid.
Create interactive animations and clickable prototypes. Proto.io.
Prototyping and collaboration for design teams. InvisionApp.
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.