John Schlemmer
John Schlemmer is a Motion Lead at Google in Mountain View, California. He directs cross-platform animation efforts in Google apps from within the Material Design team while also writing about, lecturing on, and advocating for industry standards in animation.
John Schlemmer
John Schlemmer is a Motion Lead at Google in
Mountain View, California. He directs cross-platform animation efforts in Google apps from
within the Material Design team while also
writing about, lecturing on, and advocating for
industry standards in animation.
John Schlemmer
John Schlemmer is a Motion Lead at Google in
Mountain View, California. He directs cross-platform animation efforts in Google apps from
within the Material Design team while also
writing about, lecturing on, and advocating for
industry standards in 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.
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.
Steve Jobs and his Thoughts on Flash
D8, 2010
Steve Jobs and his Thoughts on Flash
D8, 2010
Mobile era is about low power devices, touch interfaces and open web standards—all areas where Flash falls short.
Steve Jobs
Mobile era is about low power devices, touch interfaces and open web standards—all areas where Flash falls short.
Steve Jobs
Steve Jobs introduces iPhone
Macworld, 2007
Steve Jobs introduces iPhone
Macworld, 2007
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.
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.
Responsive
means that Material Motion is fast and takes into account user action and the time it takes to do things.
Responsive
means that Material Motion is fast and takes into account user action and the time it takes to do things.
Natural
means Material Motion improves the overall user experience so it’s quick and fluid.
Natural
means Material Motion improves the overall user experience so it’s quick and fluid.
Aware
goes back to how smart the UI feels, so UI elements are aware of other elements on the screen and move out of the way to make room for them when necessary.
Aware
goes back to how smart the UI feels, so UI elements are aware of other elements on the screen and move out of the way to make room for them when necessary.
Intentional
means that every single animation we do in Material Design has a very specific purpose. This goes back to our principle of it not just being a decoration. We animate for a purpose. We help guide a user to the next view during a view transition. It can signal things, like if actions are available or unavailable by adding resistance to interaction objects. We can also use animation to direct the user's attention to specific parts of the screen.
Intentional
means that every single animation we do in Material Design has a very specific purpose. This goes back to our principle of it not just being a decoration. We animate for a purpose. We help guide a user to the next view during a view transition. It can signal things, like if actions are available or unavailable by adding resistance to interaction objects. We can also use animation to direct the user's attention to specific parts of the screen.
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.
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.
Material Design: Motion
Google I/O, 2014
Material Design: Motion
Google I/O, 2014
John Schlemmer
Discover the expanded Material Design motion guidelines
Google I/O, 2016
John Schlemmer
Discover the expanded Material Design motion guidelines
Google I/O, 2016
I consider web animation a little different than mobile. With web animation the screen is a lot larger so you have to be a little more mindful about visual noise and objects moving on the screen. Also, information density is a lot higher with web. People viewing a website expect it to be a lot more responsive. I know there's scrolling animations where you scroll the entire view and as you scroll things animate based on your scroll position, but for other things, like when you click a link to go to the next page, people aren't really used to seeing animations there.
Instead of using the same principles for mobile UI animation we tweak them for web, because we still want it to feel fast. Since the animations are faster they're a lot subtler —we imply motion in certain ways rather than just moving an object from point A to point B. We might do some trickery and quick fading to make it feel like it moved from point A to point B but in reality it just faded out here and faded in to the new area. There's little things we can do to make it feel less overwhelming on larger screens and websites.
I consider web animation a little different than mobile. With web animation the screen is a lot larger so you have to be a little more mindful about visual noise and objects moving on the screen. Also, information density is a lot higher with web. People viewing a website expect it to be a lot more responsive. I know there's scrolling animations where you scroll the entire view and as you scroll things animate based on your scroll position, but for other things, like when you click a link to go to the next page, people aren't really used to seeing animations there.
Instead of using the same principles for mobile UI animation we tweak them for web, because we still want it to feel fast. Since the animations are faster they're a lot subtler —we imply motion in certain ways rather than just moving an object from point A to point B. We might do some trickery and quick fading to make it feel like it moved from point A to point B but in reality it just faded out here and faded in to the new area. There's little things we can do to make it feel less overwhelming on larger screens and websites.
I'm always a fan of good logo builds, and this is basically a scroll-initiated website filled with them. I really admire how each flag not only builds itself in, but does so in a way that builds out of the previous flag, and in some cases even tells a story around what the design for the flag actually means.
I'm always a fan of good logo builds, and this is basically a scroll-initiated website filled with them. I really admire how each flag not only builds itself in, but does so in a way that builds out of the previous flag, and in some cases even tells a story around what the design for the flag actually means.
Currently animation is not a mandatory part of a designer’s skills set. But I think eventually it will be. UI animation is more than just something fun to look at: there's deep meaning behind it and why things move the way they do. When a designer that typically doesn't work in animation is able to understand basic animation principles, they can create interactions with that in mind, knowing how to demonstrate certain interactions to a user. It also helps a lot with understanding the structural hierarchy of an app.
For people just starting out in UI animation I’d recommend prototyping their own apps and interfaces. There aren't really very many UX motion courses out there. The only one that comes to mind is UXInMotion.net. Explore Form and Principle because they have some pretty great animation tools to create app prototypes and add interactive animations. That's a great way to grasp UI transitions and how things move in a functioning app, instead of just animating something in After Effects.
Today’s devices are more powerful, and can handle richer animations. The new iPhone 10 has great interaction animations that are pretty processor-heavy. Same with the Pixel II Google phone that came out recently.
People are becoming used to animation within UI, so we're finally crossing over from pure functionality to being functional and fun. The best example of crazy, amusing, but also functional animations is messaging platforms. A lot of what people do when speaking to somebody through a messaging app is very personal, and oftentimes there's a lot of emotion in what’s being sent. Being able to convey that through animated stickers or messages with effects or just making the conversation more lively within your UI can really help express the emotion and make it more fun to communicate. That's something I think only motion can do. There are things that just make it feel so much richer and more alive, rather than just functional.
Currently animation is not a mandatory part of a designer’s skills set. But I think eventually it will be. UI animation is more than just something fun to look at: there's deep meaning behind it and why things move the way they do. When a designer that typically doesn't work in animation is able to understand basic animation principles, they can create interactions with that in mind, knowing how to demonstrate certain interactions to a user. It also helps a lot with understanding the structural hierarchy of an app.
For people just starting out in UI animation I’d recommend prototyping their own apps and interfaces. There aren't really very many UX motion courses out there. The only one that comes to mind is UXInMotion.net. Explore Form and Principle because they have some pretty great animation tools to create app prototypes and add interactive animations. That's a great way to grasp UI transitions and how things move in a functioning app, instead of just animating something in After Effects.
Today’s devices are more powerful, and can handle richer animations. The new iPhone 10 has great interaction animations that are pretty processor-heavy. Same with the Pixel II Google phone that came out recently.
People are becoming used to animation within UI, so we're finally crossing over from pure functionality to being functional and fun. The best example of crazy, amusing, but also functional animations is messaging platforms. A lot of what people do when speaking to somebody through a messaging app is very personal, and oftentimes there's a lot of emotion in what’s being sent. Being able to convey that through animated stickers or messages with effects or just making the conversation more lively within your UI can really help express the emotion and make it more fun to communicate. That's something I think only motion can do. There are things that just make it feel so much richer and more alive, rather than just functional.
Joe Cerra
Advanced animations with UIkit
WWDC, 2017
Joe Cerra
Advanced animations with UIkit
WWDC, 2017
Google Pixel 2
Presentation extended highlights
MadeByGoogle, 2017
Google Pixel 2
Presentation extended highlights
MadeByGoogle, 2017
One of my favorite animators is Seth Eckert. He's done a lot of really amazing animation work both in the UI field and outside of the UI field that have had a lot of influence on where animation is trending.
One of my favorite animators is Seth Eckert. He's done a lot of really amazing animation work both in the UI field and outside of the UI field that have had a lot of influence on where animation is trending.
Seth Eckert
Facebook reactions, 2016
Seth Eckert
Facebook reactions, 2016