Animation
Arina Shabanova
Arina Shabanova
Arina Shabanova is an illustrator and animator
from Moscow. Her clients include Google,
MTV, WeTransfer, Bloomberg Businessweek,
Esquire Russia, Paramount Comedy, and Yandex.
I completed my bachelor’s degree in illustration at the British Higher School of Art and Design in Moscow in 2015. My studies included several workshops touching on the basic principles of animation, which served as the jumping-off place for my entry into this totally new world. From there I continued studying on my own.
My graduation project was a cartoon, Gde-to (Somewhere), which won in the category of the Year’s Most Personal Project, as it was based on my life. I had moved from the southern city of Gelendzhik to Moscow, and my father and I would drive back to Gelendzhik to visit every year. The move to Moscow changed my way of thinking about home. Shifting between two cities, I tried to figure out where I fit in. I attempted to convey these feelings in the cartoon. A year later I sent Somewhere to a number of festivals and, unexpectedly, people were interested, both here and abroad.
As a student I’d begun doing illustrations for L’Officiel Russia but after graduation an online Russian magazine about entrepreneurs, Hopes And Fears, approached me. I was very lucky: despite the fact that I was just starting out, I was allowed to experiment.
I didn’t try to create a style of my own; I simply made lot of work and, very gradually, my characters began to show shared features. I love geometry, balance, structure, and logic in illustration. As a rule my characters stand firmly on their feet and fit comfortably in the frame. Viktor Melamed, who supervised my work at the Brit, once told me “Arina, you draw like a peasant!” I think he meant my illustrations are very dashing and confident—I took it as a compliment.
Our attention these days is scattered and chaotic because of the overload of information we receive from the internet. The competition for readers’ and users’ attention continues to increase, making our choice of design instruments and devices that focus attention even more important.
First among these, we have animation. People look at what moves—this is one of the central principles of human psychology. It’s why explanatory videos, moving buttons on apps, gif illustrations, and animated headlines are so popular on the web. Because I’d picked up animation as a student I quickly caught the wave and began getting interesting assignments. Second, we have simplicity. My commissions these days tend to be for increasingly minimalist illustrations. These allow me to create visual effects that are clear and uncluttered. The eye wearies of excess but returns with pleasure to accessible, legible content. Third, there is the tactic of inducing surprise through a visual image. This is a very tricky and difficult business. For me in this regard my eyes were opened by a video called The Junction, which American animator Kyle Mowat, created for Red Bull Music Academy. Every second of it surprises the viewer.
There are many talented artists making their
own auteur animations but I’m most inspired
by the old school. The work of Sally Cruikshank
has special meaning for me. She makes both her own personal films and sequences for Sesame Street. Everything she does is spontaneous, unpredictable, dynamic!
I often recall something she said in an interview: “Animation is sort of this open door to fantasy-land. You’re only limited by what you can draw.”
This cheers me up and helps me look at what I’m doing with fresh eyes.
I’m not that great as animator per se,
but I do think I have a sense of motion that makes
for an offbeat view of the world.
Sally Cruikshank
Sally Cruikshank
Face Like a Frog, 1987
Sally Cruikshank
From Your Head
(Sesame Street) 1996
Because I’m primarily an illustrator my main tool is Photoshop. It’s where my process begins, drawing scenes frame by frame. Such painstaking business makes me feel I’m still working in the older tradition of creating animation with celluloid.
Many artist-animators now use Photoshop. In fact Australian animator and director Alex Grigg has made an excellent tutorial on the subject: Photoshop Animation Techniques. I’m also looking forward to studying TvPaint and Mocha, professional software for animators that supplements what Photoshop lacks and accelerates the animation process.
I feel absolutely no sense of being tied to a place or a context. I think all such concepts are being diluted to the point of disappearing. We no longer stew in our own juice. Everything is moving in the direction of globalization. I find inspiration in the most varied sources, so I think the idea of local identity is on its way out and that what’s left is just my personal outlook.
When I was three or four years old I watched Disney’s Snow White over and over for days. As a schoolgirl it was Nickelodeon at lunchtime. Obviously it all influenced me, and many
of my images come, if unconsciously, from impressions experienced in childhood.
Animation offers a medium of storytelling
and visual entertainment which can bring pleasure and information to people of all ages everywhere
in the world. Walt Disney
Walt Disney
Snow White and the Seven Dwarfs, 1937
Walt Disney
On the making of Snow White
CBC Archives, 1963
Curiously, Soviet animation left no traces in my memory. It’s possible that Western films won with me because of their wilder stories and bolder color combinations, their dynamism. Only now am I beginning to be more interested and appreciate the great Soviet creators. I recently had the good fortune to meet Mikhail Aldashin, a top producer at Soyuzmultfilm (a legendary Soviet animation film studio); I accidentally sat in his seat at the closing ceremonies for the Grand Festival of Cartoons. So I’m now part of the world of Russian and Soviet animators.
There are many talented artists making their own auteur animations but I’m most inspired by the old school. The work of Sally Cruikshank has special meaning for me. She makes both her own personal films and sequences for Sesame Street. Everything she does is spontaneous, unpredictable, dynamic! I often recall something she said in an interview: “Animation is sort of this open door to fantasy-land. You’re only limited by what you can draw.” This cheers me up and helps me look at what I’m doing with fresh eyes.
What I like about this project is that animation is used very selectively. The eye doesn’t become fatigued by excessive movement. The animation doesn’t distract from the essence of the thing, but delicately works as accompaniment and emphasis.
Among my contemporaries I especially like the group of young indie-animators that call themselves Late Night Work Club. These people work days on jobs that bring in money and create their personal films at night. Their first production, Ghost Stories, came out when I was just getting interested in animation and was a serious prompt to begin doing something of my own.
I very much like the work of Nikolas Menard. His visual devices, done with the most minimal of means, are always surprising. This is a reflection of his past as a graphic designer. A quite different approach is taken by Manabu Himeda, who finds beauty in the irrational and absurd. His characters and backgrounds are stretched and contorted, always in the process of becoming something else. This is breathtaking. Then there is the wonderful Moth studio, which specializes in commercial animations. But their work is so clever that it has been used for many auteur films. For example, The Last Job on Earth, made for The Guardian. This is a video that’s truly tactile and accessible and created with loving attention to detail.
I recently worked on a short video with the creative agency Doubleday & Cartwright for the WeTransfer service, which allows students to exchange large files for free. Our main idea was that, while there are various ways to exchange files, they are all outdated by comparison to WeTransfer. My comparison was with fax. It was crucial to tell the story with humor and to lay it out in 10 seconds.
The principal difference between commercial animation and auteur work lies in the concrete tasks and specific creative guidelines for commercial work. But client briefs are increasingly open-ended, and the differences are becoming blurred. It was my good luck to work under one of these arrangements on projects for Paramount Comedy and MTV International. The most important and the only requirement was that the logo appear at the end. For me it’s very important to feel free to express myself. It frees me to experiment and results in the most interesting work.
Nicolas Menard
Wednesday with Goddard, 2016
Manabu Himeda
Haircut day, 2014
Late Night Work Club
Strangers, 2017
As I become acquainted with all the many facets of the animation profession I’ve come to realize that its visual element is not the central aspect. What we remember are things that touch us deeply and that stimulate new feelings and thoughts. For the time being I look at my own work as “movement for the sake of movement.” I’m interested in what makes characters come to life. Soon, I hope, I’ll mature enough to pursue something even bigger.
Tom Ginnattasio
Tom leads the product design team at InVision
Studio. He spent his early years as a designer
working for Apple, Oracle, MIT, and Twitter.
I grew up using Flash, which was at least a decade, maybe two, ahead of its time in terms of delivering rich interactive content for the web. It gave us video long before the web was ready to support it. Just recently, in the past couple of years, we’re seeing technology like JavaScript and CSS catching up to what Flash could do.
Back when I started, 20 years ago, animation on the web was absurd. It was ridiculously animated GIFs, people trying to make their site really fancy. What’s happened over the past five years or so is that we’re becoming more mature with animation on the web. We’re realizing animation is about designing with time, and time can be a really powerful piece of user experience. It connects one screen to another, helps users grasp the content they’re consuming, and helps build a geography of the application, so users understand where they’re at spatially.
The web design market has become extremely fragmented over the past five or six years. Designers really started to mature, moving to different tools to cobble together a robust workflow. They have Sketch, their primary tool, then they use After Effects to do animation; folks on the other end of this spectrum are using tools like Keynote to do animation. It’s really varied and creates a disjointed workflow. Switching back and forth between Sketch and After Effects is time-consuming and, at the end, you still don’t have something you can go out and test with real users. We’ve seen the same problem with freelancers who are just trying to crank out better projects for their clients up to really large enterprise clients who make constant iterations. So we saw it as a really big opportunity for the entire industry and created InVision Studio.
If I had to point to one of the most
influential animators I’d say Walt Disney. He basically invented the entire practice, which his team grew from almost nothing.
I would rather entertain and hope that people learned something than educate people and hope they were entertained. Walt Disney
Cinderella
Walt Disney, 1950
Walt Disney talks creating Carousel of Progress
Disney.com, 1964
Back in the day they were doing things by hand that are still incredible. Something like
Cinderella, which was created more than
half a century ago, is still a beautiful example of animation. Disney literally wrote the book on animation: The Illusion Of Life.
It laid out principles we still use today.
Diane Disney remembers her dad Walt
DisneyAvenue.com, 2001
Trends can be a little dangerous for designers. Once something becomes popular on Dribbble you always see duplicates the day after. Many people blindly copy what they see—not digging beneath the surface to deeply understand the way it aids the user experience. So you end up with “look at me!” clones that actually get in the way of overall user experience.
As a tool designer I try to dig a little deeper into what people really need so they can follows trends but also keep using the tools after the trends die. For example, right now parallax is a pretty popular web animation trend but we’re not going to build parallax tooling. We’re going to build the capabilities to animate layers at different speeds, which enables parallax, but we’re less concerned about the trend itself.
I’m also seeing people really think about how to transition between different views in applications so the experience feels seamless. What I mean by that is: imagine a movie app, where you’re viewing the trailer and you want to pick your seats for the film. You tap a button and the movie frame rotates down in three dimensions and seats appear facing the frame, just as they would in an actual theater. That builds spatial relationships between the two scenes and helps people understand the content on a deeper level, plus adds a level of craftsmanship that enhances the overall impression of the app.
One of my favorite animation authors
is Val Head. She is with Adobe now,
and recently she wrote a book called Designing Interface Animation: Meaningful Motion
for User Experience. She explores how
animation can be more than just something that
looks fancy, but can help users. Google Material motions guidelines could be really helpful
for understanding how to use motion inside
of an interface itself.
Val Head
Designing Meaningful Animation
Render Conference, 2016
Val Head
Web Animation Dev Tools in Chrome and Firefox, 2016

