Mr Bean

Mr Bean

Have you ever found yourself halfway through a project, and you're like "wait a minute" how is that going to move?

css animation rocks

I've been writing animation tutorials on CSS Animation.rocks for a while. I've created logo animations, ways of animating in list items, all sorts of fun demos.

?

But a question that often comes up, is how do we think about animation on large projects? How do we make it consistent? Can we use animation to help the UX of what we build?

yep

Animation can help in many ways. Whether it's showing or hiding content, or drawing attention to what matters to guide our visitors. Animation also speaks to us on a deeper level.

Lamp/Pixar Lamp/Anchorman

We can take a lamp, and it's just a lamp, but make it move... and people love the lamp. Animation can can also help brands.

Stripe example

Stripe, famously, took a boring payment modal and through adding lots of subtle animations gave it character. So, animation is important and useful. But how do we make it less of an afterthought?

Afterthought

How do we avoid this situation where we're having to decide every animation and transition as we go along. Let's talk about style guides.

Style guide image

We've all used style guides, maybe even created them. These are documents of our fonts, colours, layouts for our brand. We use style guides to share our designs and keep everything consistent.

Style Guide

• Fonts
• Colours
• Layouts
• Animations?

Let's say we want to put animation into our style guide, and make it just as important as fonts, colours, layouts and everything else. How might we do that? Well, one way might be to think of our brand as a character.

Everything is a character

Like a person. Our brands have a voice. If we were to describe this voice in words, what sort of words would we use to describe our brand's character?

Andrex puppy

Maybe the brand is fun, and playful. Maybe it's solid and dependable. In each case, the words we choose effect how we approach our animations.

Kitman Words

Here's what we did at Kitman Labs. We created this list of words to help define the character we wanted to put across. This gave us a starting point for how we could design animations more deliberately.

Overview image

The next step was to document it. We created a web page that set out the overall goals of our animations, and the sort of character they would have. We could then start animating.

Animate all the things

Now we didn't want to just animate for the sake of it. We could use this document to design animations that align with the character we want to portray. Every UI element is a character.

Buttons

And as we design our projects, we can look to the animation guide for help in deciding what sort of character we give each of these UI elements. We can then document these decisions.

Components from IBM

And the result? Over time we create this repository of knowledge, all the components documented. Here's an example from IBM where the component is documented with it's animation.

Google Material, IBM Design Patterns

And there are lots of good examples online. Google and IBM both set out lots of great examples in their online style guidelines. So if you're getting started...

Pattern Lab

And if you need a framework for a style guide, a good one to start with is Pattern Lab. It's free - and gives you a set of components for developing your own style guide.

Style guide title with list of Fonts / Colours / Layouts / Animations (tick next to animations)

Let's elevate animation to the level of fonts and layout. Let's design our animations deliberately. Let's let animation play a part in defining our brand's character.

I love lamp

And maybe people will love our brands too. Thank you!