Designing Animation Awesomeness - Artifact Austin

Designing UI animations for the web and how to fit animation into our design process. Plus silly jokes.

Transcript

1. Val Head • @vlh Designing Animation Awesomeness! ANIMATION AS DESIGN & IN OUR DESIGN PROCESS
2. Val Head • @vlh Designing Animation Awesomeness! ANIMATION AS DESIGN & IN OUR DESIGN PROCESS
3. RWD + Animation?
5. Animation = Communication
8. Animation must match your message.
10. cubic-bezier(0.47, 0, 0.745, 0.715)
11. vimeo.com/93206523
12. More than fluff
15. Animation + UX FTW
16. ANIMATION CAN: Establish location
19. ANIMATION CAN: Guides tasks
23. ANIMATION CAN: Demonstrate
27. ANIMATION CAN: Turn your hierarchy up to 11
30. UI animation principles
31. 1 Always be flexible
34. 2 Avoid creating obstacles
37. 3 Speed is an art
38. UI animations should be as fast as they can still be readable. readable.
39. Context matters more than magic numbers for animation speed.
40. Getting out of your head
43. Get your idea moving on screen as early as possible.
47. framerjs.com/
48. goo.gl/RXImkC
50. Look beyond the web
51. artofthetitle.com
52. capptivate.co
54. Make the awesomest of things!
55. alltherightmoves.valhead.com
56. valhead.com/book
57. codepen.io/valhead alltherightmoves.valhead.com valhead.com @vlh val@valhead.com Thanks!