Анимированный логотип — когда он нужен, форматы и как не переборщить
Логотипы задвигались повсюду. Знак собирается из штрихов в интро ролика, пульсирует на сплеш‑скрине приложения, машет в сторис. Анимация стала почти обязательным пунктом брендбуков крупных компаний и источником мучений для всех остальных. Нужна ли она вообще, в каком формате заказывать и почему GIF с прозрачностью выглядит так плохо? Разбираем мошн‑дизайн логотипа прагматично: сценарии, форматы, бюджеты и границы разумного.
Анимация логотипа — это приправа для четырёх сценариев: сплеш‑скрин, интро/аутро видео, сторис и лоадеры. Статичный логотип она не заменяет, а дополняет. Форматы по назначению: 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 только там, где не работает ничего другого, и рендерите его под конкретный цвет фона.
Сколько это стоит и как заказывать
Рынок устроен лесенкой, как и с самим логотипом (мы разбирали её в статье сколько стоит логотип): шаблонная анимация в онлайн‑сервисах — дёшево и типово; фрилансер‑мошн‑дизайнер — средний чек и индивидуальный сценарий; студия — дорого, со сценарием, саунд‑дизайном и пакетом форматов под все носители.
Что должно быть в ТЗ: сценарии использования (сплеш? интро?), нужные форматы из таблицы выше, длительность, наличие звука. Что должно быть в результате: исходник After Effects + экспорт во все согласованные форматы. Исходник — обязательно: без него следующее изменение сделают только у того же исполнителя.
И проверьте базу: для анимации нужен векторный исходник логотипа. Из JPG анимацию не собрать — сначала перевод в вектор.
Коротко
Анимированный логотип — усилитель четырёх моментов: сплеш, интро, сторис, лоадер. Формула хорошего мошна: смысл знака → 1–3 секунды → один проигрыш → приземление в канон. Форматы: Lottie для продукта, видео для роликов, GIF — никогда, если есть выбор. И всё начинается с чистого векторного исходника.
Векторные исходники сотен брендов — в нашем каталоге логотипов: скачивайте SVG и отдавайте мошн‑дизайнеру готовую базу вместо скриншота.