[PurpleSchool] Продвинутый дизайн и Figma. Тариф Самостоятельный (Антон Ларичев, Елена Кострикова)

​

Продвинутый курс по веб-дизайну и 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-систем для бизнеса. Люблю создавать дизайн, в котором сочетаются удобство, красота и функциональность. Для меня важно, чтобы визуальные решения не только радовали глаз, но и помогали пользователям