Продвинутый курс по веб-дизайну и Figma: системный подход и проектирование интерфейсов
Этот курс — продолжение базового обучения веб-дизайну. Он подойдёт тем, кто уже умеет работать в Figma и хочет перейти от отдельных экранов к проектированию полноценных интерфейсов.
В курсе вы разберёте, как выстраивать структуру сайта, создавать дизайн на основе логики и задач продукта. Особое внимание уделяется тому, как мыслить интерфейсом как системой, а не набором разрозненных блоков.
Большое внимание уделяется продвинутой работе в Figma: компонентам, Variants, вложенным компонентам и Variables. Вы соберёте масштабируемый UI-кит и научитесь поддерживать интерфейс в порядке даже в больших проектах.
В процессе обучения вы спроектируете интернет-магазин: ключевые страницы, кликабельный прототип и адаптивные версии. Итог курса — цельный проект, готовый для портфолио и дальнейшего развития.
Чему вы научитесь?
- После прохождения курса вы сможете:
- Проектировать структуры и логики веб-сайтов
- Анализировать интерфейсы и дизайнерские решения
- Работать с компонентами в Figma
- Использовать Variants, вложенные компоненты и Variables
- Строить UI-систем и мини UI-киты
- Проектировать ключевые страницы сайта
- Создавать кликабельные прототипы
- Адаптировать интерфейсы под разные устройства
- Подготавливать проекты для портфолио
План курса
Курс построен таким образом, чтобы доносить материал от простого к сложному. Ниже вы можете ознакомиться с планом курса и посмотреть часть открытых лекций по кнопке проигрывателя.
1. Введение
- 1.1 О продвинутом веб-дизайне
- 1.2 Знакомство с преподавателем
- 1.3 Как устроен курс
- 1.4 Обзор проектов
2. Настройка окружения
- 2.1 Знакомство с Figma
- 2.2 Регистрация в Figma. Тарифы
- 2.3 Установка Figma - MacOS
- 2.4 Установка Figma - Windows
- 2.5 Установка шрифтов
3. Типы сайтов и структура веб-интерфейсов
- 3.1 Что такое веб-сайт. Классификация веб-сайтов
- 3.2 Типы веб-сайтов: особенности и отличия
- 3.3 Универсальные блоки и UI-паттерны. Часть 1
- 3.4 Универсальные блоки и UI-паттерны. Часть 2
- 3.5 Поведенческие паттерны пользователей
- 3.6 Структура страниц и логика пользовательских сценариев
- 3.7 Упражнение - Знакомство с ТЗ
- 3.8 Упражнение - Создание карты сайта
- 3.9 Упражнение - Создание чернового прототипа
- 3.10 Тест - Типы сайтов и структура веб-интерфейсов
4. Компоненты и варианты
- 4.1 Компоненты. Основные понятия
- 4.2 Компоненты. Как работать с иконками
- 4.3 Упражнение - Создание карточек с иконками
- 4.4 Варианты компонентов
- 4.5 Упражнение - Создание вариантов
- 4.6 Свойства компонентов
- 4.7 Упражнение - Настройка свойств компонента
- 4.8 Знакомство с переменными
- 4.9 Тест - Компоненты и варианты
5. Базовые UI-элементы
- 5.1 UI элементы: введение
- 5.2 Типы кнопок и их состояния
- 5.3 Упражнение - Создание кнопок для проекта
- 5.4 Поля ввода (Input) и формы
- 5.5 Упражнение - Создание инпутов для проекта
- 5.6 Радиокнопки, чекбоксы и тогглы
- 5.7 Упражнение - Создание радиокнопок и чекбоксов
- 5.8 Выпадающие списки в интерфейсе
- 5.9 Упражнение - Создание дропдаунов для проекта
- 5.10 Тест - Базовые UI-элементы
6. Блоки и страницы сайта
- 6.1 Карточка товара как основной UI-блок
- 6.2 Карточка товара (Сбор страницы) Часть 1
- 6.3 Карточка товара (Сбор страницы) Часть 2
- 6.4 Каталог товаров (фильтры, сортировка)
- 6.5 Упражнение Сбор страницы Каталог товаров
- 6.6 Упражнение - Сбор страницы Корзина
- 6.7 Упражнение - Сбор страницы Оформление заказа
- 6.8 Упражнение - Сбор главной страницы. Часть 1
- 6.9 Упражнение - Сбор главной страницы. Часть 2
- 6.10 Упражнение - Сбор UI кита
- 6.11 Тест - Блоки и страницы сайта
7. Адаптивный веб-дизайн
- 7.1 Принципы адаптивного веб-дизайна
- 7.2 Упражнение - создание адаптива для страницы каталога. Часть 1
- 7.3 Упражнение - создание адаптива для страницы каталога. Часть 2
- 7.4 Тест - Адаптивный веб-дизайн
8. Прототипирование
- 8.1 Основы прототипирования
- 8.2 Кликабельный прототип и анимация. Часть 1
- 8.3 Кликабельный прототип и анимация. Часть 2
- 8.4 Тест - Прототипирование
9. Куда дальше
- 9.3 Куда дальше?
- 9.4 Отзыв о курсе
Авторы курса:
Автор курса - Антон Ларичев
Основатель PurpleSchool
Основатель PurpleSchool и ex-CTO. Занимаюсь разработкой уже более 14 лет и имею большой опыт: JavaScript, TypeScript, Php, Go, C#, Swift и Python. Активно внедряю гибкие методологии разработки в компании и внутренние обучения для команд.
Автор курса - Елена Кострикова
Ведущий веб-дизайнер
Мой опыт в дизайне более 5 лет. Работала над проектами разного масштаба — от сайтов и лендингов до CRM-систем для бизнеса. Люблю создавать дизайн, в котором сочетаются удобство, красота и функциональность. Для меня важно, чтобы визуальные решения не только радовали глаз, но и помогали пользователям
