Коротко: на курсі діють три обмеження, з яких починають усі: один шрифт для заголовків, один для тексту, не більше трьох кольорів — і один із них акцентний, для дії. Обмеження працює краще за смак, бо не дає зіпсувати макет, поки смак ще формується. Кольори й типографіка стоять у програмі рано, темами 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.
