[Stepik] Дмитрий Фокеев - Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design (2024)

[Stepik] Дмитрий Фокеев - Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design (2024)

Чему вы научитесь

Изучите все инструменты Figma
Изучите современные техники и приемы дизайна
Научитесь азам работы в Photoshop
Узнаете больше про профессии UX UI дизайнер
Узнаете что такое web design на практике
Научитесь работать с изображениями в Figma
Научитесь подбирать правильные цвета для ваших сайтов
Научитесь подбирать правильные шрифты для ваших сайтов
Узнаете как работать с контрастом на веб страницах
Научитесь сочетать элементы на веб страницах
Узнаете что такое адаптивный дизайн
Научитесь адаптировать под любое мобильное устройство, любой сайт
Узнаете как анимировать макеты
Изучите места где можно черпать вдохновение для своих работ
Знаете где найти идеальное изображение, иконки и иллюстрации для ваших сайтов
Вы поймете как договариваться с потенциальным заказчиком
Вы узнаете как составлять бриф с потенциальным заказчиком
Изучите базу по работе в Photoshop
Для кого этот курс
Для начинающих дизайнеров, верстальщиков, веб-программистов, творческих людей. Для тех кто хочет начать карьеру в веб дизайне.

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

Скачиваем материалы
Как проходить курс
Оставайтесь со мной на связи
Основы 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
Как работает абсолютное позиционирование
Доделываем сайт
ПРАКТИКА. Создайте дизайн сайта
Адаптивный дизайн

Основы constraints
Как работают constraints с grid
ПРАКТИКА. Constraints
Что такое адаптивный дизайн
Что такое DPI и PPI
Адаптируем первую страницу сайта
ПРАКТИКА. Адаптируйте сайт
Ускорение работы

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

Режим презентация макета
Углубленные настройки прототипов
Базовая анимация в 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
Расширяем границы изображений
Удаляем ненужное из фото
Как вырезать человека из одного фото и вставить его в другое
Как работают маски в фотошоп
Экспорт файлов из фотошоп
Что дальше?