Найти в Дзене

Зачем вашему сайту нужен «dark mode» и что учесть при его разработке

Оглавление

Многие любят побродить по просторам интернета в позднее время, когда домочадцы уже улеглись. Серфить при свете не очень комфортно, а контраст ярко светящегося экрана с окружающей темнотой могут отрицательно влиять на глаза. Чтобы как-то сгладить такое воздействие, дизайнеры предложили использовать темную тему.

Image by pikisuperstar on Freepik. Интернет Хостинг Центр — надежный провайдер с серверами в России и Европе. Подписывайтесь на наш канал в Дзен и читайте новые статьи каждую неделю!
Image by pikisuperstar on Freepik. Интернет Хостинг Центр — надежный провайдер с серверами в России и Европе. Подписывайтесь на наш канал в Дзен и читайте новые статьи каждую неделю!

Что такое темная тема

Dark mode – способ оформления веб-страниц, где в качестве основного фона интерфейса выступает черный, темно-синий цвет, а остальные детали, сам текст выдержаны в светлых тонах.

Темная тема имеется у многих веб-ресурсов, мессенджеров, приложений, ОС.

Плюсы использования темной темы на сайте

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

Улучшение восприятия информации при плохом освещении

Некоторыми людьми легче воспринимается текст в светлых цветах на темном фоне. Это может объясняться очевидной контрастностью между экраном и окружающим пространством и снижение негативного эффекта за счет притушенных оттенков. Это позволяет в более комфортных условиях читать, смотреть, но насколько лучше при этом будет усваиваться информация – дело индивидуальное.

Экономия заряда устройств пользователей

Доказано, что темная тема способствует экономии электричества на AMOLED-дисплеях. Проведенные исследования приложений Гугл показали, что экономится до 60% энергии.

Снижение утомляемости глаз

Для некоторых людей с проблемным зрением темная тема необходима, как определенный инструмент доступности. Результатом долгого сидения перед монитором может выступать синдром компьютерного зрения. Так обозначается ряд проблем, связанных с долгой работой перед компьютером, с мобильным телефоном. Считается, что их использование в ночное время провоцирует не только усталость, покраснение глаз, но и бессонницу.

Когда не стоит добавлять dark mode

Не всякий интерфейс может подойти для использования Dark mode. Некоторые детали могут не сочетаться с таким дизайном. Важно принимать во внимание привычки целевой аудитории, тематику сайта, цветовую гамму бренда. Не рекомендуется добавлять темный вариант в нескольких случаях:

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

Что учесть при добавлении темной темы

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

Темный контраст

Специалисты предлагают не использовать в качестве основы черный цвет (#000000). Он больше подходит для текстовой части. Для общего фона лучше отдать предпочтение темно-серому с синеватым оттенком, например #121212.

Читабельность текста

Шрифт тоже не стоит делать только белым. Он может быть применим к основной части, но для выделения дополнительной информации, неактивного текста и т. д. лучше использовать более приглушенные краски (светло-серую, синюю, прозрачность). Это поможет пользователю лучше воспринимать читаемое.

Насыщенность цветов

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

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

Отображение элементов

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

Переключение между темами

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

Заключение

Разработка Dark mode многими воспринимается как модный тренд, поэтому владельцы ресурсов стремятся ее внедрить. Но рекомендуется учитывать специфику продукта, бизнеса, ЦА, выстраивать серьезную аргументацию в пользу темной темы.

Интернет Хостинг Центр — платный хостинг для проектов любой сложности. Защита от DDoS-атак на каждом тарифе! 🔒