сезон №1

онлайн-курс по анимации After effects для веб-дизайнера by AVA digital

avanimation.

01/

Для кого
курс

Джун/мидл веб-дизайнер
UX/UI-дизайнер
Веб-дизайнер-фрилансер

для тех, кто уже знаком с after effects и хочет оптимизировать свою работу, и тех, кто ни разу не открывал эту программу

смотреть шоурил

Анимация — это не красивое дополнение, а рабочий инструмент, который помогает продавать дизайн, упрощает разработку и выделяет вас среди конкурентов

02/

Зачем анимация веб-дизайнеру

Вот как ты сможешь использовать её на практике:

1. Презентация дизайна клиенту

В AVA мы создаём не просто лендинги с бесконечным скроллом, а интерфейсы со сложной логикой и взаимодействием. Объяснить словами поведение каждого блока практически невозможно.

Поэтому мы анимируем ключевые экраны:

– показываем появление блоков;
– визуализируем реакции элементов при ховере и клике;
– визуализируем переходы будут между секциями.

Для клиента сайт буквально «оживает»: он видит, как всё будет работать, лучше понимает логику интерфейса и не засыпает вопросами вроде «а что произойдёт, если нажать сюда?». В результате — сильнее вау‑эффект и меньше правок по дизайну.

2. Упрощение процесса разработки

Когда у разработчика анимированный прототип в дополнение к статичному макету, ему не нужно додумывать твои идеи.

Сразу понятно, как ведут себя кнопки при наведении и клике, что происходит при скролле, и как устроены сложные интерактивные элементы.

Это экономит время всем: меньше вопросов, недопониманий и доработок.

3. Сильные кейсы в портфолио

Анимированные интерфейсы всегда выигрывают по сравнению с обычными статичными картинками. Такие кейсы привлекают внимание арт‑директоров и заказчиков и лучше передают атмосферу и механику проекта. И главное — показывают тебя как продвинутого специалиста, а не «ещё одного дизайнера из Фигмы».

Те же анимации, которые ты создаёшь для презентаций и разработчиков, нужно превращать в яркие портфолио‑кейсы.

4. Живые и интерактивные сайты

Владея анимацией, ты можешь оживлять свой дизайн:

– добавлять интерактивные иконки и логотипы;
– привязывать анимации к скроллу и действиям пользователя.

Сайт перестаёт быть статичным и становится полноценным интерактивным продуктом, который удерживает внимание, запоминается и выделяется среди конкурентов.

5. Конкурентное преимущество на рынке

Большинство дизайнеров ограничиваются Figma и базовым UI. Навык создания анимаций — это дополнительный аргумент в твою пользу.

– Это выделяет тебя на фоне других специалистов; Тебе самому это помогает мыслить не статичными экранами, а динамикой интерфейса;позволяет брать более дорогие и сложные проекты;
– Ты становишься более привлекательным для студий и продуктовых команд, где ценят комплексный подход к UX/UI.

В AVA мы создаём не просто лендинги с бесконечным скроллом, а интерфейсы со сложной логикой и взаимодействием. Объяснить словами поведение каждого блока практически невозможно.

Поэтому мы анимируем ключевые экраны:
– показываем появление блоков;
– визуализируем реакции элементов при ховере и клике; – визуализируем переходы будут между секциями.

Для клиента сайт буквально «оживает»: он видит, как всё будет работать, лучше понимает логику интерфейса и не засыпает вопросами вроде «а что произойдёт, если нажать сюда?». В результате — сильнее вау‑эффект и меньше правок по дизайну

Когда у разработчика анимированный прототип в дополнение к статичному макету, ему не нужно додумывать твои идеи.

Сразу понятно, как ведут себя кнопки при наведении и клике, что происходит при скролле, и как устроены сложные интерактивные элементы.

Это экономит время всем: меньше вопросов, недопониманий и доработок.

Анимированные интерфейсы всегда выигрывают по сравнению с обычными статичными картинками. Такие кейсы привлекают внимание арт‑директоров и заказчиков и лучше передают атмосферу и механику проекта. И главное — показывают тебя как продвинутого специалиста, а не «ещё одного дизайнера из Фигмы».

Те же анимации, которые ты создаёшь для презентаций и разработчиков, нужно превращать в яркие портфолио‑кейсы.

