Веб-дизайн для детей и подростков: Figma, первый сайт на Tilda и выбор курса

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

Чем веб-дизайн отличается от афиши и от кода

Афишу смотрят, а страницу сайта прокручивают, ищут на ней кнопку, уходят в другой раздел и возвращаются. Поэтому юный веб-дизайнер думает не только о том, что заметят первым, но и о маршруте посетителя: что тому нужно найти и сколько нажатий это займёт. О плакатах и логотипах у нас есть отдельная статья о графическом дизайне для детей. С другой стороны стоит программирование: дизайнер решает, как страница выглядит и ведёт себя, а код пишет разработчик. Tilda снимает этот шаг, потому что её блоки уже запрограммированы. Подростку, которому интереснее, как кнопка считает нажатия, ближе материал о JavaScript для детей.

Что ребёнок сделает в разном возрасте

В 8–10 лет хорошая задача — страница о своём увлечении: заголовок, фотография, три карточки с любимыми книгами и кнопка «Написать мне». Схему ребёнок рисует на бумаге, а в Tilda меняет тексты и картинки в готовых блоках. Взрослый рядом заводит аккаунт и следит, чтобы на страницу не попали адрес, телефон или фамилия.

В 11–13 лет можно переходить к Figma: создать фрейм — рамку размером с экран, — разложить в нём блоки по сетке и связать несколько фреймов в кликабельный прототип, где нажатие на кнопку открывает следующий экран. Подросток 14–16 лет справляется с многостраничным сайтом, навигацией, формой обратной связи и экранами приложения. Главное отличие — он может объяснить, почему меню стоит именно здесь, и переделать его, если друг не нашёл нужную кнопку.

От идеи до опубликованной страницы

Путь до ссылки, которую не стыдно отправить друзьям, лучше проходить в одном порядке. Каждый шаг опирается на предыдущий: без списка блоков не из чего строить макет, без макета сборка в Tilda превращается в бесконечное перетаскивание, а проверять на телефоне имеет смысл только готовую страницу.

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

Учебный пример: сайт клуба настольных игр

Ситуация учебная. Двенадцатилетний ученик ведёт в школе клуб настольных игр и хочет, чтобы новички находили его без объявлений на доске. Посетители — пятиклассники и их родители, им нужно узнать, когда и где встречи, во что играют и как прийти впервые. Отсюда блоки: первый экран с названием и днём встреч, шесть карточек игр, «Как прийти первый раз», фотографии без лиц, контакты руководителя кружка.

В Figma он делает фрейм шириной 1200 пикселей с сеткой из 12 колонок. Число не случайное: в справке Tilda о Zero Block сказано, что редактор использует ту же сетку, что и вся Тильда, — 12 колонок, 1200 px. Макет по этой сетке не придётся подгонять при сборке на глаз. Карточки игр на компьютере стоят по три в ряд, по четыре колонки каждая. Второй фрейм шириной 360 пикселей нужен для телефона: карточки встают в один столбец, меню сворачивается в значок.

Страницу ученик собирает из стандартных блоков Tilda, а необычную шапку с игральным кубиком делает в Zero Block — редакторе, где каждый элемент ставится вручную. Здесь и начинаются трудности, о которых редко предупреждают.

Почему мобильная версия в Zero Block ломается

Стандартные блоки Tilda перестраиваются под ширину экрана сами. В Zero Block это делает дизайнер, и справка перечисляет пять типов экранов: 1200 px и шире — компьютеры, 980–1200 — горизонтальный планшет, 640–980 — вертикальный планшет, 480–640 — горизонтальный смартфон, 360–480 — вертикальный. Это пять раскладок одного блока.

Настройки, которые ребёнок не менял на более узком экране, наследуются с предыдущего и показаны в редакторе бледно-серым, а изменённые для конкретного экрана выделены чёрным. Отсюда типичная поломка: шапку аккуратно расставили на 1200 пикселях, а на остальные экраны не заглянули. На телефоне элементы остаются на тех же координатах и с тем же размером шрифта, что на широком экране, — заголовок обрезается, кубик наезжает на текст.

Вывод для юного дизайнера: закончив блок, пройти по всем пяти экранам и на каждом искать серые значения у крупных элементов — размер шрифта, ширину текста, координаты. Больше всего правок обычно требует последний, 360–480: он дальше всего от исходной раскладки. Для первого сайта разумно ограничиться одним блоком Zero Block, а остальное собрать из стандартных. Окончательная проверка — живой телефон в руке, а не сжатое окно браузера.

С чего начать дома, без курса

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

