Анимация для сайта: первый экран, герой и объясняющий ролик

Что можно анимировать на сайте

• Первый экран. Короткий ролик-петля на 5⁠–⁠10 секунд вместо статичной картинки: продукт в деле, процесс, герой бренда. Зацикливается без шва.
• Объясняющий ролик. 60⁠–⁠90 секунд о том, как работает продукт или сервис. Ставится в блок «как это работает» или открывается по кнопке.
• Герой бренда. Персонаж машет, удивляется, показывает на кнопку. Несколько коротких петель для разных блоков сайта.
• Иллюстрации и схемы. Анимированная инфографика: как товар доходит до клиента, из чего складывается цена, как устроен сервис.
• Логотип. Короткое появление знака для заставки, презентаций и роликов.

Почему анимация не должна тормозить сайт

Тяжелое видео на первом экране — частая причина медленной загрузки страницы. Поэтому мы сразу делаем версию для сайта: короткую, без звука, в современных форматах и с кадром-заглушкой, который виден, пока ролик загружается. Браузеры запускают видео сами только без звука, поэтому все главное на экране показываем текстом и действием. Как выбрать ролик для сайта и где его разместить, рассказываем на странице видео для сайта.

Как работаем

1. Задача. Что посетитель должен понять за 5⁠–⁠10 секунд на первом экране или за минуту в объясняющем ролике.
2. Раскадровка. Набросок кадров и движения до анимации — правки на этом этапе стоят дешевле всего.
3. Анимация. Рисуем и анимируем в 2D: персонажи, предметы, интерфейс, инфографика.
4. Версия для сайта. Короткие легкие файлы, петли без шва, кадр-заглушка и подсказки разработчику, как поставить ролик на страницу.

Что влияет на смету

Длина и количество роликов, есть ли готовый герой или его нужно придумать, сколько в кадре движения и деталей, нужны ли версии для мобильной страницы и соцсетей. Если героя нет, начать можно с бесплатного паспорта героя: характер и идеи сцен у вас будут уже до брифа.

Анимация на сайте — как шарф у йети: заметно, но не должно мешать ходить.