Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design

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

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

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

- Разница растровой и векторной графики
- Выбирайте качественные изображения
- Как затемнять изображения
- Как тонировать изображения
- ПРАКТИКА #3 - Затонируйте изображение
- Техника экстремальной обрезки
- ПРАКТИКА #4 - Экстремальная обрезка
- Техника мягкой обрезки
- ПРАКТИКА #5 - Мягкая обрезка
- Про иконки
- Как создать свою иконку
- Как работать с обводкой
- Функции ИИ для изображений в Figma (платная Figma)
- Используйте сторонние нейросети для изображений

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

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

- Правила отступов в веб дизайне
- ПРАКТИКА #8 - Отступы в веб дизайне
- Подводим итоги про отступы

- Как работают стили
- Создаем следующую секцию сайта
- Как работают эффекты

- Как работают маски
- Дополнительная практика по маскам
- Делаем следующую секцию
- Как работают плагины
- Что такое Figma Community
- Создаем Footer Сайта
- Доделываем сайт

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

- Как создать обложку проекта
- Бриф с заказчиком
- ПРАКТИКА #11 - Travel Project
- Как создавать mood board
- Что такое Wireframe сайта
- Обзор функций ИИ в Figma (платная Figma)

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

- Делаем следующую секцию сайта
- Как работают компоненты
- Как работают варианты
- Подводим итоги Варианты
- ПРАКТИКА #13 - Создайте собственные варианты

- Создаем следующую секцию сайта
- Как работает GRID AutoLayOut
- AutoLayOut Pro версия
- Создаем следующую секцию сайта
- Делаем страницу блога
- Создаем карточку блога
- Как работают Min width / Max Width
- Создаем варианты карточки блога
- ПРАКТИКА #14 - Создайте дизайн сайта

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

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

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

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

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

- Обзор Figma Make
- Обзор Figma Site
- Обзор Figma Buzz
- Обзор Figma Slides
- Обзор Figma Jam

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

- Моя книга по UX-Исследования
- До свидания!

- Тест для получения сертификата об окончании курса