The importance of animations in web and UI design

Val Head will be discussing motion in design systems at Generate Sydney on 5 September, while Sarah Drasner will demonstrate how to make intricate SVG animations at Generate San Francisco on 15 July.

Let's start with the facts, and they come thick and caffeine-quick: Val Head is a designer based in Pittsburgh (that's in Pennsylvania). There she runs her one-woman design shop. She works on the web – "because the web is awesome" – and she makes interactive digital installations.

The list continues: she wrote the pocket guide to CSS Animations for Five Simple Steps; recorded a free video tutorial series called 'All The Right Moves'; does a lot of speaking at web events; co-hosts the Ladies in Tech podcast; runs the Web Design Day conference and also teaches workshops. That's about the sum of it.

Stepping beyond the realm of facts and into supposition, it's difficult to imagine that Val Head sleeps. Firstly because it's unlikely that she has time and, secondly, she seems to crackle with a ceaseless, infectious energy. Sleep would mean a break from doing things, and that just wouldn't be right.

"I'm really enthusiastic about CSS, and I like to get other people enthusiastic about it because I think it's great," Head declares. Despite being CSS's most excited proponent, Head's background is in design. She began by schooling in animation and dabbling in photography and music.

The latter led to her joining a band and, when the band first needed flyers and later a website, she took on the task. "I discovered you could get paid to do web design and it pays much better than being in a band, so I stuck to it," she laughs. "I'm very much self-taught. When I was making the site for the band I was reading a lot of books, and I got my first job at a web design studio based on the fact that I'd made a couple of band sites. I learned a ton from the other designers, if I paid for their coffees."

Fond memories

Along with cheering for CSS, Head is also renowned for her work in web animation. This chapter of her life, again, has its roots in her early days. When she was at university, she attended classes where Flash was taught. That, she tells us, got her excited about Macromedia's famous child.

Gathering speed and broadcasting a palpable buzz, she continues: "There was this program with a timeline and you could draw whatever you want and make it move. That got me totally hooked, and I made lots of terrible abstract animations."

Then, one day, Head was experimenting with creating something interactive when her teacher introduced her to ActionScript. "That was a huge, mind-blowing moment," she gushes. "You could write this code stuff and make things move on the screen. Oh my God … That's the best thing ever!" That revelation changed her life.

Flash clearly had a profound influence on Head. With this in mind, we ask if – in some way – she mourns its passing? As a product, she says not, but as a tool, she says she misses its spirit and magic. "I miss it because I learned to code because of Flash and a lot of designers had the same journey. They discovered ActionScript as they tried to make more complex things. There have been some really great people from the Flash community who have gone on to do some really amazing creative coding projects … People like Robert Hodgin, Brendan Dawes and Seb Lee-Delisle. They're combining art and programming."

Lasers are cool

What makes Head saddest is that with Flash gone, there's no place for that connection between art to programming to be formed. Indeed, some of her favourite projects are those in which she's combined design and code. Recently, for example, Head designed a font and some animations created specifically for use with lasers.

"Lasers are cool!" she enthuses. "But those fonts only existed in code and if I didn't know how to program I wouldn't have been able to do it. I'd really hate to see other designers missing out on cool projects because they don't know how to program … Missing out because they never made that connection between visuals and programming, and what a great combination they can be."

Flash is, of course, now a thing of the past. So, how does Head think digital designers should teach themselves about animation these days?

"Experiment," she says swiftly. "Find a favourite effect – some UI from an app maybe – and try and recreate it. Use a timeline tool like Edge Animate or After Effects. Or do it with code if you're comfortable that way. That whole process of breaking animation down and thinking about the decisions the designers made is invaluable."

This process of deconstruction is important because there are a lot of things going on in animation. Things rarely just move from one place to another, rather they might fade, stretch or compress. Indeed, there are whole books written on the subject of animating an object's movement from point A to point B. Head's favourite is Timing for Animation by Harold Whittaker and John Halas.

This point about unseen process is best understood, Head tells us, by watching a Vimeo short called The Illusion of Life by Cento Lodigiani. It's a film that summarises animation's 12 basic principles as prescribed, in the 1930s, by the grandfathers of Walt Disney Studios. Watching the video, Head says, is a great starting point if you're looking to teach yourself about animation because it introduces you to the names for the art's key concepts. And, when you know the names you'll find deconstructing animations much more fruitful.

