Веб дизайн в Figma. Анимации и Главные правила "Юзабилити".

все курсы

Дизайн и создание контента

3.6

58 уроков,

начало 25 декабря

Сложность

Начинающий

Тип обучения

Курс

Формат обучения

Записанные лекции

Сертификат

Да

Стоимость курса

1 490 ₽

нет рассрочки

Привет!

Меня зовут Дима

Рад представить продвинутый курс по Motion дизайну и главным принципам User Experience в Figma.

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

В этом курсе вы узнаете:

Все о современных стилях в веб дизайне

Как создавать современные стили в Figma, такие как эффекты стекла, градиента и 3D.

Научитесь превращать любую стоковую иконку в 3D иконку или иконку с эффектом стекла.

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

Все о современных методах анимаций в Figma

Вы узнаете все о современных методах анимаций и прототипирования ваших макетов, от простого к более сложному. Узнаете как создавать анимацию Parallax Effect, чтобы дизайн ваших сайтов был по настоящему уникальным.

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

Вы узнаете как создавать анимацию 360градусов которую используют самые современные сайты

Узнаете как создавать анимацию в Figma так как это делают в After Effect, сможете использовать видео и Gif анимации в ваших проектах.

И конечно, каждый уважающий себя веб дизайнер должен знать, как создать анимацию макбука, так же как на сайте apple, прямо в Figma

Самые важные принципы пользовательского опыта с точки зрения "Юзабилити"

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

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

И если у вас все еще остались сомнения, этот курс предоставляет возможность вернуть деньги потраченные на него если он вам не понравится в течении 30 дней.

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

До встречи на уроках!

Что вы получите после обучения

Приобретаемые навыки

Веб-дизайн

Анимация

Motion design

Motion Plugin

Вас будут обучать

Дмитрий Фокеев

курсов

Создаю авторские онлайн курсы с 2016 года. Профессионально обучаю работе с графическими редакторами Adobe, преподаю дизайн и веб разработку.

Привет! Меня зовут Дима! Не хочу хвастаться, но придется) Обучил более 5000 студентов по всему миру на моих авторских онлайн курсах. Более 2000 реальных отзывов со средней оценкой 4,83 из 5.00! Я преподаю веб дизайн, веб разработку и необходимое ПО (Phhotoshop Illustrator, Figma). Мой опыт преподавания складывается из 5 лет репетиторства на фрилансе, а так- же преподавания через онлайн школы и курсы, на мировых площадках по дистанционному обучению. Студенты моих курсов, отмечают лучшие мои качества в том, как я подаю материал без зубрежки, весело и интересно.

Образовательная организация

Stepik

4.6

60 отзывов

Stepik — образовательная платформа и конструктор
онлайн-курсов. Мы разрабатываем алгоритмы адаптивного обучения, сотрудничаем с авторами MOOC, помогаем
в проведении олимпиад и программ переподготовки.
Наша цель — сделать образование открытым и удобным.

Помогаем учиться, а также создавать свои курсы и обучать

Первые учебные материалы были размещены на платформе в 2013 году. Сегодня среди охваченных курсами тем: программирование, информатика, математика, статистика
и анализ данных, биология и биоинформатика, инженерно-технические и естественные науки. Онлайн-курсы, размещенные на Stepik, неоднократно становились призерами конкурсов онлайн-курсов, а система автоматизированной проверки задач используется в ряде курсов на платформах Coursera и edX. Также Stepik активно развивает направление адаптивного обучения, где каждый сможет изучать материал, подобранный индивидуально под свой уровень знаний.

Stepik является также площадкой для проведения конкурсов и олимпиад — среди мероприятий — отборочный этап Олимпиады НТИ, онлайн-этап акции Тотальный диктант, международная олимпиада по биоинформатике.

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

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

Подготовка
1. О чем этот курс
2. Скачиваем материалы для курса
3. Оставайтесь со мной на связи
Motion design.
1. О чем этот блок
2. Создаем первую анимацию
3. Как работают анимации в Figma
4. Что такое кривые Безье
5. Анимируем мобильное приложение "Фото-сток"
6. Практика. Создайте собственную анимацию в проекте "Фото-сток".
7. Пример преподавателя. Создаем анимацию в проекте "Фото-сток".
8. Как создать Parallax Effect
9. Создаем анимацию гамбургера
10. Создаем анимацию загрузки страницы
11. Как работают Flows в прототипах. Организация страниц в проекте.
12. Как создать анимацию "темной" и "светлой" темы через кнопку
13. Как создать обложку проекту
14. Практика. Создайте свой Parallax Effect
Использование "вариантов" в анимациях
1. О чем этот блок
2. Что такое "Варианты в figma"
3. Как использовать "варианты" в анимациях
4. Кнопка быстрого доступа к "вариантам"
5. Как тестировать ваш макет на мобильном девайсе
6. Как работает spinner. Анимируем текст
7. Как создать анимацию как на сайте apple
8. Как запустить видео файл в figma
9. Как использовать GIF в своих проектах. Сток анимированных иконок
10. Практика. Создайте анимацию "360 градусов"
11. Пример преподавателя. Как создать анимацию "360 градусов "
Создание анимаций через плагин Motion Plugin
1. Как работает плагин Motion Plugin
2. Используем плагин вместе с масками
3. Экспорт анимации из плагина
Современные стили. Градиент / Стекло / 3D
1. Как создать анимацию градиента
2. Как работают режимы наложения
3. Создаем эффект "Paper Cut" с градиентом
4. Как создать эффект "стекла"
5. Как сделать эффект "стекла" более объемным
6. Как создавать собственные стеклянные иконки
7. Как превратить обычную иконку в стеклянную
8. Практика. Создайте собственный эффект стекла
9. Как создавать эффект 3D из обычных элементов
10. Как создать иконку в стиле 3D
11. Создаем 3D элементы на стартовой странице сайта
12. Плагин по 3D и 3D стоки
Главные правила UX - пользовательского опыта
1. О чем этот блок
2. Что такое дизайн
3. Главное правило. Не заставляйте людей думать
4. Как люди на самом деле используют браузер
5. Привычки пользователей и как извлекать из них выгоду
6. Выбор без размышлений
7. Сокращайте текст
8. Практика. Сделайте простым и удобным
9. Пример преподавателя. Сделайте простым и удобным
10. Используйте навигацию на сайте
11. Все мы разные
12. Проводите тестирование
13. Заключение. Постулаты хорошего веб дизайна
Что дальше?
1. До новых встреч!
Получите ваш сертификат
1. Тест для получения сертификата об окончании курса