Using extraordinary animation in web design. Smooth change of states
Submit an Application Form
Set Up Your User ID and Password
International applicants may get access to their accounts after they apply for a User ID and a password using the link. Once you have submitted a form, an e-mail will be sent to the address you indicated during registration with your User ID and password. Please make sure you have provided the correct e-mail address. Your User ID/password application will be considered within 72 hours (including weekends and public holidays).
Fill in the Form
Application Evaluation
IMPORTANT! Recognition procedure is mandatory for all foreign citizens applying to HSE and is offered free of charge. If you have a Russian high school/degree certificate issued by a Russian academic institution, you are still required to submit an application for recognition of academic credentials.
4. Apply for a Russian visa
If you have been admitted as a state-funded student (tuition waiver), your visa reference will be issued by the Ministry of Education and Science of the Russian Federation (MES), once HSE staff uploads all documents listed to the MES information system. The list of visa reference numbers will be published in your personal account in the Visa section. Normally visa references should be available in early August.
If you have been admitted to the HSE as a fee-paying student, please submit an application to obtain a visa invitation via your personal account (Visa section). More details are available in your personal account.
Please note that citizens of the following counties DO NOT NEED a student visa to study at Russian educational institutions: Azerbaijan, Abkhazia, South Ossetia, Belarus, Kazakhstan, Kyrgyzstan, Moldova, Tajikistan, Ukraine, Armenia, and Uzbekistan.
If you are a citizen of Belarus, Armenia, Kyrgyzstan or Ukraine, you may use your national (internal) passport when crossing the Russian border. If you are a citizen of any other country, you must obtain a travel passport to enter Russia.
Russian nationals arriving in Russia must also show an ID (Russian travel passport for Russian citizens residing abroad). To enrol in HSE, you must also have your national (internal) passport readily available, even if you are residing abroad. Please make sure to make your plans in advance, since it may take up to 2 months to issue a national passport in Russia (if you don’t have a permanent registration and only have a temporary one).
5. Enrolment procedures for foreign applicants
To officially enrol in HSE and secure a place at an HSE dormitory, please visit us at the following address starting from August 20, 2019:
Room 330, 3rd floor, 11 Myasnitskaya Ulitsa.
Make sure you have the following documents with you:
Your passport + its copy + notarized translation of your passport into Russian (if applicable);
Original high school/degree certificate/diploma + its copy + a notarized translation of your high school/degree certificate/diploma into Russian (if applicable);
Migration card issued upon entry to Russia (at the airport or another border checkpoint) or a copy of your Russian visa;
IMPORTANT! In the migration card, please make sure to underline Education(“study”) as your purpose of visit.
4 photographs (on matt or glossy paper), size: 3×4cm;
Original of your medical certificate (must be dated no later than March 2019), and negative HIV test results. Please note that a medical certificate is valid for 6 months, and an HIV certificate is valid for 3 months.
Your voluntary health insurance policy (if available). You can purchase an insurance policy from any insurance company of your choice or obtain one at our office. For your convenience from August 20 to August 31, representatives of 3 Russian insurance companies will be working on 11 Myasnitskaya Ulitsa.
Enrollment procedure includes the following steps
1. Submitting documents for enrolment to HSE.
2. Preparing documents to obtain a migration registration.
Please note that foreign students must register at their actual residence address:
If you are staying at an HSE dormitory, please contact the dormitory staff to get registered via a local migration office;
If you are staying at a rented apartment, please contact your landlord/landlady to get registered via a local migration office.
Please visit our office to for more details regarding the registration of students who are staying at rented apartments.
IMPORTANT! Citizens of the following countries may stay in the Russian Federation without registration for a fixed period of time only:
· citizens of Ukraine - 90 days;
· citizens of Belarus, Kazakhstan and Armenia - 30 days;
· citizens of Tajikistan - 15 days.
3. Dormitory check-in.
Dormitory places will be allocated via applicants’ personal accounts. You will get access to the Dormitory section in your personal account, once you've completed the Enrolment Consent and Recognition of Foreign Education and (or) Qualifications sections but no earlier than August 10. Therefore, by the time you visit us to submit your documents starting from August 20, a place at the dormitory will have already been assigned to you.
- Translation
Translator's note: The material presented below contains a significant number of technical terms, the translation of which may cause inaccuracies. If you notice a typo, error or inaccuracy in the translation, write to us and we will promptly correct everything.
In addition, in continuation of the topic of today's publication, an advanced academy course on CSS animations, which is usually available by subscription, will be open for one week. Its description is located at the end of the topic.
Front-end designers and developers use CSS to create styles, position elements, and generally make websites look good. CSS is often used to add movement to web pages, although it usually doesn't go beyond smooth transitions or animation.
In fact, animation can be a powerful tool that allows site visitors and customers to interact more easily with a product's interface and achieve their goals faster. This can be achieved if you follow some basic principles in your work.
The Disney company has been engaged in animation for many years and has developed the following recommendations - back in 1981, the book “The Illusion of Life: Disney Animation” was published, which listed 12 principles of animation (about them on Habré). They describe how to use animation to create a sense of the real world for viewers watching on screen.
In today's article, we'll look at each of these twelve principles and discuss how they can be applied to creating web pages. All CSS and HTML sources can be downloaded from Codepen.
Flattening and stretching
In the world there is a concept of “body mass” - and when an object moves, its mass remains unchanged. When the ball hits the ground, it will become a little wider and flatten because when physical contact the object's mass is redistributed.
This effect is most useful when creating physical objects (such as people, clocks, or bouncing balls).
Of course, in the case of web pages, this property can be ignored - DOM elements are not necessarily associated with physical objects and can grow and shrink in size on the screen as desired. For example, a button can grow larger and transform into an information window, and error messages appear and disappear.
However, the squash and expand technique can be used to make an element on the page feel like it has physical mass. Even small changes can create a subtle yet eye-catching effect.
Movements do not happen suddenly. In ordinary life, any action is preceded by some kind of preparation, be it a ball slowing down before falling down the steps or a person bending his knees before jumping.
This effect can be used to make objects on a web page move more realistically. The wait itself can be implemented, for example, as a slight wiggle, which allows users to understand what is happening and helps them more easily follow the movement of an object on the screen.
This effect is to define an object as the focal point of the scene, while other objects make room for the main action. To create this effect desired object appropriately highlight or obscure supporting elements to focus the user's eye on what they want to see.
In web terms, this means using translucent dimming for certain content. Applying a darker layer to an existing page and then placing the content in the foreground focuses the user's attention on it.
Another approach is to use movements. When multiple objects are moving on the page at the same time, it can be quite difficult to know which one is actually worth looking at. If in such a situation you stop all objects except one “needed” one, then all attention will automatically be focused on it.
Movement can be used in other ways. For example, if a user is working with a document, then a slight shake and blinking of the “Save” button may prompt the person to click on it. When there is no activity on the screen, even small movements really stand out.
Full speed ahead and step change movements
Direct motion is characterized by the complete rendering of all animation frames. In turn, step change is characterized by the creation of a sequence of key frames, the intervals between which are filled in later, usually with the help of auxiliary means.
The second approach is used in most web animation: the transitions between main frames are implemented by the browser, which interpolates the difference between each of them and draws as many intermediate frames as necessary to make the final animation smooth.
The exception is the “Steps” function. When using it, the browser “steps” through a given number of discrete frames. This way you can create a sequence of images and then play them one at a time in the browser using the Straight Ahead Action style.
Following and Overwhelming
Actions do not always happen simultaneously. When a moving car brakes sharply, it “nods off” with tire smoke, and the driver inside continues to move until the final stop occurs.
This effect is achieved using following and sweeping movements - they are needed to signal that the object has stopped. For example, an element placed in a list may travel a little desired position, and then return to the correct position.
The ripple effect is created by giving objects different tempos of movement. This approach is used in transitions in iOS - some buttons and elements move at different speeds, resulting in movements that are more realistic than they would be if they were moving at the same speed. Combining movements gives the user time to become aware of the changes occurring.
On the web, this is usually achieved by combining smooth transitions or CSS animations at different playback speeds.
Smooth acceleration and deceleration
Objects rarely go instantly from rest to maximum speed. It usually takes them some time to accelerate, just like it takes them to stop. Without gradual acceleration and deceleration, movements look unnatural.
In CSS terminology, speeding up and slowing down is known as easing or "easing function", which describes the change in speed of an animation.
Using the smoothness functions, you can create animations that speed up and slow down, and even more complex effects (using the cubic-bezier function).
Slowing down and accelerating makes objects more realistic, but there is one more thing: in life they rarely move in a straight line, as a rule, the movement follows a curved arc.
Achieve such movement in an arc with using CSS you can do it in a couple of different ways. One is to combine several animations. For example, an animation of a bouncing ball can be done by moving the object up and down, and the second movement combined with moving it to the right. This way it turns out that the ball is bouncing around the screen.
The second way is to rotate the element. By changing the center of rotation and moving it outside the original object, you can also form an arc.
Secondary action
The main action taking place on the screen can be emphasized with “secondary” animation. This could be the movement of a person's arms when walking or the shaking of his head with each step. Or the dust rising from the ground with every ball hit.
In the case of websites, secondary elements can "spread out" to highlight what the user really needs to pay attention to (an example use case is dragging an element to insert it into the middle of a list).
By manipulating the animation duration, you can make large objects appear heavy and small objects appear light.
You can achieve this on the web simple change animation-duration and transition-duration values.
By changing the duration of an animation, you can make it stand out among the content of a web page or during user interaction.
This technique is often used to draw attention to certain actions and make them more dramatic in cartoons. A wolf that is trying to bite someone opens its mouth much wider than usual - it is much scarier and more impressive.
On a web page, objects can be zoomed in and out to highlight them and attract the user's attention. For example, when filling out a form, it makes sense to make the active field larger, and the inactive ones this moment, on the contrary, reduce.
When working with three-dimensional objects, it is necessary to take into account the rules of perspective - people live in three-dimensional world, so if something doesn't look like what they expect, it doesn't seem right.
Modern browsers have good support for 3D transformations. This means that the developer can create an animation that will rotate objects and move them around the screen, and the browser itself will create smooth transitions between states.
Attractiveness
In the art world, attention to detail can create a special atmosphere, such as when looking at a painting. Similarly, in the world of the web, high-quality and well-chosen animations make the site look more attractive and authoritative. For example, the Stripe service team has achieved great success in such work.
Conclusion
Using the principles described above will allow web developers to create better, better-looking animations. If an animation takes into account the physical weight of an object, highlights changes, uses secondary movements, and is meticulously timed, it will significantly improve the overall user experience of the page.And now about the animation course
As we said at the beginning of the article, in continuation of the topic of the publication, we are opening for free access one of the advanced HTML Academy courses, which is dedicated to animation.See you at the Academy!
Tags:
- animation
- animation principles
- Web development
There is no special trick to creating large-scale animation. Although no, there is: you need to spend a lot of time optimizing and testing it. So, after several years of experimentation, constantly pushing against the performance limits of browsers, we have come up with a series of design and coding principles that will allow anyone to decorate their project with impressive and productive animation. Using them will allow you to get smooth operation of pages in desktop and mobile browsers. And most importantly, all this is done and maintained very simply.
The technology and implementation will be slightly different for everyone specific case, but we are sure that ours general principles will prove useful in almost any situation.
What is animation?
Animations have existed since before the Internet. To create the best ones, you can spend a lifetime learning. However, there are also patterns in this matter. We'll discuss some common and not-so-common problems that designers face when creating animations for the web.
To achieve smooth animation at 60 fps, each frame must be processed in less than 16 ms! This is a short period of time, so it is necessary to find very efficient ways to render each frame for high animation performance.
There are many ways to implement web animation. For example, film existed before the advent of the Internet. Its essence is that hand-drawn frames with minimal differences were shown several times per second, thus creating the illusion of movement for the viewer.
Twitter recently used this simple approach for their new animation hearts, scrolling through 26 frames in a given sequence.
The resulting animation is too complex to implement and, in fact, not smooth enough.
In many cases it is more profitable to use CSS property"transition" to automatically animate an element when it changes. This technique is also known as “tweening” and involves creating animation with automatic construction of intermediate images. Let's say we have 2 images of the same object in different positions. CSS transition effects will help you create an animation of its state changing. Their use is advantageous in that you can reset or reverse the entire animation logic at any time. This is the ideal “set it and forget it” approach. Works great, for example, with various intro sequences or simple interactions like activating mouseover animations.
Also, animation built in CSS on keyframes can serve as an ideal background for selected areas of the page. For example, the rings from the Gyroscope logo are constantly rotating. This approach is good to use for animating the movement of various mechanisms.
So, let’s wrap up with the introduction and move on to the main part of the post. Here are some tips that will help you significantly improve the productivity and quality of your animation. We hope they help you.
#1 Don't change any properties other than opacity (opacity) and transformations (transform)
Even if you think it would be better this way, you still shouldn’t do it!
Following this basic principle will increase work efficiency by 80%, even in the mobile segment. You've probably heard about this before. The idea is not original, but it is rarely followed. It's the web equivalent of "eat healthy and exercise." Everyone has heard, they know that this is correct, but few people comply.
In fact, using this principle is quite easy to get used to. This will especially benefit those who have previously done animations using traditional CSS properties.
For example, if you need to make an object smaller, you can use the scale property of the transformation instead of changing the width/height. If you need to move an element, you shouldn't bother with changing the padding values, because such an animation will require rearranging the page layout every frame. Better use simple transformation properties for this: transform: translateX or transform: translateY.
Why does this work?
For someone who changes width, padding, and other similar parameters, using transformation properties may not seem like a great idea. Visually the result is similar. But from the point of view of the cost of the computing power of the computer that will calculate all this, using transform looks many times better.
Browser developers have done a lot of work to optimize these operations. Transformations are really effective, they save graphics card resources by eliminating the need to re-render the element.
You can go crazy waiting for a page like this to load: all the corners are rounded, images are used, shadows are put on everything, and dynamic blur of elements is added for complete happiness. If this happens just once, then a few extra milliseconds of waiting won’t make a difference. But once all the content is rendered, you no longer want to wait for any values to be recalculated to change the page.
#2 Hide content in plain sight.
Use "pointer-events" in CSS: value "none" along with zero opacity to hide elements
This method doesn't work well in older browsers, but if you're designing for webkit or other modern browser engines, it will make your life a lot easier.
In ancient times, when animations were processed using jQuery help animate(), the main difficulty when working with the fade effect was the need to switch the value of the display property: activate none to stop the effect at the right moment. Too early and the animation won't complete, too late and you end up with an invisible element with zero opacity occluding the page. A callback was required to clear the screen after the animation was completed.
The CSS property "pointer-events" (which has been around for a long time, but for some reason is not used very often) serves to make things insensitive to mouse clicks and other interactions. It's as if they are not on the page at all. This property can be easily enabled/disabled via CSS. When running, it does not interrupt the animation and does not affect the rendering/visibility of elements.
By combining this thing with a zero opacity value, we get the same effect that "display: none" gives, but without the performance impact when starting new animation rendering loops. If I need to hide an element from view, I usually set the opacity to zero and turn off pointer-events. After that, I can forget about it, knowing that everything can be easily returned back and nothing will interfere with the performance of the page.
This technique works especially well with absolutely positioned elements because you can be sure that they don't have any impact on other areas of the layout or page elements.
It also gives you much more freedom of action, since the timing of the start/stop of the animation in this case may not be very precise. Even if you make a slight mistake with the timings, nothing bad will happen. The user simply won't be able to click anything before the animation completes. Everything will go as you planned.
#3 You don't need to animate everything at once.
Or use the principle of choreography.
One animation can be smooth on its own, but if multiple effects are being executed at the same time, it can ruin the whole picture and reduce productivity. Creating a smoothly running demo is very easy, but ensuring an acceptable level of performance as part of an entire site is much more difficult. Therefore, it is very important to plan the appearance of animation properly.
You will want to arrange the timings so that all animations start at different times. Usually 2-3 animations can run without delay at the same time, especially if they start with a small spread in time. More than 3 simultaneous (by eye, but not in essence - there should be a minimum spread in time) launches will almost certainly cause lags on the screen.
If there is more than one animation on a page, it is important for you to understand the concept of choreography. It would seem, what does the dance term have to do with it? But understanding its essence in in this context is very important for successful interface animation: things must come to the screen from the right direction and at the right moments. Even though they all work separately, to the viewer they should look like parts of one well-designed mechanism.
Google's Material Design has some on this issue. This, of course, is not the only correct way, but it provides food for thought and testing.
#4 A slight increase in transition delay makes it easy to follow the choreography principle
Animation choreography is very important, and its quality production will require a lot of experimentation. However, the code to implement the idea is unlikely to be very complex.
I usually replace one class on a parent element (usually the body) to trigger a bunch of transitions, each with its own transition-delay parameter. This is done so that each element appears at the time I need. From a coding perspective, you should only worry about the value of one variable instead of maintaining dozens of timings in JavaScript.
By swinging a series of elements at the same time, you can quite simply arrange their choreography. This is a powerful approach because it all looks good and runs fast at the same time, just remember that you can only run 2-3 animations at a time and everything will be fine. You need to distribute them on the page so that each one is processed smoothly and in a timely manner. The set of your animations should be perceived by the viewer as a continuous flow, and not a chain of disparate elements. One fluid scene.
Example code
There are a few simple methods, which will allow you to rock your elements. They are very convenient, especially if you are using a long chain of animations. If the chain contains less than 10 elements, then I usually specify the delay values in CSS. This is the simplest way to implement it.
For longer sequences or very dynamically changing elements, timings can be set dynamically for all elements by changing the values of variables.
Typically there are 2 variables: your base delay and the time delay between each element. This balance is quite difficult to find, but if you find yourself in correct set numbers, then everything will be fine.
#5 Use a common multiplier to develop inslow motion
And speed it all up later.
In animation design, timing is everything. 20% of the work lies in creating the animations themselves, and the remaining 80% is in finding the right parameters and timings to get a clearly synchronized and smooth scene.
This is especially true when working on the choreography of a wide variety of elements and trying to squeeze out maximum performance. After slowing down the animations, such scenes will become much easier to work with.
If you're using Javascript or a CSS preprocessor like SASS, the code should be simple enough to build the correct variable structure.
You should make sure that the code design is user-friendly so that you can easily test different speeds and timings. For example, if the animation stutters even at 1/10 speed, you're most likely doing something fundamentally wrong. If it runs smoothly when stretched 50 times, then the question comes down to finding the maximum speed at which it can run smoothly. It's quite difficult to notice problems at full speed, but if you slow it down they all become quite obvious.
To set up very complex animations or when searching bottlenecks In productivity, tracking the process in slow motion will be very helpful.
The idea is to pack a lot of beautiful detail into a scene in slow motion, then speed it up so that the animations look perfect. This is very delicate work, but users will appreciate the detail and smoothness of what is happening on the screen.
This feature is an active part of OS X: when you minimize the program window, you see an animation in slow motion.
#6 Take a video recording of your interface and scroll, you can see more from a third person perspective
Sometimes an outside perspective helps you see things more clearly, and video is a great way to achieve this.
Some people create videos in After Effects and then try to implement the resulting video on the website. I often do the exact opposite, trying to make a good video based on user interface site.
In real time, it’s quite easy to miss some moments. But watching the animation recorded at slow speed over and over again will help identify even the smallest problems. With this approach, everything becomes obvious.
Watching time-lapse videos from my pages and correcting problem areas has become an important part of my work. You can, of course, blame everything on slow browsers, but often, after testing and optimization, animations begin to work like clockwork. That is, everything can be solved with the right approach.
#7 Network activity can lead to lags.
You need to preload or block largeHTTP-requests
Images are a decisive factor in this regard, especially if they are large in weight (for example, a heavy background), or a ton of small ones (loading 50-100 avatars, for example), or simply a large amount of content (a long page with a bunch of pictures).
During the first page load, tons of things are initialized and loaded. Ads, modules, and other download queue 3 scenarios make the situation even worse. Sometimes delaying animations to play just a few hundred milliseconds after the rest of the page has loaded can work wonders. You will get a significant performance boost.
Mega-optimization should not be used unless clearly necessary, although a heavy page may require very precise delays and animation timings to run smoothly. In general, you need to start by loading as little data as possible, then include animation, and after that continue loading the rest of the heavy content of the page.
On pages with a lot of data, optimization work can take a lot of time. Animation that works well with static content can start to slow down and fall apart when loaded simultaneously with real data. If something seems to be working quite smoothly, but at some points starts to lag for some unknown reason, you should check your network activity. Your channel may be busy with other downloads at these moments. Make sure your network is not handling multiple simultaneous large downloads.
#8 No need to change the default scrolling.
The idea of replacing the scrollbar may seem cool, but it really isn't.
Animation-based scrolling has been popular for several years, especially if it is made using parallax and other special effects. One can argue about its usefulness for a long time, but here are the ways technical implementation There are some successful and not so successful ideas like this.
Moderately effective way creating things from this category is to determine the optimal scrolling step and highlight it as a separate event. If you don’t know what you’re doing, then it’s better not to use such scrolling at all. It's easy to make mistakes here, and maintaining a normal level of performance on pages with complex scrolling is quite a troublesome task.
An even worse idea is to replace the standard scroll with so-called scrolljacking (the content changes in sync with the scroll, for example, the Apple website). Do not do that. It is difficult to implement such an effect successfully, and not all users will like it.
If you have some experience and a desire to create your own scrollbar, make a lightweight prototype of it and test it for functionality before spending time on full development.
#9 Test your projects on mobile devices more often.
Most websites are created on a PC. Most often they are tested on the same machine on which they were developed. Thus, mobile version site and animation performance fade into the background. Some animation technologies (for example, canvas) will not work properly on mobile platforms.
However, if animation is done and optimized properly, the resulting mobile experience can be superior to the desktop experience. Mobile optimization used to be a very difficult topic, but the new iPhones are faster than most laptops. If you follow the tips above, you can achieve impressive performance for your animations on mobile devices as well.
The mobile version of the site is a large and very important part of it. This may seem strange, but I recommend browsing your site exclusively on your phone or tablet for a week. Ideally, you shouldn't feel like you're being punished by not being able to get to your desktop. If everything works quickly, smoothly and without violating the intended structure, then you have achieved your goal. If something goes wrong, you need to keep working.
Continue to make design improvements and improve performance until the difference in user experience between the mobile and desktop versions of the site disappears completely.
If you force yourself to use a mobile site for a week, you'll probably end up optimizing it even better than the larger version. By combating irritation by using it on a regular basis, you will fully understand the problems your users will face and can eliminate them before the project goes live. This will save you from a lot of problems in the future.
#10 Test projects on a variety of devices
There are many factors that can dramatically affect the performance of a website on PCs and mobile devices: screen resolution, number of pixels in the window, old hardware, etc.
Even though Chrome and Safari are built on Webkit and have almost the same syntax, they each have their own quirks. Any Chrome update simultaneously fixes old bugs and introduces new ones, so you have to constantly keep your finger on the pulse, as they say.
It’s clear that not everyone wants to follow the path of least resistance, making websites according to the lowest common denominator of the sum of bugs, so as not to get into another mess after the most recent updates. popular browsers. Finding smart ways to add enhancements and remove some to keep your site running smoothly can be very rewarding.
I regularly switch between my small MacBook Air and my larger iMac for work. Each cycle reveals small problems and indicates needed improvements. This concerns not only the performance of the animation, but also the design of the site as a whole, information density, readability, structure, etc.
Mobile and regular version Websites most often differ in structure design in terms of width, height, pixel density and other properties. Knowing the operating systems and hardware characteristics of mobile devices can help with optimization, since they are very different from those on a PC.
I hope you found the above techniques useful and use them in your next project. Good luck!
Translation of the article https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29
Motion design (or animation design) is motion graphics, video visual design, an incredibly huge artistic medium that covers many disciplines such as photography, illustration, graphics, 3D modeling, animation and many others.
Using motion graphics and three-dimensional (3D) animation
For many years, the animation and film industry has captivated people's eyes and people, like moths, flocked to the glow of a film projector. It was the film industry and brand technologies that became the location where computer animation and motion graphics found their development. The boundaries between animation and motion design are relatively blurred. Animation in its pure form existed and was extremely in demand at the dawn of the film industry until the development of the modern form of television, business and 3D technologies. Today, there is practically no modern cinema or type of television content that does not use motion design and three-dimensional technologies.
Motion design is also actively used in the most current direction of the event industry today- (3D video mapping) or, in common parlance, - . In a mapping show, content produced by motion designers is projected onto various surfaces or even into the air using various video projectors.
Motion design is also widely applicable in interior mapping design, i.e. when interiors are decorated using video projectors. This allows you to create completely new spaces, textures and decorative items, because projectors can illuminate the surface of any shape, thereby changing it beyond recognition, and even create the absolute illusion of a physical change in space.
BTL marketing, branding of spaces and premises and motion technologies are now almost inseparable. Advertising, presentations, video infographics, layouts, logos, branding - in all these areas of business, motion design is actively used and is a trend. Modern episodes of such film franchises as James Bond and Harry Potter, super-popular TV series like Game of Thrones - their locations, special effects, design - all this is “drawn” by graphics and animators on the computer.
Motion design as a form of contemporary art
Thanks to the active development of software and hardware for 3D graphics, motion design is actively developing in cinema, and is also one of the most sophisticated forms of modern art. In 1960, John Whitney was one of the first to recognize motion graphics as an art and introduced the term into a professional genre. His company Motion Graphics Inc. received a self-explanatory name and became a pioneer of motion graphics and design in the film industry. For several years, John Whitney's company has been actively working on such films as Psycho, Advise & Consent, Man With The Golden Arm, Vertigo. The company's goal was to create relatively simple but atmospheric motion graphics to enhance the mood of the film.
In the future, motion graphics are actively developing; visually attractive graphic compositions in motion are created, which also borrow elements from photography, video and illustration. Thanks to this, objects, characters and backgrounds change, move, interact and transform.
This type of motion art, in synergy with business tasks, has been actively used for presentations of certain major global brands. Obvious advantage Motion graphics as an art compared to other visual means of the artist’s self-expression is the absolute absence of any boundaries for the implementation of the artist’s ideas. With the help of a computer and modern software and accessories, you can bring any fantasy or idea to life.
Motion design in business
On Facebook, 85% of video content is viewed without sound, and yet, thanks to graphics technology, businesses manage to reach target audience the necessary message even without sound. Motion graphics are used to create the most best presentations. Information motion design is the best way to demonstrate processes, algorithms in graphical form, to reveal the essence of documents, technical specifications devices, facts and figures.
Today, motion design accompanies you everywhere: on the phone, advertising, cinema, performances and show productions, exhibitions, presentations and, of course, on television.
Motion design is an extremely promising form of creating visually attractive content for advertising or image purposes. If you are thinking about creating motion graphic presentations, promotional videos to promote your business, contact us, our team is always happy to develop something unique, find a solution specifically for your business and create incredible and fantastic content.
How to become a motion graphics designer
The profession of a motion designer is a fairly young direction in design, which arose as a result of the development of modern technologies and software. Graphic designers, web designers, interface designers, illustrators, 3D specialists and designers can all be motion designers to some extent.
Most important step For anyone planning to pursue a career in this direction, it is important to become familiar with the basics of 3D modeling, animation and graphic design. Some of the most popular computer programs for creating motion content are Adobe Premiere Pro, Cinema 4D, Adobe Photoshop, Adobe After Effects and Final Cut Pro. Nowadays, if desired, almost any talented artist can learn how to create high-quality motion content even without specialized technical education. You can find it on the Internet great amount training videos and other materials about creating motion graphics.
It is important to constantly monitor trends, analyze the work of colleagues in order to always understand the trends and prospects of the industry. Motion designer is a profession in demand all over the world. average salary a motion designer in the USA costs about $99,000 per year. Top-level professionals and executives have even greater income.
As a summary, we can state that the profession of a motion designer is promising for creative people, regardless of whether they have a specialized education or not. The main thing is desire and perseverance.
Thank you! You have successfully subscribed to our newsletter.
Pas de Deux, Norman McLaren 1968
Animation is not the art of drawing in motion, but the art of movement in drawing. — Norman McLaren
Everyone knows what animation is, but what about how to combine it with web and mobile design? Today, many sites use animation at one level or another, but mainly for the sake of a beautiful image, and not to improve the UX.
Just like traditional design, animation has a concept, principles, and a desire to find creative solutions that will make animation work in your favor. Start with these four useful tips about using animation to improve your website.
Focus on movement, not code
Think about the movement before you start thinking about the code. This will allow you to pay more attention to the animation process. Of course, there is a chance that not all of your design can be coded perfectly, but this way you will have the opportunity to make compromises.
Early sketches of Bugs Bunny by Chuck Jones show thinking about how to give him shape, weight, and movement.
Starting to think about the code first will undermine the personality of the animation by worrying about the possible limitations of the coding.
It's almost like planning an illustration based on the color pencil you have (and don't have). It is not right.
This kills any reason to add animation to begin with. Try to focus more on how you want your animation to look and move. Implementation details will come later.
In the end, coding will become just a means to an end. Your design and psychological process will make the animation come alive.
Focus on the goal
If your animation doesn't have a purpose, then it's worth considering whether it even needs one. For example, animated loading indicators have a much deeper purpose than many designers think: like “everyone is doing it” or “it looks cool.”
Loading animations are created to give users some kind of feedback (or at least a sense of progress). Other menu animations can be useful for showing the user where the menu is when closed. Both of these examples are practical benefits for the user.
On the other hand, the navigation reveal and loading logos were examples of animation that was more decorative than functional. Remember that your animation is created to help the user, not the creator. This is not your pitch for Pixar.
Let's look at decorative, flashy animation and something more functional.
screaming
elegant
As you can see, you can achieve almost the same result without flashy, bright animation. This gives a clean look, and doesn't leave the user thinking, "uh... what just happened?" Moreover, busy animations seem to slow down the more you use them.
Learn the movement
Difficult to create good animation without understanding the movement. The Key to Good Animation Is More Like Imitation real movements than their artistic interpretation.
Youtube allows you to watch videos from at different speeds playback using the player settings panel.
If you're not sure about the movement, find a video of the real-life equivalent online and learn at slow speed. Low speeds replays often show important touches. Many people don't know that Youtube allows you to watch videos at different playback speeds using the player settings panel.
When people think of movement, they usually think of moving up, down, left, and right, but even if your animation moves that way, it doesn't mean it will look natural. It is always worth taking into account factors such as material, speed, acceleration, jumping and reflection. It is important to create seamless animation to support the illusion and fantasy. In other words, try to make your animation almost “invisible”.
It's easier to create "invisible animation" when you understand how people see movement. Therefore, exploring the world around you is a good idea.
Study video game interfaces - especially those from the last 3 years - and pay attention to how users navigate through them. If you are not in the mood to watch the game, then just watch different cartoon movies and shows. The most important thing is to create real tests before you start applying animation to complex projects.
Source: Martin Drapeau - Backbone Game Engine.
Try to refrain from erratic and flashing movements. Let the animation be stable. Let the user enjoy and understand what they see, especially if the animation conveys important information. The point-by-point movements of the curves are ideal, and there is a smooth transition through sharp bends and turns, if necessary.
Tell your story harmoniously
Synchronization is the key word in animation. Of course, you want to do one element first, then another, and so on, to create as much animation as possible. But it is not the best way, which is worth walking. Any animation you make, no matter how large or small, should be one cohesive block.
The best way to do this is to create something close to an animatics. These are animated storyboards consisting of drawings or sketches that have been edited or arranged to closely resemble the final result.
Believe me, this is very useful when working on a website or film. The picture below is the storyboard I made for music video. Needless to say, this was not the final result, however, it helped me not get confused.
Sketching out your animation allows you to see how everything will look in the end and allows you to spot imperfections early on. For example, your loading animation is a mix of spinning motions and locked elements until your site's navigation reveals itself using circles. Seeing these inconsistencies can help you make the necessary changes or try something completely different.
Doing small but important mocks and tests like these first will help you activate your overall harmonious movement. There are a lot of great sites that have done this amazingly. Reverend Danger and Every Last Drop used animation throughout to tell their story.
While both sites animate very differently, every element on them was created to not only tell a story, but literally help it move forward.
Bottom line
Animation includes a huge number of styles and approaches, but this does not mean that there are no key and basic concepts. To get the most out of your animation:
- Get rid of the "code first" mentality,
- Make animation practical and useful,
- Wait a little to really understand what the movements are saying.
But most importantly, have fun with the process of creating your animation.