Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing Meaningful Animation


Published on

Motion design principles that actually matter for web animation plus how to create an animation design system with choreography and meaningful documentation.

Published in: Design
  • A look into designing user interface animations that enhance the user experience. Playlist is intended to be pretty broad: covering anything from basics of animation, through designing meaningful transition to building actual prototypes with After Effects, Quartz Composer and Framer. Motion design has become a necessary skill for designing and building the modern web. The character and energy that motion brings to an interface is becoming as expected on the web as it is in other media. Great web animation comes from thinking like a motion designer and brand steward, matching the motion we add to our message and design goals. Learn key animation principles such as timing, offsets, and secondary action as they apply to interface design decisions. (animation studio)
    Are you sure you want to  Yes  No
    Your message goes here

Designing Meaningful Animation

  1. 1. find
  2. 2. GreatUI animation has purpose and style
  3. 3. Animating With Style
  4. 4. Timing & Spacing Animation Principle:
  5. 5. Timing The amount of time it takes for an action to happen. The duration.
  6. 6. Timing
  7. 7. Spacing The changes in speed over the 
 duration of the action’s timing.
  8. 8. Spacing
  9. 9. Timing & Spacing Makes animated objects appear to obey the laws of physics.
 Establishes mood, emotion and reaction.
  10. 10. Timing = duration Spacing = easing
  11. 11. CSS Easing Keywords linear ease ease-in ease-out ease-in-out
  12. 12. cubic-bezier(0.42, 0, 0.58, 1);
  13. 13. cubic-bezier(x1,y1,x2,y2);
  14. 14. (x1, y1) (x2, y2)
  15. 15.
  16. 16. Everything is better with cubic-beziers
  17. 17. Follow Through Animation Principle:
  18. 18. Follow Through Not everything comes to a stop at once.
  19. 19. Follow Through
  20. 20. Follow Through Overshooting the target position. 

  21. 21. Secondary Action Animation Principle:
  22. 22. Secondary Action Supplemental action, reinforces 
 and adds dimension.
  23. 23. (live demo - no slides)
  24. 24. The Bigger Picture
  25. 25. Choreography Designing all your UI animations 
 to feel logical and related.
  26. 26. Similar objects animate in similar ways
  27. 27. Entrance informs exit
  28. 28. Match velocities
  29. 29. Cohesive over consistent.
  30. 30. Consistent
  31. 31. Cohesive
  32. 32. Expressing Your 
 Brand In Motion
  33. 33. Match design adjectives 
 to animation styles
  34. 34. Design Adjectives Energetic? Friendly? Sleek? Strong? Playful?
  35. 35. Follow through & anticipation: Energetic, friendly, bold
  36. 36. Squash and stretch: High energy and playful
  37. 37. Ease-in-outs: Balanced and measured
  38. 38. Smaller movements: Calm and subtle
  39. 39. Opacity and blurs: Soft and stable
  40. 40. Animation belongs in your style guide
  41. 41. Document categories of animation Entrances and exits Give emphasis Give feedback Transitions between states
 Personality and brand Orientation Storytelling
  42. 42. Document your building blocks Opacity Scale Colour Depth 
 Position Rotation
  43. 43. Aim to build your own animation library
  44. 44. Be Inspired!
  45. 45.
  46. 46.
  47. 47. @vlh