Владея анимацией, ты можешь оживлять свой дизайн: – добавлять интерактивные иконки и логотипы; – привязывать анимации к скроллу и действиям пользователя.

Сайт перестаёт быть статичным и становится полноценным интерактивным продуктом, который удерживает внимание, запоминается и выделяется среди конкурентов.

Большинство дизайнеров ограничиваются Figma и базовым UI. Навык создания анимаций — это дополнительный аргумент в твою пользу.

– Это выделяет тебя на фоне других специалистов; Тебе самому это помогает мыслить не статичными экранами, а динамикой интерфейса;позволяет брать более дорогие и сложные проекты;

– Ты становишься более привлекательным для студий и продуктовых команд, где ценят комплексный подход к UX/UI.

03/

Чему научимся

lottie animation

01

popup interaction

02

compound blur

03

Горизонтальный скролл

04

vector icon

04

page scroll

06

trim path animator

07

внутрянка проектов

08

page scroll

09

gallery 3D effect

10

png sequence

11

path animation

12

использование скриптов

13

эффекты текстуры

14

slider interaction

15

repeater animator

16

dropdown animation

17

анимированный мокап

18

3d card effect

19

tracking animator

20

loop expression

21

displace

22

и еще много интересного

04/

Программа

13 часов контента

Формат: онлайн уроки в записи

Вы поймёте, почему умение работать с анимацией сегодня становится почти обязательным навыком для современного веб‑дизайнера.

Задача этого модуля — снять страх перед программой. Мы по шагам разберём интерфейс After Effects, чтобы вы понимали, что где находится, и не терялись в десятках панелей и настроек.

Создадим удобное рабочее пространство именно под задачи веб‑дизайна, уберём лишнее и оставим только то, чем вы будете реально пользоваться.

Здесь мы перейдём от простого перемещения объектов к осознанной красивой анимации, которая выглядит дорого и современно.

Разберём фундаментальные принципы анимации, адаптированные под интерфейсы: как выбирать длительность, скорость и плавность, чтобы движения казались естественными и не раздражали пользователя.

Здесь вы шаг за шагом анимируете страницу сайта — как если бы работали над креативным проектом.

Начнём с подготовки макета в Figma: разберём, какие элементы нужно вынести отдельно и как правильно экспортировать графику, чтобы потом было удобно анимировать.

Далее мы будем поэтапно оживлять разные блоки: hero‑экран, навигацию, карточки, горизонтальный скролл. Научимся имитировать скролл, ховеры и клики, чтобы получать на выходе плавные анимации для клиента и портфолио.

Знакомимся с векторной анимацией и учимся делать лёгкие Lottie‑анимации, которые можно внедрять непосредственно на сайт.

Разберем какие есть ограничения и нюансы и научимся собирать анимацию так, чтобы она корректно экспортировалась через Bodymovin и без проблем работала на сайте.

В рамках практики создадим несколько Lottie‑анимаций и обсудим, как передавать такие файлы разработчикам. Дополнительно разберём полезные скрипты и плагины, которые ускоряют работу с анимацией.

Уметь делать анимацию мало — важно правильно её показывать. В этом модуле вы разберёте, как встроить анимацию в ваши кейсы так, чтобы она усиливала впечатление от работы, а не была просто «красивой картинкой».

Вы научитесь создавать анимированные мокапы: помещать ваши экраны в ноутбуки, телефоны, планшеты чтобы ваше кейсы были сочными и уникальными.

Познакомимся с принципами работы с 3d в after effects.

В этом модуле вы заглянете «под капот» реального проекта AVA. Мы подробно разберём одну из последних анимационных работ: как она была задумана, спланирована и собрана в After Effects.

Это возможность увидеть, как те же самые инструменты и приёмы, которые вы изучили на курсе, применяются в сложном коммерческом проекте.

Мы пройдёмся по структуре проекта: как организованы композиции, слои, какие блоки отвечают за какие части сайта. На конкретных примерах вы увидите, как решались задачи анимации отдельных экранов, переходов, иллюстраций, текста.

Финальный модуль — это подведение итогов и создание плана дальнейшего развития навыков.

Вы получите рекомендации по практике после курса, списки ресурсов и идей для самостоятельных мини‑проектов, которые помогут вам не «остыть» и продолжать развиваться.

05/