1. Нарисовать на бумаге схемы трёх сайтов, которыми ребёнок пользуется: где меню, где главная кнопка, сколько блоков.
2. Повторить в Figma первый экран одного из них прямоугольниками и текстом.
3. Сделать макет «страницы о себе» в двух фреймах, 1200 и 360 пикселей.
4. Собрать её в Tilda на бесплатном тарифе и открыть ссылку на телефоне.

Если после четвёртого шага ребёнок сам вернулся к странице, чтобы что-то поправить, интерес настоящий. Ошибки на старте повторяются: пять шрифтов, светло-серый текст на белом, кнопки разного цвета, фотографии одноклассников без спроса. Взрослому полезнее не исправлять, а спросить: что посетитель должен сделать на этой странице и где это видно?

Как выбрать курс: группа, один на один или сразу Tilda

Детские программы различаются тем, в каком редакторе проходит основное время, кто рядом — группа или один преподаватель — и доходит ли дело до опубликованного сайта.

Пройти путь от Figma до Tilda в индивидуальном темпе позволяет курс Реботики «Дизайнер в IT для детей и подростков» с занятиями один на один онлайн. В программе обучения пять модулей: Figma (фреймы, фигуры, перо, иконки), цвет, композиция и типографика, лендинг, Tilda с Zero Block и адаптацией под телефон, интернет-магазин с каталогом. Возраст указан по-разному: в карточке курса — от 12 лет, на странице направления — 8–16 лет. Длительность курса, цену и продолжительность занятия нужно уточнить у школы.

Индивидуальный формат подходит тому, кто стесняется показывать незаконченное. Но в группе ученик быстрее узнаёт, что его «понятное» меню непонятно другим.

Групповой путь с упором на Figma даёт курс Skillbox «Веб-дизайн для детей» для школьников 10–15 лет. За восемь месяцев он проходит три модуля: основы с модульными сетками, цветом, шрифтами и анимацией, проектирование интерфейсов в Figma и командную работу над веб-приложениями. Ученик делает семь сайтов, в конце — командный проект. HTML, CSS и JavaScript здесь не изучают, перед оплатой можно прийти на пробное занятие.

Выбор между Figma и сразу Tilda зависит от характера. Тому, кто любит сравнивать варианты, подходит путь через макеты. Тому, кому важно поскорее показать результат друзьям, лучше начать с конструктора, а Figma добавить позже.

Для второго варианта есть курс CODDY «Создание сайтов на Tilda» для подростков 10–15 лет без опыта программирования. Три модуля по месяцу: занятие два часа раз в неделю, индивидуально или в группе до восьми человек, онлайн или на площадке школы. От интерфейса Tilda и композиции ученики переходят к лендингам и многостраничным сайтам с мобильной версией, а затем подключают формы, делают интернет-магазин и работают по техническому заданию. Условия аккаунта Tilda и стоимость публикации на странице не описаны — спросите об этом заранее, как и о перерывах на двухчасовом занятии.

Сколько стоит и что даёт

Цены взяты с открытых страниц курсов и могут измениться. Курс Skillbox на 11 октября 2026 года стоил 74 400 рублей. У CODDY на 4 сентября 2026 года указано 8 080 рублей за модуль, около 24 240 рублей за три. Реботика цену не приводит.

К этому может добавиться тариф Tilda. По ответу Tilda о бесплатном тарифе на нём доступно до 50 страниц, но библиотека блоков ограничена, свой домен отключён, а сервисы приёма данных из форм не работают: форма записи в клуб будет выглядеть рабочей, но заявки никуда не придут. Полная коллекция блоков и домен входят в тариф Personal — по странице тарифов 500 рублей в месяц при оплате за год или 750 рублей помесячно. У Figma для учебных макетов есть бесплатный тариф Starter, а на чьё имя заводить аккаунты, лучше выяснить у школы.

Заработка от таких занятий ждать не стоит. Они дают понимание, нравится ли ребёнку проектировать то, чем пользуются другие, несколько опубликованных страниц и кликабельных прототипов, а также привычку проверять работу на живом пользователе.

Как понять, что занятия идут впрок

Хороший признак — ребёнок без напоминания открывает свой сайт на телефоне и сам замечает, что поехало. Второй — объясняет, почему кнопка стоит именно здесь. Третий — его начинают раздражать неудобные чужие сайты. Тревожный знак — все работы собраны из шаблонов, где поменяны только тексты.

Сравнить онлайн-школы как организации поможет рейтинг онлайн-школ для школьного обучения. Он широкий: в нём школы по предметам, домашнее обучение и репетиторы, а веб-дизайну отдельного раздела нет, поэтому возраст и программу сверяйте на странице курса. А до оплаты дайте ребёнку задание со «страницей о себе» в двух фреймах: если ему захочется сделать третий, для планшета, пора учиться всерьёз.