Тёмная тема в веб-дизайне: когда она работает на бизнес

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

Главная трудность в том, что тёмная тема не сводится к замене белого фона на чёрный. Это отдельная цветовая система со своими правилами контраста, глубины, насыщенности и работы с иллюстрациями. Если сделать её «на скорую руку», получится интерфейс, в котором режет глаза, теряются границы блоков и выглядят чужеродно все картинки.

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

Зачем людям тёмная тема

Причины, по которым посетители выбирают тёмный режим, практичны, а не только эстетичны.

• Комфорт в слабом освещении. Вечером в тёмной комнате яркий белый экран слепит. Тёмный интерфейс снижает нагрузку и позволяет читать дольше.
• Экономия заряда. На экранах с органическими светодиодами чёрные пиксели почти не потребляют энергии, и тёмный интерфейс продлевает работу смартфона.
• Особенности зрения. Одним людям комфортнее светлый текст на тёмном фоне, особенно при светобоязни. Другим, наоборот, тёмный режим затрудняет чтение, например при астигматизме. Поэтому правильнее давать выбор, а не навязывать.
• Привычка и системные настройки. Многие устройства автоматически переключаются на тёмный режим вечером. Сайт, который остаётся ярко-белым, на этом фоне выглядит резко.
• Имидж. Тёмный интерфейс ассоциируется с технологичностью, премиальностью, фокусом на контенте.

Для каких бизнесов тёмная тема оправдана

Вопрос стоит ставить не «модно ли это», а «как и где пользователи читают наш сайт». Есть сегменты, где тёмная тема даёт ощутимую отдачу.

Технологические продукты и SaaS

Аудитория разработчиков, аналитиков и администраторов привыкла к тёмным интерфейсам и часто ожидает их. Для сервисов, в которые люди заходят каждый день и проводят много времени, тёмный режим — признак внимания к деталям. На примере проекта SaaS «Квантум» мы видели, как тёмная подложка в личном кабинете повышает ощущение продуктовой зрелости.

Медиа и контент с длительным чтением

Читатели статей, видео и подкастов нередко потребляют контент вечером. Тёмная тема здесь экономит глаза и увеличивает время на сайте.

Игровые, музыкальные, кино-проекты

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

Премиальные и люксовые бренды

Глубокий тёмный фон с аккуратным акцентом передаёт статус. Рестораны, ювелирные салоны, дизайнерские студии нередко строят сайт именно так. Для ресторанной тематики мы выбирали подобный подход в кейсе «Северный двор».

Где стоит подумать дважды

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

Мифы о тёмной теме

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

1. «Тёмная тема всегда лучше для глаз». Это не так. В хорошо освещённом помещении светлый текст на тёмном фоне может вызывать эффект ореола и усталость, особенно при мелком шрифте.
2. «Достаточно инвертировать цвета». Простая инверсия ломает насыщенные цвета, тени, фотографии и логотипы. Нужно переработать палитру целиком.
3. «Фон должен быть абсолютно чёрным». Чистый чёрный создаёт слишком резкий контраст с белым текстом и делает интерфейс плоским. Лучше брать очень тёмный графитовый, синевато-серый или тёплый тёмный оттенок.
4. «Это дешёвая доработка». Тёмная тема умножает объём работы дизайнера, вёрстки и тестирования. Каждый компонент нужно проверить в двух режимах.

Как проектировать палитру для тёмной темы

Слои вместо теней

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

Приглушённая насыщенность

Яркие насыщенные цвета на тёмном фоне вибрируют и режут глаза. Фирменный синий, который отлично выглядит на белом, в тёмной теме обычно осветляют и немного снижают насыщенность. Это отдельный оттенок для того же цвета бренда, а не копия светлого значения.

Текст без пережима контраста

Чистый белый текст на очень тёмном фоне даёт избыточный контраст. Для основного текста используют светло-серый или слегка тёплый белый, для второстепенного — более тусклый, но всё же проходящий проверку на читаемость. Контрастность следует измерять так же строго, как и в светлой теме: не менее 4,5 к 1 для основного текста. Подробнее о правилах проверки в статье про контраст и читаемость.

Акцентный цвет

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

Семантические цвета

Красный, зелёный, жёлтый для статусов нужно подбирать заново. Тёмно-красный, читаемый на белом, на тёмном фоне почти исчезает, а светлый розово-красный будет выглядеть уместнее.

Изображения, логотипы и иллюстрации

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

