Adding animation to a website - a part of a project`s success

This article isn`t about cute animations with cats. Our Artjoker specialists Yanina (designer) and Natalia (head of product`design department) told us about animation influence on a project`s success.

Why do you need animation?

Each business evaluates the efficiency of applied tools, and it`s fully natural and right approach. To save your business from irrelevant expenses, specialists evaluate If investments correspond to possible results.

You`ll wonder If there is a point of a cute animated cat who swings his paw. The answer is like a piece of a cake: people like interaction and they`re ready to play with the cat.

"Animation is often used for wow-effect. For example, there is a task to create a creative web design. But creativity is interpreted differently by each of client. In such cases, we create not only graphics but also we work on animation that brings something unique. There is a good example: popular bank`s app that has a cute moving cat. When you start interacting with the cat, you don`t expect any dynamics. At the beginning the image is static and then it surprisingly starts to make sounds 'meow' and moving ears. User`s interaction with a design is really cool. Interactive elements always pay attention." - said Natalia.

Yanina agreed and continued the colleague`s answer: "Yes, it`s not just a boring static graphics, it`s an interactive element that makes a website more real. It not only attracts users but also can show how some element on the website works ".

How to understand if you need animation?

If your website is extremely boring and user can`t interact with them, you should change something. Of course, a source with bad usability or unattractive design can`t be rescued with the usage of, for example, flying birds. Sufficient amount of time and finances should be contributed to website development in order to upgrade it with new animation and get a platform with a pleasant UX.

Yanina went on: "You won`t explain the meaning of certain illustration or photo with the usage of a static picture. You need to show the flow of work. Also, animation can be used for paying attention to a key object. Talking about wow-effect, our specialists have pointed out that it isn`t nedeed always but sometimes its usage looks cool".

Can animation become a tool for increasing conversion?

Usage of animation is like thin ice. From first sight, it makes a website fulfilled and more modern and helps to improve UX. But at the same time, an excessive quantity of elements can disorient user and refocus attention. It's not enough just to make an animation on the website - it is important that the effects complement and support the idea, and not distract from the content and purpose that the person was pursuing by following the link.

"It comes to mind the website of a design agency. If potential clients see that there is a cool website, the conversion will definitely increase. Moreover, effects are useful for explaining the profits of a product, its features and other detailes" - added Yanina.

Separate mention is the issue with the speed of loading pages of a web resource. CSS animation is often used for preloaders, which help reduce the time to the "first contact" of the user with content, which significantly reduces the percentage of failures. Many people just close the tab if the site loads for more than three seconds. Animation can help in this or aggravate the situation - depending on the professionalism of the performer.

How does animation influence on usability?

"Won`t damage" - is a slogan that runs like a golden thread through all the process of animation`s creation. Completing the picture with barely noticeable details - transitions, pulsations, the appearance of a shadow or otherwise adding interactivity, you can arouse the visitor's interest and sense of integrity, completeness.

"It's good when a button action is followed by a response action. There are different types of effects. You can put just a spinning-flying background, but there are tasks for the user's interaction with the design. Then the button turns into a new element, then the inscription appears - this is a super-duper" - added the designer.

Is Flash-animation relevant?

If you decided to make flash animation for the site in 2019, something went wrong. This technology has long been dead and it's time to write it off. Yana shared her story: "In my opinion, no one is using this technology at all now. I remember that we still had flash animation development at the university, and then two years later they said to us: "That's it, folks, we'll fold," it was a long time ago ... Flash is dead. Everyone uses After Effects".

The heavy and problematic flash was replaced by CSS tools, which significantly simplified the work with graphics and reduced the weight of the pages. Back in 2017, Adobe - the developers of the technology, announced their intention to disable its support in 2020. After that, updates will stop coming out, and browsers will not read this technology. We can safely say that creating flash animations for a site is the last century.

How common is 3D animation on the web?

Creating 3D animations requires more resources - both temporary and financial. In addition, its use imposes an even greater responsibility on the specialist engaged in optimizing the web platform. This is because a page with 3D can weigh much more than with a 2D animation, which means delaying the user's first "contact" time with content and increasing the risk of failure. But this does not happen if you use the appropriate development tools and throw your energy at optimization.

You can create 3D animation on the site in the programs:

• after effects;
• 3ds Max (mainly used for game development);
• Cinema 4D.

"If the site has 3D animation, dudes are generally awesome. As for me, it is more common on the sites of design agencies and in product design. For example, a volumetric model of a bicycle is created to show it in motion. 3D animation is common, but more like a graphic element - a three-dimensional picture / illustration or just an object as a background. At least that's what I see," - added Yana.

And you can fully create gif animation for the site using:

• Photoshop
• Principle
• After effects
• Cinema 4D (for 3D animation).