Designing for animation is not as hard as you think
Resources from my presentation at /dev/world/2015.
Videos from slides
- Slide 16: Calendar (download)
- Slide 18: Duolingo (download)
- Slide 20: Stripe Checkout remember me
- Slide 31: Stripe verification code (YouTube video @ 8:20)
- Slide 35: Clear
- Slides 40, 41: MailChimp animations
- Slide 43: Dots
- Slide 45: Inbox by Google
- Slide 47: Delightful Weather animated weather icons (download)
Delightful Weather prototypes (Keynote files)
- Basic transitions (modal present & dismiss)
- Magic move (menu transitions)
- Build animations (weather warning icon)
- Self playing (communicate gestures, video below)
- Animated weather icons (self playing)
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)
- Google’s Material Design Video Recreated in Keynote
- Linda Dong's Keynote Motion Graphic Experiment
- Prototyping Animation with Keynote by thoughtbot
Additional resources
These resources are not directly mentioned in my presentation, but I found them useful when researching for this talk.
- Motion and Meaning podcast
- Lets move! presentation by Benjamin De Cock at CSSConf Australia
- Designing with animation presentation by Pasquale D'Silva at Web Directions South
- Enhance Your User Experience with Animated Transitions
- Improve the payment experience with animations
- Transitional Interfaces
- Spatial Interfaces
- Stop Gratuitous UI Animation
- Motion in UI Design
- Gestures & Animations: The Pillars of Mobile Design
- Google’s Material Design guidelines for animation
- Design in Sketch Then Animate In Keynote
- Five app prototyping tools compared: Form, Framer, Origami, Pixate & Proto.io