Animation and UX Resources
Slides from my talk about animation and the future of UX are on SlideShare. They don’t have the videos because Keynote. Darn!
Articles
- Web Animation at Work—an article I wrote for A List Apart about why animation is important to companies and where to start honing one’s skills.
- Five Ways to Animate Responsibly—some best practices you can and should follow before animating all the things :)
- State of the Animation 2014—my run-down on Smashing Mag of where web animation’s been and where it’s going.
- Animation Support in a User Interface Toolkit: Flexible, Robust, and Reusable Abstractions—an article from 1993 underscoring the improvements animations can have on a user’s mastery of an operating system.
- A New Mobile UX Design Material—goes into depth with examples of the 12 Principles of Studio Animation as they apply to mobile design.
- UI Animation and UX: A Not-So-Secret Friendship—a sister A List Apart article by Val Head focusing more on the nuts and bolts of animating user interfaces.
- Provide meaning with motion—Why motion design is now a required skill for designers.
- Everything You Need to Know About the CSS will-change Property—an article by Sara Soueidan that breaks down how animations tax the CPU and how the
will-change
property can and cannot help you optimize them. - Optimising for 60 FPS Everywhere—covers the basics of layer composition an optimising away different performance bottlenecks.
Books
Screencasts
- The Infinite Canvas Screencast—My screencast that brings together code, storytelling, animation and design in one place. Interviews with people from many fields, sure to entertain and inspire!
- All the Right Moves—Val Head’s how-to screencasts on CSS animations and the like.
Recorded Talks
- Animation Studio Power Techniques with CSS3—Secrets from the animation industry.
- Animated Music Videos with HTML5 and CSS3—A fun introduction to CSS animations with the help of a rocking cat.
Slides
Courses
- Animation and Storytelling with HTML5 and CSS3—My Frontend Masters Course showing how to use and combine CSS animations, JavaScript and HTML5 audio.
Examples of animation in action
- Use Your Interface—A tumblr of animated gifs of tiny user interface animations.
- Captivate Co—A curated collection of iOS UI animation patterns.
- Dribbble—If you know how to search ;)
People on Twitter
- Me!—Former cartoonist turned interaction developer and web animation evangelist!
- Val Head—Designer and CSS animations advocate.
- Sara Soueidan—Sara completes the Web Animation Advocacy Trifecta with her focus on SVG animations.
- Mark Geyer—Works in-house on design and prototyping and has field experience integrating animation with that process.
- Vicki Murley—Former Safari evangelist, now author of two interactive iBooks on CSS animation and transforms.
- Pasquale D’Silva—Not a web animator, but writes about using animation in his app development.
- Ricardo Cabello—Has been at this since Flash. Humble and soft spoken, he’s a best kept secret who makes incredible things.
CSS Animation Effects Libraries
Performance Tools
- CSS Triggers—Far from comprehensive, but a look at what CSS properties trigger reflows and repaints.
Prototyping Tools
Software
A number of UIs have been created to help people create web-ready animations. I prefer to hand code everything and build my own tools, but others who do not have that luxury will be interested in these:
Pasquale D’Silva has written about the need for better animation tools. I remain confident that when browser vendors like Mozilla create proper timeline tools, the need for an animation UI will become less pressing and the browser will potentially become a viable animation IDE.
Comments
comments powered by Disqus