Designing for animation is not as hard as you think

Presented at /dev/world/2015

Transcript

1. /dev/world Designing for animation is not as hard as you think Stephanie Sharp Odecee Aug 31-Sep 1, 2015
2. Designing for animation is not as hard as you think stephsharp.me/dw2015 @stephrsharp
3. Resources stephsharp.me/dw2015 @stephrsharp ssharp@odecee.com.au
4. Why animate?
5. 1 Keep the user oriented
6. Keep the user oriented Direct user attention 2
7. Keep the user oriented Direct user attention Connect behaviour 3
8. Communicate personality Keep the user oriented Direct user attention Connect behaviour 4
9. Delightful Weather
10. Delightful Weather
11. Screenshots show you too little. Apps show you too much. Make little animated experiments. Why prototype animation? Designing with Animation (WWDC 2015 Session 803)
12. Which one?
14. Keep the user oriented
15. Calendar on iOS Keep the user oriented 1
17. Duolingo Keep the user oriented 1
19. Stripe Checkout Keep the user oriented 1
21. Demo 1: Links & transitions
23. Direct user attention
24. Direct user attention 2 …towards an action (focus/prompt) …towards the result of an action (feedback) …away from something (distract)
25. Examples in iOS Direct user attention (focus) 2
28. Pinterest Direct user attention (feedback) 2
30. Stripe verification code Direct user attention (distract) 2
32. Demo 2: Build animations
33. Connect behaviour
34. Clear Connect behaviour 3
36. Demo 3: Self-playing prototype
37. Communicate personality
38. MailChimp Communicate personality 4
40. This is your moment of glory.
41. High fives!
42. Communicate personality 4 Dots
44. Inbox by Google Communicate personality 4
46. Demo 4: Animated weather icons
50. Let’s recap
51. 1 Keep the user oriented
52. Keep the user oriented Direct user attention 2
53. Keep the user oriented Direct user attention Connect behaviour 3
54. Communicate personality Keep the user oriented Direct user attention Connect behaviour 4
55. Resources Designing with Animation WWDC 2015 Session 803 Prototyping: Fake It Till You Make It WWDC 2014 Session 223 Tools and Tips for Prototyping Apps /dev/world/2014, Judit Klein
58. Thanks! stephsharp.me/dw2015 @stephrsharp ssharp@odecee.com.au