Animation

animation

Readymag Design Almanac is an educational project covering the fundamentals of design. This chapter covers web animation through the expertise of six designers and artists. They explain how to attract a viewer’s eye, reduce cognitive overload, and build visual hierarchies by applying motion.

Intro

John Schlemmer

Motion Designer at Google

Nicolas Ménard

Artist and animator director

Rachel Nabors

Interaction developer

Arina Shabanova

Illustrator and animator

Stas Aki

Product Designer at Readymag

Tom Ginnattasio

Product design lead at InVision

Outro

Animation

Intro

Kostya Gorskiy

Design Manager at Intercom

Modern products seek to be lively and natural. Every touch of a button on a screen can tell a little story. Digital design, thus, is increasingly like music, literature and movie-making: its action develops over time, and becomes an interaction. Like the other arts, product design can contain a prologue, complications, development, climax, conclusion. It has tempo and rhythm, dynamics and lulls. Adventures may happen.

 

All of this is based on the fact that the non-digital world—in which humanity existed for 2.5 million years—is alive. It is always changing, always moving. And we, as humans, are programmed to respond to movement. Instinctively, we know what is alive and what is not, even out of the corner of our eye, when we are not looking intently. There is no way we can resist reacting to sudden movements; not so long ago, after all, it was a matter of survival.

 

For this chapter, the Readymag team discussed animation with a number of designers, developersand animators—about how the static becomes dynamic, how something dead becomes alive, and how art becomes less like artifice.

Animation

John Schlemmer

 

John Schlemmer

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.

 

schlem.me

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.

Animation

Nicolas Menard

Nicolas Ménard

Nicolas Ménard

Nicolas Ménard is a Canadian artist and

animation director who makes short films, GIFs,

illustrations, and interactive art. His animated

short films have been screened in festivals around the world; his original short, Wednesday With
Goddard
, won Best Animated Short at the 2017

SXSW film festival.

 

nicolasmenard.com