Коротко: на курсе действуют три ограничения, с которых начинают все: один шрифт для заголовков, один для текста, не больше трёх цветов — и один из них акцентный, для действия. Ограничение работает лучше вкуса, потому что не даёт испортить макет, пока вкус ещё формируется. Цвета и типографика стоят в программе рано, темами 9 и 10.
Ребёнок открывает список шрифтов в Figma — их там больше тысячи. Дальше происходит предсказуемое: в макете появляются пять разных начертаний, четыре цвета текста и радужная кнопка. Исправлять это нотациями бессмысленно, поэтому мы даём правила.
Правило трёх цветов
Основной, дополнительный, акцентный. Основной занимает большую часть площади — обычно это фон и крупные поверхности. Дополнительный держит текст и границы. Акцентный появляется редко и только там, где нужно действие: кнопка, ссылка, важная цифра. Примерная пропорция — 60 / 30 / 10.
Ошибка новичка не в том, что он выбирает «некрасивый» цвет. Ошибка в том, что акцентных цветов у него три, и ни один не работает: глаз не знает, куда смотреть. Когда на экране одно яркое пятно — оно и ведёт.
Правило двух шрифтов
Один для заголовков, второй для текста. Третий разрешён, когда у него есть отдельная работа — например, цифры в таблице, — но почти всегда его роль может взять другая насыщенность того же шрифта. Полужирный заголовок и обычный абзац одним шрифтом выглядят цельнее, чем два разных семейства.
| Что делает новичок | Что делаем на курсе | |
|---|---|---|
| Шрифты | 4–5 семейств «чтобы не было скучно» | 2 семейства, разница через размер и насыщенность |
| Цвета | Каждый блок своего цвета | 3 цвета, акцент только на действии |
| Размеры | 18, 19, 21, 23 — на глаз | Шкала: 14 / 16 / 20 / 28 / 40 |
| Отступы | Разные между одинаковыми блоками | Кратные 8: 8, 16, 24, 32 |
Откуда брать сами цвета
Не из головы. На занятии мы берём цвет из того, что уже существует: из фотографии в макете, из логотипа, из предмета, который ребёнок принёс. Пипетка в Figma вытаскивает точный оттенок за секунду, и макет сразу выглядит собранным, потому что цвета в нём родственники, а не соседи.
Теорию цвета в дизайне мы не пересказываем — она подробно разобрана на сайте школы дизайна. Здесь важнее применение: как из десятка оттенков выбрать три и не испортить контраст текста.
Проверка, которую делает сам ребёнок
Уменьшить макет до 25 % и посмотреть издалека. Если в таком виде видно, куда нажимать, — иерархия работает. Если экран превратился в пятно — цветов слишком много или все элементы одного размера. Эта проверка занимает пять секунд и заменяет длинные объяснения.
Шкала размеров вместо «на глаз»
В таблице выше есть строка про размеры, и она заслуживает отдельного внимания, потому что именно здесь макет рассыпается чаще всего. Ребёнок ставит заголовок 21, подзаголовок 19, текст 17 — разница есть, но её не видно, и страница выглядит монотонной. Работает обратное: разница должна быть заметной. Например, 14 для мелкого, 16 для основного текста, 20 для подзаголовка, 28 и 40 для заголовков. Пять значений на весь макет, между ними — ничего.
То же с отступами. Все значения кратны восьми: 8, 16, 24, 32, 48. Это не магия числа — просто набор, из которого глаз не может выбрать «почти одинаковые» варианты. Когда между блоками 16 или 24, а не 17 и 22, макет автоматически выглядит собранным, даже если цвета подобраны неуверенно.
Контраст: проверка, которую нельзя пропустить
Светло-серый текст на белом фоне выглядит на макете изысканно. На телефоне под солнцем он исчезает полностью, а человеку с ослабленным зрением не читается вообще никогда. Это не вопрос вкуса, а вопрос того, можно ли пользоваться страницей.
Проверка делается встроенным дополнением за секунду: оно показывает соотношение контраста и говорит, проходит пара цветов норму или нет. Для основного текста ориентир — 4,5:1, для крупных заголовков достаточно 3:1. Ребёнок запоминает эти два числа за один раз, потому что проверка наглядна: сдвинул ползунок — увидел, как надпись проявилась.
Цвет не может быть единственным сигналом
Часть людей не различает красное и зелёное — и для них решение «поле ошибки подсвечено красным» не работает совсем. Это отличная тема для разговора с подростком, потому что она сразу переводит дизайн из категории «красиво» в категорию «работает для всех». Правило простое: цвет дублируется чем-то ещё — значком, подписью, рамкой. Красное поле с текстом «проверьте номер» понятно каждому, просто красное поле — не каждому.
Шрифт и кириллица — ловушка, о которой узнают поздно
Ребёнок выбирает красивый шрифт в списке, набирает английское слово — красота. Набирает русское или украинское — буквы подменяются системными, и заголовок рассыпается. Причина в том, что большая часть шрифтов сделана без кириллических начертаний.
Поэтому правило на курсе такое: сначала набираем тестовую фразу с «ё», «ї», «щ» и «ъ», и только потом решаем, нравится шрифт или нет. Заодно видно, как выглядят знаки препинания и цифры — в некоторых шрифтах они неожиданно чужие остальному набору.
Тёмная тема — не инверсия цветов
Подростки любят тёмные интерфейсы и делают их одинаково: берут светлый макет и меняют белое на чёрное. Выходит плохо, потому что на чёрном фоне яркие цвета светятся и режут глаз, а тонкие шрифты размываются. Рабочий подход другой: вместо чистого чёрного — очень тёмный серый, цвета чуть приглушены, текст не чисто белый. Это заметно даже новичку, если поставить два варианта рядом и посмотреть на них вечером при выключенном свете.
Упражнение, которое можно сделать дома за вечер
Возьмите любую фотографию, которая нравится ребёнку, — море, кота, уличный знак. Задача: вытащить из неё три цвета и собрать на них простую страницу — заголовок, абзац, кнопка. Потом то же самое с другой фотографией. Две страницы рядом показывают то, что невозможно объяснить словами: настроение страницы задаёт не картинка, а палитра, и одна и та же структура может выглядеть спокойной или тревожной.
Второе задание того же вечера: найти в городе вывеску, которая плохо читается, и сказать почему. Девять раз из десяти ответ будет про контраст или про то, что шрифтов на вывеске три.
Нужна ли ребёнку теория цвета
Нужно ли ребёнку учить теорию цвета? На уровне «дополнительные цвета, круг Иттена» — нет, не в первый год. Сначала правила и проверки, теория становится полезной тогда, когда появляется потребность отступить от правил осознанно.
Ребёнок делает всё ярким и не хочет иначе. Это пройдёт? Обычно да, и скорее всего не от замечаний, а от опыта: когда яркий макет покажут на телефоне рядом со спокойным, разница становится очевидной самому ребёнку.
Можно ли просто брать готовые палитры из интернета? Можно и полезно на старте. Важно только, чтобы ребёнок потом объяснил, какой цвет в этой палитре акцентный и почему — иначе выбор остаётся чужим.
Дальше идёт тема прототипа: «Что такое прототип в Figma и чем он отличается от макета». Программа старшего курса — курс веб-дизайна для подростков 12–18.
