How to apply Disney’s 12 principles of animation to the design of the reader interface in the media – Luca de Tena Journalism Laboratory

1Stretch and squish (stretch and squish)

The principle of squash and stretch (stretch and squish) makes elements feel tactile and provides visual cues or feedback on the possibilities available. For example, if you want users to subscribe to the newspaper, you can use the squash and stretch principle to animate the checkout button. and grab the attention of users and entice them to “press” the button.

2Anticipation

Anticipation helps prepare the viewer for what is about to happen and is key to making any movement feel real. In most cases, you can tell when someone is about to jump because they are bending their knees and moving their arms in a particular way. There are many anticipatory movements that our brain processes on a subconscious level.

At the digital interfaces of the media, the anticipation principle can be used to inform the reader about what will happen if they take a particular action. One of the main applications of this principle is hover animations: if users hover their finger (or mouse) over a button, it moves to show them that it can be clicked to perform an action.

3Staging

The principle of staging refers to the use of movement to guide the viewer’s eye and draw attention to what is important within the scene.

An interface with lots of animations would probably confuse the user as all the elements are competing for attention. Use animation to show the user where to focus within the interface and keep movement of everything else (which isn’t that important) to a minimum. This will help increase the rate of reading time, since a contrary strategy makes other elements capture the attention and the reader ends up losing it.

4Direct and interval action

This principle refers to two different approaches to the process of creating an animation. In the case of direct action or straight ahead, a direct animation is created, drawing frame by frame from start to finish.

The technique of pose to pose o Interval involves first creating the keyframe: one frame, at the beginning, in the middle, and at the end. Then, in the case of computer animation, the animation software fills in the rest automatically.

In the design of the reader interface, it is most likely that You can use the pose-to-pose method, for example, to create states that make a change to a component.

5Track and Overlay Action

This principle reflects the fact that not all parts of an object move at the same time. For example: look in the mirror and shake your head. You will see that the movement of your hair is slightly behind the movement of your head, and your eyes may move differently (an overlapping action). This phenomenon is critical when objects stop after being in motion. In the same example, your hair is likely still moving a bit after you’ve stopped moving your head (tracking).

In the case of animation of the user interface there may be items that are related to each other, but can move at different speeds. For example, an image, a title and a description. The initiator of the movement will be the most crucial element, in this case, the image. Then follows the title and description. This principle helps establish a hierarchy in an interface.

6Go in and out slowly

The best way to understand this principle is Imagine how a car starts and stops. Any vehicle starts moving slowly before accelerating, and the opposite occurs when the car brakes. You have to add more frames to the beginning and end of a motion sequence to achieve this effect.

This principle is vital to making any movement in the design feel natural and authentic. Without using this technique, animations will feel robotic.

7Bow

In the physical world, most objects move in a slight arc. Think about how you walk or the motion of a ball you throw into the air.

In UI animation design, you can bring animations to life using arcs as animation paths instead of straight lines. A great example of this principle is the hover animation of the Mac dock bar, that makes navigating through the different docked apps intuitive and fun.

8secondary action

Secondary actions are used to support or emphasize the main action that occurs within a scene. The addition of secondary actions adds another dimension to the animations.

In UI design, secondary actions can be used to provoke emotions in users. Imagine that your user has submitted a very long form. You can animate the button Send to have a secondary celebration animation to congratulate its user on completing a time consuming task. In information areas, you can use other secondary actions more appropriate to the type of space in which you are.

9Time

How fast or slow an object is moving gives a lot of information. If we saw a snail moving fast, we would be puzzled and perhaps think that we have discovered a new species.

In user interface design, time can be used to inform users. For example, you can link the speed of a file upload animation to the size of the file. This will give your user an idea of ​​how long the process will take and why, so the upload will be slower if you’re uploading a large file and much faster if it’s a small file.

10Exaggeration

This principle gives animations a fun and It helps the viewer to focus on what is important. In UI animation design, certain elements can be exaggerated to make it clear to users how they are supposed to interact with the interface. Also, exaggeration always adds a fun aspect to the design. How much an element can be exaggerated will depend on the purpose of the product and the overall appearance.

A good animation effect will be invisible to the viewer. However, if it is overdone, it can annoy users.

elevensolid drawing

Understanding the basics of drawing, or in the case of the user interface, the principles of visual design, will help you design more successful animations overall.

Imagine you design a button with a shadow, and the shadow doesn’t follow a proper perspective. The user would immediately think that there was something wrong with the application.