Designing Animation Awesomeness - Artifact East

Let's talk about designing interface animations for the web. We want animations that are useful and look awesome. Here's how we do it!

As seen at Artifact Conf East 2014.

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. The web has been stuck with hard cuts for too long!
8. Animation + UX FTW
9. ANIMATION:
   Establishes location
12. ANIMATION:
    Guides tasks
15. ANIMATION:
    Demonstrates
18. ANIMATION:
    Tells your story
20. ANIMATION:
    Is totally a diva
23. UI animation principles
24. Stay flexible
27. Don’t create obstacles
31. Look at speed and readability
32. .2s to .6s 
 a happy place for “small” interactions
33. Ease-outs 
 feel more “responsive”
35. More complex easing needs more time 
 to be readable.
37. Match motion to your message
41. Getting out of your head
44. prototype, prototype, prototype!
45. Get your idea moving on screen as early as possible.
49. 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!