Образовательный курс

Анимация интерфейсов

Сделайте дизайн ярче — добавьте движения в свои работы!

скидка 50%

набор на курс до 8 декабря

или получить

Длительность 4 месяца

Онлайн в удобное время

Обучение на практике

Доступ к курсу навсегда

Курс идеально подойдет

Веб-дизайнер

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

UI/UX-дизайнер

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

Motion-дизайнер

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

Чему вы научитесь

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

Анимировать интерфейсы.

Готовить материалы к анимации.

Создавать микровзаимодействия.

Создавать плавную анимацию.

Писать сценарии роликов и делать раскадровку.

Создавать анимацию статичной концепции.

Проектировать эффектные презентации для клиента.

Работать в AfterEffects, Principle, Webflow, Atomic.

скидка 50%

Программа курса

Программа курса содержит 20 основных блоков.

  1. Введение в motion design

    • Знакомство.
    • Введение в motion design: тренды, разновидности, применение.
  2. 12 принципов анимации Walt Disney Studios

    • Принципы построения анимации, тайминги и изинги. 
    • Предвкушения и растяжение.
    • Управление вниманием.
    • Как правила классической анимации работают в UI.
  3. Motion design в интерфейсах 

    • Роль анимации в интерфейсах сайтов и приложений.
    • Разбор области применения: создание прототипов с обратной связью, микровзаимодействия, анимация иконок, прелоадеров, видеобэкграундов, презентаций и шоурилов. WebGL. 
    • Основные инструменты и форматы. 
  4. After Effects

    • Возможности программы. 
    • Знакомство с интерфейсом и инструментами. 
    • Composition и Precompose.
    • Маски.
    • Ключи.
    • Первые шаги в After Effects.
    • Учимся на кошках: анимация примитивов и ключевых параметров.
  5. Иконки — погружение в мир микроанимации 

    • Как придумать анимацию иконок. 
    • Подготовка вектора.
    • Анимация. 
    • Конвертация в GIF. 
  6. Бонус-модуль. Практика: разбор кейса «Уралсиб» 

  7. Прелоадеры

    • Интересные примеры прелоадеров.
    • Природа прелоадера.
    • Придумываем, рисуем, анимируем.
  8. Material design

    • Материал как метафора в концепции material design. 
    • Философия концепции material design.
    • Суть и основные принципы. 
    • Рассмотрим примеры material design.
    • Основные фишки анимации material design. 
    • Репозитории и готовые пресеты.
  9. Бонус-модуль. Звуки в интерфейсе

  10. Principle

    • Введение и обзор самого перспективного редактора для быстрой анимации интерфейсных элементов и прототипов.
    • Возможности программы Principle. 
    • Знакомство с интерфейсом и принципами работы.
    • Работа со слоями.
    • Панель анимации и драйверы.
    • Анимация сценария.
  11. Webflow — инструмент прототипирования веб-интерфейсов

    • Знакомство с веб-интерфейсом, позволяющим создавать адаптивные анимированные прототипы сайтов.
    • Обзор интерфейса программы, инструментария, примеров.
    • Превратим лендинг из PSD в HTML и накрутим разной анимации на скролл и появление блоков.
  12. Atomic

    • Возможности программы. 
    • Знакомство с интерфейсом и принципами работы. 
    • Компоненты, экшны и анимация.
    • Импорт из скетча и создание анимации сценария.
  13. Анимация статичной концепции 

    • Поиск референсов.
    • Написание сценария. Расстановка акцентов.
    • Ключевые фишки в анимации.
    • Подготовка PSD/AI-файлов к анимации. Тайминг, правильные клики и скроллы.
  14. Видеобаннеры. Тренд, который заслуживает внимания 

    • Работа с 3D в пространстве After Effects. 
    • Секвенции и параллаксы.
  15. Анимация концепции для презентации клиенту 

    • Статичные и динамичные мокапы.
    • Монтаж.
    • Звук.
    • Переходы между сценами.
    • Видеохостинги.
  16. Бонус-модуль. Анимация в верстке 

  17. Чистая магия — создание продающего шоурила 

    • Что влияет на создание продающего шоурила.
    • Создаём шоурил.
  18. Рабочие будни моушн-дизайнера 

    • Рассказываем про штатный рабочий день моушн-дизайнера.
    • Методы оптимизации рабочего времени и пространства.
    • Правильный симбиоз программ и репозиториев.
    • Территория ответственности.
    • Инициатива и поиск идей.
  19. Дьявол в деталях 

    • Секреты успеха на Behance (разбор удачных и не очень примеров).
    • Полезные советы.
  20. Дипломная работа 

Получите полную программу и индивидуальную консультацию

Преподаватели

Как проходит обучение

Вы выполняете домашние задания и открываете доступ к новому уникальному контенту по теме. Достаточно выделить 3–5 часов в неделю.

  1. Изучаете
    тему

    В курсе — полезные видеоуроки.

    Интерфейс системы обучения
  2. Выполняете домашнее задание

    В том темпе, в котором вам удобно.

    Интерфейс системы обучения
  3. Общаетесь с наставником

    Закрепляете знания и исправляете ошибки.

    Интерфейс системы обучения
  4. Защищаете дипломный проект

    И дополняете им свое портфолио.

    Интерфейс системы обучения

Резюме после прохождения

Аделина Ветрова моушн-дизайнер

Ожидаемая зарплата от 60 000

Владение инструментами:
  • Adobe After Effects ПО для редактирования видео и динамических изображений, разработки композиций, анимации и создания различных эффектов.

  • Principle Редактор для создания анимированных и интерактивных логотипов.

  • Webflow Инструмент прототипирования веб-интерфейсов.

  • Atomic Сервис для прототипирования готового продукта.

Ключевые навыки:
  • Анимация интерфейсов
  • Настройка микровзаимодействий
  • Работа с 3D в пространстве After Effects
  • Проектирование шоурила и видеобаннеров
  • Создание презентаций с анимацией
  • Поиск креативных решений и идей
  • Подготовка сценариев и раскадровки для роликов
  • Дополнение интерфейсов звуками

Диплом Skillbox

Подтверждает успешное прохождение курса «Анимация интерфейсов»

Анимация интерфейсов

Стоимость обучения

Скидка 50%

Стоимость обучения 50 000

2 083 Рассрочка без первого взноса

25 000

Гарантия возврата денег в течение 14 дней

Запишитесь на курс

Дата начала: 8 декабря

Осталось: 15 мест

Часто задаваемые вопросы

  1. Для анимации используется Adobe After Effects, это же очень сложный софт?

    Мы коснёмся только основных возможностей After Effects, так что вам не нужно будет вслепую разбираться со всеми функциями. Также в программу входит изучение других актуальных инструментов для создания анимации: Principle, Webflow, Atomic.io.

  2. На YouTube есть обучающие ролики на любую тему. Я могу научиться моушн-дизайну по ним бесплатно, зачем мне покупать курс?

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

  3. Если во время обучения у меня появится вопрос, мне помогут?

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

или получить

Появились вопросы по курсу?

Оставьте ваш номер телефона, и наш специалист свяжется с вами, чтобы дать подробную информацию.