Readymag Design Almanac: Animation

Honestly, I wouldn't have my career if it wasn't for Flash. I started out in the early 2000’s doing a lot of static web. Soon after, I discovered Flash—which was a big thing back then—and started making simple animated cartoon videos. They were terrible if I look at them now but from there I moved on and started developing my own creative perspective and making my own things. Experiments with cartoons inspired me to apply Flash animations to UI.

In 2013 I began doing work at an agency that was curating the promotion of the recently released Moto X phone and there was a lot of UI design involved in its marketing campaign. I started animating UI through After Effects, which is something I didn't actually do before, but I found I really liked it. I had much more control than in Flash. I became hugely interested in it and reached out to Google (by that time they had purchased Motorola), who had some available positions for UI animators. I came in right when UI animation and mobile was starting to be a thing.

Flash was great because it introduced animation in an interactive sense, yet it also offered lots of non-functional decoration. Motion and UI design got more than just eye-candy in 2007 when the first iPhone was released. It was a brand new thing with so many ways of interacting with OS and apps that users needed extra help understanding the flow of it all. That was the tipping point when mobile UI became more useful—more a necessity than decoration.

In April of 2010 Steve Jobs published an open letter called "Thoughts on Flash" in which he explained why Apple would not allow Flash in its products. That was a really tough point because back then I was still working in Flash. And by that time HTML5 wasn’t even close to being able to replicate what Flash could do.

However I think ultimately it was the right move, and brought positive changes. First, Flash was a very bloated software: it required a special plugin and was very battery-hungry on mobile devices, which thwarted the progress of mobile web. Second, Steve’s letter pushed people to put their best efforts into HTML5.

In 2014 Google introduced its new design language called Material Design. The great thing about Material Design is that it was built with animation in mind. I was one of the people who wrote guidelines for it. With Material Design Motion, Google aims to help users understand where they are in the product, add real-time dynamic reactions to things, and make all their products feel more polished and intelligent.

The four big words to take from Material Design Motion are: Responsive, Natural, Aware, and Intentional.

Google account animation is probably one of the most cohesive experiences that explains the best of what Material Motion is. Take for instance Google Calendar. There are a lot of small animations helping the user understand what's going on.

When you're in the schedule view you see a list of colored rectangles representing your events. We really wanted it to feel that each of the colored ‘chips’—as we call them—represents one full event. In the iOS, when you tap on one of the chips it expands and fills the screen, revealing information about the time, location, and attendees. Then when you tap back, it collapses again into a single chip.

Other design elements convey spatial relationships—this is actually something developers did on iOS but less so on Android. There's always platform differences but, if you're familiar with materials elevation guidelines and how large shadows should be under objects, take a look at the Google Calendar schedule view and you'll notice that the app bar at the top of the screen is probably at the highest elevation—that and the little red action button at the bottom right. When a chip opens it rises to the level of those two objects. The idea here is that when it comes in contact with the app bar it actually pushes it out of the way. It's just a subtle way to help the user understand hierarchy, elevation, and spatial relations. And again, when you collapse it, the app bar lowers and everything shifts back into place.