Обговорення дизайну на четвертій ітерації зазвичай звучить так: «щось синій холодний», «а можна шрифт цікавіший», «мені здається, тут забагато повітря». Аргументів немає ні в кого, вирішує той, хто наполегливіший або платить. Через місяць сайт виглядає як компроміс, який не подобається нікому.
Проблема в тому, що кольори й шрифти обговорюють як питання смаку, хоча більшість рішень тут перевіряються цілком обʼєктивно: читається чи не читається, видно кнопку чи ні, зрозуміла ієрархія чи все однаково важливе. Смак починається значно пізніше, ніж прийнято думати. Розберемо, які правила закривають вісімдесят відсотків рішень і прибирають з обговорення слово «здається».
Палітра: три групи, а не набір улюблених кольорів
Робоча палітра сайту складається не зі списку красивих відтінків, а з ролей.
- Нейтральна база. Білий або майже білий фон, кілька відтінків сірого для тексту й меж. Це 80-90 відсотків площі сайту. Саме вона створює відчуття охайності, і саме на неї найменше звертають увагу під час обговорень.
- Основний колір. Той, що асоціюється з брендом. Зустрічається помітно, але дозовано: шапка, посилання, важливі елементи.
- Акцент. Один колір для цільових дій — кнопок, заклику. Його має бути мало, інакше він перестає бути акцентом.
Плюс службові кольори, про які згадують в останній момент: зелений для успіху, червоний для помилки, жовтий для попередження. Їх варто визначити одразу, інакше розробник візьме випадкові.
Головне правило звучить нудно, але працює безвідмовно: що менше кольорів, то дорожчий вигляд. Пʼять яскравих відтінків одночасно роблять сторінку схожою на розпродаж, навіть якщо кожен красивий окремо. Око не може визначити, що головне, коли все кричить однаково гучно.
Контраст важливіший за красу
Найпоширеніша помилка сучасних макетів — світло-сірий текст на білому. На великому екрані в темній кімнаті це виглядає елегантно. На телефоні при денному світлі — зникає.
Орієнтир, який варто перевіряти ще в макеті: звичайний текст має відрізнятися від тла приблизно в чотири з половиною рази за яскравістю, великі заголовки можуть трохи менше. Перевірка займає секунди безкоштовними онлайн-інструментами.
Що не проходить перевірку найчастіше:
- Сірі підписи, зроблені блідими «щоб не відволікали».
- Білий текст поверх фотографії без затемнення — на світлих ділянках знімка він розчиняється.
- Кнопка у фірмовому кольорі, який виявився надто світлим для білого напису.
- Плейсхолдери в полях форми, блідіші за основний текст.
І окремо: колір не повинен бути єдиним носієм змісту. Помилка в формі позначається не тільки червоною рамкою, а й текстом; статус — не лише кружечком, а й підписом. Це базовий принцип, який ми розбираємо ширше в матеріалі про доступність сайту.
Шрифти: спершу читабельність, потім характер
Спокуса взяти виразний шрифт зрозуміла — хочеться, щоб сайт не був схожим на всі інші. Але шрифт на сайті виконує роботу, а не позує: людині треба прочитати текст, а не помилуватися формою літер.
Практичні орієнтири:
- Основний текст — від 16 пікселів. Менше — це вже напруження для очей на телефоні. Чотирнадцять допустимі лише для другорядних підписів.
- Міжрядковий інтервал приблизно півтора. Щільно збиті рядки читаються важче за все інше разом узяте.
- Довжина рядка 60-80 символів. Текст на всю ширину широкого монітора втомлює, бо око губить початок наступного рядка.
- Обовʼязково повна українська абетка. Перевіряйте наявність літер ґ, є, і, ї та апострофа — частина красивих гарнітур їх не має або малює недбало.
Окремо про накреслення. Одна хороша гарнітура з трьома-чотирма насиченостями закриває майже всі потреби сайту. Ієрархія будується розміром і вагою, а не другим шрифтом.
Шрифтові пари: коли їх справді треба дві
Дві гарнітури мають сенс тоді, коли ви свідомо будуєте контраст: виразний заголовковий шрифт і спокійний текстовий, який не заважає читати довгі абзаци.
Робочі підходи:
- Один шрифт, різні насиченості. Найбезпечніший варіант, майже неможливо зіпсувати.
- Контрастна пара. Заголовки з характером, основний текст нейтральний. Ключове слово — контраст: два схожі шрифти виглядають не як задум, а як помилка, ніби половину сайту забули оформити.
- Шрифтове сімейство з кількома стилями. Гарантована сумісність із варіативністю.
Чого варто уникати: декоративні гарнітури в основному тексті, рукописні шрифти довшими за пару слів, дуже тонкі накреслення на світлому тлі, а також будь-який шрифт, у якому важко відрізнити велику І від малої l і від цифри 1.
І технічний момент, який часто забувають: шрифти впливають на швидкість. Кожне додаткове накреслення — це файл, який має завантажитися. Три гарнітури по пʼять насиченостей помітно гальмують перший показ сторінки, особливо на мобільному інтернеті.
Як зробити рішення обговорюваними
Найпростіший спосіб прибрати з наради «мені здається» — заздалегідь зафіксувати правила й перевіряти макет за ними.
- Скільки кольорів у палітрі та яка роль у кожного. Якщо колір не має ролі, він зайвий.
- Чи проходить кожна пара текст-тло перевірку контрасту. Це не питання думки, це число.
- Чи є в макеті рівно одна найпомітніша дія на екран. Якщо кнопок-акцентів три, жодна не спрацює.
- Чи читається основний текст на телефоні при денному світлі. Перевіряється буквально виходом на вулицю.
- Чи достатньо накреслень для ієрархії й чи не забагато файлів шрифтів.
Після такого списку більшість суперечок закінчується самі собою: або пункт виконано, або ні.
Коли візуальна айдентика — не головна проблема
Чесна межа: нові кольори та шрифти не зроблять із поганого сайту хороший. Якщо на сайт заходить тридцять людей на місяць або форма не працює, палітра не змінить нічого.
Так само оновлення айдентики не варто плутати з переробкою сайту. Іноді достатньо привести до ладу контраст, розміри й ієрархію — і сторінка виглядає новою без жодного рядка нової верстки. А іноді проблема глибша й косметика не рятує; де проходить ця межа, ми розбирали в матеріалі про редизайн сайту.
І ще одне: усі рішення про розміри та відступи мають перевірятися насамперед на телефоні, а не на дизайнерському моніторі. Більшість ваших відвідувачів побачить сайт саме там — про особливості цього ми писали в матеріалі про адаптивний дизайн і мобільну версію.
Коротко
Палітра — це три групи з ролями: нейтральна база, основний колір, акцент для дій, плюс службові кольори станів. Що менше відтінків, то охайніший результат.
Шрифти обираються за читабельністю: від 16 пікселів, інтервал півтора, рядок не на всю ширину, повна українська абетка. Одна гарнітура з кількома насиченостями майже завжди краща за три різні.
Контраст, ієрархія й розміри — не питання смаку, вони перевіряються числами й тестом на телефоні. Смак починається там, де правила вже виконані.
Ми в Obliko збираємо палітру й типографіку як систему, а не як набір гарних скріншотів. Напишіть, що у вас уже є з айдентики, — підкажемо, що з цього переносити на сайт, а що доведеться адаптувати.
Скільки кольорів має бути на сайті?
Робоча схема — три групи: нейтральна база, один основний колір бренду і один акцент для дій. Нейтральні відтінки займають більшу частину площі, основний колір позначає фірмову приналежність, акцент використовується рідко й лише на важливому. Проблеми починаються тоді, коли кольорів пʼять і всі однаково яскраві: око не розуміє, що головне. Обмеження тут не бідність, а керування увагою.
Скільки шрифтів можна використати на одному сайті?
Найчастіше достатньо одного якісного шрифту з кількома накресленнями — звичайним, напівжирним і жирним. Різниця між заголовком і текстом створюється розміром і насиченістю, а не другою гарнітурою. Дві гарнітури виправдані, коли ви свідомо хочете контраст характерів: виразний заголовковий шрифт і нейтральний текстовий. Три й більше майже завжди виглядають як недогляд, а не як задум.
Як перевірити, чи достатній контраст тексту?
Є безкоштовні онлайн-перевірки контрасту: ви вводите колір тексту й колір тла й отримуєте співвідношення. Загальний орієнтир — приблизно чотири з половиною до одного для звичайного тексту й трохи менше для великих заголовків. Робити цю перевірку варто ще на етапі макета, а не після верстки. Найчастіше не проходять світло-сірі підписи, білий текст на фото й бліді фірмові кольори на кнопках.
Чи можна брати кольори просто з логотипа?
Взяти звідти основний колір логічно, але одного кольору для інтерфейсу мало. Логотип не передбачає станів наведення, помилок, попереджень, фонів і кількох рівнів тексту. Крім того, фірмовий колір нерідко не проходить за контрастом як тло для білого напису, і його доводиться робити темнішим саме для інтерфейсу. Тому з логотипа беруть відправну точку, а далі будують повноцінну палітру.
Потрібен сайт або застосунок?
Розробляємо під ключ — від дизайну до запуску. Порахуємо ваш проєкт безкоштовно.