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.
Val Head is a designer who works with agencies and small businesses to make fun and effective web sites. She speaks internationally at conferences and leads workshops on web design and creative coding. She is totally into design, type, and code. Every year she brings a swarm of web designers to Pittsburgh for the Web Design Day (webdesignday.com) conference. She contributes to .net magazine, is the managing editor of CreativeJS (creativejs.com), and helps keep Refresh Pittsburgh (refreshpittsburgh.org) going strong.
This is an easy, engaging read about how to incorporate animation into interface design. The author explains how animation can support your brand and how it can improve the user experience. The author also explains how to develop animations using tools like storyboards and prototypes. There are many examples in the book illustrating each of the author's points.
There's an entire chapter at the end of the book on accessibility for animation. (I appreciate the author's focus on accessibility. Many UX books gloss over accessibility or don't include it at all.)
In that chapter, the author explains how to make animations accessible to people with disabilities like vestibular disorders and epilepsy. Animations can have a negative effect on people with these disabilities.
I highly recommend this book. I plan to keep it in my toolbox as a reference for interface animation.
Informative and inspiring! Val Head tackles a topic hard to transcribe on paper in a meaningful and approachable way that left me excited to start designing and coding. I thought the examples in the book were really helpful, as well as the references to traditional animation techniques. Definitely a good read for anyone getting started in interactive animation, and likely a good refresher for animation veterans too.
Review originally posted at ------ It has never been easier to build animation into our sites and applications. New standards have emerged enabling us to build animations with a few lines of CSS or JavaScript. But as Val points out in this book, this is a relatively new thing for us and we have a lot to learn. Animation right now is still largely considered eye-candy, and its treated like that on most projects.
Val’s book is about how we change that. It’s about how we can make animations that are effective, not just pretty to look at. And it’s about how we make sure that animation is giving the serious attention it should be. Far from being merely eye-candy, Val explains how animation can be a powerful tool if applied correctly. Animation can help with brand consistency, storytelling, providing feedback, improving perceived performance and more.
The idea of animation promoting brand consistency, in particular, was interesting to me. People interact with companies through a constellation of experiences today. It’s not always easy to provide consistency across different platforms and systems while also taking advantage of the unique characteristics they have. Consistent animation becomes a way you can subtly make these different experiences still feel familiar.
Throughout the entire book, Val provides practical, real-world advice about how to bring it back to your team and your workflow. She explains techniques like prototyping, sketching, animation style guides without ever dictating one approach over another. Instead, she takes the time to lay out what each tool is good for, and what it’s not. It’s an effective method of teaching. By the time you’ve finished the book, you have more than one person’s opinion—you have a framework for making your own decisions about what will work best for your situation.
Unsurprisingly to anyone who knows me, I particularly enjoyed all the information about how animation plays into perceived performance. I was also happy to see Val dedicated an entire chapter to making sure those animations are accessible and inclusive.
Val is one of a handful of people I know of who are really pushing animation forward on the web. She’s done an incredible amount of work and research around not just designing and building animation online, but doing it effectively. We’re all lucky that she took the time to turn that knowledge into this practical and comprehensive book.
Practical and informative. Not much code, which is good because that changes too frequently anyway. Lots of processes you can follow to create your own standards and best practices for a project, and excellent examples to inspire you. I'm always thrilled when UX and designers tackle accessibility concerns, and Head does a great job covering what you'll need to know.
Excelente libro, muy buenos ejemplos, me pareció muy acertada la forma de abordar la animación como una reducción a la carga cognitiva y una aliada de la usabilidad, con este libro tenemos a la mano una herramienta que nos ayuda a entender como abordar la animación en proyectos y equipos de trabajo.
Good book systematically introduced me to Interface Animation. I already feel that I would think more and understand more of animations appear on my screens. I am happy about it, and thank you, Val!
For anyone that cares how design changes hearts or anyone that works on building the Internet, read this book. It's excellent. Between the craft of motion design and the technical details of animations, Head secretly teaches you user experience design. Weaved throughout the book are concrete examples of purposeful design, driven by user needs, and built using performance-minded, progressively enhanced and accessible techniques. Clearly an expert in her field, Head still makes interface design approachable. This book is also as pleasant to read as it is valuable. Read it.