Putting Your UIs in Motion (AEA Orlando)

Good Interface animation needs to be both helpful and done with style. This talk is all about how we can pull that off in our own work as designers. As seen at AEA Orlando 2014!

Transcript

1. Val Head • @vlh Putting Your UIs In Motion ALL THE RIGHT MOVES:
5. Animation softens the edges of interaction
6. ANIMATION:
   Establishes location
9. ANIMATION:
   Guides tasks
13. ANIMATION:
    Demonstrates
17. ANIMATION:
    Tells your story
20. ANIMATION:
    Gets (all the) attention
23. Doing it with style
24. Keep UI Animations Flexible
27. Don’t create obstacles
30. prototype 
 prototype 
 prototype!
31. Look at speed and readability
32. .2s to .6s 
 a happy place for “small” interactions
33. Ease-outs 
 feel more “responsive”
35. “Sometimes when we release an update, I tighten up an old transition by ~50ms. ! Result: “Wow, this new version feels faster.” ” - Cennydd Bowels
36. More complex easing needs more time 
 to be readable.
37. Match motion to your message
41. Your choice of easing makes all the difference.
    
55. alltherightmoves.valhead.com
56. This is only the beginning
57. Make 
 the awesomest 
 of things!
58. codepen.io/valhead alltherightmoves.valhead.com valhead.com ! @vlh val@valhead.com Thanks!
59. fivesimplesteps.com/products/css-animations