Stas Aki
Stas Aki is Readymag’s product designer.
He started out as a graphic designer in the
Art. Lebedev Studio and later co-founded the
SILA project group.
Web animation is a logical outgrowth of pre-internet media. The guiding stars of the 20th century were movies and television, and by the end of the century designers were deeply involved with animation in various formats—cartoons, cinema titles, commercials. As I see it, the chief thing that sets web animation apart is its interactiveness.
There are, in my opinion, two crucial moments in the history of web animation: the appearance of Macromedia Flash and the mass adoption of smartphones. The latter is of special interest. With touch-screen devices, the users interact with the interface with their fingers, a more natural kind of control than the manipulation with a cursor. Thus, with the help of animation, designers extend the normal actions and seamlessly transport the user from the real to the cyber world. Designers create virtual spaces that mirror the dynamics of the usual, physical world and, thus, they feel more natural. For example, when you open the panel with Wi-Fi settings in iPhone, the response happens at the speed of your finger moving across the screen. It is as easy as, and very much like, opening a drawer. What is more, you can stop the animation halfway to completion and reverse the action without taking your finger from the device. The latest web animations increasingly make it possible for the user to speed up or slow down, endowing digital elements with an imaginary weight.
Val Head
The Ins and Outs of Easing
dotCSS, 2016
I prefer cartoons with super-primitive graphics and limited color palettes, such as the work of the British artist Phil Malloy and David Lynch’s series of short films DumbLand. The deliberate stylistic asceticism of these works brings to the fore the animation component. By the way, Lynch made DumbLand with Flash and a mouse.
I like how Charles and Ray Eames used animation to show the entire universe, macro and micro, in their short film The Power of Ten.
Lately I often turn to work by the Wolff Olins agency—their Instagram includes many spot-on videos.
I love animated typographic posters. Among the many designers who are now experimenting in this field, I would single out the Swiss Studio Feixen.
Charles and Ray Eames
Powers of Ten, 1977
Phil Mulloy
Cowboys: High Noon, 1991
A film—especially when it's a personal film—
is going to hit somebody or it's not. There's nothing you can do about it. David Lynch
David Lynch
Dumbland, 2002
Readymag has never thought of itself as a kind of powerful animation machine, but, over time, animation has become one of our central features. We saw that it makes it possible for users to create interesting, beautiful, considered, and contemporary websites. Once aware of the need, we began to develop our animation capabilities consciously and intendedly.
At first, Readymag had only preset animation settings for moving between pages and preset transition effects in the widgets (this is what we call all components on the page). But in early 2016 we began to offer animation as an independent feature that might be applied to any widget. At the same time, we tried to make the creation and use of animation in Readymag as simple as possible and didn’t even introduce standard timeline editor in the interface.
In that same year, too, we launched triggers that let the user start animation on one widget by committing actions on any other widget. Our users began to employ these new possibilities very inventively.
For the future, our team is concentrating its efforts on developing animation in mobile format—the browsers in today’s smartphones allow many more possibilities than were available just a few years ago. We are also continuing to widen the functionality and improve the performance of animation in published desktop projects.
The main idea that I want to get across in this piece is that we designers can do web projects that are interesting and visually rich without indulging in prettifying frills.
I did several layouts of each page and then considered how to put them together in such a way that one seemed to flow from the preceding as soon as it was scrolled down.
It may sound odd, but when thinking about animation for my own projects, I don’t take my inspiration from cartoons but from movies. My preferences were formed under the influence of Orson Welles, Jean-Luc Godard, Peter Greenaway, and Sergei Parajanov—tireless seekers of a new visual language for the cinema. That is how I am proceeding: experimenting with animation and seeking a new language for the web. I don’t impose animation on content but seek to make it an integral and essential part of the visual narrative.
So, to all who are interested, I recommend that you make your own video, editing it on iMovie or Final Cut Pro. The actual experience of editing gives you a good understanding of what it is to work with material that develops in time.
You must torment people with your artistic delight, scaring mother and grandmother in the middle of the night. Sergei Parajanov
Sergei Parajanov
The Color of Pomegranates, 1968
Daniel Bird
Making The Colour of Pomegranates, 2011
You have all got mobile phones, you have all got
cam recorders, and you've all got laptops, so you're all filmmakers. Peter Greenaway
Saskia Boddeke & Peter Greenaway
Obedience, 2015
Peter Greenaway
Cinema is dead, 2017

Animation
Outro
Animation pioneers
Resources
Books
Google Material Motion Guidelines
Issara Willenskomer
Val Head
Web Animation Weekly Newsletter
Rachel Nabors
Slack channel
YouTube channel By Pablo Stanley
Inspiration website
Anatomy of a Scene ‘Sicario: Day of the Soldado’
Benicio Del Toro
Inspiration website
Rachel Nabors
Animation: Meaningful Motion for User Experience
Val Head
The Illusion of Life: Disney Animation
Ollie Johnston and Frank Thomas
Norman McLaren
Richard E. Williams
Photoshop Animation Techniques
Alex Grigg
Walt Disney: The Triumph of the American Imagination
Neal Gabler