Складчина Каталог
Мои курсы

Продвинутый дизайн и Figma

5 участников
АЛ Автор Антон Ларичев Школа PurpleSchool

О чём курс

Антон Ларичев и Елена Кострикова создали продвинутый курс по веб-дизайну и Figma, который продолжает базовое обучение. Вы спроектируете интернет-магазин с ключевыми страницами, кликабельным прототипом и адаптивными версиями, а также подготовите проект для портфолио и дальнейшего развития.

Что вы изучите

Курс рассчитан на тех, кто уже работает в Figma и хочет перейти от отдельных экранов к проектированию интерфейсов. Материал построен от простого к сложному.

Вы научитесь:

  • проектировать структуру и логику веб-сайтов;
  • анализировать интерфейсы и дизайнерские решения;
  • работать с компонентами в Figma;
  • использовать Variants, вложенные компоненты и Variables;
  • строить UI-системы и мини UI-киты;
  • проектировать ключевые страницы сайта;
  • создавать кликабельные прототипы;
  • адаптировать интерфейсы под разные устройства;
  • подготавливать проекты для портфолио.

Создание UI-кита для интернет-магазина

В курсе вы создадите масштабируемый UI-кит, будете работать с компонентами и поддерживать порядок в интерфейсе больших проектов. При проектировании сайта выстроите его структуру и создадите дизайн на основе логики и задач продукта.

Автор курса

Антон Ларичев — основатель PurpleSchool и бывший CTO. Он занимается разработкой более 14 лет и работал с JavaScript, TypeScript, Php, Go, C#, Swift и Python. Внедряет гибкие методологии разработки в компании и внутреннее обучение для команд.

Другие авторы

Елена Кострикова — ведущий веб-дизайнер с опытом работы в дизайне более пяти лет. Она работала над сайтами, лендингами и CRM-системами для бизнеса.

Программа обучения

    1. Введение
    • 1.1 О продвинутом веб-дизайне
    • 1.2 Знакомство с преподавателем
    • 1.3 Как устроен курс
    • 1.4 Обзор проектов
    1. Настройка окружения
    • 2.1 Знакомство с Figma
    • 2.2 Регистрация в Figma. Тарифы
    • 2.3 Установка Figma - MacOS
    • 2.4 Установка Figma - Windows
    • 2.5 Установка шрифтов
    1. Типы сайтов и структура веб-интерфейсов
    • 3.1 Что такое веб-сайт. Классификация веб-сайтов
    • 3.2 Типы веб-сайтов: особенности и отличия
    • 3.3 Универсальные блоки и UI-паттерны. Часть 1
    • 3.4 Универсальные блоки и UI-паттерны. Часть 2
    • 3.5 Поведенческие паттерны пользователей
    • 3.6 Структура страниц и логика пользовательских сценариев
    • 3.7 Упражнение - Знакомство с ТЗ
    • 3.8 Упражнение - Создание карты сайта
    • 3.9 Упражнение - Создание чернового прототипа
    • 3.10 Тест - Типы сайтов и структура веб-интерфейсов
    1. Компоненты и варианты
    • 4.1 Компоненты. Основные понятия
    • 4.2 Компоненты. Как работать с иконками
    • 4.3 Упражнение - Создание карточек с иконками
    • 4.4 Варианты компонентов
    • 4.5 Упражнение - Создание вариантов
    • 4.6 Свойства компонентов
    • 4.7 Упражнение - Настройка свойств компонента
    • 4.8 Знакомство с переменными
    • 4.9 Тест - Компоненты и варианты
    1. Базовые UI-элементы
    • 5.1 UI элементы: введение
    • 5.2 Типы кнопок и их состояния
    • 5.3 Упражнение - Создание кнопок для проекта
    • 5.4 Поля ввода (Input) и формы
    • 5.5 Упражнение - Создание инпутов для проекта
    • 5.6 Радиокнопки, чекбоксы и тогглы
    • 5.7 Упражнение - Создание радиокнопок и чекбоксов
    • 5.8 Выпадающие списки в интерфейсе
    • 5.9 Упражнение - Создание дропдаунов для проекта
    • 5.10 Тест - Базовые UI-элементы
    1. Блоки и страницы сайта
    • 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 Тест - Блоки и страницы сайта
    1. Адаптивный веб-дизайн
    • 7.1 Принципы адаптивного веб-дизайна
    • 7.2 Упражнение - создание адаптива для страницы каталога. Часть 1
    • 7.3 Упражнение - создание адаптива для страницы каталога. Часть 2
    • 7.4 Тест - Адаптивный веб-дизайн
    1. Прототипирование
    • 8.1 Основы прототипирования
    • 8.2 Кликабельный прототип и анимация. Часть 1
    • 8.3 Кликабельный прототип и анимация. Часть 2
    • 8.4 Тест - Прототипирование
    1. Куда дальше
    • 9.3 Куда дальше?
    • 9.4 Отзыв о курсе
Складчина создана 1 ноября 2026 г.

Теги курса

Профессии
Веб-дизайнерДизайнер интерфейсов
Навыки
Веб-дизайнFigmaДизайн интерфейсов
Инструменты
Figma

Другие материалы автора 12

АЛ Антон Ларичев Все материалы
Основы C# Основы C# 653 ₽ 3 999 ₽ −84%Next.js 14 - с нуля, React TypeScript, Hooks, SSR и CSS Grid 2024 Next.js 14 - с нуля, React TypeScript, Hooks, SSR и CSS Grid 2024 376 ₽ 2 999 ₽ −87%Fullstack разработка Fullstack разработка 3 433 ₽ 26 000 ₽ −87%NodeJS: с нуля, основы и построение архитектуры приложений (PRO) NodeJS: с нуля, основы и построение архитектуры приложений (PRO) 2 973 ₽ 25 000 ₽ −88%Продвинутый Codex Продвинутый Codex 0 ₽ Основы тестирования ПО Основы тестирования ПО 3 999 ₽ Прохождение собеседования Прохождение собеседования 50 ₽ 999 ₽ −95%Продвинутый Golang Продвинутый Golang 3 999 ₽ Neovim - практика и настройка (2024) Neovim - практика и настройка (2024) 266 ₽ 2 099 ₽ −87%Основы Swift и iOS Основы Swift и iOS 3 999 ₽ Основы Golang Основы Golang 3 999 ₽ Современный Agile для разработчиков Современный Agile для разработчиков 280 ₽ 3 799 ₽ −93%

Ещё интересные курсы 12

Ещё интересные курсы

1 045 ₽ 3 999 ₽