Моушн-дизайн с Figma: Анимации, Motion Graphics, UX/UI

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

Мы не предлагаем вам соревноваться за предложения по $5/час за разработку логотипов на различных фриланс-платформах.

После завершения этого курса вы сможете зарабатывать как минимум в 10-20 раз больше.

Вы будете учиться моушн-дизайну в активном сообществе.

Зарегистрировавшись сегодня, вы получите доступ к нашему эксклюзивному живому онлайн-классу, где сможете работать вместе с тысячами студентов, выпускников, наставников, ассистентов и преподавателей.

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

Этот курс вооружит вас самыми современными методологиями в области моушн-дизайна, пользовательских интерфейсов (UI) и пользовательского опыта (UX), сделав акцент на практических навыках для создания впечатляющих взаимодействий, анимаций и motion-графики для ваших веб и мобильных приложений.

Мы будем использовать Figma и Figma Smart Animate, инструменты, которые сейчас предпочитают современные дизайнеры, так как они заменяют устаревшие решения, как Adobe After Effects.

Кроме того, вы получите все файлы Figma, премиум-дизайн-шаблоны и ресурсы с этого курса для использования в ваших будущих клиентских проектах!

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

Этот учебный план практического характера. Дэниел проведет вас шаг за шагом от новичка к профессионалу, помогая создавать ваши собственные потрясающие и профессиональные проекты.

1. Начало работы с Figma - Исследуйте основные компоненты Figma и узнайте, что нужно для начала вашего пути. Мы разберем каждую деталь, чтобы устранить любые сомнения.

• Начало работы с Figma
• Введение в Figma
• Панель Figma
• Инструменты Figma
• Слои и страницы
• Функции верхней панели
• Свойства дизайна
• Прототипирование в Figma
• Упражнение: Создание адаптивного макета

2. Основы Figma Smart Animate - Figma Smart Animate - это революция. Вы научитесь настраивать различные свойства и применять эти знания для создания простых прототипов.

• Масштаб
• Позиция
• Прозрачность
• Вращение
• Заполнение
• Упражнение: Создание интерактивных элементов
• Упражнение: Навигация по анимациям
• Упражнение: Разработка большого прототипа

3. Создание приложения Фото-вдохновения - Вы начнете свой первый проект, используя предоставленные ресурсы и освоенные концепции для создания прототипа мобильного приложения для фото-вдохновения.

• Дизайн активов
• Категорийная фильтрация
• Переходы между экранами и взаимодействие через перетягивание
• Простые микро-взаимодействия

4. Важность движения - Узнайте, как движение значительно улучшает удобство использования продукта, рассказывает истории и поддерживает когнитивные модели.

• Общие заблуждения о моушн-дизайне
• Роль движения в удобстве использования
• Сюжет и когнитивные модели

5. Принципы моушн-дизайна - Этот раздел охватывает основы принципов моушн-дизайна и их важную роль в достижении успеха в дизайне.

• Введение в принципы моушн-дизайна
• Техники сглаживания
• Смещение и задержка
• Родительские элементы
• Техники трансформации
• Изменение значений
• Техники маскировки
• Эффекты наложения
• Методы клонирования
• Техники скрытия
• Эффекты параллакса
• Многомерные техники
• Эффекты Долли и Зума

6. Создание движения в Figma - Объедините теорию с практикой, погружаясь в Figma для разработки небольших прототипов. Дэниел проведет вас через каждый шаг.

• Упражнение: Плавные переходы навигации
• Упражнение: Эффекты прокрутки
• Упражнение: Механика пагинации
• Упражнение: Действия при перетягивании
• Упражнение: Создание микро-взаимодействий
• Упражнение: Восхитительные эффекты

7. Рабочий процесс моушн-дизайна - Узнайте, как интегрировать моушн-дизайн в обычный процесс проектирования. Дэниел расскажет о своем подходе к выявлению оптимальных стратегий движения для пользовательских потребностей.

• Открытие и исследование, часть 1
• Открытие и исследование, часть 2
• Основы дизайна и сторибординг
• Техники прототипирования
• Протоколы тестирования
• Практические советы

8. Проект: Карусель National Geographic - Изучите, как создавать как простые, так и сложные эффекты карусели в Figma.

• Быстрая и простая карусель для лендинга
• Создание сложного эффекта параллакса и 3D изображения

9. Искусство микро-взаимодействий - Погружайтесь в важность микро-взаимодействий. Создайте свою анимацию в Figma с помощью плагина Figmotion вместе с Дэниелом.

• Понимание микро-взаимодействий
• Значение микро-взаимодействий
• Figmotion: часть 1
• Figmotion: часть 2

10. Проект: Мобильное приложение для умного дома - По мере роста популярности технологий умного дома, научитесь проектировать главный экран и анимировать его в Figma. Следите за Дэниелом, который покажет сложное взаимодействие по регулировке температуры.

• Проектирование главного экрана
• Создание интеракций переключателей
• Техники регулировки температуры

11. Эффективная обратная связь - Узнайте лучшие стратегии для предоставления и получения конструктивной обратной связи по вашим дизайнам.

• Важность обратной связи по дизайну
• Предоставление конструктивной обратной связи по дизайну

12. Проект: Лендинг по ремонту дома - Хотели ли вы создать привлекательный лендинг с анимированными элементами? У вас есть возможность. Присоединяйтесь к Дэниелу, который покажет, как деконструировать лендинг на несколько прототипов.

• Дизайн лендинга
• Прототипирование лендинга
• Эффекты параллакса: часть 1
• Дизайн карусели
• Эффекты параллакса: часть 2
• Галерея дизайна

13. Проект: Форма для ремонта дома - Формы часто остаются без внимания, но использование движения может значительно помочь пользователям в выполнении важных задач. Дэниел покажет, как внедрить тонкие анимации в взаимодействия с формой для повышения удобства использования.

• Интеграция движения в элементы формы
• Динамика прогресса формы
• Анимация контента формы
• Поля ввода и кнопки: часть 1
• Поля ввода и кнопки: часть 2
• Поля ввода и кнопки: часть 3
• Поля ввода и кнопки: часть 4
• Улучшение с подсказками
• Интерактивные карусели для ввода данных

14. Проект: Мобильное приложение для доставки еды - Освойте создание привлекательных интеракций с использованием техник маскировки, а также разработку сложного прототипа прогресса заказа под руководством Дэниела.

• Введение в проект
• Использование параллакса для привлечения внимания
• Переходы в списках
• Альтернативные техники наложения
• Техники маскировки и наложения
• Микро-взаимодействия и плавающие кнопки действий
• Прогресс заказа: часть 1
• Прогресс заказа: часть 2

15. Демонстрация вашей работы - Вы разработали различные прототипы, но как вы их представите в своём портфолио? Мы рассмотрим несколько опций записи для Mac и Windows, чтобы продемонстрировать ваши прототипы в предпочтительном формате.

• Использование Kap на Mac
• Руководство по использованию Kap
• Интеграция GIF Kap в Figma
• Screenity для Chrome и Windows
• Руководство по использованию Screenity
• Интеграция GIF из Screenity в Figma

Какой главный вывод?

Этот курс не просто просмотр видеоруков.

Мы поможем вам превратиться из полного новичка в одного из лучших 10% среди дизайнеров моушн-графики 💪.

Почему мы в этом так уверены?

Тысячи выпускников курса Zero To Mastery получили работу в таких компаниях, как Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify и других.

Они процветают как топ-фрилансеры и наслаждаются удаленной работой по всему миру.

Независимо от вашего возраста, опыта или образования – многие наши студенты начинали с нуля.

Вы тоже можете стать одним из них.

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