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

"Продолжение описания:"

Мы научимся использовать пустое пространство в свою пользу, работать с контрастом, профессионально накладывать изображения друг на друга, изучим тонкости и правила в веб дизайне и много многое другое!
Простая и понятная работа со шрифтами
Мы изучим все что необходимо знать о работе со шрифтами, начиная от мест где вы найдете лучшие шрифты до их установки! И конечно в конце курса, у вас исчезнет вопрос, какой же шрифт лучше подобрать для вашего сайта!
Разберемся в странных темах UX/UI
Этот курс направлен в первую очередь на развитие навыков User Interface дизайнера, но конечно, в курсе мы коснемся обеих сторон профессии как UX – User Experience так и UI - User Interface
Практика на протяжении всего курса
В этом курсе сделан большой акцент на практику. В каждом, небольшом уроке, без лишней болтовни, мы будем шаг за шагом создавать 2 красивых, уникальных проекта, которые, вы сможете использовать в своем портфолио – web дизайнера.
Необходимые навыки адаптивного дизайна
И конечно, мы узнаем как адаптировать сайты под разные устройства, как анимировать каждый элемент макета и даже научимся создавать красивые слайдеры и красивую анимацию счетчика прямо в figma!
Поговорим об общении с потенциальным заказчиком и о развитии в дизайне
Дополнительно, мы поговорим о том, как договариваться с заказчиком, как развиваться в дизайне, где искать идеи, как создавать оригинальные творческие работы, как наработать свой стиль и узнаем множество мест, где дизайнеры и художники находят вдохновение!
База по Photoshop для уникальных макетов
Вы конечно же, не станете профи, без минимальных знаний по обработке изображений. И именно поэтому, бонусом в этом курсе будет блок, где мы научимся всем необходимым знаниям по работе в 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
Расширяем границы изображений
Удаляем ненужное из фото
Как вырезать человека из одного фото и вставить его в другое
Как работают маски в фотошоп
Экспорт файлов из фотошоп
Что дальше?