Val Head — Designing Interface Animation

CSS Dev Conf — Conference dedicated to CSS and its super friend technologies like JavaScript, Sass, NPM, and more. A limited supply of Early Bird Tickets now on sale. Register now!
UX Design Newsletter — A weekly free newsletter containing a collection of tutorials, articles, and videos about front-end design and development, plus tips on how to bring better engagement to the multi-device world curated by Christopher Schmitt. Sign up now!

2:30 Writing the preface is the worst.
4:03 Benefits of brain animation including transitions
6:07 Animation helping with perceived performance makes things seem like things are happening faster
8:01 Facebook content loading examples of perceived performance and perceived speed
9:00 Benefits of reducing content load, make it obvious what has changed on the screen
10:50 Bad form designs that take up too much of the page
12:30 Explanation of UI choreography - managing multiple animations and commonality of animations
16:09 Blocking animation is bad, it stops you from doing things while it’s animated.
17:40 Don’t hide layers people need to interact with.
20:30 Some examples of good animation that elevates the design, including brand identity.
23:31 Some examples of sites that are really good at freeze animation.
26:10 PayPal redesign compared to Stripe
28:00 How you go about thinking about instilling animation into your brand, app or website.
33:00 Recommendations on how to convince higher ups to integrate animation.
38:30 Where does someone start working more with animation? CSS?
40:02 Green Sock versus CSS.
41:02 Books or websites that would help you learn more about CSS.
42:40 What Java Script does that CSS can’t.
45:10 What’s covered in the workshops with Sarah Drasner.
46:50 How to connect or find more information about Val Head.

Non Breaking Space Show