Editor’s note: This guest post from Val Head, author of Designing Interface Animation, shares workflow tips for motion designers who want to craft elegant and performant UI animations.
Good UI animation takes the whole team.
Making an effort to explain, demonstrate, and discuss UI animation ideas during your design process will make all the difference between animations that add to the user experience and animations that flop. Luckily, there are tools old and new that can help you make animation — and communication around it — truly part of your process without too much extra effort.
Here are four tools that I’ve found are especially useful for communicating animation ideas to your teammates throughout the interface design process.
1. Pencil and Paper for sketching early ideas
OTHER ALTERNATIVES: MARKER & WHITE BOARD
In the early stages of the design process, when ideas are still a bit vague and the possibilities are wide open, sketching can still be your best friend for expressing ideas — even when they’re about motion.
The term “storyboard” means different things to different people. To many, they’re detailed drawings of each frame of a proposed film or video. One of the nice things about storyboarding interface animations is that much less detail or drawing precision is required to create a valuable storyboard. Rough storyboard sketches paired with written notes and conversation are perfect for getting the job done.
WHY — AND WHEN — TO STORYBOARD
Storyboards and sketches are most helpful for answering questions like “Would animation be useful in this flow?”, “How could this state transition into the next?” or to spitball a variety of ideas before committing to specific direction.
Even if it’s just a few frames showing a tap or click and the animation that follows, a storyboard helps make sure everyone is seeing the same thing (or at least nearly the same thing) in their heads.
If you come up with something that everyone loves, you can iterate on it to perfect the details. And if you start down a path that turns out not to be right, you aren’t hugely invested in it yet.
Low-fidelity prototypes like sketching and storyboarding invite feedback and collaboration.
The obviously “in progress” look of sketched storyboards can invite more honest feedback. When you show someone a short storyboard sketch of a UI animation idea, they’re more likely to give you honest feedback and input on the idea which leads to stronger design choices in the end. When you show someone a high fidelity sketch that looks too polished, they may be afraid to give detailed feedback because it looks so final.
Along the same lines, the barrier to entry for contributing ideas at the sketching and storyboarding stage is low. Anyone on your team can sketch out a few frames to show what might trigger an animation and some details of how that animation might look as it animates.
2. Keynote is great for low fidelity motion comps
When you need a way to demonstrate a transition or animated interaction but exact animation detail isn’t required, Keynote can be your weapon of choice. Keynote’s strength is in its extremely low learning curve, and the fact that if you use a Mac, you likely already have it.
With the handy Magic Move functionality and it’s easy to learn animation tools, you can be up and running with Keynote in less than an hour. You can copy and paste your assets right in from Sketch or Illustrator and jump right into animating between states. (Transitions between states is the thing Keynote excels at creating.)
Keynote is great for working fast, but not so great for working on detail.
Keynote is great for working fast, but not so great for working on detail. There are no springs or custom easing curves to fine tune an animation, just a short list of easing presets — and that’s it.
But when the questions you’re looking to answer are more along the lines of “What should move, and where?” or “Will animation be helpful in this flow?”, Keynote can quickly get you to those answers.
By the way, if the idea of Keynote and motion design sounds like a hair-brained combination to you, check out this piece from Linda Dong from a little while back. If Keynote can do that, it can definitely rough out some interface animation ideas!
3. After Effects does high fidelity motion comps best
OTHER ALTERNATIVES: ADOBE ANIMATE (FLASH) OR TUMULT HYPE
It might sound odd to break out tools like After Effects or Flash for a modern web or app project, but they are especially good at creating motion comps (or animatics, if you prefer) to demonstrate how something should animate. With these tools, you can really dig into the details of animation and what those details will convey. Generally the sorts of things that traditional motion graphics and animation focuses on.
Creating motion comps can help answer questions like: “What kind of timing and easing should they use?”, and “How will this animation convey our brand’s personality or values?”. By quickly mocking up the motion in animation-focused tools like these, you can begin to sort out these important details before diving into code or production.
How will this animation convey our brand’s personality or values?
Ideally, you want to be able to make motion comps fairly quickly to flesh out ideas to evaluate and discuss and iterate on them. For that reason, I’d suggest using something other than After Effects for these, if you aren’t already familiar with it. It has the highest learning curve of the three listed above and I suspect (or at least very much hope) that we’ll see a tool with the similar amounts of animation control to After Effects that’s better suited for the interactive space soon.
Despite all the prototyping tools hitting the market lately, nothing has come close yet, but I think it’s only a matter of time.
Motion comps can also be useful for sharing interface animation ideas with the engineers who will implement them. When handing them off, be sure to include some specifics about the motion in the video, like the duration, easing or spring values and iteration counts. It’s really hard to glean all those details just from scrubbing through a video file!
The more of these details you can document (whether that’s automatically with custom export tools or by hand), the easier the transition from video to code will be.
4. Principle helps you make interactive prototypes quickly
ALTERNATE OPTIONS: FLINTO, FRAMER JS OR CUSTOM HTML, JS & CSS
Sometimes the biggest questions you have around interface animation are related to how it will behave or how it will feel to use.
Interactive prototypes are best at answering questions like “How does this animation feel to interact with?” They allow you to perform the actual interaction — tap, click, drag, or other input — that will trigger the animation.
Tools like Principle and Flinto have interaction presets you can use to trigger animated interactions and flow without having to build them from scratch. Framer JS or a custom HTML set up are more wide open in the interactions you can create because they do less of the initial legwork for you.
Interactive prototypes made with Principle or similar to both interactive and high-fidelity prototypes. They can really start to feel like the real thing. They can be used to test out animation ideas internally or with actual users and outside stakeholders, too.
A double-edged sword
The “realness” of interactive prototypes is their biggest advantage, but it can also be their biggest flaw. I find that interactive prototypes are most successful when they’re used to prototype small “chunks” of an app or site. Creating a prototype that explores the animation involved in adding and removing and item from your cart, for example, instead of prototyping the entire checkout flow.
If your interactive prototype covers so much ground that you’re nearly building out the actual app, the time it takes to build that prototype could start feel like a waste. Focusing on prototyping smaller chucks can help you avoid sinking more time than is useful into prototype.
Prototyping In Practice
All of the tools listed above can be a huge help for getting UI animation right. But, there’s no requirement to use them all.
Every team works differently, so pick the one(s) that sound most suited to the way you work. Some teams go straight from storyboards to production code, while others skip right to interactive prototypes.
By calling attention to the animation decisions you make, and dedicating time to getting them right as a team, you’ll create higher quality interface animations with fewer roadblocks along the way.
For more on tools and approaches to make animation part of your process, check out Val’s new book Designing Interface Animation on Rosenfeld Media. Or join her on the weekly UI Animation Newsletter.