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

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

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

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

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

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

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

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

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

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

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

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

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

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

- Как создать подкатегории стилей
- Создаем следующую секцию сайта
- Как создавать многоуровневый 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 Jam
- Обновления Figma Jam

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

- До свидания!

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