Animation should have a role

Movement can show the connection between elements and the result of an action, help people find their way or emphasise the brand’s style. A smoothly opening menu explains where a new layer of the interface came from. A short response from a button confirms the press. If an effect explains nothing and strengthens nothing, we drop it.

The wow starts with contrast

You don’t need to animate everything. When every element moves, the eye has nothing to hold on to. A calm composition with one expressive movement is often stronger than a dozen effects competing with each other. We wrote about overload as a reason people leave a website in the article “A beautiful website people want to leave”.

Scrolling shouldn’t take away control

Scroll animation adds depth and helps tell a story. But if a page hijacks scrolling, holds back the text or leads along a set route, the effect works against the person. That’s why we make sure people can read at their own pace.

Water, light and depth

A water surface, glints of refracted light and slight distortion can become part of an artistic language. They come out convincing when used in moderation: let elements move at different speeds and the light change calmly, without chaotic flickering. Such effects can be made with CSS, video, canvas or WebGL, and we choose based on the task and the devices.

Speed is part of the impression too

Heavy video and an abundance of effects slow down loading and strain the device. We compress images and video, keep the number of active effects under control and check the result on real phones and computers.

We respect user settings

Intense movement bothers some people. We respect the system setting prefers-reduced-motion and replace complex transitions with calm ones. The meaning of the interface shouldn’t depend on animation.

The phone needs its own solution

On a phone the screen is smaller, interaction is different and resources are often more limited. We simplify or remove some effects: the idea stays the same, it just adapts to different conditions.

How we know an effect works

Does the movement help people understand the interface? Does it get in the way of reading? Does it finish quickly? Is it comfortable on a phone? Is there a calm version? Often the easiest way to improve an animation is to make it shorter, quieter and more precise.

In short

Animation helps direct the impression a website makes. It creates atmosphere, helps people find their way and makes the website memorable. A good solution isn’t defined by the number of moving details: it’s precisely chosen, connected with the brand’s image and stays comfortable for people. How web design went from static pages to scenes like these is told in the article “The history of web design through a computer’s eyes”. If your project needs complex scenes and non-standard interface behaviour, that’s a custom project.

— SOMO STUDIO