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

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

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

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

Для кого этот курс
Для начинающих дизайнеров, верстальщиков, веб-программистов, творческих людей. Для тех кто хочет начать карьеру в веб дизайне.

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

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

Основы Figma

1. Какие размеры у сайта
2. Создаем frame сайта
3. Что такое сетка grid
4. Основы работы с Фигурами Изображениями Слоями
5. Основы работы с текстом
6. Группировка слоев и немного про режим презентации
7. Как сохранять и передавать файлы Figma
8. Разница UX и UI

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

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

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

1. Разница растровой и векторной графики
2. Выбирайте качественные изображения
3. Как тонировать изображения
4. Техника экстремальной обрезки
5. Техника мягкой обрезки
6. Работа с иконками
7. Как создать свою иконку
8. Как изменять фигуры

Основы AutoLayOut

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Адаптивный дизайн

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

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

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

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

1. Режим презентация макета
2. Углубленные настройки прототипов
3. Базовая анимация в figma
4. Как работают кривые Безье
5. Работа open overlay & scroll to
6. Как работает swap overlay
7. Как работает After Delay
8. Как работает Smart Animate
9. Анимируем меню сайта
10. Прототипирование компонетов
11. Reset Position & Component state
12. Заключение блока прототипирование

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

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

Экспорт

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

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

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

Бонус. Figma Jam

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

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

1. Рекламная пауза
2. Подготовка программы
3. Работа со слоями в Photoshop
4. Расширяем границы изображений
5. Удаляем ненужное из фото
6. Как вырезать человека из одного фото и вставить его в другое
7. Как работают маски в фотошоп
8. Экспорт файлов из фотошоп
9. Что дальше?

ИСТОЧНИК