Motion design is more important than ever in our digital interfaces, and it's also one of the top skills for 2020. We’d like to help get you started by answering:
• Why should we care about motion design?
• Which program should we use?
• How's the handoff to our developers?
In 2019's edition of From Business to Buttons, FBTB, the animation guru Val Head – who's an author and design advocate specializing in UX and UI animation at Adobe – talks about how motion design needs to deliver on two qualities to create value – purpose and style.
Purpose
With purpose, Val Head means that animation should help its intended audience by, for instance, making the experience more visually appealing or intuitive. In her book Designing User Interface Animation, she lists several design principles to achieve this. In her presentation at FBTB, Val Head talks about the three perhaps most important ones.
Continuity – make it easier for the user to navigate and understand how the interface is built.
"Alarm app animation" by Anton Skvortsov.
With motion design, we better understand how we're allowed to move in an interface - and what happens while we do it. The creator of the game Black Box Puzzles Ryan McLeads, who's also the author of "Animation Handbook", adds that motion design creates its most significant value when we use visual cues and understandable changes.
Read more about animation in Ryan McLeads book here.
Feedback – tell by showing.
"Feedback & status" by Google.
"Download button" by Hoang Nguyen.
By using animation, it's possible – with natural timing – to give visual and informative feedback that may show the status of a user action. That allows us to not only provide information in text form but also tell by actually showing the user.
Read more about how animation may be used at Apple's Human Interface Guidelines.
Direct attention – show change without distraction.
"Application for amateur musicians" by Daniel Prokoiuk.
"Icon animation" by Simon Le Roux.
When used correctly, animation should focus the users' attention on what's essential without causing unnecessary distraction. By making our animations more or less prominent, we may put more emphasis on crucial information while we tone down what's less fundamental.
Read more about Google works with motion design here.
Style
Animations should reflect our physical world to appear pleasant and natural in our user interfaces. While several principles help us achieve this, the perhaps most common one is timing - also known as the control for when and how long elements animate.
Read more about easing at InVision's blog.
Timing together with 11 other principles makes up the foundation for animation, regardless of whether it's for a digital product or a movie. These principles were first introduced in the book "The Illusion of Life: Disney Animation" from 1981, written by Frank Thomas and Ollie Johnston, which still is considered by many to be the best book on animation. Out of these 12 principles, Ryan McLead lists seven of them as vital from UI design.
Read more about the seven principles in the Animation Handbook.
For more examples related to the principles, please refer to this and this article for more information.
Something crucial when designing animation for a user interface is to make them accessible and pleasant for everyone. While it might be a lot of fun to create an advanced and animation-heavy interface, it doesn't always result in an enjoyable experience for the end-user. To better understand how to better apply animation without causing pain, please refer to Sophie Paxton's excellent article "Your UI isn't a Disney Movie". Further, InVision's designer Pablo Stanley has also listed some common mistakes related to motion design.
What program should we use?
Ever since Apple launched the App Store in summer 2008, digital design has continued to snowball, and as time passes, more tools appear with the ambition to make us even more productive. As always, there are no right or wrong answer for which program's the best when it comes to animation, but we hope that we might be able to guide you and give some suggestions.
Choose the design tool that you're comfortable with
Regardless of whether you usually use Sketch, Figma, Adobe XD or another tool, you'll always be able to apply some kind of animation to your design without having to pay up. Therefore, my recommendation is simply that you use the program you're the most comfortable in. I'll provide some pros and cons for different kinds of tools in the upcoming sections.
All-in-one tools
When a tool is labeled as an all-in-one-tool, they should handle the following:
- Design - it's possible to visually create an interface.
- Animation - you're able to make your design move.
- Prototype - if need be, you're able to make your design interactive and life-like.
"Card" by Charles Patterson, created with InVision Studio.
"Auto-animate" by Eugene Olefir, using Adobe XD.
Example shot from the app Drama.
Other all-in-one tools are:
Pros
- Easy to get started.
- The combination of animation and prototyping is powerful (especially when doing tests).
- These kinds of tools often allows team collaboration.
Cons
- All-in-one tools usually don't come with a lot of advanced animation features.
- The handoff to developers isn't always intuitive.
Sketch
One of the most popular design tools is Sketch, which in itself doesn't allow any kind of animation at all. Instead, you're forced to use an additional program such as Principle for Mac or Flinto. Additionally, you may create animations within Sketch by using the plugin Anima.
Finally, it's also common to use Sketch together with the by far most powerful animation tool After Effects which I'll write more about further down.
Pros
- Many different programs can open Sketch files.
Cons
- From my experience, Sketch files break every now and then when opened in a different tool (especially symbols as well as text and layer styles).
- It might become expensive to pay a lot of software.
- It's time-consuming to keep track of different files.
Adobe's After Effects
When it comes to animation, the by far most potent tool is called After Effects.
"Pure product page" by Natalka Smoczynska.
"Fall in love" by Anton Skvortsov.
"Savage iOS UI Kit II" by Anton Tkachev.
If you'd like to dive into After Effects, I recommend that you design in either Sketch, Figma or Photoshop/Adobe XD as they bridge well together. If you're using Sketch or Figma, you should download the plugin AEUX as it allows you to export your files straight into AE. Contrary, if you're using Photoshop or XD, I recommend that you watch these tutorials by uxinmotion.com to learn how to export your files into After Effects.
Pros
- The tool that, by far, gives you the most freedom to create exactly what you want related to motion design.
Cons
- You're not able to create an interactive prototype (only concepts).
- Some things that are really easy to do in an all-in-one tool might take a lot longer to do in AE.
Read more about how you may work with Sketch and AE here.
InVision Studio
If you're curious about motion design and want to quickly try it out, I'd recommend that you download the all-in-one tool InVision Studio as:
- It's free.
- They have spent a lot of time on animation.
- It's possible to import Sketch files.
Many of the developers and designers behind InVision Studio are also generous and often share their files, making it easier to understand the features and possibilities of the tools. For instance, all the examples in the Animation Handbook are available for download, and I also recommend checking out Charles Patterson's Dribble account for more material.
Developer handoff
Something that's always been a big challenge within motion design is developer handoff – especially since the difference between good and bad animation might be a few milliseconds. For now, the best solution seems to be to work in either InVision's Studio Cloud, Framer or After Effects.
Accessibility
As mentioned earlier, a vital part of motion design is accessibility, and the user should always have the ability to reduce or altogether disable animations. From a coding point of view, you'll find guidelines and best practices connected to accessibility and motion design here.
Tools
- For CSS-ready easings, I recommend checking out the website Easings.
- You're able to produce code-ready animations in After Effects for native apps using Airbnb's Lottie.
- The best way to produce good developer handoff is, of course, to start coding yourself. I recommend using CodePen for both their online editor and community.
Final words
I hope you find the material linked in this article useful, and that it'll help you get started with motion design. As a last treat, I'd like to share some additional material that I think will motivate and inspire you even more.
- Our 18 best posts on animation and motion design – InVision
- Behance's Interaction Gallery
- The UI Animation Newsletter
- UI Animation After Effects courses for UX/UI & Product Designers
- Getting started with UI motion design by Molly Lafferty
- Top 4 skills for designers to learn in 2020 by Dribbble.
You know that inUse Academy gives courses at your home pitch – check it out!