«Зробіть нам темну тему, це стильно» — чую регулярно. Іноді погоджуюсь, іноді відмовляю. Бо тема — не про стиль, а про те, кому і що ви продаєте. Розберімо без вкусовщини.
Коли темна тема працює
Технологічний продукт або студія. Темний фон зчитується як «інженерність» — недарма її обирають IT-бренди. Наш сайт темний саме тому.
Преміум і візуальний продукт. На темному фоні фото і графіка «світяться» — портфоліо, архітектура, авто виграють.
Вечірній контекст використання. Розваги, івенти, гейминг — аудиторія гортає ввечері, темна тема очам приємніша.
Коли світла — єдиний правильний вибір
Медицина і все, де продається довіра. Світло = чистота і відкритість. Темна клініка підсвідомо тривожить — тому медичні сайти ми робимо світлими, хоч самі живемо в темній темі.
Аудиторія 50+. З віком контрастна чутливість падає: світлий текст на темному читається важче. Якщо ваш пацієнт чи покупець старший — не мучте його.
Довгі тексти. Блог, документація, каталоги з описами — довге читання на темному втомлює швидше.
Друк і офлайн-звʼязка. Якщо сайт продовжує брошури, меню, прайси — світла тема тримає єдність.
Незалежно від теми: контраст і доступність
Головна помилка не «темна чи світла», а сірий текст на сірому. Мінімум 4.5:1 контрасту для основного тексту (стандарт WCAG) — це не бюрократія, а різниця між «прочитав» і «закрив». У темної теми своя пастка: чисто-білий текст на чисто-чорному «дзвенить» — мʼякші відтінки читаються краще.
А може, перемикач?
Можна, і ми таке робимо. Але чесно: перемикач подвоює дизайн-тестування — кожен екран, кожна ілюстрація і графік мають працювати в обох темах. Для контент-сайтів і продуктів це виправдано, для сайту послуг найчастіше ні: краще одна тема, зроблена бездоганно.
Як обрати за 4 питання
- Кому продаєте? 50+ або медицина/фінанси → світла
- Що показуєте? Багато фото і візуалу → можна темну
- Скільки читають? Довгі тексти → світла
- Який бренд? Техно/преміум → темна працює на вас
До речі, ці міркування — частина ширшого розбору про довіру в дизайні: що викликає довіру на медичних сайтах і 9 прийомів, які підняли конверсію.
Як це виглядає наживо — дивіться кейси розробки сайтів у портфоліо.