Blog


Get started with motion design

Jonatan Andersson

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.

"Furniture mall" by JIANGGM.

"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.


You know that inUse Academy gives courses at your home pitch – check it out!

Mike Monteiro is back at FBTB

Johan Berndtsson

First he taught us how to present our work with confidence. Then he taught us how to fight fascism. Now – after writing one of the most important books on design in the 21st century – Mike Monteiro returns to From Business to Buttons.

"We built the engine that broke the world. We built the machines that turned vitriol into profit for bankers and billionaires. And we turned a blind eye because of the crumbs falling from their table. But as the window closes on humanity, and we finally realize the error of our ways, do we have a shot? Can we turn things around? Is there even the smallest sliver of hope? Possibly. But you're not gonna like it."

Every year we ask the participants what speakers they would most like to see at From Business to Buttons. Mike has been topping that chart ever since he last visited in 2017. His previous talks also hold two of the top five spots in the history of the conference.

This is something that you definitely do not want to miss.

Mike Monteiro is the co-founder and design director of Mule Design. He prefers that designers have strong spines. In 2019 he published Ruined by Design, a book on design ethics and activism. He believes workers have a right to unionize and a responsibility to improve society. He's done with your excuses.

The Early Adopter price is about to end. Save €100 and get your tickets before December 20!

Get tickets for FBTB2020!

inUse keeps developing

Ola Nilsson

inUse is developing and more people are getting on board. Say hi to five new great colleagues that have joined!

From the left in the picture:

Maria Kougioumoutzi, Experience Designer, Stockholm

Shinae Kang, User Experience Designer, Göteborg

Ida Hägglund, User Experience Designer, Göteborg

Lotta Gerdt, User Experience Designer, Stockholm

Sanna Möller, User Experience Designer Malmö
 


And... We are looking for even more stars. Check out what we are looking for right now!

Speaker number 4 at FBTB2020... Indi Young!

Johan Berndtsson

She is the author of Mental Models and Practical Empathy, and founding partner of Adaptive Path. We are so proud that she will be one of the speakers at From Business to Buttons 2020.

In tech culture, everyone is hell-bent on coming up with answers and solutions. We all assume we know what the person's problem is: make everyday life more efficient, keep track of information, get more productivity out of a day, coordinate teams better, etc. Rarely does tech culture start at the very beginning, understanding the variety of approaches real people have to their real purposes and different moods and contexts. Instead, tech starts with an idea – a solution – and builds it into experiments to see if the idea solves the imagined "problem."

Sound familiar? We can't go on solving things based on our own thin understanding of how others perceive the problem. We can’t go on assuming everyone is in the same mood and context. There is no one-size-fits-all solution. Indeed, we have done a lot of accidental harm in the world with the assumption that the tools we design are “neutral.” We need to get better at paying attention. We need to slow down and gather a richer, more nutritious understanding of the people we are trying to support. And we need to point a beam of light into possible future outcomes. 

Let’s put equal emphasis on the problem. Spending equal time in the problem space generates rich understanding. Understanding the depths, perspectives, horizons, and histories of the way people achieve their purposes opens up loads more opportunities. We can begin making solutions that eschew “engagement” to truly support different people in different ways.
 
The problem space deserves more attention and a slow cycle all of its own.

Indi Young is a speaker, writer, and UX researcher. She empowers makers to know their problem space, and create inspired product designs through empathy and deep understanding of peoples' purposes and variety of approaches. She is the author of two books, the design classic Mental Models and the newly released Practical Empathy. Her online courses, training, and personal coaching bring empathy to the designer's table, building knowledge of users' needs that goes beyond the data. Indi is also a founding partner of the UX pioneers Adaptive Path (acquired by CapitalOne).

The Early Adopter price is about to end. Save €100 and get your tickets before December 20!

Get tickets for FBTB2020!

Melissa Perri joins FBTB2020!

Johan Berndtsson

Yes! The author of "Escaping the Build Trap" and CEO of Produx Labs is one of the stellar speakers at From Business to Buttons 2020. Melissa Perri, welcome!

Product Management is a critical discipline, but it’s widely misunderstood nature leads many organizations straight into “The Build Trap.” These organizations are so focused on building and shipping software that they forget to ask the core question behind great Product Management – are we building a valuable product?   

Companies often turn to Agile processes like Scrum in the hopes that these frameworks will help them ship better software. But this often demotes Product Managers into the role of order takers, much like waiters in a restaurant. Instead of determining what features or products will help reach company goals, they reluctantly turn their attention to filling backlogs and keeping developers busy.  

When companies fall into The Build Trap, they miss out on creating products that actually produce value for their customers and further their business objectives.

We need to break out of an endless cycle of building and shipping, and refocus on only creating products of value. Product Managers have to become “Bad Idea Terminators,” able to identify the strongest opportunities for success. 

Melissa Perri is a product management educator, author, speaker, and consultant. She believes the key to creating great products is growing great product leaders

Committed to that mission, she created the online school Product Institute, where she has shared her scientific approach to Product Management with over 3,500 students. Seeing an opportunity to help executives understand the value of Product Management, she wrote the book Escaping the Build Trap: How Effective Product Management Creates Real Value, with O’Reilly Media. In 2014, she wrote the Product Management curriculum for General Assembly’s part-time Product Management course, being used worldwide today. In 2019, she started a program to train the next generation of Chief Product Officers with Insight Partners and their 150 portfolio companies. Also, Melissa was recently appointed to the faculty of Harvard Business School to teach Product Management in the MBA program.

As the CEO of Produx Labs, Melissa runs a team of consultants who work with executives worldwide to set up their product organizations, advise on product strategy, and train leaders and team members. Their clients include Capital One, Lloyds Bank of England, Spotify, Liberty Mutual, Bynder, AthenaHealth, the Australian Defence Department, and Chewy. Prior to her current position, Melissa was a Product Manager and UX Designer at Capital IQ, Barclays Capital, OpenSky, and Conductor. 

Meet Melissa at From Business to Buttons 2020!

Get tickets for FBTB2020!