"Some of the 12 illusions are specific to cell animation," Head says. "But most of them apply to UI animation too. Really, their main focus is communicating. In Disney's case they were communicating real life and a character's personality. With interfaces we're trying to communicate, too."

Bounding apples

Indeed, look at interface animation with a critical eye and you can see animation being used to communicate a brand's personality. A good example of this is the game app Dots. The settings menu has a "bouncy and springy" feel which, Head explains, feels very similar to playing the game itself. This is important because it reinforces the game's personality.

There are, of course, examples of where designers pick the wrong type of animation, one that runs contrary to the product's personality. According to Head, the Apple product menu is a prime example.

"It used to have the same easing as the Dots game. I call it Muppet easing. It's very bouncy and childlike. I kept thinking, why are these Mac products bounding around like Elmo? It doesn't fit." The decision made no sense, and Apple finally changed the animation style when it released the iPhone 6.

As we talk more, we begin to explore the business case for animation. It seems that animation can be overlooked – it's the static stuff that tells the story, conveys the messages and sells the products. If you're paying the bills on a project, having things move and shift around on a page might seem like an expensive and unnecessary luxury.

Head, of course, disagrees with this suggestion. A lot of people, she tells us, think of the web as a static and flat medium. Often there's no use of sound and designers seldom take advantage of time and its passing. This is all wrong.

"That's not the definition of the web," Head counters. "What about when you want to show relationships between things, show how your content is structured, show cause and effect, guide people through tasks? How do you deal with complexity? Animation is great for all of those things."

Driving her point home, Head asserts that designers should hold animation in the same regard as typography and colour. Whenever something moves, there's a great opportunity to reinforce your concept and amplify your story. As such, animation should be considered at the beginning of a projects evolution, and not simply bolted on as an afterthought.

Not all rosy

Despite her galloping enthusiasm for web animation, Head is aware that, as a technology, it's neither mature nor easy to master. Far from being a zealot, she concedes that life for web animators is hard. One of the biggest challenges facing the sector is fragmentation. We have CSS and JavaScript and we can make amazing things with them. But the list of technologies is getting longer.

"We also have SVG," she says, pauses, grimaces and then clatters on. "SVG is like: 'Oh my God that's the most complicated thing ever'. You just go down this crazy wormhole with the powerful things SVG can do. And then you have Canvas and WebGL. They're JavaScript-based, but they're something different … How do you know where to get started? People must be like 'I'm overwhelmed!' So, even if you have an idea of what you want to make, you need to decide which tool to use." That, Head says, is a big impediment.

Looking more closely at CSS in particular, she says: "I'll be honest, I wrote a book on the CSS animation specification and the terminology is confusing and a lot of the syntax is weird. So, on one hand I can see why people are turned off. On the other hand, we're taking a markup language and we're making it do animation and it's designed by a committee so …" She trails off, then concludes with a guarded: "these things happen".

CSS animators' lives are also made harder because of web animation's less triumphant moments. "To a degree," she says," there's a stigma attached to being a web animator because many people think automatically of banner ads when they hear the words 'web' and 'animation'."

She is however quick to hit back at the prejudice. "People haven't seen animation as something useful for UX," Head contests. "They haven't seen how animation can help people make really sophisticated interfaces. So, that stigma – people thinking animation is difficult and it's a load of banner ad crap – is one of the biggest challenges we face."

Characteristically, however, Head isn't down for long. She darts off in search of more optimistic observations – specifically, the Web Animation API, which harnesses the power of CSS, JavaScript and SVG, and is moving along well.

Head is also encouraged greatly by the emergence of tools that mean animators don't have to mash code into text editors, instead providing visual designers with visual metaphors, like Flash's timeline. "We have things like Edge Animate, Hype and Google Web Designer."

"Sure, they spew out terrible code," she concedes," but they're good prototyping tools... And, I've heard good things about Macaw and InVision too, but they don't have timeline tools yet. I've seen things previewed at the Chrome Developer summit where you can inspect your animations – see what was animated, pause it, play it … I can't wait for that!"

Val Head will be discussing motion in design systems at Generate Sydney on 5 September, while Cennydd Bowles will explain how motion can be used to communicate and excite at Generate London on 22 September. Don't miss out!

This article originally appeared in net magazine issue 264. Subscribe now!