Designing Meaningful Animations

Val Head - Beyond Tellerand


The conference

Animation provides meanings. These meanings have to match the spirit of the website. The way you describe your site must be the way you describe your animation. If you want to give a feeling of power and stability, your animation must be rooted and sharp for instance. On the other hand, you use bouncy shapes to make an animation cute to define a candy brand. To provide emotions, we adapt the Disney’s animation mainstays. They are actually based on observations of real life and try to match as accurately as possible to a living being.

Among these 12 principles we mainly use three of them that are timing and spacing, follow through and secondary action. Timing and spacing gives tempo to your animation. This way, you can make a shape seem friendly, mean or afraid of something. It’s basically the way your animation moves.

Follow through is as important as the first one. It’s based on a physical principle which is inertia. Nothing stops instantly, there is acceleration and deceleration. I like the example of a big dog with floppy cheeks. If he moves his head, his cheeks will do the movement with a bit of delay and continue to move even when he will stops his head. With a blbl move, which will give a friendly look to the scene. In animation it’s the same. The way you will make your shape react during the movement will provide emotion. If these principles are well used they can improve the mood that your website gives. It gives emotion and emotion is the best that can happen to your website.

Val Head

Val Head is a designer and consultant living in Pittsburgh where she works with agencies and business to make animated website. She is very active on social media. She is also a speaker at international conferences and leads workshops on web design and creating coding.

val head