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

все курсы

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

3.6

58 уроков,

начало 20 апреля

Сложность

Начинающий

Тип обучения

Курс

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

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

Сертификат

Да

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

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, помогаем в проведении олимпиад и программ переподготовки.

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

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

Платформа Stepik включает в себя конструктор бесплатных занятий и уроков. Создать интерактивный обучающий курс может любой зарегистрированный пользователь. При этом авторы обучающих материалов сохраняют авторские права. Сервис не имеет ограничений по числу обучающихся на курсе.

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

Большим преимуществом данной платформы является возможность встраивать созданные материалы на сторонние сайты, например, Moodle и Canvas.

Кроме того, 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. Тест для получения сертификата об окончании курса