Ever wondered what these 2 things have in common?
There’s a small connection between Disney and Motion design, they were one of the first to design principles for their animation proces. These principles are as important as the other rules in design. These things will be discussed below.
What is ‘Motion Design’ ?
First off, what is motion design? Motion design is simply said the movement of graphic images. Motion graphics used to be the term used for it and this term originates from the film and animation world. Motion graphics often appeared as a moving logo on a website or an end screen in a video or movie. Technology has advanced and nowadays motion is applied to a wide variety of content, so the term motion graphics has changed to motion design.
Motion design goes beyond the most common methods of frame-by-frame footage and animation. Motion design differs from typical animations because they are not strictly character driven or story based and often animated abstract shapes, such as logos or graphic elements.
When animations are applied correctly, it can improve the user experience. It can indicate status, refer the user, show and grab attention and the user consequences of his actions. People nowadays consume more content and stick with things just a little longer. Motion design can play an important role in this.
The 12 Principles of Disney
The twelve principles are based on the work of Disney animators who started looking for more realistic animations from the 1930s onwards. The main purpose of these principles were to create the illusion that cartoon characters adhered to the basic laws of physics, such as gravity. They’ve also addressed more abstract issues, such as timing and character appeal.
Squash & Stretch
The principle behind the squash and stretch is that an object gets a feeling of weight and flexibility. When used excessively, this effect takes on a cartoonish effect. To create a realistic animation, make sure the object maintains the same volume.
With UI design, squash and stretch can easily be applied to buttons. The pressed state of the button is “squash”, but this principle can also be applied to other interactive parts.
Anticipation
Anticipation lets the viewer know that something is going to happen. When you think of a cartoon, a character that is going to throw something will first put his arm back and then forward.
Also within interfaces we can use this principle to let the user know that something is going to happen or that there is more information.
Staging
In theater and film, staging is the principle of drawing the audience’s attention to a particular point. This is done through the placement of objects on the screen and the use of light and camera angles.
In interfaces, staging also determines how the screen is constructed. It determines where and when the animations take place, so that the focus is on the most important part.
Straight ahead action & pose to pose
These principles have to do with the way of drawing an animation. With straight ahead, the next step is drawn each time and with pose to pose a number of frames are made after which the gaps are filled in. When which technique is used depends on the type of animation and its purpose.
These principles don’t really apply to UI elements.
Follow through & overlapping action
The principle says that an animation consists of a combination of animations that do not all start and stop at the same time.Overlap occurs when two animations are running at a different speed. When a person is walking, the movement of one arm has a different speed than the movement of the head. Follow through is the result of an animation, for example limbs that move when someone stops spontaneously.
Slow in & slow out
Slow in and slow out means that animations have a realistic movement that starts slowly and then gains speed or vice versa.
Arc
The principle that says that arcs make animations more natural. A moving object usually follows an arc due to gravity. When an object follows a straight line, it appears less natural. It is therefore necessary to look carefully at what fits the interface when this principle is applied.
Secondary action
A secondary action enhances the effect of the primary action. Moving your head while walking is a secondary action. In UI, a secondary action can give the primary action more power.
All microinteractions follow the principle of secondary action.
Timing
Timing is about the length of the transition and therefore the speed of the animation. Realistically, the timing of objects follows gravity. A heavy object will react less quickly to a push than a light object.
Timing is very important in UI design. You never want to make users wait too long, but you don’t want to show an animation that is too fast. Most animations last between 200 and 600 milliseconds. Material Design has a clear explanation of which type of animation should have which duration.
Exaggeration
In film, a character must be attractive, but also remain realistic. By exaggerating some actions, the character gets more attention.
Also in UI you can exaggerate certain interactions and thus attract the user’s attention.
Solid drawings
In the principle of solid drawings you look at the animation of 3D in volume, weight and balance. To achieve this, perspectives are used and, for example, overlapping is used.
This is the basis of Material design. All objects have a fixed volume and weight and undergo gravity and friction.
Appeal
In appeal it is mainly about sympathy, charisma and making certain elements interesting enough. If your animation makes people open their eyes or smile, you have created an attractive animation. Appeal is the principle that gives that little bit extra and makes people come back to your product.
Is Animation Necessary?
The first question need to be: does animation add anything to the user experience? Users aren’t using your app so that they can admire all of your amazing GUI design. They’re there because they want to get stuff done. The speed with which users can interact with your application will be one of the major deciding factors for user satisfaction.net
As an user it’s easy to spot excess use of animation. The animation that frustrates you more than it was intended to be. As a designer it’s up to you to realize that the UI is not purely focused on entertainment. Nobody is using your app or website to specifically stare at your animations, they come to your application with a purpose. So think wisely about implementing motion design into your