Учитываем аудиторию, цель сайта и сценарий пользователя.
Курс веб-дизайна в Figma для школьников
От первых макетов до интерактивного прототипа за один семестр. Индивидуальные онлайн-занятия для школьников примерно от 12 лет: дизайн сайта и приложения, композиция, типографика и компоненты Figma. Опыт дизайна не нужен. В финале — отдельный макет по реальному брифу школы с поддержкой преподавателя.
Иллюстрация курса; она не изображает реальный класс или занятие.
Что входит в курс веб-дизайна
Разбираем, какую задачу решает интерфейс, как расположить контент и сделать экраны понятными. Ученик применяет основы UI/UX, сетки и типографику к макету сайта и нескольким экранам приложения, затем связывает их в интерактивный прототип.
Задача и визуальный разбор
Разбираем задачу, аудиторию и путь пользователя.
Учимся анализировать референсы Pinterest, Behance и Awwwards без копирования чужих макетов.
Инструменты Figma
Работаем со страницами, фреймами, группами, слоями и масками.
Создаём фигуры, векторные контуры и простые SVG; осваиваем булевы операции.
Сетки и Auto Layout
Используем сетки, направляющие, интервалы, Auto Layout и ограничения.
Проверяем расположение блоков на широкой и узкой версии макета.
Типографика и визуальные стили
Подбираем шрифты, цвета, контраст и стили текста с учётом читаемости и лицензий.
Применяем переменные, компоненты и варианты, чтобы решения оставались согласованными.
Адаптивность и прототип
Проверяем макеты на широком и узком экране и настраиваем переходы между фреймами.
Связываем клики, оверлеи и простые анимации в проверяемый пользовательский сценарий.
Экспорт и заказной макет
Экспортируем подходящие ассеты и готовим макеты к понятной передаче.
В финале оформляем макет по реальному заказу школы с поддержкой преподавателя.
Кому подойдёт курс по веб-дизайну
Курс рекомендован школьникам примерно от 12 лет, которым интересно, как устроены сайты и приложения и почему одними интерфейсами удобно пользоваться, а другими — нет. Опыт дизайна не нужен: от простых форм и визуальных примеров ученик постепенно перейдёт к компонентам и прототипам.
Обучение проходит индивидуально онлайн, программа включает 32 занятия в четырёх модулях. Преподаватель помогает разбирать интерфейсы, пробовать разные решения и улучшать работу по обратной связи. Результаты остаются в виде дизайн-макетов и прототипов в Figma.
Программа курса: один семестр, 32 занятия и 4 модуля
За семестр ученик последовательно соберёт адаптивный макет сайта и несколько экранов приложения с интерактивным сценарием. Последние четыре занятия посвятит заказному макету по реальному брифу школы: согласует решения, внесёт правки и подготовит передачу с поддержкой преподавателя.
📚
1 семестр
🧩
4 модуля
🗓️
32 занятия
🖥️
Макеты сайта и приложения
🎨
Насмотренность и основы UI/UX
📐
Сетки, Auto Layout и компоненты
🔗
Кликабельный прототип
💬
Проверка и обратная связь
📝
Заказной макет по брифу
Один семестр — от основ визуального языка до школьного брифа
Четыре последовательных модуля по восемь занятий. Два макета постепенно дополняются практикой, а последние четыре занятия посвящены заказному макету по реальному брифу школы.
Занятие 1. Что делает веб-дизайнер
Разбираем интерфейс как способ помочь человеку выполнить задачу; различаем сайт, приложение, макет и продукт. Выбираем тему учебного сайта и описываем пользователя, цель и главное действие.
Занятие 2. Насмотренность без копирования
Анализируем композицию, ритм, контраст и навигацию на примерах Pinterest, Behance и Awwwards. Собираем исследовательскую доску и подписываем, какой приём изучаем, отмечая источник материала.
Занятие 3. Бриф, аудитория и сценарий
Превращаем общую идею в короткое задание и выделяем потребности аудитории. Пишем учебный мини-бриф и сценарий из трёх шагов посетителя.
Занятие 4. Figma: навигация, фреймы и слои
Изучаем холст, страницы, панели, фреймы, группы, порядок слоёв и именование. Осваиваем V (перемещение), F (фрейм), R (прямоугольник), T (текст), Shift+1 (вписать макет), Shift+2 (приблизить выделение), Ctrl/Cmd+D (дублировать) и Ctrl/Cmd+Z (отменить); собираем экран сайта из подписанных фреймов.
Занятие 5. Фигуры, векторы и булевы операции
Работаем с фигурами, пером, узлами и SVG-графикой, пробуем булевы операции Union, Subtract, Intersect и Exclude. Рисуем набор простых пиктограмм и сохраняем редактируемые формы.
Занятие 6. Сетка, направляющие и интервалы
Настраиваем layout guides — сетки и направляющие Figma, линейки и измерения, колонки, поля и повторяемые промежутки. Строим серый каркас главной страницы с ровной сеткой и явной иерархией.
Занятие 7. Типографика и лицензии шрифтов
Сравниваем serif и sans-serif, заголовочный и основной текст, размер, интерлиньяж и длину строки. Выбираем шрифты с подходящими правами и проверяем читаемость макета.
Занятие 8. Первый экран сайта
Применяем сетку, типографику, изображения и фигуры к учебному проекту. Собираем черновой экран сайта и объясняем дизайнерские решения через задачу пользователя.
Занятие 9. Композиция и визуальная иерархия
Разбираем масштаб, контраст, выравнивание, группировку и маршрут взгляда. Улучшаем каркас сайта так, чтобы главное действие и содержание были заметны раньше второстепенного.
Занятие 10. Палитра и контраст
Назначаем цвета для фона, текста, акцента и состояний, проверяем контраст и не кодируем смысл только цветом. Собираем палитру и проверяем важные сочетания текста и фона.
Занятие 11. Градиенты, blur, тени и стекло
Изучаем градиенты, размытие, тени и прозрачные поверхности, а также их ограничения для контраста. Сравниваем сдержанный декоративный вариант с более ясным обычным фоном.
Занятие 12. Изображения, маски и кадрирование
Применяем маски и подбираем кадр, обсуждаем авторство и права на медиа. Готовим визуальный блок из учебных материалов и сохраняем исходники отдельно.
Занятие 13. Auto Layout и повторяемые блоки
Собираем вертикальные и горизонтальные авто-макеты с внутренними отступами и расстояниями; сравниваем Fixed, Hug contents и Fill container. Пробуем перенос и Grid в Auto Layout, отличая его от визуальных сеток layout guides. Настраиваем карточку и навигационную панель так, чтобы они выдерживали изменение текста.
Занятие 14. Ограничения и две ширины экрана
Сравниваем constraints и Auto Layout и обсуждаем, почему один фрейм не становится адаптивным сайтом автоматически. Подготавливаем широкую и узкую версии главного экрана.
Занятие 15. Кнопки, формы и чипы: состояния
Проектируем обычное, наведённое или нажатое, недоступное и фокусное состояния. Собираем кнопку, поле формы, тег и фильтр-чип с понятными подписями и подсказками.
Занятие 16. Завершаем учебный макет сайта
Дорабатываем секции, навигацию и визуальную целостность сайта. Завершаем учебный макет в двух ширинах и проверяем по короткому чек-листу.
Занятие 17. От сайта к приложению
Сравниваем контекст использования и навигацию сайта и приложения, выбираем одну задачу. Описываем сценарий приложения и набрасываем карту экранов.
Занятие 18. Экранные паттерны и навигация
Разбираем заголовки, списки, карточки, панели и зоны взаимодействия на мобильном экране. Собираем каркас двух-трёх экранов по сценарию.
Занятие 19. Компоненты для повторения
Создаём компоненты и экземпляры кнопок, карточек, иконок или навигации. Заменяем повторяющиеся элементы экранов экземплярами и сверяем согласованность.
Занятие 20. Варианты и свойства компонентов
Объединяем состояния в набор вариантов и настраиваем свойства содержимого и отображения. Создаём компонент кнопки и проверяем его в разных экранах.
Занятие 21. Стили и переменные
Организуем цвета и типографику в повторно используемые стили и доступные в файле переменные; возможности зависят от плана. Приводим учебный проект к именованной системе.
Занятие 22. Плагины и приватность
Обсуждаем стороннее происхождение плагинов, цену, разрешения и возможную обработку данных. По чек-листу изучаем один вариант, а удаление фона при отсутствии одобренного решения показывает преподаватель на своём демонстрационном файле.
Занятие 23. Экспорт PNG, JPG, SVG и WebP
Сравниваем растровые PNG/JPG и векторный SVG: прозрачность, чёткость, размер и подходящие задачи. Экспортируем ассеты из Figma, затем конвертируем разрешённую растровую копию в WebP внешним инструментом. Проверяем качество, прозрачность и имена файлов, сохраняя исходники.
Занятие 24. Интерактивный прототип
Настраиваем стартовую точку, клики, переходы, оверлеи и простые анимации. Связываем экраны приложения и проверяем путь от первого экрана до завершения задачи.
Занятие 25. Проверка глазами пользователя
Формулируем задание тестировщику, наблюдаем за действиями и собираем конкретную обратную связь без подсказок. С разрешения участника проводим короткую проверку прототипа и записываем наблюдения без личных данных.
Занятие 26. Доступность и финальная итерация
Проверяем контраст, читаемость, размеры интерактивных областей и подписи. Исправляем два обнаруженных барьера и фиксируем результат.
Занятие 27. Передача макета и история версий
Упорядочиваем страницы, фреймы и слои, подписываем состояния и заметки, используем историю версий и повторяем сочетания клавиш из первого модуля. Готовим сайт и приложение так, чтобы другой человек понял их структуру и замысел.
Занятие 28. Презентация учебных проектов
Показываем сайт и приложение, объясняем выбор решений и ограничения прототипа. Готовим короткий разбор и список следующих улучшений.
Занятие 29. Заказной макет: понять реальный бриф
Получаем реальный заказ от школы, вместе с преподавателем уточняем аудиторию, цель, ограничения и критерии. Составляем резюме задачи и задаём заказчику вопросы, чтобы согласовать ожидания до начала дизайна.
Занятие 30. Заказной макет: направление и каркас
Предлагаем визуальное направление, строим информационную структуру и согласуем её с преподавателем. Подготавливаем карту контента, сценарий пользователя и каркас ключевого экрана для обсуждения по брифу.
Занятие 31. Заказной макет: дизайн и прототип
Разрабатываем макет по согласованному брифу, применяя сетку, типографику, компоненты и интерактивный прототип. Показываем заказчику направление, принимаем комментарии и вносим согласованные правки вместе с преподавателем.
Занятие 32. Заказной макет: финальные правки и передача
Представляем готовый макет, учитываем финальные комментарии и готовим файл к передаче. Каждый ученик, завершивший курс, получает возможность выполнить оплачиваемую итоговую работу: если он не нашёл заказ самостоятельно, школа предоставляет заказ от UnionCode и оплачивает принятую работу по заранее согласованным условиям. Выплату можно перевести родителю или ученику с согласия родителя, если такой перевод доступен.
Что ученик освоит на курсе
Ученик научится обосновывать визуальные решения через задачу пользователя, собирать макет из повторяемых элементов и проверять сценарий до передачи результата. В конце курса каждому завершившему ученику гарантируется возможность выполнить оплачиваемую работу по реальному брифу.
Если ученику интереснее писать код и запускать работающие страницы, посмотрите курс создания сайтов. Для практики с нейросетями и учебным сайтом с помощью ИИ есть курс искусственного интеллекта.
Разобрать задачу
Определить аудиторию, цель интерфейса и путь пользователя.
Собрать макет сайта
Выстроить контент, композицию, сетку и типографику в двух ширинах.
Спроектировать приложение
Создать несколько экранов и связать их пользовательским сценарием.
Работать с компонентами
Использовать варианты и свойства для повторяемых элементов и состояний.
Подготовить заказной макет
Выполнить оплачиваемую итоговую работу по реальному брифу с поддержкой преподавателя.
Попробуйте веб-дизайн в Figma на бесплатном уроке
Познакомьтесь с преподавателем, соберите первый простой элемент интерфейса и обсудите подходящую программу занятий.
Навыки для работы с макетами и интерфейсами
Осваиваем визуальную коммуникацию, инструменты дизайна и передачу макета, опираясь на пользовательскую задачу.
Soft-skills: развитие мышления и самостоятельности
Навыки помогают анализировать интерфейсы, понимать пользователя и объяснять дизайнерский выбор.
🧩
Анализ задачи и аудитории
🔎
Насмотренность и разбор референсов
🎨
Обоснование визуальных решений
💬
Работа с обратной связью
Hard-skills: реальные инструменты веб-дизайна
Практические приёмы Figma для сборки, проверки и передачи учебных макетов.
🖼️
Фреймы, слои, векторы и маски
🔲
Сетка, Auto Layout и ограничения
🔤
Типографика, цвета и контраст
🧱
Компоненты, варианты и стили
🧪
Прототипирование и передача макета
Как проходит обучение
Курс проходит онлайн и строится вокруг практики: ребёнок шаг за шагом проектирует интерфейсы, собирает прототипы и получает обратную связь преподавателя.
Что входит в учебные проекты
На каждом этапе ученик применяет новые навыки в макете будущего сайта или приложения:
- Исследование интерфейсов: разбираем визуальные решения и то, как композиция помогает пользователю.
- Задача и структура: определяем аудиторию и сценарий, собираем каркас сайта и распределяем контент по блокам.
- Визуальная система: настраиваем типографику, цвета, изображения и сетку.
- Адаптивные макеты: проверяем широкие и узкие экраны, проектируем мобильные страницы и повторяемые компоненты.
Формат обучения и результат
Преподаватель сопровождает ученика от первого брифа до готового прототипа:
- Практика на занятиях: ученик последовательно выполняет этапы проекта и сразу применяет новые знания.
- Обратная связь: проверяем макет, переходы и удобство интерфейса, помогаем исправить недочёты.
- Итоговый проект: готовим интерактивный прототип и учебную передачу макета.
- Оплачиваемая работа: каждому, кто завершит курс, школа гарантирует возможность выполнить итоговую работу. Если ученик не нашёл заказ сам, UnionCode предоставляет заказ и оплачивает принятую работу по заранее согласованным условиям.
Стоимость индивидуальных занятий
Актуальные варианты занятий и условия оплаты отображаются в карточках ниже.
Первый семестр — пакет из 32 индивидуальных онлайн-занятий по 60 минут, включая перерыв. Стоимость: 58 900₽. Темп прохождения тем подбирается с преподавателем; продолжение программы оплачивается отдельно.
Пробный урок: первый экран в Figma
На бесплатном занятии ребёнок познакомится с Figma и попробует оформить простой экран или элемент интерфейса. Обсудим, как цвет, текст и расположение элементов помогают пользователю.
1 500₽
0₽
Урок веб-дизайна: практика с макетом
Разбираем одну дизайнерскую задачу в Figma: композицию, типографику, палитру или поведение блока. Ребёнок дорабатывает макет и учится объяснять решения через задачу пользователя.
3 400₽
2 400₽
Половина пакета: макет сайта в Figma
От брифа и первого экрана переходим к цельному макету сайта. Практикуемся в работе с сеткой, цветом, шрифтами и Auto Layout, затем адаптируем блоки под разные ширины экрана.
40 000₽
33 800₽
Полный пакет: макеты и прототипы в Figma
Проектируем сайт и приложение, собираем компоненты и связываем экраны в интерактивный прототип. Проверяем удобство интерфейса и выполняем заказной макет по брифу школы с поддержкой преподавателя.
69 000₽
58 900₽
Частые вопросы о курсе веб-дизайна в Figma
Собрали ответы о программе, учебных проектах, доступе к Figma, плагинах и школьном брифе.
Нет, начинаем с базовых понятий и постепенно применяем их в двух учебных проектах. Предварительные навыки дизайна не нужны.
Индивидуально онлайн с преподавателем. Программа рассчитана на один семестр: 32 занятия в четырёх последовательных модулях по восемь занятий.
Учебный макет сайта, учебное приложение с несколькими экранами и интерактивным сценарием, а также отдельную работу по брифу школы. Это дизайн-макеты и прототипы, не готовые работающие продукты.
На веб-дизайне ученик проектирует внешний вид и поведение интерфейса в Figma: собирает макеты и интерактивный прототип. На курсе создания сайтов изучает HTML, CSS и JavaScript, чтобы превратить проект в работающий сайт. Если интереснее композиция, визуальные решения и удобство экранов, подойдёт веб-дизайн.
Мы не обещаем конкретный тариф или наличие платных функций. Школа определяет доступный разрешённый план и учебную схему; упражнения строятся на базовых возможностях, а сторонние платные плагины не являются обязательным условием.
Условия использования Figma зависят от страны, возраста и школьного плана. Школа заранее проверяет актуальные правила и выбирает разрешённый формат работы; самостоятельная регистрация вопреки условиям и передача аккаунта или пароля не требуются. Если личный доступ недоступен, преподаватель показывает работу на своём учебном файле.
Только после проверки преподавателем и если это разрешено школьной средой. Плагины создают третьи лица, могут иметь отдельную цену, разрешения и правила обработки данных; при сомнениях инструмент демонстрирует преподаватель на несекретном файле.
Каждому ученику, который завершит курс, школа гарантирует возможность выполнить оплачиваемую итоговую работу по реальному брифу. Если ученик не нашёл заказ самостоятельно, школа предоставляет заказ от UnionCode и оплачивает принятую работу по условиям, согласованным до начала. Выплату можно перевести родителю или ученику с согласия родителя, если такой перевод доступен. Это оплата конкретной работы, а не обещание постоянного дохода или занятости после курса.
Ученик упорядочит фреймы и компоненты, подпишет важные состояния и подготовит заметки и ассеты. Курс знакомит с принципами handoff, но не обещает, что макет автоматически превращается в код или полностью готовый сайт.
