Readymag Design Almanac: Animation

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.

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.

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.

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.

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.

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.