Веб дизайн в Figma. Анимации и Главные правила "Юзабилити".
Повышение квалификации
4-5 часов в неделю
онлайн
Сертификат Stepik
1 990 ₽
Подробнее о курсе
Документ после выпуска
Сертификат Stepik
Автор курса
Программа курса
Подготовка
- Скачиваем материалы для курса
- О чем этот курс
- Оставайтесь со мной на связи
Motion design.
- Создаем первую анимацию
- Как работают анимации в Figma
- Что такое кривые Безье
- Анимируем мобильное приложение "Фото-сток"
- Практика. Создайте собственную анимацию в проекте "Фото-сток".
- Пример преподавателя. Создаем анимацию в проекте "Фото-сток".
- Как создать Parallax Effect
- Создаем анимацию гамбургера
- Создаем анимацию загрузки страницы
- Как работают Flows в прототипах. Организация страниц в проекте.
- Как создать анимацию "темной" и "светлой" темы через кнопку
- Как создать обложку проекту
- Практика. Создайте свой Parallax Effect
- О чем этот блок
Использование "вариантов" в анимациях
- Как использовать "варианты" в анимациях
- Кнопка быстрого доступа к "вариантам"
- Как тестировать ваш макет на мобильном девайсе
- Как работает spinner. Анимируем текст
- Как создать анимацию как на сайте apple
- Как запустить видео файл в figma
- Как использовать GIF в своих проектах. Сток анимированных иконок
- Практика. Создайте анимацию "360 градусов"
- Пример преподавателя. Как создать анимацию "360 градусов "
- Что такое "Варианты в figma"
- О чем этот блок
- Обновление 2023. Как работают переменные.
- Обновления 2023. Обновления Auto Layout
- Обновления 2023. Прототипирование + переменные
- Обновления 2023. Куда делась вкладка Inspect!?
Создание анимаций через плагин Motion Plugin
- Как работает плагин Motion Plugin
- Используем плагин вместе с масками
- Экспорт анимации из плагина
Современные стили. Градиент / Стекло / 3D
- Как создать анимацию градиента
- Как работают режимы наложения
- Создаем эффект "Paper Cut" с градиентом
- Как создать эффект "стекла"
- Как сделать эффект "стекла" более объемным
- Как создавать собственные стеклянные иконки
- Как превратить обычную иконку в стеклянную
- Практика. Создайте собственный эффект стекла
- Как создавать эффект 3D из обычных элементов
- Как создать иконку в стиле 3D
- Создаем 3D элементы на стартовой странице сайта
Главные правила UX - пользовательского опыта
- Что такое дизайн
- Главное правило. Не заставляйте людей думать
- Как люди на самом деле используют браузер
- Привычки пользователей и как извлекать из них выгоду
- Выбор без размышлений
- Сокращайте текст
- Практика. Сделайте простым и удобным
- Пример преподавателя. Сделайте простым и удобным
- Используйте навигацию на сайте
- Все мы разные
- Проводите тестирование
- Заключение. Постулаты хорошего веб дизайна
- О чем этот блок
Что дальше?
- До новых встреч!
Получите ваш сертификат
- Тест для получения сертификата об окончании курса
Для кого этот курс
Для веб дизайнеров и веб разработчиков
Предварительные требования
Для прохождения курса, необходимы знания по основам программы figma.
Что вы получите
Изучите как создавать самые современные стили в Figma
Узнаете как создавать эффекты "стекла" на ваших сайтах
Узнаете как создать 3D из любой фигуры или элемента в Figma
Узнаете современные способы использования и анимации градиента
Узнаете все о создании анимаций в Figma
Научитесь создавать анимацию 360 градусов прямо в Figma
Сможете создавать анимацию как на сайте apple
Научитесь анимировать любые элементы страницы сайта, такие как кнопки, гамбургеры и т.д.
Научитесь использовать"Варианты" для создания впечатляющих анимаций
Узнаете про стоковые площадки где вы найдете современную графику для ваших работ
Научитесь использовать продвинутые плагины, которые позволят вам создавать собственные кастомные анимации
Изучите главные принципы пользовательского опыта с точки зрения "Юзабилити"
Узнаете как пользователи в действительности используют веб браузер
Изучите то как сделать ваш сайт простым и интуитивно понятным
Курс Figma Motion и главные правила UX, погрузит вас в самые современные принципы создания анимированных веб сайтов в программе Figma.
Оставьте отзыв
Похожие курсы
Bang Bang Education
CoddyОставьте заявку
Наши консультанты ответят на все вопросы
И помогут в выборе
Нажимая кнопку, вы даете согласие на обработку персональных данных