Узнайте подробности программы у специалиста приемной комиссии
Промокод
Нажимая на кнопку, вы соглашаетесь на обработку персональных данных и получение сообщений от Среды обучения
ДИЗАЙН В СРЕДЕ
Научитесь «оживлять» макеты и собирать прототипы любых интерфейсов. Станьте UI-дизайнером, за проектами к которому заказчики выстраиваются в очередь
анимация
|
анимация ИНТЕРФЕЙСОВ
2 курс в подарок
2 курс в подарок
Научитесь «оживлять» макеты и собирать прототипы любых интерфейсов.
Станьте UI-дизайнером, за проектами к которому заказчики выстраиваются в очередь
анимация
|
анимация ИНТЕРФЕЙСОВ
2 курса в подарок
Кейс в портфолио
и удостоверение
о повышении квалификации
Результат
Занятия проходят
в реальном времени
Онлайн-формат
1 сентября - 29 февраля
Срок обучения
6 месяцев
Длительность
Почему этот курс?
Упор на практику

Учим тому, что нужно UI-дизайнеру здесь и сейчас. Это курс для тех, кто хочет делать интерфейсы, а не рассуждать о них
Физиологические особенности восприятия анимации
Научим делать анимацию не для красоты, а для ваших целей: чтобы пользователь кликнул на кнопку, перешел на сайт, открыл корзину
Актуальная техническая база

Самый технически продвинутый инструмент прототипирования — ProtoPie. Возможности Principle, After Effects и полезные плагины
Учёба на реальных кейсах

Никакой оторванной от земли теории. Преподаватели передают опыт работы над интерфейсами действующих компаний. Учебные проекты не отличаются от реальных
Занимайся, когда удобно

Учёба в одном клике от вас: занятия доступны онлайн в реальном времени и в записи, можно смотреть с телефона, можно пересматривать в течение года
Фидбек по каждому заданию

Преподаватели на связи через вебинары и чат в телеграме. Разбираем каждую работу: объясняем, что выглядит хорошо, что плохо, где можно поправить, делимся лайфхаками
Для кого этот курс
которые хотят получить фундаментальное понимание осмысленной UI-анимации и повысить стоимость своей работы
Для Middle-продуктовых дизайнеров
которые хотят стать востребованными специалистами и научиться использовать анимацию как прикладной инструмент для улучшения UI.
Для Junior-продуктовых дизайнеров
Чему вы научитесь
Создавать стильные и функциональные интерфейсы
Готовить анимированные презентации продукта
Делать макеты для передачи в разработку
Собирать высоко детализированные прототипы любых интерфейсов
Повышать качество пользовательского опыта с помощью анимации
Прогнозировать восприятие интерфейса с точки зрения физиологии
Сколько Вы будете зарабатывать?
Анимированные UI-концепты на сегодняшний день используются в большом количестве интерфейсов и уверенно вытесняют статику.
Профессия UI-аниматора — это вклад в Ваше будущее
Сейчас по запросу «UI-дизайнер» по данным сайта HH.ru
521 вакансий
Зарплата
дизайнера интерфейсов
Источник данных: Хабр Карьера
70 000 руб.
Junior
Middle
140 000 руб.
200 000 руб.
Senior

Алексей Покидышев

  • руководитель направления «Дизайн-система СберБанк Онлайн»;
  • соавтор курса Виртуальной Школы Сбера «Дизайн для недизайнеров»;
  • автор курса Виртуальной Школы Сбера «Функциональная анимация»;
  • преподаватель курса «UX/UI дизайн» в Британской Высшей Школе Дизайна
