У анимации должна быть роль

Движение может показывать связь между элементами и результат действия, помогать ориентироваться или подчёркивать стиль бренда. Плавно раскрывающееся меню объясняет, откуда взялся новый слой интерфейса. Короткий отклик кнопки подтверждает нажатие. Если эффект ничего не объясняет и ничего не усиливает, мы от него отказываемся.

Вау начинается с контраста

Анимировать всё подряд не нужно. Когда двигается каждый элемент, глазу не за что зацепиться. Спокойная композиция с одним выразительным движением часто сильнее десятка эффектов, которые спорят друг с другом. О перегрузе как о причине, по которой люди уходят с сайта, мы писали в статье «Красивый сайт, с которого хочется уйти».

Прокрутка не должна отнимать управление

Анимация при прокрутке добавляет глубины и помогает рассказать историю. Но если страница перехватывает скролл, задерживает текст или ведёт по заданному маршруту, эффект работает против человека. Поэтому мы делаем так, чтобы читать он мог в своём темпе.

Вода, свет и глубина

Водная гладь, блики от преломлённого света и лёгкое искажение могут стать частью художественного языка. Убедительными они получаются при умеренности: пусть элементы движутся с разной скоростью, а свет меняется спокойно, без хаотичного мигания. Такие эффекты можно сделать на CSS, видео, canvas или WebGL, а что выбрать, мы решаем по задаче и устройствам.

Скорость тоже часть впечатления

Тяжёлое видео и обилие эффектов замедляют загрузку и нагружают устройство. Мы сжимаем изображения и видео, держим число активных эффектов под контролем и проверяем результат на настоящих телефонах и компьютерах.

Учитываем настройки пользователя

Интенсивное движение некоторым людям мешает. Мы учитываем системную настройку prefers-reduced-motion и заменяем сложные переходы спокойными. Смысл интерфейса не должен держаться на анимации.

Телефону нужно своё решение

На телефоне экран меньше, взаимодействие другое, и ресурсов часто меньше. Некоторые эффекты мы упрощаем или убираем: идея остаётся той же, просто подстраивается под другие условия.

Как мы понимаем, что эффект работает

Помогает ли движение разобраться в интерфейсе? Не мешает ли читать? Быстро ли заканчивается? Удобно ли на телефоне? Есть ли спокойный вариант? Часто анимацию проще всего улучшить, если сделать её короче, тише и точнее.

Коротко

Анимация помогает режиссировать впечатление от сайта. Она создаёт атмосферу, помогает ориентироваться и делает сайт запоминающимся. Хорошее решение определяется не числом движущихся деталей: оно точно подобрано, связано с образом бренда и остаётся удобным для человека. Как веб-дизайн пришёл от статичных страниц к таким сценам, рассказывает статья «История веб-дизайна глазами компьютера». Если вашему проекту нужны сложные сцены и нестандартное поведение интерфейса, это индивидуальный проект.

— SOMO STUDIO