• Логотип. Тёмный логотип на тёмном фоне исчезнет. Нужен вариант для тёмной темы: светлый или с контрастной обводкой. Если логотип цветной, проверьте, не теряются ли отдельные элементы.
• Фотографии с белым фоном. Каталожные снимки на белом выглядят белыми прямоугольниками на тёмной странице. Решения: подложить светлую рамку, использовать снимки с прозрачным фоном или мягкую светлую плашку под изображением.
• Иллюстрации и иконки. Тонкие тёмные линии нужно перекрасить. Хорошая практика — использовать иконки, наследующие цвет текста, чтобы они автоматически адаптировались.
• Скриншоты и схемы. Светлые изображения интерфейса на тёмном фоне выглядят ярким пятном. Иногда стоит подготовить две версии либо слегка приглушить яркость изображений в тёмном режиме.
• Диаграммы и графики. Набор цветов для категорий также пересматривают, иначе часть линий сольётся с подложкой.

Про выбор визуального языка для проекта читайте также в статье «Иллюстрации или фотографии: что выбрать для сайта».

Переключатель режима: как организовать выбор

Есть три основных подхода, и у каждого свои особенности.

1. Следовать системной настройке. Сайт определяет, какую тему предпочитает устройство, и показывает соответствующую. Это самый деликатный вариант: пользователь не должен ничего делать.
2. Ручной переключатель. Иконка в шапке или футере позволяет переключить режим. Выбор сохраняется для следующих визитов.
3. Комбинация. По умолчанию действует системная настройка, но пользователь может переопределить её вручную. Именно такой вариант мы рекомендуем в большинстве проектов.

Важные детали реализации:

• избегайте мерцания при загрузке: страница не должна сначала показаться светлой, а потом внезапно потемнеть. Для этого выбор темы определяют до отрисовки страницы;
• переключатель должен быть доступен с клавиатуры и понятно подписан для программ чтения с экрана;
• иконка должна показывать действие или состояние понятным образом, без двусмысленности;
• сохраняйте выбор между сессиями, но не принуждайте: тема по умолчанию должна подходить большинству посетителей.

Что тёмная тема меняет в работе над проектом

Дизайн

Макеты нужно готовить в двух режимах. Дизайнер строит палитру с учётом токенов: каждый цвет получает роль («фон поверхности», «основной текст», «граница»), а не конкретное значение. Тогда при переключении темы меняются значения ролей, а не десятки отдельных элементов. Такой подход напрямую связан с идеей дизайн-системы.

Вёрстка

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

Тестирование

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

Бюджет и сроки

Тёмная тема обычно увеличивает объём дизайна и вёрстки. Масштаб зависит от числа шаблонов и компонентов, поэтому оценивать его нужно по конкретному проекту. Ориентиры по стоимости можно посмотреть на странице тарифов, а подробный расчёт мы делаем после знакомства с задачей.

Типичные ошибки при внедрении

• Чистый чёрный фон и чистый белый текст. Приводит к излишней резкости и утомлению. Используйте мягкие значения.
• Те же насыщенные цвета, что и в светлой теме. Выглядят кислотно и вибрируют. Подбирайте отдельные значения.
• Забытые компоненты. Один блок остался светлым, и посреди тёмной страницы возникает яркое пятно. Помогает системный аудит всех шаблонов.
• Нечитаемые мелкие подписи. Серый на тёмно-сером проходит проверку хуже, чем кажется. Измеряйте контраст.
• Нет логотипа для тёмной темы. Бренд становится невидимым или выглядит кустарно.
• Принудительная тёмная тема. Если вы не даёте выбора, вы рискуете потерять часть аудитории, которой неудобен именно этот режим.
• Не учтены печать и письма. Страницы для печати и email-рассылки обычно остаются светлыми. Согласуйте поведение заранее.

Нужна ли тёмная тема именно вам: короткий чек-лист

Ответьте на несколько вопросов. Чем больше «да», тем выше польза.

1. Аудитория заходит на сайт вечером, в тёмной обстановке или с мобильных устройств?
2. Продукт связан с технологиями, развлечениями, контентом, визуальной эстетикой?
3. Посетители проводят на сайте много времени и читают объёмные материалы?
4. Конкуренты уже предлагают тёмный режим, и вы хотите соответствовать ожиданиям?
5. Есть ресурсы на поддержку двух тем в будущем, а не только на разовую разработку?
6. Фотографии и иллюстрации можно адаптировать без больших затрат?

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

Как проверить эффект

Чтобы понять, окупилась ли тёмная тема, заранее определите показатели и сравните их после запуска:

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

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

Итоги

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

Хотите понять, нужна ли тёмная тема вашему проекту и во сколько она обойдётся? Расскажите о задаче через страницу контактов, а о том, как студия подходит к интерфейсам, можно прочитать в разделе «Веб-дизайн».