Под фразой «хочу делать сайты» могут скрываться три разных занятия. Подросток хочет рисовать интерфейсы, собирать страницы в конструкторе или писать HTML и CSS. Хороший курс честно называет основной результат и не обещает за один модуль освоить дизайн, разработку и продвижение на профессиональном уровне.
До оплаты выберите небольшой проект, который ребёнку действительно нужен: страница школьного клуба, сайт вымышленной игры или афиша события. По нему проще проверить программу, инструменты и качество обратной связи.
Разделите дизайн, сборку и код
| Интерес подростка | Основная работа | Что искать в курсе |
|---|---|---|
| Продумывать внешний вид | Макет интерфейса | Figma, сетки, типографика, компоненты, адаптив |
| Быстро запускать страницы | Сборка в конструкторе | Блоки, формы, домен, публикация, базовая доступность |
| Понимать устройство сайта | Вёрстка | HTML, CSS, структура документа, адаптивные правила |
Направления можно соединить позже. На старте ребёнку полезнее закончить один понятный цикл, чем понемногу нажать кнопки в пяти программах.
Проект начинается не с цвета кнопки
Перед макетом ученик должен сформулировать задачу страницы: кто её откроет, что хочет узнать и какое действие выполнит. Для афиши это дата и запись, для портфолио - просмотр работ, для страницы кружка - расписание и контакт.
Спросите школу, есть ли короткое исследование или разбор примеров. Не нужен большой маркетинговый отчёт. Хватит карты содержания и двух сценариев пользователя. Без этого макет превращается в декоративную картинку.
Первый макет должен быть ограниченным
Разумный старт - один экран и продолжение на несколько смысловых блоков. Ученик расставляет заголовок, текст, изображение и кнопку, затем проверяет иерархию. Ограничение помогает увидеть отступы и не прятать ошибки за десятками эффектов.
Попросите показать промежуточные артефакты: черновую схему, первый вариант и исправленный макет. Если в портфолио остаётся только идеально оформленный шаблон школы, непонятно, что сделал сам ребёнок.
Figma - инструмент, а не вся профессия
Курс должен научить создавать фреймы, пользоваться сеткой, собирать повторяющиеся элементы в компоненты и поддерживать порядок в слоях. Но скорость работы в Figma не заменяет понимания задачи. Ученик может быстро копировать карточки и всё равно сделать неудобную страницу.
Проверьте домашний доступ к аккаунту и файлам. Уточните, какие функции требуют платного тарифа и останутся ли проекты после завершения обучения. Для первого курса обычно достаточно базовых возможностей, если программа не привязана к закрытой библиотеке школы.
Сетка и отступы должны объясняться на примере
Фраза «добавь воздуха» слишком расплывчата. Преподаватель показывает границы контейнера, повторяющийся шаг отступов и связь между близостью элементов и их смыслом. После правки подросток применяет правило к другому блоку.
Полезное упражнение - собрать одну секцию в двух вариантах и сравнить. Где заголовок читается первым? Не потерялась ли кнопка? Можно ли быстро найти дату или цену? Дизайн становится проверяемым, а не только «красивым».
Типографика без коллекции случайных шрифтов
В первой работе достаточно одного семейства и нескольких начертаний. Ученик настраивает размер, межстрочный интервал и длину строки. Курс должен объяснять, почему мелкий серый текст на цветном фоне трудно читать, даже если он выглядит аккуратно в макете преподавателя.
Спросите о лицензиях на шрифты и изображения. Подростку полезно привыкнуть брать материалы из разрешённых источников и сохранять ссылки. Это часть нормального процесса, а не необязательная формальность перед публикацией.
Адаптив проверяйте на содержании
Мобильная версия - не уменьшенная копия экрана компьютера. Блоки меняют порядок, длинный заголовок переносится, меню упрощается, а кнопке требуется место для нажатия. Уже первый проект стоит показать хотя бы в двух ширинах.
Попросите изменить реальный текст: сделать заголовок длиннее и добавить ещё одну карточку. Если макет разваливается, ученик собрал картинку, а не систему. Сильный курс учит проверять пограничные случаи до передачи страницы в разработку.
Прототипирование и сценарий
Даже простой кликабельный прототип показывает, куда ведёт кнопка и можно ли вернуться назад. Для учебного лендинга хватит нескольких связей. Цель не в сложной анимации, а в проверке порядка действий.
На пробном уроке попросите подростка объяснить путь пользователя. Если он говорит только о цветах и картинках, преподаватель должен вернуть разговор к задаче. Именно это отличает дизайн интерфейса от оформления постера.
Как выглядит ревью макета
Предметная проверка отмечает приоритет. Сначала структура и читаемость, затем сетка и только после этого декоративные детали. Если наставник одновременно оставляет сорок комментариев без очередности, новичок не понимает, какую версию собирать.
Хороший комментарий объясняет эффект: кнопка сливается с фоном и теряется; два одинаково крупных заголовка спорят за внимание; карточки выглядят связанными, хотя относятся к разным темам. После правки ученик присылает новую ссылку.
Конструктор сайта и публикация
Если курс включает Tilda, Webflow или другую платформу, уточните границу между макетом и сборкой. Подросток должен сам перенести хотя бы часть дизайна, настроить отступы и проверить мобильный вид, а не получить готовый шаблон от преподавателя.
До запуска спросите о домене, тарифе конструктора и сроке хранения страницы. Не публикуйте личные данные ребёнка. Для демонстрации работы подойдёт вымышленный проект и закрытая ссылка.
Если в программе есть HTML и CSS
Кодовый модуль должен соответствовать цели курса. Полезно понять структуру страницы, семантические элементы и базовый адаптив. Но обещание одновременно научить сложному JavaScript и полноценному дизайну за несколько недель выглядит сомнительно.
Проверьте, кто разбирает ошибки в коде. Дизайнерский комментарий не заменяет помощь при сломанной вёрстке. Если школа объединяет направления, у неё должен быть понятный способ поддержать обе части.
Портфолио процесса
Сохраните постановку задачи, схему, две версии макета и короткое объяснение решений. Такой кейс честнее одной красивой картинки. Он показывает, что подросток умеет замечать проблему и исправлять её после обратной связи.
Не требуйте публичного портфолио в начале. Сначала достаточно закрытой папки. Ученик сам решит, какие работы показывать и под каким именем.
Пробный урок
Дайте небольшой неидеальный экран и попросите улучшить одну вещь: иерархию, отступы или мобильное расположение. Смотрите, задаёт ли преподаватель вопросы, объясняет ли правило и оставляет ли ребёнку решение.
После урока подросток должен открыть файл дома и повторить приём в другом блоке. Если он помнит только последовательность кликов наставника, перенос навыка не состоялся.
Цена и состав курса
Стоимость может изменяться, уточняйте на сайте школы. Посчитайте отдельно обучение, платные сервисы, домен и дополнительные проверки. Сравнивайте число разобранных собственных проектов, а не размер библиотеки записей.
Для первого месяца зафиксируйте результат: один адаптивный макет с прототипом и исправленной версией. Это конкретнее обещания «собрать портфолио» без состава работ.
Доступность интерфейса
Даже первый макет стоит проверить без дизайнерских терминов. Достаточен ли контраст текста, виден ли фокус на интерактивном элементе, понятна ли кнопка без цвета и можно ли прочитать страницу при увеличении? Курс не обязан делать из новичка специалиста по стандартам, но должен формировать привычку замечать разные условия использования.
Попросите подростка пройти свой прототип только с клавиатурой или объяснить порядок элементов вслух. Такие проверки быстро находят странную навигацию. Доступность становится частью качества, а не финальным украшением.
Работайте с настоящим объёмом контента
Учебный макет часто выглядит аккуратно из-за коротких заголовков и одинаковых карточек. Замените их реальными текстами разной длины, добавьте пустое состояние и сообщение об ошибке. Интерфейс должен выдерживать содержание, а не требовать идеальных данных.
Хорошая программа учит редактировать текст вместе с композицией. Если кнопка называется «Подробнее», подросток должен понимать, что именно откроется. Конкретная подпись помогает пользователю и делает макет убедительнее.
Компоненты и маленькая система
После первого экрана соберите кнопку, поле и карточку как повторяющиеся компоненты. Ученик меняет один элемент и видит, как обновляются экземпляры. Это не сложная дизайн-система, а способ избежать случайных размеров и цветов.
Попросите назвать правила проекта: ширина контейнера, шаг отступов, основные стили текста и состояния кнопки. Четырёх-пяти решений достаточно, чтобы макет выглядел собранным и легче адаптировался под телефон.
Передача макета разработчику
Даже если код не входит в курс, полезно подготовить файл для другого человека. Слои названы, изображения собраны, состояния элементов показаны, а непонятные решения описаны коротким комментарием. Так подросток видит, что дизайн участвует в общем процессе.
Пробное упражнение - дать макет однокласснику и попросить найти мобильную версию, состояние меню и нужную картинку без устных подсказок. Если это невозможно, файл требует порядка.
Референсы без копии чужой страницы
Выберите два сайта и разберите один аспект: навигацию, карточки или первый экран. Затем сформулируйте принцип и примените его к другой теме. Копирование целого макета не показывает, понимает ли ученик решение.
Преподаватель должен просить сохранять источники изображений и ссылку на референс. При публикации кейса подросток отделяет своё решение от учебного разбора чужой работы.
Короткий тест макета на другом человеке
Дайте прототип человеку, который не видел проект, и поставьте одну задачу: найти расписание, записаться или открыть нужную работу. Не объясняйте интерфейс по ходу. Запишите место первой остановки и вопрос пользователя.
Подросток меняет один элемент и повторяет тест. Это может быть подпись кнопки, порядок блоков или заметность ссылки. Такое упражнение показывает смысл дизайна лучше, чем долгое обсуждение вкуса, и даёт материал для описания кейса.
Вопросы перед оплатой
- Курс учит дизайну, конструктору или коду, и что является главным результатом?
- Какой проект подросток сделает в первые четыре недели?
- Кто проверяет макет и можно ли прислать исправленную версию?
- Есть ли мобильный макет и тест на длинном содержании?
- Какие сервисы оплачиваются отдельно?
- Останутся ли исходники и доступ к проектам после курса?
К теме «Как выбрать курс веб-дизайна, если подросток хочет делать сайты?» относятся подборки: Веб-дизайн, Курсы веб-дизайна 5 000-15 000 ₽, Дизайн. В них можно сопоставить цену, возраст ученика, формат занятий и порядок проверки домашних работ.