Successfully reported this slideshow.

Designing Meaningful Animation

17

Share

Loading in …3
×
1 of 71
1 of 71

Designing Meaningful Animation

17

Share

Download to read offline

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

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

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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. cubic-bezier.com
  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. artofthetitle.com
  46. 46. capptivate.co
  47. 47. @vlh uianimationewsletter.com

×