Бесплатный курс по моушн-дизайну

Привет, дизайнеры! Как насчет того, чтобы сделать первые шаги в моушн-дизайн? Движение, динамика — это то, что превращает «просто макет» в живой, убедительный интерфейс. Если вы веб-дизайнер, то анимированное портфолио продает ваши услуги намного лучше и за более высокую цену, так что дерзайте!

Если вы давно хотели попробовать motion design, но не знали, с чего начать — этот курс для вас. Это бесплатное обучение моушн-дизайну на основе реального UI-кейса: вы шаг за шагом соберёте анимированный экран, используя Adobe After Effects. Мы сделали очень простой, базовый курс, чтобы вы смогли сделать свою первую анимацию самостоятельно и понять как это работает.

Вот что вас ждет:

7 видеоуроков по 7–20 минут
Практика с готовыми материалами
Готовый результат для портфолио в виде mp4 файла
Курс полностью бесплатный. Если вы хотите получить фидбек напишите в наш тг: t.me/ux_mind_school

Урок 1. Анимация фонового градиента в After Effects

Скачать материалы курса

Начинаем с анимированного градиента, который будет фоном для интерфейса. Вы научитесь:

Создавать новую композицию с нужными параметрами (размер, длительность, фреймрейт)
Работать с shape-слоями: рисовать круги, управлять цветом и масштабом
Использовать выражения (expressions), чтобы анимация повторялась автоматически
Настраивать размытие через корректирующий слой и эффект Gaussian Blur

В результате вы получите стильный, живой фон, в духе современного UI.

Урок 2. Интерфейс: текст и кнопка

В этом уроке мы добавим ключевые элементы интерфейса: заголовок и кнопку действия.

Как создавать и редактировать текст в After Effects
Как правильно позиционировать текст и выравнивать его по сетке
Как нарисовать кнопку с помощью shape tool и настроить anchor point
Как связать текст и кнопку, чтобы они двигались как единое целое

Всё это — основа для интерактивной анимации интерфейса, которую вы будете анимировать дальше.

Урок 3. Ползунок: анимация слайдера и элементов управления

Теперь пора добавить анимированный ползунок, как в UI переключателях настроек.

Вы создадите линию и два кружка (контур и заливку)
Используете принцип parenting, чтобы объединить движение
Настроите анимацию через параметр Position
Поймёте, как правильно рассчитывать тайминг и позицию слоёв

Этот элемент делает интерфейс похожим на реальный прототип. И это отличный пример motion-дизайна для интерфейсов.

Урок 4. Анимация текста с эффектом bounce

Добавим жизни в интерфейс — текст будет сменяться по нажатию и пружинить.

Освоите ключевые кадры (keyframes) и параметр Scale
Настроите плавную анимацию перехода от одного текста к другому
Добавите bounce-эффект вручную и с помощью скрипта
Научитесь использовать горячую клавишу F9 и график движения (Graph Editor)

Такие детали делают интерфейс живым и отзывчивым — это то, что ценят пользователи.

Урок 5. Смена цвета интерфейса (Hue/Saturation)

Всё готово к финальному штриху — смене цветового состояния интерфейса.

Примените эффект Hue/Saturation к фону и элементам
Настроите смену цвета под каждое состояние интерфейса
Узнаете про Hold Frame — как избежать грязных переходов
Поймёте, как настроить паузы между сменами

Это придаёт интерфейсу законченный вид и показывает переход между состояниями, как в настоящем продукте.

Урок 6. Встраивание интерфейса в мокап телефона

Визуализация — важная часть презентации проекта. Мы собираем финальную анимацию в мокап смартфона.

Подгружать мокапы и настраивать их масштаб
Использовать маску, чтобы вставить интерфейс внутрь экрана
Работать с векторной графикой через Collapse Transformations
Аккуратно размещать элементы по сетке

Итог: готовая презентационная сцена, которую можно показать на Dribbble, Behance или клиенту.

Урок 7. Экспорт и продвинутые эффекты

Финальный урок — доводим анимацию до идеала и делаем экспорт. В нем вы:

Настроите графики движения для более реалистичной анимации
Добавите предвосхищение движения (anticipation) — один из ключевых принципов анимации
Сконфигурируете экспорт в формате H.264
Научитесь сохранять версии и оптимизировать файл

Ваш первый полноценный UI-анимационный проект готов!

Хочешь углубиться?

Если вам понравилось, и вы хотите глубже погрузиться в motion design — приглашаем вас на наш основной курс по моушн-дизайну. А ещё на нашем курсе по UX/UI-дизайну есть специальное дополнение про моушн для веб дизайнеров. Курс более короткий чем основной, зато там все самое важное именно для тех кто хочет оживлять свои интерфейсы.