Лидер программы
Дарим 2 курса в подарок
При поступлении на программу «Анимация интерфейсов» дарим два курса в записи бесплатно.
Программа обучения
1. Принципы анимации и софт
Ответим на вопросы: Что такое анимация? Каковы ее основные принципы? Какой была первая анимация в интерфейсах? Какой софт есть на рынке? Почему именно ProtoPie?
2. Анимация в интерфейсах. Возможности ProtoPie
Узнаем, для чего нужна анимация в интерфейсах, какие функции она выполняет, познакомимся с интерфейсом ProtoPie.
3. Скорость анимации. Быстрое прототипирование
Поговорим о скорости анимации, о том, как выбрать тайминг и обсудим конкретные цифры, разберем три полезных совета про тайминг. Обсудим быстрое прототипирование, изучим основную парадигму ProtoPie: Object > Trigger > Response и соберем простой прототип, импортированный из Figma.
4. Изинги. Анимация плавной подгрузки (на примере Figma)
Разберем базовые и экзотические функции изинга, поймем, как выбрать изинг. Рассмотрим, как ритм влияет на восприятие анимации, создадим анимацию плавной загрузки на примере Figma.
5. Триггеры жестов
Узнаем, можем ли мы использовать Drag, Pinch, Long Press и 3D Touch в ProtoPie. И привяжем к ним Move, Scale и 3D Rotate.
6. Операторы условий
На примере интерфейсного свича узнаем, как анимировать один объект, который зависит от состояния другого.
7. Переходы между экранами (сложные переходы). Переходы по маске (на примере карточки App Store)
Разберем правильное использование констрэйнтов и свойства векторных слоев-шейпов.
8. Swipe-to-go-back или Pull to dismiss (Pull down) (на примере карточки App Store)
Рассмотрим переход, обратный переходу из прошлого урока. Разберем триггер Pull, чтобы отслеживать изменения на экране и воспроизводить соответствующую анимацию.
9. Горизонтальная карусель и первая формула
Сделаем горизонтальный онбординг, используя формулу для вычисления координат и изменения свойств нужных элементов.
10. Форма регистрации или логин (добавим первую lottie-анимацию)
Работая в ProtoPie, мы достаточно просто можем создать прототип формы регистрации или авторизации с помощью операторов условий и формул. Разберем работу с lottie анимациями в проектах.
11. 3D трансформации c триггером Chain
Сделаем прототип для лендинга с 3D-трансформацией объекта, привязанной к действию курсором. Рассмотрим триггер Chain и то, как мы можем передавать одни значения в зависимости от других.
12. Триггер Detect и формулы (на примере яркости/звука в Control Center)
C помощью формул и триггера detect сделаем слайдер с динамически обновляющейся информацией.
13. Триггер Range
Разберем триггер Range, узнаем, чем он отличается от оператора условий и в какой ситуации может быть нам полезен. Привяжем начало одной анимации к концу первой.
14. Работа с переменными (на примере hero-секции лендинга)
Научимся отслеживать расположение курсора на экране и хранить его в переменных. В итоге соберем hero секцию для лендинга с эффектом параллакса и 3D трансформациями.
15. Почему объемный опыт важен?
Поговорим о звуках, Haptic и их взаимоотношениях с анимацией. Разберем, почему все три инструмента важны и как они дополняют друг друга.
16. Использование сенсоров устройства (на примере карточки продукта)
Соберем прототип с динамическим освещением сцены (похожий эффект компания Google недавно показывала в последнем обновлении Material You).
17. Дополнительный софт (Principle, After Effects и полезные плагины)
Поговорим о том, какие инструменты для создания анимации в интерфейсах есть на рынке, обсудим их преимущества и недостатки.
18. Principle и After Effects
Разберем главные функции, полезные фишки, сильные и слабые стороны Principle и After Effects.
19. Плагины для After Effects
Рассмотрим полезные и актуальные плагины для After Effects.
20. AEUX
Разберем возможности плагина AEUX, незаменимого инструмента для переноса макета из Figma, Sketch в After Effects.
21. Motion3 и Swiss Knife
Рассмотрим полезные функции плагинов Motion3 и Swiss Knife, без которых достижение результата заняло бы огромное количество времени.
22. Shape Shifter
Познакомимся с веб-сервисом Shape Shifter, который единственный в своем роде позволяет быстро и удобно пересохранить xml в svg, а также дает возможность анимировать svg прямо в браузере.
23. Передача в разработку, и как ProtoPie нам помогает в этом?
Рассмотрим процесс передачи макета и прототипа в разработку.
24. Фреймворк Lottie
Разберем два плагина для работы с фреймворком Lottie от Airbnb — LottieFiles или Bodymovin.
Как проходит обучение
в онлайн-занятиях: лекциях, практикумах и воркшопах
Участвуете
домашние задания и практические работы
Выполняете
финальный проект и применяете знания в работе
Собираете
рекомендации от преподавателей
Получаете
DO IT
Какой софт необходим
Микрофон
Веб камера
ПО: ProtoPie, After Effects
Компьютер/ноутбук
После сдачи итогового проекта Вы получаете:
WOW
Уверенные навыки
Конкурентоспособное портфолио
Удостоверение о повышении квалификации

Нажимая на кнопку, вы даете согласие на обработку своих персональных данных и получение сообщений от Среды обучения
Записаться на программу или получить бесплатную консультацию
Заполните заявку, и Вам перезвонит специалист приемной комиссии.
Оформите налоговый вычет и верните 13% от стоимости обучения
от 10 000 ₽/ мес
рассрочка на 6 месяцев
Доступ к записанным урокам 365 дней после завершения курса
Предлагаем беспроцентную образовательную рассрочку