Анимированный логотип — когда он нужен, форматы и как не переборщить
Логотипы задвигались повсюду. Знак собирается из штрихов в интро ролика, пульсирует на сплеш‑скрине приложения, машет в сторис. Анимация стала почти обязательным пунктом брендбуков крупных компаний и источником мучений для всех остальных: заказывать её дорого, а понять по красивому референсу, окупится ли она, невозможно. Ответ проще, чем кажется, и лежит он в одном вопросе: есть ли у зрителя в этот момент пауза. Там, где пользователь и так ждёт, движение занимает пустое время и работает на бренд. Там, где он занят делом, оно отвлекает. Из этого выводятся и сценарии, и форматы, и правила хорошего мошна.
Анимация логотипа окупается в четырёх сценариях: сплеш‑скрин, интро и аутро видео, сторис, лоадеры. Все они объединены паузой, которую зритель переживает и без вас. Форматы по назначению: Lottie для сайтов и приложений (лёгкий, векторный), видео для роликов, GIF только как последний резерв. Формула хорошего мошна: 1‑3 секунды, один проигрыш, приземление в каноничный статичный знак.
Где анимация окупается
Четыре рабочих сценария различаются деталями, но объединяет их одно: во всех зритель уже стоит на паузе.
- Сплеш‑скрин приложения. Загрузка всё равно занимает секунду‑две, и анимированный знак превращает вынужденную паузу в фирменный момент.
- Интро и аутро видео. Ролики на YouTube
, реклама, вебинары: 1‑2 секунды анимации знака стали стандартом индустрии, а статичная картинка в конце ролика выглядит бедно. - Сторис и рилсы. В движущейся ленте статичный знак проигрывает соседям по вниманию, и лёгкое появление логотипа удерживает уровень.
- Лоадеры и микровзаимодействия. Знак‑спиннер вместо стандартной крутилки — то самое место, где бренд живёт внутри продукта, а пользователь всё равно ждёт ответа сервера.
Где она мешает
Стоит убрать паузу, и та же анимация начинает работать против вас.
Шапка сайта. Постоянно движущийся логотип в углу экрана перетягивает внимание с контента, ради которого человек и пришёл. Допустима одна деликатная анимация при загрузке страницы или по наведению курсора, дальше покой.
Печать, вывески, документы. Носитель физически не умеет двигаться, но в брифах «анимированный логотип везде» встречается регулярно, и заказчик потом удивляется отдельной строке в смете.
Почта. Анимация в подписи письма означает GIF: лишний вес, пестрота и высокий шанс, что почтовый клиент покажет только первый кадр.
Пограничный случай — баннеры и презентации на выставочных экранах. Формально зритель проходит мимо и ничем не занят, но и паузы у него нет: он видит экран несколько секунд боковым зрением. Здесь работает медленный цикл без резких движений, который читается с любого момента. Анимация с началом и финалом такой зритель просто не застанет целиком.
Разделение на «где ждут» и «где заняты» задаёт и требования к самому мошну.
Правила хорошего мошна
- Анимация раскрывает знак. Лучшие лого‑анимации отыгрывают смысл символа: стрелка летит, круг замыкается, буква собирается из штрихов. Случайные подпрыгивания и вращения добавляют шум и ничего не сообщают о бренде.
- 1‑3 секунды. Дольше, и пользователь начинает ждать, а ожидание бренду не прощают. У сплешей и интро золотая длительность около 1,5 секунд.
- Один проигрыш. Зацикленная анимация на виду превращается в раздражитель. Цикл допустим только у лоадеров, где он честно означает «работаю».
- Финальный кадр повторяет канон. Анимация всегда приземляется в ту версию знака, что описана в гайдлайне; почему канон трогать нельзя, разбирали в статье про брендбуки.
- Уважение к вестибулярному аппарату. Резкие вспышки и тряска исключены, а на сайтах учитывайте
prefers-reduced-motion: часть пользователей осознанно отключает анимации, и для них нужен статичный запасной вариант.
Форматы: что заказывать и куда вставлять
| Формат | Что это | Куда | Вес |
|---|---|---|---|
| Lottie (JSON) | векторная анимация из After Effects | сайты, приложения | очень лёгкий |
| SVG + CSS/JS | анимация прямо в коде | сайты | лёгкий |
| MP4/MOV | видео (MOV с прозрачностью) | ролики, презентации | средний |
| WebM | видео с альфа‑каналом для веба | сайты, фоновые вставки | средний |
| GIF | растровая покадровка | мессенджеры, легаси | тяжёлый |
Lottie стал стандартом де‑факто для продуктовой анимации: дизайнер делает мошн в After Effects, плагин Bodymovin экспортирует JSON, разработчик подключает плеером. Вектор, ничтожный вес и управляемость из кода — скорость, старт по событию, остановка на последнем кадре.
SVG‑анимация подходит для простых случаев на сайте. Появление, штрих и заливка анимируются обычным CSS прямо в векторе, который у вас и так есть; как SVG устроен изнутри, разбирали в статье про вставку SVG на сайт. Ни зависимостей, ни плееров.
Видео (MP4, MOV, WebM) нужно для роликов и презентаций. Если требуется прозрачность, просите MOV с альфа‑каналом (ProRes 4444) для монтажа или WebM для веба.
GIF физически не умеет полупрозрачность: у пикселя либо есть цвет, либо нет. Отсюда грязная «бахрома» по краям знака на любом фоне, отличном от того, под который GIF рендерили. Добавьте сюда 256 цветов и неприличный вес. Используйте GIF только там, где не работает ничего другого, и рендерите его под конкретный цвет фона.
Как подготовить исходник для мошн‑дизайнера
Формат на выходе выбран, но качество анимации решается раньше, на входе. Мошн‑дизайнер работает с вашим векторным файлом, и от его устройства напрямую зависит смета.
Главное требование: знак должен быть разобран на слои. Логотип, схлопнутый в один path командой Flatten, анимации не поддаётся, потому что двигать в нём нечего, и дизайнеру придётся перерисовывать контуры заново, что оплачивается отдельно. Проверить просто: откройте SVG в Figma
и посмотрите панель слоёв. Видите отдельные элементы знака — файл готов. Видите один объект — нужен исходник получше.
Дальше по мелочи, но каждый пункт экономит время. Текст должен быть переведён в кривые, иначе на чужой машине подставится другой шрифт. Слои стоит осмысленно назвать: «стрелка», «круг», «буква Я» читаются лучше, чем «Path 47». Лишние скрытые объекты и обрезанные маски лучше убрать заранее, потому что в After Effects они всё равно всплывут и запутают сборку.
И проверьте базу: для анимации нужен именно векторный исходник. Из JPG анимацию не собрать, сначала понадобится перевод в вектор.
Пять ошибок, которые видно сразу
Правила выше описывают, как надо. На практике заказчики повторяют один и тот же набор промахов, и все они растут из желания получить побольше за те же деньги.
Анимация вместо знака. Логотип рисуют сразу «под движение», и в статике он разваливается. Между тем большинство показов бренда остаётся статичным: визитки, документы, шапка сайта, печать. Поэтому сначала делается знак, и только потом мошн для него.
Слишком много одновременно. Буквы прилетают с разных сторон, знак крутится, фон пульсирует. Внимание рассыпается, и зритель не запоминает ни одного элемента. Одно движение на анимацию читается лучше трёх.
Анимация длиннее контента. Двухсекундное интро перед пятнадцатисекундным роликом в сторис съедает седьмую часть хронометража. Для коротких форматов делают отдельную укороченную версию на полсекунды.
Нет статичного запасного варианта. Письмо, PDF, печатный отчёт и пользователь с prefers-reduced-motion увидят первый кадр. Если в первом кадре пусто, вместо логотипа будет пустота.
Один файл на все носители. Тяжёлый MP4 вставляют и в презентацию, и на сайт, и в приложение. Каждый носитель требует своего формата из таблицы выше, поэтому в ТЗ и закладывают пакет экспортов.
Сколько это стоит и что писать в ТЗ
Рынок устроен лесенкой, как и с самим логотипом; её разбирали в статье сколько стоит логотип. Шаблонная анимация в онлайн‑сервисах обходится дёшево и выглядит типово. Фрилансер‑мошн‑дизайнер берёт средний чек и делает индивидуальный сценарий. Студия стоит дорого, зато отдаёт сценарий, саунд‑дизайн и пакет форматов под все носители сразу.
В ТЗ имеет смысл зафиксировать четыре вещи: сценарии использования (сплеш, интро, сторис?), нужные форматы из таблицы выше, длительность и наличие звука. А в результате принимайте исходник After Effects плюс экспорт во все согласованные форматы. Исходник обязателен: без него следующую правку сделает только тот же исполнитель, и цену он назовёт сам.
Посмотрите анимацию трижды подряд, как её увидит постоянный пользователь приложения. То, что восхищает на первом просмотре, на десятом раздражает, и именно это ощущение получит ваша аудитория.
Как понять, что анимация вообще нужна
Прежде чем идти к мошн‑дизайнеру, стоит ответить на три вопроса. Есть ли у бренда носитель из четырёх сценариев выше: приложение со сплешем, регулярные ролики, активные сторис, продукт с лоадерами? Если ни одного, анимация окажется файлом, который некуда вставить.
Второй вопрос про статику. Устоялся ли сам знак, нет ли ребрендинга в планах на год? Анимировать логотип, который скоро поменяется, значит платить дважды.
Третий про исходник. Лежит ли где‑то векторный файл, разобранный на слои? Без него смета вырастет на стоимость перерисовки ещё до начала работы над движением.
Три «да» означают, что анимация окупится. Одно «нет» — что деньги лучше вложить в статичную айдентику, которая работает на всех носителях сразу.
Что в итоге
Анимация логотипа окупается ровно там, где у зрителя уже есть пауза: сплеш, интро, сторис, лоадер. Всё остальное превращается в попытку развлечь человека, занятого делом, и он это заметит. Формула хорошего мошна выводится из той же паузы: анимация отыгрывает смысл знака, укладывается в 1‑3 секунды, проигрывается один раз и приземляется в каноничную версию логотипа. Форматы подбираются под носитель: Lottie для продукта, видео для роликов, GIF только при отсутствии выбора. А начинается всё с векторного исходника, разобранного на слои.
Векторные исходники сотен брендов лежат в нашем каталоге логотипов: скачивайте SVG и отдавайте мошн‑дизайнеру готовую базу вместо скриншота.