Designing Interface Animation
Meaningful Motion for User Experience
Effective interface animation deftly combines form and function to improve feedback, aid in orientation, direct attention, show causality, and express your brand’s personality. Designing Interface Animation shows you how to create web animation that balances purpose and style while blending seamlessly into the user’s experience. This book is a crash course in motion design theory and practice for web designers, UX professionals, and front-end developers alike.
Effective interface animation deftly combines form and function to improve feedback, aid in orientation, direct attention, show causality, and express your brand’s personality. Designing Interface Animation shows you how to create web animation that balances purpose and style while blending seamlessly into the user’s experience. This book is a crash course in motion design theory and practice for web designers, UX professionals, and front-end developers alike.
Testimonials
Val Head shows us how to create animation that reduces the cognitive load on our users—animation that is not just on the web but of the web—and does it in a style that’s as entertaining as animation itself.
Jeffrey Zeldman, author, Designing with Web Standards
Understanding animation is now crucial for designers and developers. This book will help you quickly get up to speed, and Val is the perfect person to have written it!
Dan Mall, founder and director, SuperFriendly
This is by far the most comprehensive book on UI animations. Highly recommend to any web designer or developer at any level. The book is great for both professionals and newbies looking to take their animation skills to a new level.
Petr Tichy, front-end developer, Ihatetomatoes.net
Animation on the web is here. Interfaces without any animation are starting to feel drab. More importantly, well-done animations help an interface communicate. Don’t take it from me, let Val Head show you. This book teaches you why this stuff matters through compelling examples, and it helps you find a workflow for your own projects.
Chris Coyier, co-founder, CodePen
Very few people can explain the power of animation like Val Head can. This book doesn’t just cover the theory of animation—it also breaks down actionable details for how to solve common use cases, all with clarity and levity. Designing Interface Animation is a powerful resource for designers and developers alike!
Sarah Drasner, manager, UX Design and Engineering, Trulia
Table of Contents
Foreword by Ethan Marcotte
Chapter 1: Why You Can’t Ignore Animation
Chapter 2: You Already Know More About Animation Than You Think
Chapter 3: Modern Principles of Interactive Animation
Chapter 4: Using Animation to Orient and Give Context
Chapter 5: Using Animation to Direct Focus and Attention
Chapter 6: Using Animation to Show Cause and Effect
Chapter 7: Using Animation for Feedback
Chapter 8: Using Animation to Demonstrate
Chapter 9:Using Animation to Express Your Brand
Chapter 10: Where Animation Fits in Your Design Process
Chapter 11: Prototyping Your Animation Ideas
Chapter 12: Animating Responsibly
FAQ
These common questions and their short answers are taken from Val Head’s book Designing Interface Animation: Meaningful Motion for User Experience. You can find longer answers to each in your copy of the book, either printed or digital version.
- Is this book only about web animation?
I’m framing the majority of my discussion of animation around the web because that’s my preferred medium; however, all of the theory and design approaches to using animation effectively apply to other platforms as well. Even if the technology of web animation isn’t what you’ll be working with, there are still many benefits you can gain from including animation in your design efforts.
