Principles of animation: how to make a good screencast of a software product
Life is like driving a bike. To keep your balance, you must move.
A.Einstein
Preamble: in Alconost we make selling videos for software products, websites, online services, mobile applications. The key role in such videos is given to screencasts - the display of user actions in the program / service / on the site. A screencast is a display of a product by “face”. If the screencast is made poorly - the viewer will have a feeling of a poor product and the task “to motivate to try the product” will fail.
We thought about why screencasts look unnatural and disharmonious and how to make screencasts always work out well. It turns out that there are 12 principles of Disney animation and if you follow them - any action on the screen will look beautiful and harmonious. We slightly worked on these principles: we removed what does not apply to screencasts, and adapted the rest to the specifics of video clips about software products. As a result, we got a memo-guide for video designers, which we want to share.
')
So, if you ordered a video, and you are sent over and over again with intermediate versions with slop screencasts, show this video to your “video domains”:
The video is intended for people close to video design, so if you need a more detailed description of each principle, welcome to Cat.
So, if you need to make a cool screencast, follow these principles:
Minor illegible details - this is a universal evil that turns screencasts into a means of irritating the viewer. When the brain cannot make out small details, it sends a signal of potential danger, which causes a feeling of tension and discomfort. Therefore, try to show in the video window of the program or site as large as possible.
Hint: so that the window can be shown large - squeeze it when you take screenshots. The more compressed the window, the larger you can approach the camera in the video.
If the screenshot appears on the screen all at once - it may look boring, if the screenshot is going to the elements - it looks interesting. Divide the window of the program or site into separate elements, work on their appearance - and you will be provided with a cool screencast.
Constant uniform speed of movement of objects is evil.
The movement of the object must begin with the acceleration (Easy Out), which gradually decreases and goes to the middle of the path. In the second half of the path, the object should move with increasing deceleration. Movement ends smooth slow braking (Easy In).
This principle is similar to the previous one, only the area of ​​the initial acceleration of the object is very small, and most of the way is slow attenuation of movement, the desire for smooth deceleration from one keyframe to another (Ease).
If, in the process of movement, you squeeze an object along an axis with a directional movement and stretch it along an axis perpendicular to the movement, you will be able to make the movement lively and dynamic. And if you use exaggerated compression and stretching, you can achieve the effect of exaggeration, comedic.
If you finish the movement of the object with a small, slightly noticeable rebound, it will very much animate the video. As in the previous principle, if you exaggerate the rebound, you can achieve the effect of hyperbole, exaggeration.
Object paths should be non-linear Bezier curves . Linear trajectories of course also have the right to life, but they do not give the sensation of dynamics, they look “inanimate”, mechanical, and more suitable for secondary objects. Combining the principle of Easy In-Easy Out with the principle of using Bezier curves is guaranteed to make the screencast (and the video as a whole) natural and harmonious.
The object in motion should be blurred. The faster the movement, the more “blurred” the object should be. Otherwise, the viewer's brain will try to understand why the video looks unnatural. Most likely he will not succeed in this, but the impression from the video will be spoiled.
It is worth noting that when animating screencasts, it is not necessary to use absolutely all the principles listed above. No one has canceled common sense and designer talent;)
about the author
Alconost is engaged in the localization of applications, games and websites in 60 languages. Language translators, linguistic testing, cloud platform with API, continuous localization, 24/7 project managers, any formats of string resources.
We also make advertising and training videos - for websites selling, image, advertising, training, teasers, expliners, trailers for Google Play and the App Store.
Read more: https://alconost.com
A.Einstein
Preamble: in Alconost we make selling videos for software products, websites, online services, mobile applications. The key role in such videos is given to screencasts - the display of user actions in the program / service / on the site. A screencast is a display of a product by “face”. If the screencast is made poorly - the viewer will have a feeling of a poor product and the task “to motivate to try the product” will fail.
We thought about why screencasts look unnatural and disharmonious and how to make screencasts always work out well. It turns out that there are 12 principles of Disney animation and if you follow them - any action on the screen will look beautiful and harmonious. We slightly worked on these principles: we removed what does not apply to screencasts, and adapted the rest to the specifics of video clips about software products. As a result, we got a memo-guide for video designers, which we want to share.
')
So, if you ordered a video, and you are sent over and over again with intermediate versions with slop screencasts, show this video to your “video domains”:
The video is intended for people close to video design, so if you need a more detailed description of each principle, welcome to Cat.
So, if you need to make a cool screencast, follow these principles:
The bigger the better
Minor illegible details - this is a universal evil that turns screencasts into a means of irritating the viewer. When the brain cannot make out small details, it sends a signal of potential danger, which causes a feeling of tension and discomfort. Therefore, try to show in the video window of the program or site as large as possible.
Hint: so that the window can be shown large - squeeze it when you take screenshots. The more compressed the window, the larger you can approach the camera in the video.
Compare two screens
Animation of elements
If the screenshot appears on the screen all at once - it may look boring, if the screenshot is going to the elements - it looks interesting. Divide the window of the program or site into separate elements, work on their appearance - and you will be provided with a cool screencast.
Easy In - Easy Out
Constant uniform speed of movement of objects is evil.
The movement of the object must begin with the acceleration (Easy Out), which gradually decreases and goes to the middle of the path. In the second half of the path, the object should move with increasing deceleration. Movement ends smooth slow braking (Easy In).
The speed of the object can be expressed as a graph.
Easy ease
This principle is similar to the previous one, only the area of ​​the initial acceleration of the object is very small, and most of the way is slow attenuation of movement, the desire for smooth deceleration from one keyframe to another (Ease).
Schedule
Compression and stretching
If, in the process of movement, you squeeze an object along an axis with a directional movement and stretch it along an axis perpendicular to the movement, you will be able to make the movement lively and dynamic. And if you use exaggerated compression and stretching, you can achieve the effect of exaggeration, comedic.
Rebound effect (bounce)
If you finish the movement of the object with a small, slightly noticeable rebound, it will very much animate the video. As in the previous principle, if you exaggerate the rebound, you can achieve the effect of hyperbole, exaggeration.
Bezier curves
Object paths should be non-linear Bezier curves . Linear trajectories of course also have the right to life, but they do not give the sensation of dynamics, they look “inanimate”, mechanical, and more suitable for secondary objects. Combining the principle of Easy In-Easy Out with the principle of using Bezier curves is guaranteed to make the screencast (and the video as a whole) natural and harmonious.
Motion blur
The object in motion should be blurred. The faster the movement, the more “blurred” the object should be. Otherwise, the viewer's brain will try to understand why the video looks unnatural. Most likely he will not succeed in this, but the impression from the video will be spoiled.
Motion blur example
It is worth noting that when animating screencasts, it is not necessary to use absolutely all the principles listed above. No one has canceled common sense and designer talent;)
about the author
Alconost is engaged in the localization of applications, games and websites in 60 languages. Language translators, linguistic testing, cloud platform with API, continuous localization, 24/7 project managers, any formats of string resources.
We also make advertising and training videos - for websites selling, image, advertising, training, teasers, expliners, trailers for Google Play and the App Store.
Read more: https://alconost.com
Source: https://habr.com/ru/post/173685/
All Articles