Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
@vlh
FOWD London 2015
Motion DesignerThink like a
@vlh
FOWD London 2015
Motion DesignerThink like a
#FOWD @vlh
Great UI animation has
purpose and style.
How it looks
#FOWD#FOWD @vlh
Ourgoal is relatable
motion
#FOWD#FOWD @vlh
#FOWD#FOWD @vlh
#FOWD @vlh
1: Timing
!
#FOWD#FOWD @vlh
Timing:
appearing to obey the
laws of physics
#FOWD#FOWD @vlh
Timing:
establishes mood,
emotion, and reaction
#FOWD @vlh
ease
linear
ease-in
ease-out
ease-in-out
Timing function keywords
cubic-bezier(0.42, 0, 0.58, 1);
#FOWD @vlh
TIME
PROGRESSION
#FOWD @vlh
Everything is better
with cubic beziers!
ease-in-out
#FOWD#FOWD @vlh
#FOWD#FOWD @vlh
#FOWD @vlh
2: Follow 

Through
#FOWD#FOWD @vlh
Follow Through:
not everything comes
to a stop at once
#FOWD#FOWD @vlh
#FOWD#FOWD @vlh
Random Aside:
variables forkeeping 

yourbeziers sane
#FOWD#FOWD @vlh
#FOWD#FOWD @vlh
#FOWD @vlh
3: Secondary 

Action
#FOWD#FOWD @vlh
Secondary Action: 

supplemental action,
reinforces and adds
dimension
#FOWD#FOWD @vlh
#FOWD#FOWD @vlh
#FOWD#FOWD @vlh
#FOWD @vlh
One more thing!
#FOWD @vlh
Speed it up.

#FOWD @vlh
Speed it up!!

#FOWD#FOWD @vlh
How it behaves
#FOWD#FOWD @vlh
0.2 to 0.5 seconds is a good
range forUI animations
#FOWD#FOWD @vlh
Ease-outs feel more
“responsive”
#FOWD#FOWD @vlh
More complex easing
needs more time to be
readable
#FOWD @vlh
prototype, 

prototype, 

prototype!
Oh, hello 

bettertools!
alltherightmoves.valhead.com
Be inspired!
artofthetitle.com
capptivate.co
#FOWD @vlh
There are crazy fun
times ahead!
#FOWD @vlh
Thanks!
!
@vlh
valhead.com
alltherightmoves.valhead.com
Think Like a Motion Designer - FOWD London 2015
Think Like a Motion Designer - FOWD London 2015
Think Like a Motion Designer - FOWD London 2015
Think Like a Motion Designer - FOWD London 2015
Think Like a Motion Designer - FOWD London 2015
Think Like a Motion Designer - FOWD London 2015
Think Like a Motion Designer - FOWD London 2015
Think Like a Motion Designer - FOWD London 2015
Think Like a Motion Designer - FOWD London 2015
Think Like a Motion Designer - FOWD London 2015
Think Like a Motion Designer - FOWD London 2015
Think Like a Motion Designer - FOWD London 2015
Think Like a Motion Designer - FOWD London 2015
Prochain SlideShare
Chargement dans…5
×

Think Like a Motion Designer - FOWD London 2015

807 vues

Publié le

Motion design has become a necessary skill for the modern web. We’ve never had to understand animation principles like we do now. Beautiful animation comes from thinking like a motion designer when adding animations and transitions to our work on the web. There is a huge depth of motion design and animation knowledge we can pull from and apply to our work while we design new UIs of the web. In this session we will cover key animation principles like timing, offsets and secondary action as they apply to UI work on the web. Consider this your crash course into becoming a motion design pro!

Publié dans : Design
  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

Think Like a Motion Designer - FOWD London 2015

  1. 1. @vlh FOWD London 2015 Motion DesignerThink like a
  2. 2. @vlh FOWD London 2015 Motion DesignerThink like a
  3. 3. #FOWD @vlh Great UI animation has purpose and style.
  4. 4. How it looks
  5. 5. #FOWD#FOWD @vlh Ourgoal is relatable motion
  6. 6. #FOWD#FOWD @vlh
  7. 7. #FOWD#FOWD @vlh
  8. 8. #FOWD @vlh 1: Timing !
  9. 9. #FOWD#FOWD @vlh Timing: appearing to obey the laws of physics
  10. 10. #FOWD#FOWD @vlh Timing: establishes mood, emotion, and reaction
  11. 11. #FOWD @vlh ease linear ease-in ease-out ease-in-out Timing function keywords
  12. 12. cubic-bezier(0.42, 0, 0.58, 1);
  13. 13. #FOWD @vlh TIME PROGRESSION
  14. 14. #FOWD @vlh Everything is better with cubic beziers!
  15. 15. ease-in-out
  16. 16. #FOWD#FOWD @vlh
  17. 17. #FOWD#FOWD @vlh
  18. 18. #FOWD @vlh 2: Follow 
 Through
  19. 19. #FOWD#FOWD @vlh Follow Through: not everything comes to a stop at once
  20. 20. #FOWD#FOWD @vlh
  21. 21. #FOWD#FOWD @vlh Random Aside: variables forkeeping 
 yourbeziers sane
  22. 22. #FOWD#FOWD @vlh
  23. 23. #FOWD#FOWD @vlh
  24. 24. #FOWD @vlh 3: Secondary 
 Action
  25. 25. #FOWD#FOWD @vlh Secondary Action: 
 supplemental action, reinforces and adds dimension
  26. 26. #FOWD#FOWD @vlh
  27. 27. #FOWD#FOWD @vlh
  28. 28. #FOWD#FOWD @vlh
  29. 29. #FOWD @vlh One more thing!
  30. 30. #FOWD @vlh Speed it up.

  31. 31. #FOWD @vlh Speed it up!!

  32. 32. #FOWD#FOWD @vlh
  33. 33. How it behaves
  34. 34. #FOWD#FOWD @vlh 0.2 to 0.5 seconds is a good range forUI animations
  35. 35. #FOWD#FOWD @vlh Ease-outs feel more “responsive”
  36. 36. #FOWD#FOWD @vlh More complex easing needs more time to be readable
  37. 37. #FOWD @vlh prototype, 
 prototype, 
 prototype!
  38. 38. Oh, hello 
 bettertools!
  39. 39. alltherightmoves.valhead.com
  40. 40. Be inspired!
  41. 41. artofthetitle.com
  42. 42. capptivate.co
  43. 43. #FOWD @vlh There are crazy fun times ahead!
  44. 44. #FOWD @vlh Thanks! ! @vlh valhead.com alltherightmoves.valhead.com

×