Design systems come in all shapes and sizes, but not all of them include guidelines for animation. Sure, some teams may have decided that motion wasn’t something their product needed guidance on, but in many cases motion was left out because they weren’t sure what to include. In the past few years, I’ve talked with many teams and designers who tell me motion is something they want to address, but they just aren’t sure how to do it. If that describes you too, you’re in luck! …

Disney’s 12 classic principles of animation from Ollie Johnston and Frank Thomas’ The Illusion of Life are mentioned in nearly every article about interface animation. Often without going into much depth as to why these are something web designer should care about, which leads to some doubt as to whether they’re actually of any use to us.

We’re not animating dancing brooms in feature films. We’re designing interfaces for apps and websites. Do these principles really have anything at all to do with interface animation?

The answer is yes. They really do.

Even when our animations are primarily there for…

I like the term “invisible animation”. It’s catchy and it plays off the classic theme of Good design is invisible. The same goes for interface animation. When it’s done well, it becomes invisible.

Great UI animation improves the user experience. It clarifies, or adds to the task at hand. It becomes invisible by fitting in so well.

With UI animation you know you’ve hit that invisible goal when your users don’t even notice they’re looking at an animation at first. Animations like these are considered very early on in the design process. …

Many of us web designers tend to be a self-taught bunch. Most of our early career stories involve a lot of books, tutorials, and late nights of feverishly learning as much we could. For me, one of the biggest influences of my career was attending local meet-ups. As much as Google and books were helpful, I learned so much more as a result of getting involved with local web design groups.

Shortly after getting into this web design thing about 10 years ago, I discovered a local group that met each month to talk about exactly the things I was…

Val Head

Web/UI animation pro. Author of Designing Interface Animation. Curates the, co-hosts @motionmeaning.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store