Что изучаем

Курс соединяет три навыка в один процесс: проектирование в Figma, сборку с помощью нейросетей и тестирование. Слушатели осваивают Figma на уровне компонентов, автолейаута и дизайн-системы, учатся ставить задачу сервисам вайбкодинга и собирать по макету работающий прототип, а затем проверяют его на пользователях.Работа идёт над одним сквозным проектом — от макета до опубликованного прототипа, проверенного на людях.В основе — знания, которые не устареют вместе с инструментами: интерфейсные паттерны, компонентный подход, юзабилити-тестирование. Видео с этими основами отмечены звёздочкой ★.

Старт: зачем курс и для кого

Контекст, аудитория и что нужно уметь до начала

Контекст

От дизайнера всё чаще ждут не только макетов, но и работающих прототипов, которые можно показать пользователям и команде.
— Спрос на умение работать с ИИ-инструментами разработки за два года вырос в семь раз (McKinsey).
— В России 41% дизайнеров уже участвуют в разработке.Появились сервисы, которые собирают интерфейс по текстовому описанию, — это называют вайбкодингом. Но инструмент не заменяет основу: без понимания паттернов и проверки на людях результат получается быстрым, но слабым.

Для кого

— Начинающие дизайнеры, 20–27 лет, у которых работа заканчивается на макете.
— Дизайнеры с опытом, 25–35 лет, которые хотят собирать прототипы без разработчика.
— Продакт-менеджеры и маркетологи, 25–40 лет, которые хотят проверять идеи на работающем прототипе.

Пререквизиты

— Знать: базовые элементы интерфейса на уровне пользователя: экран, кнопка, форма, меню.
— Уметь: уверенно пользоваться компьютером и веб-сервисами. Опыт в программировании не нужен.
— Иметь: ноутбук, аккаунт в Figma и в 1–2 сервисах вайбкодинга (Lovable, Bolt, v0 или Figma Make). На старте хватит бесплатных тарифов, для финальной сборки может понадобиться платный тариф одного сервиса.

Карта: формат курса

Сколько длится курс и как устроены занятия

Продолжительность и формат

1 модуль, 8 недель, полностью онлайн.
— Каждая тема — 2–4 видео по 10–30 минут, презентация, домашнее задание и консультация.
— Прототипы публикуются на общем учебном хостинге.
— Всего около 104 академических часов, из них около 64 — самостоятельная работа.
— Материалы: стартовая дизайн-система в Figma, шаблоны запросов для нейросетей, протокол юзабилити-теста, чек-лист публикации прототипа.Маршрут
Figma → темы 1–4: паттерны, компоненты, дизайн-система, макет проекта.
Вайбкодинг → темы 5–6: постановка задачи и сборка прототипа.
Тест → темы 7–8: юзабилити-тест, доработка, защита.

Шаги: тематический план

8 тем, у каждой — закрепляющее задание

Тематический план

Figma
1. ★ Паттерны интерфейса. Навигация, формы, состояния экранов. Разбор продуктов.
2. ★ Figma. Фреймы, автолейаут, компоненты и варианты.
3. Дизайн-система. Стили, переменные, библиотека компонентов.
4. Макет проекта. Сценарии и ключевые экраны.Вайбкодинг
5. Сервисы вайбкодинга. Обзор, сравнение, постановка задачи по макету.
6. Сборка прототипа. От макета к работающему интерфейсу, проверка и исправление ошибок.Тест
7. ★ Юзабилити-тест. Сценарий теста, проведение, анализ результатов.
8. Доработка и публикация. Правки по тесту, публикация прототипа, защита проекта.

Финал: результат курса

Что слушатели смогут и как это проверяется

После курса слушатели смогут

1. Разбирать интерфейсы по паттернам и состояниям экранов.
2. Собирать макеты в Figma на компонентах и автолейауте.
3. Проектировать сценарии и ключевые экраны.
4. Ставить задачу сервису вайбкодинга и собирать работающий прототип по макету.
5. Проводить юзабилити-тест и анализировать его результаты.
6. Дорабатывать решение по итогам теста и представлять проект.

Задания (элементы контроля)

Каждое задание проверяет один результат.
1. Три разбора интерфейсов: паттерны навигации и форм, 4 состояния экрана, 3 проблемы.
2. Библиотека компонентов: 10+ компонентов с вариантами, стили цвета и текста.
3. Макет ключевых экранов: 5+ экранов на компонентах, сценарий «от входа до цели».
4. Прототип по ссылке: собран нейросетью, совпадает с макетом, журнал из 5+ исправленных ошибок.
5. Отчёт о тесте: 5 пользователей, проблемы по критичности, список правок.
6. Защита проекта: доработанный прототип, «до/после» по итогам теста.

Итоговый проект

Проект для портфолио: макеты в Figma, работающий прототип, отчёт о тестировании и доработанная версия. Защита проходит онлайн, 15 минут.Критерии оценки: макет построен на компонентах; прототип работает и соответствует макету; тест проведён по протоколу; доработки следуют из результатов теста; слушатель отделяет свои решения от работы инструмента.Оценка по формуле Школы дизайна: задания × 0,4 + итоговый проект × 0,6 + дополнительные баллы.

Пример проекта

Будет добавлен по итогам пилотного потока.