Visual Design - Motion

Here we go, the final installment of my summer blogs. I started 5 weeks ago blogging about colors, moving into typography, shapes, pictures and finally here we are at motion.

Motion

Webdesign has changed a lot since I started almost 20 years ago. In the very beginning we had frames, then we moved to Shockwave, making our way from Flash to HTML5 with CSS. It has become this responsive thing as well. Actually I feel it has matured. Looking at my design studies I am now using more knowledge from design as I did before.

Since Macromedia (later Adobe) Flash motion has really become a part of webdesign. During these Flash days anything was okay. We didn't care about the filesize, loading times and all that kind of stuff. It had to look amazing. Actually now, we're there again - yet more matured. No longer do we animate for the sake of animating, we can now have it help our visitors.

Guiding through the website

Both small and big animations help guide a visitor through a website. Use animation to make chevron's clear or to indicate there's more on the page. Use it wisely so it helps your visitor. Doesn't matter what type of animation you're using (be it code or a video) make sure it doesn't intrude the visitor in doing what he came to do on your website.

There are many forms of motion. There's 2D or 3D animation, motion graphics (titles, logo, infographic), stop-motion, compositing and interactive animation (the user triggers the motion). Yet all these forms can follow some basic rules which we'll dive into next.

The Illusion of Life

I don't often have one single book I mention for a discipline - but for animation I do. The Illusion of Life: Disney Animation (1981) is a brilliant book by Ollie Johnston and Frank Thomas. Although it mostly applies to the original Disney animations, I feel we can translate their principles to web-motion too.

In the book Frank and Ollie say there are 12 principles to great animation. When you're sticking to these 12 principles your motion will look very natural and believeable.

1. Squash and Stretch
   Give objects a feeling of weight and flexibility. The obvious example is a bouncing ball. The weight does something to the ball when it hits the floor and bounces back. But this principle can also be applied to faces or even atmospheres (like in The Matrix when Keanu Reeves makes the room bounce). When you exaggerate this it will automatically make it look more funny.
2. Anticipation
   Every action causes a reaction. A soccer player has to move his leg backwards before he can really kick a ball forward. Another example is how characters often look outside of the frame and introduce someone walking in by this movement. Make sure to do what someone expects. If a button you use bounces in a very unnatural way - you'll lose the visitor.
3. Staging
   Focus on what is relevant and leave out the details. You can change the surroundings to create an emotion of feeling. I think one of the best examples here is the end of a video. When a video ends there's often an option to replay or choose a new video - whilst the video itself is pushed to the background, leaving the visitor to choose one of two buttons.
4. Straight ahead / Pose to pose
   There are a few ways to animate. Straight ahead is a technique that goes frame by frame. Pose to pose works with a few keyframes. I think the best way to explain is a Disney film vs a Southpark episode. Straight ahead offers a natural, fluid motion. Pose to pose is less fluid. Back in the day in Flash we would use a motion tween between two frames - that's pose to pose.
5. Follow through
   Follow through helps make your motion more believeable. Take an Olympic runner. When he has crossed the finish line he won't immediately stand still. There's a follow through of him slowing down and the muscles relaxing towards standing still. Prevent your motion from having a hard stop and make sure you follow through.
6. Slow in and out
   Sometimes it takes time for things to start moving or slow down. Take a car. When a car starts you can see the car gathering power and the front is moving up a bit when driving off. When the car is braking the front of the car goes down a bit in order to brake. So its natural for the car to start slowly and move a bit.
7. Arcs
   The movement of an object follows a line, or arc. A football doesn't often move in a straight line to the goal. When it is hit the ball has a twirl, an arc, depending how it is hit. Many objects have a clear arc. You can add realism to your motion if you take into account how objects move.
8. Secondary action
   Secondary action adds to your scene. There is always one important animation, yet additional motion can help clarify this. When you've got a big button bouncing in the center and there are arrows around it pointing to the button - the secondary motion of the arrows adds to the importance of the button.
9. Timing
   The right timing is very important in motion. Timing emphasizes a mood, emotion or reaction. The tension of your motion is all down to timing. Ever felt an infographic video was starting to be boring after a minute? Timing. Its the most difficult of the principles.
10. Exaggeration
    Depending on your type of project it could be an option to exaggerate certain movements. Sometimes people don't understand what they are looking at or how something works. Exaggerating mildly could just help you out here.
11. Solid Drawing
    With this principle the kind people of Disney mean taking into account the laws of form, anatomy, balance, weight, light, shadow and more. It would be very weird when a KLM plane is animated following the same motion as used in a Volvo Truck.
12. Appeal
    The visitor should feel your 'character' is real. The animated element should feel real and interesting. Our brains find it hard to understand strange objects. We don't feel sympathy for them, so we don't "feel" the motion. Ever watched a movie with an alien? Watch it again and try to see what the animators have done for you to make it feel like there's a real alien.

Web-motion

Obviously the 12 principles were written for the more traditional way of animation. In webdesign I often see several principles being used all the time and some a little less. The principles I often see are straight ahead, slow in and out, timing and arc. Exaggeration is not used as much as you'd expect. Appeal is a difficult one. Often we're not working with characters as Disney is. But maybe the webdesign can be seen as the layer of appeal?

Examples

There's one example I have always found quite nice when it comes to motion. The website Baroque me is simply a great example. Just take a look at the animation and try to apply the 12 principles. You'll find this website, as little as it is, works awesome!

A portfolio I have always checked since 2011 or so is that of Denise Chandler. I liked the carnival-version the most, but this site is always a nice surprise. Through subtle animation Denise adds value to her websites. Werkstatt (a French agency) is another I've followed since 2011 due to their skills in animation on the web.



Another one that has never left my mind is that of the UK Energy Consumption. Just look at all the small animations as you navigate your way through the website! And finally its been around for ages now, but Dumb Ways To Die still makes me smile.

Summary

Motion is an important part of the webdesigner's job. I feel its one-fifth of the skills a good visual (web)designer should govern. As any aspect of Visual Design, there are principles you can follow - no need to invent everything for yourself.

These summer blogs were intended to spread some basic knowledge on Visual Design (for the web). I got worried about the state of it because I see a lot of poor websites and I noticed that we have gotten lazy. We are often happy with what a client is asking us to do. We shouldn't be. Quality is something we have to add. Never be happy, always fight for your designs. I hope these blog posts have given you ammunition to express your desire for quality to your clients. Feel free to use any of the information to explain what we do to your clients.

And a very big and humble thank you for reading my posts. I noticed more people found their way to these posts whilst I was writing them - something I really appreciate. Thank you!

All the best,
Corné