Зачем нужна темная тема на сайте
Андрей Батурин,
Андрей Батурин
Цвета на сайте — один из ключевых элементов дизайна, от которого во многом зависит, будет ли человек проводить на нем время. Гармонично подобранные цвета позволяют сделать сайт приятным для глаз и удобным для восприятия. До недавнего времени большинство сайтов использовали стандартное сочетание цветов: светлый фон и темный контент. Но недавно популярность стала набирать “темная тема”, и в этой статье мы расскажем, что это такое, зачем она нужна и как правильно ее использовать на сайте.
Что такое темная тема на сайте
Темная тема (еще можно встретить варианты “темный режим”, “черная тема”) — это дизайн сайта, в котором преобладают темные тона (особенно на фоне) в противовес стандартному светлому интерфейсу. Обычно на сайтах, в приложениях и сервисах есть возможность переключаться между двумя вариантами.
Темную тему включают вечером и ночью, при слабом освещении, когда светлый интерфейс кажется чересчур ярким и контрастным.
Зачем нужна темная тема на сайте
Появление темной темы и рост ее популярности связан сразу с несколькими причинами. Давайте подробнее разберем основные из них.
Снижает утомляемость глаз пользователя
Если долго смотреть в экран компьютера, смартфона, телевизора, а особенно — напрягать зрение, работая с текстом или изображениями, — глаза устают, появляется жжение и резь в глазах, общая усталость. Усугубляет это состояние излишняя яркость и контрастность светлой темы, которая по умолчанию стоит на большинстве сайтов и программ.
Но если интерфейс станет более темным и мягким, длительное нахождение перед экраном сказывается на зрении меньше — глаза медленнее устают, им комфортнее воспринимать информацию.
Помогает лучше видеть при плохом освещении
Светлый экран хорошо видно днем или при ярком освещении, а вот в сумерках и ночью при низкой яркости лучше воспринимается информация на темном фоне. Попробуйте посреди ночи включить экран смартфона — глазам тут станет больно от слишком яркого света. А вот если у вас будет включена темная тема, зрению, будет намного проще и комфортнее.
Повышает длительность работы устройств без подзарядки
Специалисты подсчитали, что темная тема в приложениях и сайтах позволяет экономить до 20% заряда батареи смартфона. Наибольшая экономия достигается в случае, если у устройств OLED-экран. Дело в том, что такие экраны способны отключать отдельные темные пиксели и тем самым тратить меньше энергии.
Сейчас, когда телефоны, способные работать без подзарядки неделю-две, ушли в прошлое, и когда даже самые современные смартфоны могут продержаться без электророзетки только дня 2-3, такая экономия становится существенной.
Помогает расставить визуальные акценты
В темной теме фон становится менее заметным, и в таких условиях содержание сайта приковывает большее внимание пользователя. Это помогает сместить акценты в пользу контента, а не дизайна.
Позволяет быть в тренде
Темная тема сейчас популярна, многие крупнейшие сайты, приложения и сервисы добавляют ее в свой интерфейс: YouTube, Windows, соцсети, мессенджеры и т.д. Если вы хотите не отставать от современных трендов в дизайне, стоит тоже задуматься об этом. Добавить темную тему на сайт не так сложно, как может показаться на первый взгляд.
Минусы темной темы
Плюсы темной темы мы подробно разобрали выше, но где есть плюсы, там всегда есть и минусы. Здесь они не сильно критичные, но замалчивать их все же не будем.
Делает дизайн менее эмоциональным
Все же у светлых и ярких цветов больше возможностей создать праздничное, веселое и позитивное настроение. Темные цвета — более спокойные, мрачные и тусклые, и не во всех сферах они будут актуальны (например, для детских сайтов темная тема не всегда подходит).
Хуже видно детали
Светлая тема интерфейса обычно намного более контрастная, и за счет контраста контент лучше видно, особенно днем. На темном же фоне мелкие детали размываются и хуже видны пользователю.
Советы и правила, которые пригодятся при создании темной темы
Если вы решили, что вашему сайту необходима темная тема, постарайтесь сделать ее максимально удобной, эффективной и приятной для глаз пользователей. В этом вам помогут наши советы.
Подберите правильное сочетание цветов и оттенков
Темная тема не значит, что фон сайта нужно сделать угольно-черным, а текст и интерфейс — белоснежными. В этом случае вы скорее навредите зрению своих пользователей, чем поможете им. Лучше просто затемните фирменные цвета своей айдентики, добавьте к ним немного серого, сделайте так, чтобы они выглядели мягкими и не резали глаз. Или сделайте фон темно-серым — оптимальный вариант, если сомневаетесь.
Тот же принцип касается и текста: он не должен быть слишком ярким и контрастным, иначе у посетителя сайта заболят глаза. Пусть будет мягким и глубоким, чтобы успокоить зрение.
Не оставляйте без внимания изображения
Темная тема — это не только фон и текст интерфейса, это еще и изображения, которые тоже желательно адаптировать. Если у вас на сайте много светлых и ярких картинок, затемните их для темной темы — иначе она просто не будет иметь смысла.
Уменьшите насыщенность цветов
Насыщенность в темной темой должна быть низкой — в противном случае, вы рискуете лишиться одного из преимуществ темного интерфейса, и он приведет к утомлению глаз посетителей сайта.
Откажитесь в дизайне от теней
Даже если в светлой теме у вас были тени, в темной версии дизайна их лучше убрать. Они плохо сочетаются с темными цветами, делают контент неразличимым, не подчеркивают конкретные детали, а наоборот размывают внимание.
Составьте цветовую иерархию
Но как же создать визуальную глубину без теней? В этом вам поможет четкая иерархия яркости. Сделайте фон самым темным элементом визуала, а все элементы, которые лежат на нем, делайте тем светлее, чем “выше” их положение относительно фона.
Обязательно проводите тестирование
В светлой теме один элемент может выглядеть отлично, в темной терять свою привлекательность — и наоборот. Поэтому обязательно проверяйте все изменениях в обоих вариантах, чтобы ни один пользователь не столкнулся с неудобствами.
Добавьте возможность переключаться между темами
Главный пункт — не делайте какую-нибудь тему обязательной, у пользователя всегда должен быть выбор. Не нужно автоматически включать темную тему ночью, а светлую — днем, предоставьте посетителю сайта самому решать, как ему удобнее.
— Темная тема — один из трендов веб-дизайна, набирающий популярность прямо сейчас. У нее есть ряд весомых преимуществ, которые делают ее полезной для многих сайтов. Если вам эти преимущества тоже важны и вы заботитесь о посетителях своего сайта, имеет смысл задуматься о добавлении темной темы на сайт.
