Animation is key component of beautiful and useful product design. Salesforce, Google, and IBM all feature motion design in their design systems, and there’s every reason you should, too. When designers and developers agree upon constraints, they can create UI components faster and present a unified, polished look and feel users appreciate.
Communicating animation is all about identifying patterns and setting boundaries and behavior expectations. This means:
- creating custom easings that reinforce branding and physics
- choreographing scalable timing values
- creating a vocabulary of reusable components
- combining those components into unique yet universal animation patterns.
Whether your project is big or small, if it has a style guide, you will want to include motion design. In this talk, you will learn how to bring animation to heel.
7. Challenges that prevent consistent anima2ons
• Communica2on issues make it hard for teams to
understand and tackle anima3ons
• Inadequate deliverables prevent developers from moving
forward quickly
• Lack of respect and deference to one another leads to
lopsided implementa3ons that favor or disregard different
voices
25. You will need curves for…
• Accelera2on ease-out
• Decelera2on ease-in
• Something subtle for fades and color changes
• A bounce (op3onal)
26. Where to use those easings…
• Decelerate (ease-out) human interac3ons
• Accelerate (ease-in) system-ini3ated anima3ons
• Fades and color changes look best with more linear, subtle
curves
• Bounces increase animacy and add an air of “fun.”
30. Timing Limita2ons
• Stay inside 70 to 700 milliseconds
• 200-300ms is a sweet spot
• Shorter dura2ons for fades and color changes
• Longer dura2ons for large movements
• Use milliseconds instead of seconds to prevent decimal
hell fun 3mes
70. Collabora2ons
• On new projects anima3on issues and ideas must be
addressed during feature development.
• On exis2ng projects the feature’s team should be
entreated to join the conversa3on.
• Don’t tack anima3on on alone and/or aRer the fact. You
will have a bad 3me.