Моушн-дизайн (моушн-графика, motion design) — это анимированная графика: текст, цифры, иконки, схемы, логотипы и 3D-объекты, которые движутся, чтобы зритель за несколько секунд что-то понял или запомнил. От мультфильма его отличает задача: не история персонажей, а информация и бренд. От видеосъёмки — то, что кадр нарисован или построен, а не снят камерой. Типичные примеры — Reels с крупными подписями, ролик «как работает сервис», анимация логотипа, анимированная инфографика и движение элементов на сайте.
Что такое моушн-дизайн простыми словами
Проще всего понять моушн-дизайн через соседей, с которыми его путают.
| Что в кадре | Зачем | Пример | |
|---|---|---|---|
| Моушн-дизайн | Текст, формы, цифры, логотип, 3D-объекты | Объяснить, показать, запомниться | Ролик «как оформить заказ за три шага» |
| Анимация персонажей | Герои с мимикой и характером | Рассказать историю | Мультфильм, сериал |
| Видеосъёмка | Реальные люди, место, товар | Показать «как есть» | Интервью, обзор товара |
| VFX (визуальные эффекты) | Отснятое видео плюс графика внутри него | Сделать невозможное правдоподобным | Взрыв, замена неба, компьютерная толпа |
Границы условные. В объясняющем ролике может появиться простой персонаж, а в съёмку часто вставляют моушн-подписи и инфографику. Но если главное в кадре — смысл, переданный графикой, это моушн-дизайн.
Откуда взялся моушн-дизайн
Профессия выросла из кинотитров. В 1955 году графический дизайнер Сол Басс сделал вступительные титры к фильму Отто Премингера «Человек с золотой рукой»: четыре вырезанные из бумаги линии движутся вразнобой и в конце складываются в изломанную руку героя, символ фильма. Басс вспоминал, что до этого рисовал к фильму рекламный символ, и в какой-то момент они с Премингером решили: «Why not make it move?» — «Почему бы не заставить его двигаться?» (BFI, 2020).
В 1958 году для «Головокружения» Хичкока Басс сделал титры со спиралями вместе с аниматором Джоном Уитни (там же). Уитни рисовал движение на машине собственной конструкции. Основой его первого аналогового компьютера стал механизм военного прибора управления зенитным огнём M-5 (SIGGRAPH Arts). В 1960 году Уитни основал компанию Motion Graphics Incorporated, которая делала на этой машине титры и рекламу, а в 1961-м собрал семиминутный фильм Catalog — каталог эффектов, которых добился на своём компьютере (SIGGRAPH Arts).
С тех пор поменялись инструменты, а задача осталась прежней: за секунды задать настроение и донести одну мысль.
Виды моушн-дизайна для бизнеса
- Reels, шортс и сторис. Вертикаль 9:16 — такое соотношение сторон Meta указывает в требованиях к рекламе в Reels, вместе с файлами MP4 или MOV (справка Meta). Крупные подписи нужны, чтобы смысл был понятен и без звука. Подробнее — в статье «Reels для бизнеса».
- Объясняющий ролик. 30–60 секунд о том, как работает продукт или услуга: для сайта, презентации, выставки, первого экрана в Telegram-канале. Как его заказать — в статье «Анимационный ролик для бизнеса».
- Анимация логотипа. Заставка на 2–5 секунд в начале и в конце роликов, на экране загрузки сайта, на экране в офисе. Разбор форматов и подводных камней — в статье «Анимация логотипа».
- Анимированная инфографика. Цифры, графики и схемы, которые появляются по очереди: отчёт для инвестора, итоги года, сравнение тарифов.
- UI-анимация и анимация на сайте. Кнопки, переходы, появление блоков, сцены при прокрутке. Здесь важна мера: в Windows, macOS, iOS и Android есть настройка «уменьшить движение», и сайт может узнать о ней через
prefers-reduced-motion(MDN). Хороший сайт в этом случае показывает спокойную версию. - 3D-продукт. Товар, здание, устройство или процесс в объёме: камера облетает объект, детали разъезжаются и собираются обратно.
- Рекламные баннеры и стикеры. Короткая анимация для рекламы и мессенджеров. Например, видеостикер в Telegram — это файл WebM с кодеком VP9 длиной не больше 3 секунд и весом не больше 256 КБ (Telegram).
Что делает моушн-дизайнер
Моушн-дизайнер не «оживляет картинки». Он решает, что зритель должен понять за отведённые секунды, и подчиняет этому всё остальное: порядок появления элементов, скорость, паузы, звук. В его работе есть несколько ремёсел сразу. Это сценарий и раскадровка, графический дизайн (шрифт, цвет, композиция), сама анимация (тайминг и плавность), иногда 3D, звук и экспорт в форматы площадок. В небольших командах всё это делает один человек, в студиях роли делят сценарист, иллюстратор, аниматор и звукорежиссёр.
Программы для моушн-дизайна
| Инструмент | Что это | Когда берут |
|---|---|---|
| After Effects | Программа Adobe для моушн-графики и визуальных эффектов, по подписке (Adobe) | 2D-ролики, титры, анимация логотипа; под него продают готовые шаблоны, например на Videohive |
| Cinema 4D | 3D-программа компании Maxon, которую производитель позиционирует под моушн-графику; по подписке (Maxon) | 3D-заставки, продуктовые сцены |
| Blender | Бесплатная 3D-программа под лицензией GPL. Всё, что в ней создано, принадлежит автору (Blender) | 3D-сцены, продукт, архитектура, персонажи |
| Rive | Редактор интерактивной анимации, результат которого работает в мобильных приложениях, на компьютере и в вебе (Rive). Логику задаёт «машина состояний» (документация) | Анимация в приложениях и на сайтах, которая реагирует на действия пользователя |
| Lottie | Формат и библиотека: анимацию из After Effects выгружают в JSON плагином Bodymovin, а Lottie проигрывает её в Android, iOS, вебе и Windows (Airbnb) | Лёгкая векторная анимация в интерфейсе: иконки, загрузка, пустые экраны |
| Код | HTML, CSS, JavaScript, WebGL в браузере | Анимация на сайте; ролики, где важна точность цифр и данных |
Программа сама по себе ролик не делает. Хороший моушн получается и в After Effects, и в коде, а плохой — в любой из них.
Как делают моушн-ролик: от брифа до файлов
- Бриф. Кому ролик, где его покажут, какое одно действие должен сделать зритель, какой срок и бюджет. Без брифа подрядчик угадывает, а правки потом идут по кругу.
- Сценарий. Текст и происходящее в кадре по секундам. На этом шаге ролик дешевле всего менять: правка — это строчка текста.
- Стиль-кадры. Два-три статичных кадра в цветах и шрифтах бренда. По ним решают, как ролик будет выглядеть, до того как что-то начнёт двигаться.
- Аниматик. Черновая версия: кадры из раскадровки, выставленные по времени, часто с черновым голосом. Видно ритм и длину, и это ещё дёшево исправить.
- Анимация. Самый долгий этап. Правки «переставить сцены местами» здесь уже стоят дней работы, поэтому всё важное согласуют на шагах 2–4.
- Звук. Музыка, звуковые эффекты, голос диктора, субтитры.
- Форматы. Один ролик — несколько файлов: 9:16 для Reels и сторис, 1:1 и 16:9 для ленты, сайта и презентаций, версия без звука, обложка.
Как мы делаем моушн
Мы делаем ролики двумя способами. Первый — кодом: сцена собирается в браузере и рендерится покадрово, поэтому цифры, графики и подписи в кадре точно совпадают с данными и правятся заменой строки, а не перерисовкой. Второй — 3D в Blender: объект, свет и материалы под бренд, облёт камеры. Генеративное видео в наших работах мы не используем: каждый кадр должен быть под контролем, особенно логотип и цифры. Шесть наших роликов — на странице «Моушн-дизайн».
Сколько стоит моушн-дизайн
Наши цены: Reels — от 1,5 млн сум за ролик, пакет из четырёх — 4,9 млн; анимация логотипа — от 1,9 млн; ролик о продукте на 30–60 секунд — от 4,9 млн; 3D-сцена в Blender — от 6,9 млн сум. Оплата 50/50, точную цену и срок называем после бесплатного брифа и фиксируем в договоре. Подробности — в прайс-листе (PDF).
Что делать дальше
Прежде чем искать исполнителя, ответьте себе на три вопроса: где покажете ролик, кому и какое одно действие должен сделать зритель после просмотра. С этими ответами разговор с любым моушн-дизайнером займёт полчаса, а не неделю переписки. Если хотите обсудить с нами, напишите на странице «Моушн-дизайн»: ответим вопросами брифа и предложим идею.
