Веб дизайн в Figma 2024 - с нуля до результата, основы UX/UI Дмитрий Фокеев

Подробное описание: Веб дизайн в Figma 2024 - с нуля до результата, основы UX/UI Дмитрий Фокеев

Для заказа пишите сюда, в viber или telegram +380683490263После оплаты отправляю ссылку на сервис хранения файлов с курсом. Доступ постоянный. Можно смотреть онлайн или скачать себе.
________________________________________

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

Подготовка к курсу

Скачиваем материалы
Как проходить курс
Оставайтесь со мной на связи

Основы Figma

Какие размеры у сайта
Создаем frame сайта
Что такое сетка grid
Основы работы с Фигурами \ Изображениями \ Слоями
Основы работы с текстом
Группировка слоев и немного про режим презентации
Как сохранять и передавать файлы Figma
Разница UX и UI

Работа с цветом

Подбор цвета из изображений
ПРАКТИКА. Подберите цвет из изображения
Что такое HSB. Точная настройка цвета
Инструменты подбора цвета для проекта
Как работать с градиентом
Правило пропорций цвета 60/30/10

Работа с изображениями

Разница растровой и векторной графики
Выбирайте качественные изображения
Как тонировать изображения
Техника экстремальной обрезки
Техника мягкой обрезки
Работа с иконками
Как создать свою иконку
Как изменять фигуры

Основы AutoLayOut

Основы работы с AutoLayout
ПРАКТИКА. AutoLayOut

Продвинутая работа с фигурами

Как работает инструмент "pen tool"
ПРАКТИКА. "Pen tool"
Делаем следующую секцию сайта
Разница фреймов и групп

Отступы в веб дизайне

Правила отступов в веб дизайне
ПРАКТИКА. Отступы в веб дизайне
4px grid vs 8px grid

Эффекты и стили

Как работают эффекты
Как работают стили

Маски и плагины

Как работают маски
Дополнительная практика по маскам
Фигура с изображением
Как работают плагины
Доделываем сайт

Работа со шрифтами

Важность шрифтов
Типы шрифтов
Где брать новые шрифты
Как подбирать шрифты
ПРАКТИКА. Подберите шрифты
Настройки шрифта
ПРАКТИКА. Настройка шрифта

Подготовка к новому проекту

Как создавать страницы в проекте
Бриф с заказчиком
Как создавать mood board
Что такое Wireframe сайта
ПРАКТИКА. Создайте собственный mood board и wireframe

Дизайн система

Нужен ли дизайнеру Photoshop
Как приобрести лицензионный фотошоп из России
Что такое дизайн система
Делаем лист стилей для типографики
Доделываем карту стилей
ПРАКТИКА. Создайте свою дизайн систему

Компоненты и варианты в figma

Делаем следующую секцию сайта
Как работают компоненты
Организация и хранение компонентов
Как работают варианты
ПРАКТИКА. Создайте собственные варианты

Углублённая работа с AutoLayOut

Как создать подкатегории стилей
Создаем следующую секцию сайта
Как создавать многоуровневый AutoLayOut
Используйте готовые элементы из других макетов
AutoLayOut Pro версия
Делаем страницу блога
Как работают Min width / Max Width
Как работает абсолютное позиционирование
Доделываем сайт
ПРАКТИКА. Создайте дизайн сайта

Ускорение работы

Полезные горячие клавиши
Полезные плагины

Прототипирование

Режим презентация макета
Углубленные настройки прототипов
Базовая анимация в figma
Как работают кривые Безье
Работа open overlay & scroll to
Как работает swap overlay
Как работает After Delay
Как работает Smart Animate
Анимируем меню сайта
Прототипирование компонетов
Reset Position & Component state
Заключение блока прототипирование

Платная или Бесплатная Figma?

Отличия платной и бесплатной figma

Экспорт

Экспорт изображений
Как работать в команде

Бонус! Дизайнерские трюки

Трюки с наложением элементов друг на друга
Одинаковые элементы на странице
Трюки с повторениями
Трюки с контрастом
Трюки с пустым пространством
Как развиваться в дизайне

Бонус. Figma Jam

Что такое Figma Jam
Обновления Figma Jam

Бонус! Работа в Photoshop

Рекламная пауза
Подготовка программы
Работа со слоями в Photoshop
Расширяем границы изображений
Удаляем ненужное из фото
Как вырезать человека из одного фото и вставить его в другое
Как работают маски в фотошоп
Экспорт файлов из фотошоп
Что дальше?