Моушн-дизайн это графический дизайн в движении: логотип, который собирается в начале ролика, иконка, которая отзывается на нажатие, эмодзи, которое двигается в посте. Движение замечают раньше текста, поэтому моушн работает там, где у бренда есть секунда на внимание. Разбираем, где он нужен, в каком формате его делать и как пройти путь от идеи до готового файла.
Что такое моушн-дизайн
Обычная анимация рассказывает историю: персонажи, сюжет, сцены. Моушн-дизайн оживляет фирменную графику: логотип, шрифты, иконки, цифры, интерфейс. Его задача не развлечь, а донести мысль и закрепить бренд: показать продукт, объяснить шаг, привлечь внимание к кнопке или посту.
Хороший моушн держится на тех же правилах, что и фирменный стиль: свои цвета, свои формы и узнаваемый характер движения. Если у бренда резкие геометричные формы, движение тоже чёткое и быстрое. Если мягкие, плавное и упругое.
Где моушн работает на бренд
- Анимированный логотип. Заставка и концовка роликов, загрузка приложения, первый экран сайта. Короткий, 1–3 секунды, и одинаковый во всех материалах.
- Промо и кейс-ролики. Вертикальные для Reels, Stories и Shorts, горизонтальные для сайта и презентаций. Например, для пака эмодзи Топор+ мы сделали вертикальный ролик-кейс с озвучкой и треком.
- Сайт и приложение. Иконки, состояния кнопок, загрузка, пустые экраны и подсказки в Lottie: векторная анимация весит меньше видео и не теряет чёткость на любом экране.
- Telegram. Анимированные эмодзи, стикеры, реакции и обложки постов. Здесь моушн видят чаще всего: эмодзи канала стоят в каждом посте. Подробно в статье про эмодзи для Телеграм.
- Реклама и баннеры. Движение в первые секунды останавливает пролистывание ленты.
Форматы: что и куда
| Формат | Что это | Где использовать |
|---|---|---|
| MP4 | обычное видео | соцсети, реклама, презентации; 9:16, 1:1 и 16:9 |
| Lottie | векторная анимация в JSON | сайты, iOS и Android: иконки, загрузка, иллюстрации |
| TGS | Lottie по правилам Telegram | анимированные эмодзи и стикеры: 512 × 512, до 3 секунд, 60 кадров в секунду, до 64 КБ |
| WEBM | видео с кодеком VP9 | видеостикеры и видеоэмодзи Telegram, когда нужна сложная графика или видео |
Один и тот же моушн часто нужен в нескольких форматах: логотип в MP4 для роликов, в Lottie для сайта и в TGS для эмодзи. Это лучше обсудить заранее, чтобы анимацию собрали под все носители сразу, а не переделывали. Проверить готовый TGS или перевести Lottie JSON в TGS можно в нашем бесплатном инструменте.
Этапы работы
- Задача и носитель. Где будет жить анимация, какой длины, в каком формате и что должен понять зритель.
- Сценарий и раскадровка. Ключевые кадры статикой: что происходит и в каком порядке. Правки на этом этапе дешевле всего.
- Стиль движения. Скорость, плавность, характер: резко и чётко или мягко и упруго.
- Анимация. Собираем движение, звук и музыку, если это ролик.
- Версии и передача. Нужные пропорции и форматы, исходники проекта.
Частые ошибки
- Анимация ради анимации. Движение должно вести взгляд к главному, а не отвлекать от него.
- Слишком долго. Логотип на 8 секунд перед роликом в 15 секунд съедает половину внимания.
- Разное движение в разных материалах. Бренд перестаёт узнаваться, как при разных шрифтах.
- Тяжёлое видео там, где хватит Lottie. Сайт грузится медленнее, а картинка мылится на больших экранах.
- Нет версий под площадки. Горизонтальный ролик в Stories обрезается или уменьшается до полоски.
Сколько стоит моушн-дизайн
Стоимость зависит от длины, сложности и числа форматов: короткая анимация логотипа, промо-ролик со сценарием и звуком, набор Lottie для интерфейса. В Wide Studio моушн-дизайн стоит от 10 000 ₽: сценарий, анимация, версии под нужные площадки и исходники.