Темный фон для сайта: Темные и черные фоны для сайтов

Содержание

Темная тема сайта

Андрей Батурин, 24 сентября, 2020

Андрей Батурин

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

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

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

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

Зачем нужна темная тема на сайте

Появление темной темы и рост ее популярности связан сразу с несколькими причинами. Давайте подробнее разберем основные из них.

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

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

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

Помогает лучше видеть при плохом освещении

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

Повышает длительность работы устройств без подзарядки

Специалисты подсчитали, что темная тема в приложениях и сайтах позволяет экономить до 20% заряда батареи смартфона. Наибольшая экономия достигается в случае, если у устройств OLED-экран. Дело в том, что такие экраны способны отключать отдельные темные пиксели и тем самым тратить меньше энергии.

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

Помогает расставить визуальные акценты

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

Позволяет быть в тренде

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

Минусы темной темы

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

Делает дизайн менее эмоциональным

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

Хуже видно детали

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

Советы и правила, которые пригодятся при создании темной темы

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

Подберите правильное сочетание цветов и оттенков

Темная тема не значит, что фон сайта нужно сделать угольно-черным, а текст и интерфейс — белоснежными. В этом случае вы скорее навредите зрению своих пользователей, чем поможете им. Лучше просто затемните фирменные цвета своей айдентики, добавьте к ним немного серого, сделайте так, чтобы они выглядели мягкими и не резали глаз. Или сделайте фон темно-серым — оптимальный вариант, если сомневаетесь.

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

Не оставляйте без внимания изображения

Темная тема — это не только фон и текст интерфейса, это еще и изображения, которые тоже желательно адаптировать.

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

Уменьшите насыщенность цветов

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

Откажитесь в дизайне от теней

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

Составьте цветовую иерархию

Но как же создать визуальную глубину без теней? В этом вам поможет четкая иерархия яркости. Сделайте фон самым темным элементом визуала, а все элементы, которые лежат на нем, делайте тем светлее, чем “выше” их положение относительно фона.

Обязательно проводите тестирование

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

Добавьте возможность переключаться между темами

Главный пункт — не делайте какую-нибудь тему обязательной, у пользователя всегда должен быть выбор. Не нужно автоматически включать темную тему ночью, а светлую — днем, предоставьте посетителю сайта самому решать, как ему удобнее.

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

Закажите разработку сайта с темной и светлой темой

CEO WebEvolution — Андрей Батурин

14+ лет практики
336 публикаций
304 сайта разработано под личным руководством

Закажите разработку сайта с темной и светлой темой

Консультация и разбор вашей ситуации — бесплатно.

Понравилась статья? Сохраните у себя в соцсетях и поделитесь с другими!

Обсудить

Понравилось

на эту тему

Landing page — когда пора обновить, заказать редизайн или новый сайт А/Б тестирование и его значение для сайта Неправильный перенос сайта на новую CMS: возвращаем органический трафик Веб-сервисы и веб-приложения для бизнеса: почему нужна такая разработка Ошибки в веб-дизайне, которые могут стать фатальными Дружественный интерфейс: как сделать дизайн сайта удобным

почему многие сервисы создают темные темы и нужны ли они

Темные интерфейсы смотрятся эффектно, стильно и элегантно.

Тем не менее, дизайнерам стоит выбирать «темную сторону» осторожно, поскольку не всегда это оправдано. В каких случаях темный интерфейс уместен, а в каких нет, попробуем сегодня разобраться.

Особенности дизайна темной темы

Создание внешнего вида продукта — одна из основных обязанностей дизайнера. Дизайнерское решение учитывает в первую очередь концепцию продукта, конкретную ситуацию его применения и аудиторию. Изначально предполагается, что цветовая схема разрабатывается для длительного использования, поэтому выбирать ее необходимо тщательно. Все начинается с подбора фона — своеобразного «холста», на котором потом будут размещены элементы дизайна. Обычно по умолчанию выбирают белый фон.

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

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

Есть определенный стереотип: люди привыкли видеть различные надписи и даже изображения темными чернилами на белом фоне. Вспомните газеты и журналы, которые существуют уже более 350 лет. Если заглянуть еще дальше — на 35 000 лет назад, в эпоху палеолита (дни пещерного человека), можно увидеть наскальные рисунки львов и мамонтов, нанесенные в основном на светлый фон углем или обожженными костями.

Доисторические рисунки в пещере Шове, Франция, которым 30 000 лет

Современные дизайнеры выбирают темную цветовую схему по ряду причин, если тематика проекта обязывает. Зачастую это всего лишь эстетический выбор, чтобы произвести впечатление или вызвать вау-эффект. В некоторых случаях дизайнер хочет объединить таким образом дизайн с брендингом в одно целое или выделить визуальный контент.

Для Apple TV сайт Apple переключается на темный интерфейс для усиления эффекта и еще потому, что его использование обычно связано с вечерними развлечениями

Однако если дизайнер решит перейти на «темную сторону», он может столкнуться с некоторыми трудностями. Начинаются различные проблемы юзабилити, в основном связанные с возможностью сканирования, читабельностью и контрастностью. Важно соблюдать оптимальный контраст между текстом и фоном. Необходимо обращать внимание на контекст (условия использования) и среду, а также устройство, на котором интерфейс будет просматриваться.

Breitling выбрал черный фон, чтобы сделать акцент на дизайне своих изделий

Темный интерфейс и нагрузка на глаза

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

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

Приложения Bloomberg Anywhere для iOS (Джереми Фюрст)

Разработчик Toptal Амин Шах Гилани отмечает: «Я использую темную тему для моего редактора кода. Я предпочитаю такой интерфейс, потому что темный фон комфортнее для глаз. Особенно мне нравится его использовать при неярком освещении или работе ночью».

Разработчик Toptal Амин Шах Гилани, редактор кода Atom

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

HALO Wars— стратегии в реальном времени

Когда нужны темные интерфейсы

Большинство развлекательных сервисов (Smart TV, игровые приставки, приложения для телевидения и кино), как правило, имеют темный дизайн. Причины понятны: в основном они используются вечером и находятся на расстоянии 1,5-3 метров от глаз в плохо освещенных помещениях, то есть экран соответствует окружающей обстановке. Кроме того, яркий контент резко выделяется на темных интерфейсах и привлекает внимание.

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

HuluNetflixПриложение Apple iTunes

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

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

Концепция дистанционного управления и диагностики автомобиля от Ramotion

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

CINEMATEK, киноархив в Брюсселе, использует черный фон для усиления визуального эффекта

Когда темные интерфейсы не нужны

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

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

В этом примере недостаточно контраста для некоторых элементов интерфейса, влияющих на UX (GUOHAO.W)

Так быть или не быть темной теме? Вот в чем вопрос!

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

Когда можно использовать темные интерфейсы:

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

Когда лучше держаться подальше от темных интерфейсов:

Много текста (читать на темном фоне сложно).
На экране много смешанного контента.
Для приложений B2B с большим количеством форм, компонентов и виджетов.
Дизайн требует широкого спектра цветов.

Несмотря на то, что это игра, многие смешанные типы контента плохо работают с темной цветовой палитрой

Принимаем правильное решение

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

А вам нравятся темные интерфейсы? Поделитесь своим мнением.

Источник информации

Включите или выключите темный режим в OneNote

OneNote 2016

Чтобы включить темный режим в OneNote 2016, сделайте следующее:

Выберите Файл > Параметры.
В диалоговом окне «Параметры OneNote» перейдите на вкладку «Общие».
В списке «Темы Office» выберите «Черный».

Примечания:

Если темный режим не доступен, убедитесь, что вы работаете с последней версией OneNote. Чтобы проверить, нет ли обновлений в OneNote 2016, щелкните «Файл» > «Учетная запись», а затем нажмите кнопку «Параметры обновления».
Темный режим совместим с OneNote 2016 версии 16.0.12130 или более поздней. Чтобы узнать, какую версию вы используете, откройте OneNote 2016, выберите «Файл» > «Учетная запись», а затем обратите внимание на сведения, показанные в области «О oneNote». Вы также можете нажать кнопку «О себе» в OneNote, чтобы получить дополнительные сведения.
Если вы используете OneNote на работе или в учебном заке, на него могут влиять ИТ-политики организации, если вы можете обновить OneNote до последней версии. За дополнительными сведениями обратитесь к ИТ-администратору.

OneNote для Windows 10

Чтобы включить темный режим в OneNote для Windows 10, сделайте следующее:

В правом верхнем углу окна приложения нажмите кнопку «Параметры и другое» кнопку «Параметры» и выберите «Параметры».
В области «Параметры» в области«Цвет» сделайте одно из следующего:
- Выберите «Светлая», чтобы использовать OneNote в стандартном светлом режиме.
- Выберите «Темный», чтобы использовать OneNote в темном режиме.
- Выберите «Использовать режим Windows», если вы хотите, чтобы OneNote наследовал существующие параметры цвета от Windows 10.
  
  Примечание: Чтобы просмотреть или изменить текущий параметр цвета Windows 10, нажмите кнопку «Пуск> Параметры > Персонализация > Цвета»,а затем выберите свой вариант в меню «Выберите цвет».

OneNote для Mac

Примечание: OneNote наследует внешний вид от системных настроек вашего Mac. Чтобы использовать темный режим в OneNote, на компьютере Mac должна быть macOS Mojave (версия 10.14) или более поздней версии.

Чтобы настроить mac и OneNote для темного режима, сделайте следующее:

В меню Apple выберите пункт Системные настройки.
В диалоговом окне «Системные настройки» нажмите кнопку «Общие».
В области «Внешний вид»выберите «Темный».

Когда вы откроете OneNote на компьютере Mac, оно появится в темном режиме.

Примечание: Если на компьютере Mac установлена macOS Catalina (версия 10.15) или более поздней версии, вы также можете настроить на mac для автоматического использования светлого режима в течение дня и темного режима в ночное время. В диалоговом окне «Системные настройки» нажмите кнопку «> внешний вид>авто. Если этот параметр активен, OneNote автоматически переключается между светлым и темным режимами в зависимости от времени суток.

Пока в OneNote включен темный режим, вы можете в любое время переключить фон полотна страницы с темного на светлый.

Выполните действия, описанные ниже.

Убедитесь, что в OneNote настроен темный режим.
На вкладке «Вид» нажмите кнопку «Переключить фон».

Интерфейс OneNote остается в темном режиме, но фон полотна страницы светлее.

Если вы хотите переключить полотно страницы со светлого на темное, повторите шаг 2 выше.

Чтобы отказаться от темного режима в OneNote для Mac, сделайте следующее:

В меню выберите пункт «Параметры > OneNote».
В диалоговом окне «Параметры OneNote» нажмите кнопку «Общие».
В области «Персонализация»сделайте следующее:
- Чтобы отключить темный режим, выберите его.
  
  OneNote вернется к светлому виду по умолчанию, даже если на компьютере Mac по-прежнему настроен темный режим.
- Чтобы снова включить темный режим, отключите его.
  
  OneNote вернется к текущим настройкам внешнего вида вашего Mac: светлому, темному или авто. Если на компьютере Mac настроено авто, oneNote будет светлое и темное — ночью. (Для установки авто требуется macOS Catalina (версия 10.15) или более поздней версии.)

Примечание: Если на компьютере Mac сейчас работает macOS Mojave (версия 10.14) или более поздней, но темный режим не доступен в вашей версии OneNote, проверьте, нет ли обновлений в OneNote для Mac.

OneNote для iOS (iPad и iPhone)

iPad

Примечание: OneNote наследует внешний вид от параметров отображения iPad. Чтобы использовать темный режим, на iPad должна быть iPadOS 13 или более поздней.

Чтобы настроить iPad и OneNote для темного режима, сделайте следующее:

Нажмите «Параметры» > «& яркости».
В области «Внешнийвид» выберите «Темный», чтобы включить темный режим.

Когда вы откроете OneNote на iPad, оно будет отображаться в темном режиме.

Примечания:

С помощью центра управления iPad можно в любое время быстро включить или отключить темный режим. Чтобы быстро включить или отключить темный режим, отсоедените от верхнего правого угла iPad, а затем нажмите и удерживайте кнопку управления яркостью. В нижней части управления яркостью коснитесь темного режима, чтобы включить или отключить темный режим.
Вы также можете настроить темный режим, чтобы включить его автоматически на закате или в определенное время. Для этого перейдите в параметры > «& яркость»и выберите «Автоматически». Затем коснитесь «Параметры», чтобы установить предпочитаемый график для темного режима.

Выполните действия, описанные ниже.

Убедитесь, что в OneNote настроен темный режим.
На вкладке «Вид» нажмите кнопку «Переключить фон».

Интерфейс OneNote остается в темном режиме, но фон полотна страницы светлее.

Если вы хотите переключить полотно страницы со светлого на темное, повторите шаг 2 выше.

iPhone

Примечание: OneNote наследует внешний вид от параметров отображения iPhone. Для использования темного режима на iPhone должна быть iOS 13 или более поздней.

Чтобы настроить iPhone и OneNote для темного режима, сделайте следующее:

Нажмите «Параметры» > «& яркости».
В области «Внешнийвид» выберите «Темный», чтобы включить темный режим.

Когда вы откроете OneNote на iPhone, оно будет отображаться в темном режиме.

Примечания:

С помощью центра управления iPhone можно в любой момент быстро включить или отключить темный режим. На iPhone X или более поздней модели проведите пальцем от верхнего правого угла iPhone (на более старых устройствах iPhone проведите пальцем вверх от нижнего края экрана), а затем нажмите и удерживайте кнопку управления яркостью. В нижней части управления яркостью коснитесь темного режима, чтобы включить или отключить темный режим.
Вы также можете настроить темный режим, чтобы включить его автоматически на закате или в определенное время. Для этого перейдите в параметры > «& яркость»и выберите «Автоматически». Затем коснитесь «Параметры», чтобы установить предпочитаемый график для темного режима.

Выполните действия, описанные ниже.

Убедитесь, что в OneNote настроен темный режим.
В правом верхнем углу нажмите кнопку … и нажмите «Переключить фон».

Интерфейс OneNote остается в темном режиме, но фон полотна страницы светлее.

Если вы хотите переключить полотно страницы со светлого на темное, повторите шаг 2 выше.

OneNote для Android

Чтобы настроить устройство Android и OneNote для темного режима, сделайте следующее:

Нажмите кнопку «Тройное точки» в правом верхнем углу, а затем нажмите «Параметры».
В области «Тема»сделайте одно из следующего:
- Выберите «Светлая», чтобы использовать OneNote в стандартном светлом режиме.
- Выберите «Темный», чтобы использовать OneNote в темном режиме.
- Выберите «Система по умолчанию», если вы хотите, чтобы OneNote наследовал параметры темы от системных параметров Android.

Темная тема для всех сайтов и приложений — как включить | Приложения | Блог

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

Темная тема в мобильных мессенджерах

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

Вконтакте. Разработчики VK сделали смену оформления максимально удобной — вам достаточно дважды кликнуть по иконке «Профиль», чтобы открыть дополнительное меню своей страницы. В самом нижнем правом углу будет значок, отвечающий за дневной и ночной вид. Ни в каких дополнительных настройках копаться не придется.

Viber. Этот мобильный мессенджер предлагает более широкие настройки в оформлении, но для их изменения придется глубже копнуть в меню. В блоке «Еще» вам необходимо кликнуть по строке «Настройки», а далее «Темы оформления».

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

Telegram. Этот популярный мессенджер предлагает одни из самых продвинутых настроек оформления — вплоть до выбора цвета сообщений. Пользователям необходимо открыть левое всплывающее меню своей страницы, после чего перейти в «Настройки». Далее зайдите в раздел «Настройки чатов».

В открывшемся разделе остается только выбрать оформление. Помимо нескольких светлых тем здесь присутствует «темная» и «ночная». Цвет фона сообщений чата также можно настроить.

Discord. Если вы часто сидите в Дискорде, то можете также выставить темную тему. Настройки в мобильном приложении распространяются и на браузерную версию мессенджера. С основной страницы вашего профиля перейдите в раздел «Внешний вид». Пользователям доступны всего две темы — «светлая» и «темная».

WhatsApp. Как и другие мессенджеры, это приложение предлагает возможность сменить тему. Настройки минимальные и включают только «светлую» и «темную» темы.

Темная тема в браузере: стандартные настройки

Многие из пользователей проводят львиную долю времени, работая за ноутбуком или ПК. Если вас раздражает яркое оформление, то темную тему можно выставить и в браузере. Это касается именно интерфейса, а не оформления конкретных сайтов. О последнем мы поговорим позже.

Google Chrome. Стандартно в настройках Chrome нельзя менять темы оформления, поэтому их придется устанавливать в качестве дополнений через фирменный магазин. Команда разработчиков предлагает несколько вариантов, в числе которых JustBlack, а также нечто среднее между светлой и темной темой — Slate.

Пользователям достаточно перейти в магазин Chrome и установить желанную тему. Изменять настройки можно в разделе «Внешний вид». Обратите внимание, что темным становится только верхняя часть окна — содержимое страниц не редактируется.

Если никакие дополнения устанавливать не хочется, то можно включить темный режим через настройки ярлыка. Для этого в поле объекта после пути необходимо дописать «-force-dark-mode —enable-features=WebUIDarkMode», как это показано на изображении.

В браузере автоматически включится темная тема, которая также коснется и стартовой страницы Google.

Opera. Далеко ходить в этом браузере не придется — достаточно открыть настройки в правой части окна. Выбор темы находится в самом верху и затрагивает весь интерфейс браузера.

Firefox. Здесь вам необходимо через настройки перейти в блок «Темы», где разработчики предлагают без дополнительного скачивания несколько стандартных вариантов. В их числе и темное оформление, которое необходимо только включить.

К сожалению, темы не изменяют внутренние окна настроек браузера.

Предложенные способы только меняют элементы интерфейса браузера, но не затрагивают непосредственно содержимое сайтов.

Как включить темную тему для всех сайтов

Что делать, если вы хотите затемнить интерфейс различных сайтов? В случае с некоторыми мессенджерами, это можно сделать через стандартные настройки. Например, сменить тему можно в браузерных версиях Discord, Telegram и не только.

Однако для остальных сайтов таких настроек нет. Здесь на помощь приходят расширения и плагины.

DarkReader

Это самое популярное и эффективное расширение для браузера, которое позволяет включить темную тему практически для любого сайта. Плагин редактирует HTML-код, меняя цвет фона и шрифта для каждого интернет-ресурса. Дополнение распространяется для Chrome, Firefox, Safari и Edge.

В 99 % случаев плагин корректно подбирает цвет шрифтов, но на некоторых ресурсах могут попадаться надписи, которые теряются на сером фоне.

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

Единственный условный недостаток — страницы могут подгружаться с небольшой задержкой в 1-2 секунды, поскольку Dark Reader изменяет их код.

NightEye — Темный режим

Если предыдущий плагин по каким-то причинам работает некорректно, можете скачать расширение NightEye. Как и предыдущее, оно изменяет цвет фона и шрифта для каждого сайта, фактически включая ночную тему. Ключевое преимущество — поддержка более широкого списка браузеров: Google Chrome, Opera, Firefox, Safari, Edge, Yandex, UCBrowser и не только. Ссылка на скачивание для каждого браузера располагается на официальной странице.

Вы можете изменить яркость, контраст, насыщенность цветов, а также устранить синий оттенок. Последнее еще больше снижает нагрузку на глаза. Разработчики NightEye предлагают уникальную функцию конвертирования иконок, но это существенно повышает нагрузку на CPU. Вы можете даже настроить время работы плагина, например, чтобы он автоматически включался только в вечернее время.

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

SuperDarkMode

Это расширение создано только для Google Chrome, но входит в список наиболее популярных. Позволяет сменить цвета сайта на более темные и в большинстве случаев делает это максимально корректно. В правой части окна появляется соответствующая иконка, нажимая на которую вы можете включать или отключать темный режим.

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

Эти расширения включают ночной режим независимо от того, поддерживает ли сайт темную тему или нет, однако потребляют небольшой ресурс ОЗУ и дают дополнительную нагрузку на процессор.

Почему сайты с темным фоном полностью отстой [мнение]

Вы читаете MakeUseOf прямо сейчас, веб-сайт, который в основном использует темный текст на светлом фоне. Что так и должно быть. Эта полоса в верхней части со светлым текстом на темном фоне и раздел в нижней части, который почти никто не читает, хороши тем, что представляют собой лишь небольшие части сайта. Больше, и я должен был бы дать моим боссам совет о том, как улучшить внешний вид сайта в целом — потому что веб-сайты с темным фоном полностью отстой.

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

будущее, которое вы отправились на пути к. Есть причина, по которой 99 процентов (полностью вымышленная фигура) Интернета используют темный текст на светлом фоне …

Дизайн сайта

Дизайн сайта постоянно развивается. Просто введите любой URL в The Wayback Machine, чтобы увидеть, как далеко мы продвинулись за последние 15 лет. Элементы, включенные в веб-страницу, изменились, с различными встроенными медиа и полностью интегрированы. Ох, и теперь везде вы смотрите рекламу. Что может раздражать, но держать сайты, такие как MakeUseOf, доступными для всех.

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

Черное и белое

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

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

Веб Стандарты

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

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

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

Надо стараться

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

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

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

Выводы

Какой ты предпочитаешь? Темный текст на светлом фоне, как это норма, или светлый текст на темном фоне, как это странно? Не стесняйтесь разбирать мой аргумент о том, почему сайты с темным фоном полностью отстой. Или, если вы предпочитаете согласиться со всем, что я сказал, чтобы внутри меня было тепло и нечетко, тогда это тоже хорошо.

Авторы изображений: Том Ф, Крис Гилмор, purplejavatroll

Как получить темный режим для всех сайтов на Mac

Тихий читатель

Теперь, когда в macOS Mojave есть темный режим А как было бы здорово, если бы все сайты автоматически переходили в темный режим вместе с интерфейсом системы? Можно использовать Темный читатель расширение для Safari, Chrome и Firefox.

Хотя мы говорим об одном и том же расширении, реализации в Safari и Chrome (наряду с Firefox) различаются. Мы рассмотрим обе версии ниже.

СВЯЗАННЫЕ С: Как включить темный режим в macOS Mojave

Как использовать Dark Reader в Chrome и Firefox

Расширение Dark Reader для Хром а также Fire Fox прост и понятен в использовании. Если вы когда-либо раньше использовали расширение в браузере, вы будете чувствовать себя как дома.

После того, как вы установили расширение Dark Reader для Chrome или Firefox (ссылки выше), щелкните значок расширения «Dark Reader».

Нажмите кнопку «Вкл.», Чтобы включить темный режим. Все открытые веб-сайты мгновенно переключатся на темную тему.

Весь черный текст и белый фон будут инвертированы. Что касается цветов и изображений, ничего не коснется.

Чтобы отключить темный режим на данном сайте, щелкните расширение, а затем нажмите кнопку «Переключить текущий сайт».

На вкладке «Фильтр» вы найдете настройки темного режима. Отсюда вы можете переключиться в режим освещения и изменить коэффициент контрастности. Вы также можете добавить сепию или фильтр оттенков серого.

Чтобы управлять черным списком, щелкните вкладку «Сайты». Отсюда вы можете добавлять или удалять веб-сайты, которые всегда будут отображаться в облегченном режиме.

Интерфейс Chrome поддерживает внешний вид системы Mac. Поэтому, когда вы включаете темный режим на своем Mac, пользовательский интерфейс Chrome также переключается в темный режим. Но это не относится к расширению Dark Reader.

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

СВЯЗАННЫЕ С: Как включить темный режим на каждом веб-сайте в Google Chrome

Как использовать Dark Reader в Safari

Safari обрабатывает расширения иначе, чем Chrome и Firefox. Расширения Safari теперь распространяются как приложения в App Store. Это одна из причин, по которой Dark Reader стоит 4,99 доллара в Mac App Store, в то время как он доступен бесплатно в Chrome и Firefox.

Версия Safari имеет одно важное преимущество: она синхронизируется с глобальным темным режимом в macOS. Поэтому, когда вы включаете темный режим в macOS (это легко сделать с помощью Ночная Сова утилита), все веб-сайты также мгновенно перейдут на темную тему.

После того, как вы приобрели Расширение Dark Reader , откройте приложение. В окне приложения нажмите кнопку «Активировать для Safari».

Это откроет панель расширений в Safari. Щелкните галочку рядом с «Dark Reader», чтобы активировать расширение.

Теперь вы увидите значок Dark Reader в Панель инструментов Safari . Нажмите кнопку «Dark Reader», чтобы увидеть все параметры и настройки.

Чтобы включить темный режим для всех сайтов, нажмите кнопку «Вкл.». Переключитесь в режим «Авто», чтобы автоматически переключать темный режим в зависимости от системных настроек вашего Mac.

Если изображения и значок вам не подходят, убедитесь, что включен «Динамический режим» (он намного лучше, чем режим фильтра).

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

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

Теперь, когда у вас есть общесистемный темный режим на Mac, узнайте, как вы можете включить его на своем компьютере. iPhone или iPad под управлением iOS 13, iPadOS 13 или выше.

СВЯЗАННЫЕ С: Как включить темный режим на вашем iPhone и iPad

Может ли веб-сайт на темном фоне работать лучше, чем вы думаете?

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

Запустите тему WordPress, SquareSpace, Webflow, Weebly или один из многих других инструментов веб-дизайна, и он автоматически загрузит страницу с белым фоном и черным текстом. Вы, конечно, можете изменить это, но такая комбинация воспринимается как норма.

Не обязательно.

Если все сделано правильно, темный фон для веб-сайта может работать лучше, чем вы думаете.

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

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

Почему белый?

Есть две основные причины, по которым сочетание черного с белым считается нормой.

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

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

Другая причина — удобочитаемость. Для многих пользователей, особенно мобильных, не всегда хорошо читается белое на темном. Людям с нарушениями зрения, например астигматизмом, трудно различить белый текст на темном фоне. Все, что заставляет зрачок расширяться, как темный экран, означает, что нарушение усиливается, что затрудняет чтение страницы.

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

Что нужно знать о темном фоне

Я говорю здесь много темного, а не черного.

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

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

Визуальное восприятие темноты

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

Несмотря на то, что сейчас исполнилось десять лет, опрос показал, что только 47% респондентов предпочитают всегда светлый фон. Еще 36% заявили, что это зависит от блога, 10% заявили, что предпочитают всегда темный цвет, а 7% затруднились с выбором.Большинство может предпочесть белый фон, но 43% сказали, что им нравится темный или это должно зависеть от общего дизайна сайта.

Еще один опрос, проведенный четыре года спустя на CSS-Tricks, показал, что большинство респондентов действительно предпочитают светлый текст на темном фоне. Чтобы быть ясным, это был опрос, посвященный использованию инструментов кодирования, и спрашивали, какую конфигурацию пользователи предпочитают своим редакторам кода: темное на белом или белое на темном. 63% ответивших предпочли темный фон.

Аспект контраста

Ярко озаглавленное «Влияние сочетания цвета текста и фона веб-страницы на читабельность, удержание, эстетику и поведенческие намерения» представляет собой интересное исследование.

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

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

Контраст невероятно важен в веб-дизайне.

Некоторые современные веб-сайты пытаются использовать малоконтрастный дизайн со смешанными результатами. Даже Apple попробовала это с некоторыми страницами на своем собственном веб-сайте.

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

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

Аспект читабельности

Темный фон может быть идеальным выбором дизайна в некоторых ситуациях.

Веб-сайты с большим количеством текста — не из таких ситуаций. Хотя контраст имеет большее влияние на разборчивость страницы, выбор цвета также имеет влияние.По словам Якоба Нильсена, негативный текст, то есть белый текст на темном фоне, требует немного больше усилий для чтения и читается медленнее, чем позитивный текст, который черный на белом фоне.

Кроме того, если контраст между текстом и фоном достаточен, читабельность не ухудшается.

Я бы немного добавил к этому. Если вы скажете белый текст на темном фоне, это не повлияет на читабельность, если вы его правильно спроектируете.

Для меня это означает:

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

Выбор шрифта важен в любом веб-дизайне, но тем более при работе с темным фоном.

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

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

Аспект эмоционального восприятия

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

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

У нас есть укоренившиеся представления о значении цвета.

Например, черный часто ассоциируется с мощным, эротическим, загадочным, формальным и элегантным цветом.Белый кажется чистым, свежим, современным, молодым, доступным и знакомым. Красный — смелый, мощный, уверенный и чувственный.

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

Преимущества темного фона

Темный фон подходит не для любого дизайна или проекта.

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

1. Меньшая нагрузка на глаза

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

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

2. Стильный

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

3. Знакомство

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

Мы видим это везде. Из многих продуктов Adobe, Windows 10 Dark Mode, Mac OS Dark Mode, Adobe Photoshop и Dreamweaver и многих других ведущих программ.

Теперь мы больше привыкли видеть светлый текст на темном фоне, это не удивляет и не влияет на наши ожидания так, как раньше.

4. Выделяется

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

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

5. Переход на задний план

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

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

Недостатки использования темного фона

Использование темного фона в дизайне не всегда положительно.У этого стиля есть свои недостатки, и их не стоит недооценивать.

1. Внимательное отношение

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

Некоторые клиенты до сих пор негативно воспринимают темный фон, как мы привыкли.Даже если вы уверены, что темный фон — лучший вариант, вам будет труднее убедить клиента, чем если бы вы шли традиционным путем.

2. Тщательное планирование

Любой выбор дизайна требует тщательного планирования, выбора цвета, шрифта и изображения. Использование темного фона добавляет к этому еще больше размышлений. Белое / темное пространство становится еще более важным, чтобы не допустить перетекания света в темноту и обеспечить читаемость текста. Изображения и элементы дизайна нуждаются в реальном разделении, чтобы они оставались разборчивыми и не пропускали свет или цвет в другие области.

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

3. Тщательный баланс

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

Это сложный вопрос, и для его баланса потребуется много доработки и много белого / черного пространства на странице.

4. Доступность

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

В соответствии с рекомендациями по обеспечению доступности веб-содержимого (WCAG) требуется цветовой контраст 4.5.1 между текстом и фоном для обычного текста и 3: 1 для крупного текста. Он предлагает белый текст для черного фона, но есть некоторая свобода действий для других цветов, если коэффициент контрастности остается как можно более широким.

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

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

Когда следует использовать темный фон

Существует ряд ситуаций, когда темный фон хорошо подходит для веб-дизайна.К ним относятся:

Когда вы хотите произвести первоначальный визуальный эффект.
В темноте соответствует фирменному стилю клиента.
При демонстрации товаров или услуг класса люкс или высокого статуса.
Когда дизайн современный или минималистский.
Когда вам нужно создать драму или тайну в дизайне.

Когда не следует использовать темный фон

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

Когда страница тяжелая.
Когда голос бренда не поддерживает это.
Когда известно, что целевая аудитория плохо на нее реагирует.
Когда со страницей много чего происходит, а белое / черное пространство в приоритете.
Если намерение — B2B или официальное, например правительственное.

10 примеров темного фона

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

1. Divi с пакетом макетов веб-фрилансеров

Тема Divi WordPress должна быть одной из самых гибких. Хотя многие из его шаблонов имеют светлый фон, вы можете перевернуть его за секунды. Добавьте пакет макетов веб-фрилансеров в Divi, и у вас будет отличный веб-сайт с темным фоном для любого использования.

Все, что вам нужно сделать, это установить две темы, активировать тему, открыть страницу и переключить фон на темный.Затем используйте параметр «Расширить цвет фона» в разделах страницы, чтобы привести все в соответствие.

Получите Divi со скидкой 10% до декабря 2021 года

2. Astra с стартовым сайтом Photographer

Использование фреймворка Astra с установкой демонстрационного сайта Photographer дает отличный веб-сайт с черным фоном. Хорошее использование пространства, контрастные шрифты и минималистичный дизайн выделяют эту тему.

Посетите сайт для начинающих фотографов

3.Genesis с Parallax Pro

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

См. Живую демонстрацию Parallax Pro

4. Объектив от PixelGrade

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

NB: У нас есть 20% OFF непосредственно от PixelGrade, эксклюзивно для посетителей CollectiveRay. Просто нажмите на ссылку ниже, и ваша скидка будет автоматически применена при оформлении заказа. Это предложение действительно ТОЛЬКО до конца сентября 2019 года.

Посетите Lens Now

5.Divi with Electrician Dark Pack

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

Получите Divi со скидкой 10%

6. Aldo от ThemeRex

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

Посетите Aldo Live Preview

7. Neve Pro с изображениями темного параллакса

Neve Pro с изображениями темного параллакса использует тему Neve со всей ее мощностью, скоростью и функциями. В сочетании с темным фоном и дополняющей тематикой эта тема WordPress является одной из лучших. Страницы хорошо сбалансированы, загружаются быстро, контент плавно направляет читателя вниз по странице, и вам ничего не нужно.

Узнайте больше о Neve

8. Рассказывая с помощью Gamer Layout

Telling with Gamer Layout — отличный пример того, как использовать другие жирные цвета для обогащения темного фона. Не дайте себя обмануть прозвищу геймера, вы можете использовать эту тему для чего угодно, и она все равно будет выглядеть потрясающе. Сильное меню, отличная компоновка, превосходная резкость и контрастность, а также хорошее использование пространства — это лишь некоторые из плюсов.

См. Живую демонстрацию

9. Nextout

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

See Nextout live

10. Hestia Pro с изображениями Dark Parallax

Hestia Pro с изображениями Dark Parallax — еще одна изящная тема, в которой темный фон сочетается со светлыми элементами, контрастными цветами и отличной типографикой.Страницы богаты, но не переполнены, и баланс как раз подходит для любого типа экрана, который вы используете. Он может работать на любом устройстве, для любого предмета, и его определенно стоит попробовать.

Если вы хотите узнать больше о Гестии — прочтите эту статью на Collectiveray.

Проверьте Hestia

Заключение: Использование темного фона в веб-дизайне

Одна из лучших вещей в современном Интернете — это свобода самовыражения и нарушения правил. Хотя некоторые из этих правил категорически нельзя нарушать, некоторые можно.Например, традиционный дизайн «черное по белому», который был у нас с 17, ^-го,-го века.

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

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

Об авторе

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

Дизайн в темном режиме: 14 примеров работающих веб-сайтов на черном фоне

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

Несмотря на то, что это выглядит свежо, дизайн в темном режиме не является чем-то новым. Если вы когда-либо пользовались компьютером в 80-х годах с монохромным экраном (или видели, как они использовались в фильмах — Ferris Bueller, ? Кто угодно, кто угодно?), Вы знаете, как это выглядит. Большинство первых домашних компьютеров отображали зеленый или белый текст на простом черном фоне.

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

Что такое темный режим?

Также называемый черным режимом, темной темой или ночным режимом, темный режим — это термин в дизайне, используемый для описания любой цветовой схемы «свет-на-темноте», которую многие пользователи предпочитают использовать в условиях низкой освещенности. В своей самой простой итерации представьте, что жирный белый текст на угольно-черном фоне.

Пятьдесят оттенков (темного) серого

Темный режим — это не просто выбор цвета фона веб-сайта со значением чистого черного (шестнадцатеричный код # 000000) и его выполнение. То, что работает в одном дизайне веб-сайта, может не повлиять на другой.Чтобы добиться нужного эффекта, необходимо больше нюансов подобрать цвет.

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

Совет от профессионала: темный режим не обязательно означает переход в оттенки серого.

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

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

Не знаете, с чего начать охоту за идеальным оттенком фона в темном режиме? Вот некоторые из самых популярных значений шестнадцатеричного кода темного режима, используемых для добавления насыщенной темноты на веб-сайты:

# 0A0A0A
# 121212
# 15292B
# 161618
# 181818
# 192734
# 212121
# 212124
# 22303C
# 242526
# 282828
# 3A3B3C
# 404040

Что такого хорошего в темном режиме, а что не так

Темный режим помогает сделать изображения яркими

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

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

«Взгляд всегда привлекает свет, но тени могут сказать больше. — Грегори Магуайр

Темный режим часто мешает читаемости

Исследователи обнаружили (pdf), что светлый текст на темном фоне труднее читать, чем темный шрифт на белом фоне из-за эффекта «ореола». Это явление делает темный режим менее чем идеальным выбором почти для всех веб-сайтов с большим количеством копий.

По словам дизайнера пользовательского интерфейса Джейкоба Нильсона, «для оптимальной разборчивости требуется черный текст на белом фоне. Белый текст на черном фоне почти так же хорош…. Разборчивость в большей степени страдает от цветовых схем, которые делают текст светлее чистого черного, особенно если фон сделан темнее, чем чистый белый ».

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

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

Темный режим вызывает сильные эмоции

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

Подсказка: узнайте, чем занимаются ваши конкуренты в Интернете.

Дизайнерские решения не должны основываться только на эстетике и удобстве использования. Вы также должны думать о потребностях вашего бизнеса. Если ваши клиенты видят веб-сайты в темном режиме, когда посещают ваших конкурентов в Интернете, выбор привлекательного, светлого и легкого дизайна веб-сайта может помочь вам выделиться из толпы в их браузерах.

12 примеров дизайна веб-сайтов в темном режиме

WeTransfer

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

Spotify

Spotify — это лидер в мире дизайна темного режима. Их команда веб-дизайнеров всегда использовала черный фон на своих веб-сайтах и в приложениях, чтобы оживить макеты и заставить обложки альбомов «петь».

Британский музей

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

Субботним вечером в прямом эфире Поговорите о том, чтобы знать своих пользователей и думать о доступности.Зная, что многие пользователи будут приходить поздно ночью, когда будет транслироваться шоу, Saturday Night Live использует дизайн темного режима, чтобы упростить просмотр при слабом освещении для глаз аудитории.

Отслеживание футбола

Не готовы пойти ва-банк с темным режимом? Разделите разницу, как «Отслеживание футбола», используя дизайн темного режима, чтобы вызвать интерес вверху его домашней страницы, и белый фон внизу, чтобы представить более подробную информацию об их услугах. Узнайте больше о дизайн-проекте веб-сайта Tracking Football.

Apple AirPod Плюсы

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

Звездные войны

Не говорите Йоде, но веб-сайт Диснея, посвященный всему, что связано со вселенной Star Wars , перешел на темную сторону … и включил черный фон для всех своих шаблонов страниц — даже для своего блога!

MIT

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

Морская пехота США

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

DeWalt

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

Монитор кампании

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

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

Penn & Teller

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

Оззи Осборн

И последнее, но не менее важное: поговорим о том, что это номер на бренде . Конечно, у «принца тьмы», также известного как Оззи Осборн, есть темный сайт со зловещим черным фоном.

Вам также может понравиться:

сайтов с темным фоном: как правильно делать

Иногда темный дизайн веб-сайта не является подходящим решением для клиента или его бизнеса.

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

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

В конце концов, на него нет правильного ответа. И темный, и светлый дизайн имеют свое применение. Эта статья поможет вам использовать дизайн темного фона и одновременно выразить свое творчество, а также сделать вас и своего клиента счастливыми и довольными дизайном.

Готовы ли вы стать послом черных веб-сайтов и убедить объединенную аудиторию в том, что темные фоны могут быть такими же удобочитаемыми и удобными, как и светлые?

Когда следует выбирать темную тему вместо светлой?

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

Вы же не хотели бы иметь темный фон на свадебных сайтах, верно?

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

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

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

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

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

Если вы создаете веб-сайт для фотографа, то холодный темный фон выделит каждый цвет на фотографии клиента.

Если вы делаете информативный веб-сайт с объявлениями и новостями, черный фон для веб-сайта — не лучший вариант.

Элегантность или удобочитаемость?

Интернет-пользователи и даже некоторые дизайнеры критикуют темный дизайн за их главный недостаток — плохую читаемость и плохое удобство использования сайта.Все они утверждают, что на темном фоне сложно читать светлый текст, и мы с этим согласны.

Однако есть способы решить эту проблему, и если вам интересно, продолжайте читать.

Есть место для белого пространства?

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

Параметры текста для веб-сайта с черным фоном?

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

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

Контраст между темными фоновыми изображениями и текстом

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

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

Решение заключается в балансировании шкалы между темным фоном и светлым текстом.

Удобные шрифты

Как и в случае с любым другим фоном веб-сайта, выбор и формат шрифта играют большую роль в макете дизайна. Мы заметили, что шрифт без засечек более читабелен, чем элегантный шрифт с засечками.

Знание того, как соединить их вместе, чтобы сделать текст более разборчивым, приходит с практикой, и мы советуем вам помещать более крупный текст в шрифты с засечками.

Богатая цветовая гамма — нет-нет

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

Вам следует придерживаться одного или двух цветов, поиграть с ними и посмотреть, как они сочетаются с вашим фоном. Мы очень впечатлены сочетанием дизайна красного и черного фона!

И светлые, и темные

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

Лучшее использование темного дизайна веб-сайта

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

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

Завершение мыслей на темном фоне

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

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

Как это сделать правильно

Думаете о переходе в темный режим с черным фоном? У вас есть несколько способов приблизиться к этому…

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

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

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

Как использовать черный цвет на сайтах и в приложениях?

Черный — это неизменно шикарный цвет, который издавна популярен среди дизайнеров моды и полиграфии.Но только недавно цвет стал широко применяться в веб-дизайне.

Темный дизайн веб-сайта с использованием этого изображения, созданный автором YARUNIV Studio.

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

Вместо этого поищите альтернативные черные цвета HEX, чтобы придать дизайну вашего веб-сайта особенное качество.Черный может быть теплее или холоднее, или же может быть использован уголь (# 36454f), или шиферно-серый (# 3D4849) для более тонкого взгляда на темную тенденцию. Различные тона черного также прекрасно сочетаются с определенными цветовыми группами, такими как пастельные, неоновые или яркие. Существует множество признанных разновидностей черного цвета — гага, оникс, эбеновое дерево — и каждый из них подходит для разных целей. (Ознакомьтесь с нашим руководством по черному цвету, чтобы узнать больше о диапазоне черных, которые вы можете использовать, а также о психологии этого мощного оттенка.)

В то время как сочетание # 000000 с четким белым может создать впечатляющую схему (см. Ниже), другие схемы выиграют от слегка отличающихся черных тонов.

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

Дизайн на черном фоне №1: Минималистский черно-белый

Черно-белая схема веб-сайта с использованием этого абстрактного фона значка автора molaruso.

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

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

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

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

Попробуйте эти черно-белые цветовые схемы и фоны в дизайне своего веб-сайта:

Изображение предоставлено автором Mayer George. Изображение предоставлено автором PsyComa.

Дизайн черного фона №2: Черные текстуры

Макет веб-сайта с использованием текстуры черной каменной стены от автора TippaPatt.

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

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

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

Вот несколько простых черных текстур для использования в дизайне вашего веб-сайта:

Изображение предоставлено автором sumroeng chinnapan. Изображение автора shuttersv. Изображение предоставлено автором chanchai howharn.

Дизайн черного фона # 3: неоновые градиенты

Неоновый текст в сочетании с черным фоном придает веб-сайтам ретро-футуристический вид, в основном благодаря стилю The Matrix , основанному на коде. Тем не менее, сочетание неона и черного пошло дальше и модернизировалось. Это больше не визитная карточка только технических фирм или веб-разработчиков.

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

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

Попробуйте эти две неоновые и черные схемы, чтобы придать своему веб-сайту современный вид в стиле 80-х годов.

Как вариант, добавьте в свой веб-сайт мгновенный неоновый цвет, используя фотографию, например, эту, сделанную автором Rail fx:

Изображение предоставлено автором железной дороги fx.

Дизайн на черном фоне №4: фотографии во всю ширину

Дизайн веб-сайта с использованием черно-белого портрета павиана от автора Драмаса.

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

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

В библиотеке Shutterstock можно найти изображения чрезвычайно высокого разрешения с черным фоном, подходящие даже для самых больших экранов Retina.

Вам нужно увеличить ширину фотографии, чтобы она соответствовала адаптивному веб-дизайну? Отсутствие деталей на черном фоне позволяет плавно расширить границы фотографий. Используйте плагин Eyedropper для Chrome, чтобы подобрать конкретный шестнадцатеричный тон выбранной вами фотографии.

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

Изображение предоставлено автором Zamurovic Photography. Изображение предоставлено Джомасом.

Черный фон № 5: древесный уголь и сланец

Дизайн веб-сайта на не совсем черном фоне благодаря стильному изображению на грифельной доске от автора YARUNIV Studio.

Может быть пятьдесят оттенков серого, но столько же оттенков черного. От черного дерева до оникса, от черного до угольного, от сланцевого до серо-коричневого — есть множество оттенков черного на выбор, с соответствующими HEX-кодами.

Off-black оттенки могут придать вашему темному дизайну веб-сайта более тонкий, профессиональный вид, что делает эти черные цвета отличным выбором для корпоративных веб-сайтов или тихо стильных дизайнерских компаний, таких как архитекторы и дизайнеры интерьеров.Менее резкие, чем чистый черный, оттенки древесного угля и сланца выглядят довольно элегантно. Из них также получается стильная пленка для широкого диапазона акцентных цветов, таких как коралловый, мятный, темно-розовый и небесно-голубой.

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

Поэкспериментируйте с этой яркой, но элегантной цветовой схемой в дизайне своего собственного веб-сайта или попробуйте фотографию в серых тонах для слегка темного фона:

Изображение предоставлено автором YARUNIV Studio.

Ищете новые идеи для дизайна веб-сайтов? Не пропустите эти полезные советы и методы создания красивых и эффективных веб-сайтов:

Изображение на обложке автора Mykolastock.

Лучшие веб-сайты с черным фоном и советы по созданию веб-сайтов с черным фоном

Вы когда-нибудь слышали о психологии цвета? Это наука, которая доказывает влияние цветов на людей. Черный охватывает широкий спектр эмоций, поэтому его так часто используют на веб-сайтах.Он выражает таинственность, авторитет и элегантность и является одним из лучших вариантов при разработке веб-сайта.

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

Содержание

Лучшие черные сайты, которые вы можете найти

Блаженно осознающий

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

Темный фон хорошо выбран, учитывая ссылки на странице и их видимость. Это один из лучших темных веб-сайтов.

Прогуляйтесь

Take the Walk — это черный веб-сайт, посвященный благотворительным целям, связанным со СПИДом и бедностью.Веб-сайт призывает людей пройти милю, чтобы поддержать свое дело. Фон черный с акцентами, которые подчеркивают другие элементы, присутствующие на веб-сайте. Эта черная веб-страница определенно является хорошим примером того, как следует задумать этот дизайн.

Блейк Аллен

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

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

Duft & Co.

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

Эстебан Муньос

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

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

Студия Графит

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

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

Томас Ритм

Еще один сайт-портфолио, Thomas Rhythm, включает несколько элементов, которые делают его изысканным и элегантным. На веб-сайте преобладает черный цвет, но есть и другие графические элементы, которые делают его визуально привлекательным.

Пустота

Void — один из основных черных веб-сайтов, по которым людям нравится перемещаться.Он имеет анимацию и рассказывает визуальную историю без использования какого-либо другого контента, кроме изображений и анимированного контента. Страница полностью черная, что передает ощущение таинственности. Другие темные цвета используются для усиления определенных элементов. У веб-сайта также есть повествовательная подоплека.

Обычный

The Ordinary имеет черно-белый дизайн, создающий ощущение звездного неба. За сайтом вы можете увидеть, что может предложить изысканный ресторан морепродуктов.Сайт оформлен в морской тематике, потому что морепродукты — главная достопримечательность ресторана.

Kruppa Hosk

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

Навесные пленки

Canopy Films — это продюсерский дом, расположенный в Бостоне. Имея опыт работы в документальном кино, они знают, что история всегда на первом месте.

КОНТРАТЕР

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

GT Супер

GT Super — результат обширного исследования шрифтов с засечками 1970-х и 80-х годов. Он отражает их выразительную природу и переводит ее в хорошо сбалансированную систему стилей текста и отображения.

Бен Вегшайдер

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

СРОЧНОЕ АГЕНТСТВО

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

Вилочная ложка

Открытая витрина и дизайн-студия, посвященная демонстрации неотъемлемой важности дизайна через курирование предметов и книг, образование и практику.

DIA

DIA — агентство креативного дизайна, которое бросает вызов себе, своим клиентам и своим традициям.

Саймон Фиппс

Саймон Фиппс — фотограф с множеством интересных проектов.

Рейкьявик Фестиваль моды

Фестиваль проводится уже 6 лет, чтобы дать исландской моде платформу. После годичного перерыва и смены владельцев фестиваль стремился восстановить контакты с местными дизайнерами и привлечь внимание международных СМИ.

Осужденные

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

Титуан Матис

Титуан Матис (Titouan Mathis) — ведущий разработчик в студии meta.

RUKI Product Planner

RUKI — это компания на ранней стадии венчурного финансирования, ориентированная на компании, которым требуется производство. Мы помогаем формировать культуру компании наряду с ее прототипами и продуктами.

Printworks Лондон

Printworks London — это революционное многоцелевое место, которое уже изменило облик культурной жизни столицы.

Майкл Метцнер

Более 15 лет опыта создания высококачественного контента для брендов, агентств, медиа-платформ и государственных ведомств.

Ник О’Рирдон

Ник — веб-разработчик.

Дэвид Ариас

Дэвид Ариас — независимый профессионал в области графического дизайна из Ванкувера, Британская Колумбия.

Открытый Литейный завод

Open Foundry — БЕСПЛАТНАЯ платформа для тщательно отобранных шрифтов с открытым исходным кодом; чтобы подчеркнуть их красоту, активизировать идеи и побудить к исследованиям.

Группа коммандос

В дизайн-студии Commando Group они придерживаются индивидуальной практики обслуживания, обеспечивая уникальный опыт для каждого клиента.

GT Haptik Шрифт

GT Haptik — монолинейный геометрический гротескный шрифт. Его прописные буквы и цифры были оптимизированы для чтения с завязанными глазами и при прикосновении к ним.

Когда лучше использовать черный фон?

Если вам интересно, какие типы веб-сайтов лучше всего подходят для черного фона, то вот обширный список типов веб-сайтов, которые будут отлично смотреться как черные веб-сайты

Веб-сайты, представляющие портфолио, как большинство примеров, упомянутых выше
Сайты, на которых представлены работы дизайн-студии
Сайты, на которых представлена продукция
Нетрадиционные сайты, связанные с искусством

Советы по использованию черного фона для вашего сайта

Следим за тенденциями

Как вы могли заметить, люди очень часто ищут сплетни о MediaTakeOut 2018.Вот почему блоги начали использовать темы и макеты веб-сайтов, по которым легко ориентироваться, когда количество людей, посещающих веб-сайт, очень велико. Следование тенденциям является обязательным в веб-дизайне, поэтому обязательно следите за тем, чего люди хотят от веб-страниц сегодня.

Советы по типографике

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

Приятные отражения

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

Использование изображений

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

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

Выбор цветовой схемы

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

Завершение мыслей о лучших практиках черных веб-сайтов

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

Мы надеемся, что вам понравилась эта статья, созданная нашей командой в Amelia, возможно, лучший плагин для планирования встреч для WordPress.

Вы также должны проверить это о фонах веб-сайтов.

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

Dark Website Design: лучшие практики и примеры в 2019 году | Эми Смит

Использование темных цветов в дизайне веб-сайтов — одна из самых горячих тенденций дизайна в 2019 году и причина многих споров.Многие веб-дизайнеры переняли этот стиль для сайтов крупных брендов, полагая, что он производит уникальное впечатление высокого качества. Но другие думают, что темные цвета могут создавать мрачный тон и их труднее читать по сравнению с более яркими цветами.

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

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

1. Используйте видимые цветные шрифты для заголовков, заголовков и этикеток.

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

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

Статья по теме: 12 классных черно-белых примеров дизайна веб-сайтов для вашего вдохновения

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

2. Используйте менее трех ярких цветов на темном фоне.

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

Следующие примеры демонстрируют хорошее использование ярких цветов. Здесь дизайнеры остановились на одном-двух цветах на темном фоне.Это хороший выбор; чем меньше цвета используется, тем больше выделяется страница.

3. Темные веб-сайты всегда должны использовать пробелы.

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

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

4. Простая интерактивная анимация

Нет ничего лучше, чем посещение веб-сайта с привлекательной анимацией.

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

Вот еще несколько примеров высококачественных веб-сайтов с темными цветовыми схемами:

5. Как выбрать цветовую схему для вашего веб-сайта

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

Следующие два руководства по цветовым схемам помогут вам сделать это правильно.

50 Gorgeous Color Schemes From Award-Winning Websites

https://www.websitebuilderexpert.com/designing-web …

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

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

Дизайн в темном режиме: советы по созданию веб-сайтов и приложений на темную тему

Приглушите свет, расслабьте глаза и сэкономьте энергию.Темный режим — одна из самых популярных тенденций в дизайне, и бренды мирового уровня, такие как WhatsApp, Instagram, Google, Facebook и Apple, уже сели на поезд дизайна темного режима.

Иллюстрация темного режима от Vladanland

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

Что такое темный режим?

–

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

Пользовательский интерфейс темного режима Instagram: WhatsApp на рабочем столе, интерфейс темного режима через приложение What’s

Но темный режим на самом деле не является чем-то новым.

Помните зеленый компьютерный код, сыплющийся дождем на черном фоне в «Матрице»? Это был намек на оригинальный темный режим: монохромные мониторы старой школы первых компьютеров.

Ранние домашние компьютеры с зеленым текстом на черном были темным режимом OG.

Этот классический темный вид вышел из моды в 80-х годах в пользу черного текста на белом фоне, имитирующего чернила на бумаге.

В течение почти трех десятилетий это было нормой, пока темный режим не вернулся в Windows Phone 7 в 2010 году.После того, как Google подтвердил, что темный режим экономит заряд батареи, они добавили эту функцию в свою ОС Android в 2018 году. Год спустя Apple последовала их примеру, выпустив темный режим на iOS и iPadOS.

Темный режим в iOS 13 через 9to5Mac

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

Темный режим не только приятен для глаз (если все сделано правильно), но и экономит заряд батареи и даже может быть более здоровым. Давайте посмотрим на практические преимущества темного режима по сравнению со светлым.

Снижает нагрузку на глаза

Ты не должен чувствовать свои глаза.Но любой, кто анализирует данные на экране в течение длительного времени, знает, что через некоторое время вы начнете это делать. Синдром компьютерного зрения (CVS) включает боль в глазах, нечеткость зрения, двоение в глазах, головные боли, боли в шее / спине и многое другое. Когда дело доходит до диаграмм и графиков, темный режим может помочь буквально уменьшить боль.

Этот зеленый логотип отлично сочетается с этим дизайном приложения с темной темой. Дизайн Аниш Дага.

Повышает видимость при слабом освещении

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

Экономит заряд батареи

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

Дает эмоциональный заряд

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

Предотвращает ADD

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

Минусы использования темного режима

Как и все, у темного режима есть свои недостатки. Давайте познакомимся с причинами, по которым темная тема может мешать вашим целям.

Может снизить эмоциональную связь

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

Сужает пространство

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

Низкоконтрастные цвета могут быть трудночитаемыми

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

Как использовать темный режим в дизайне

—

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

Когда использовать темный режим

Подберите цвета своего бренда

Когда существующая цветовая палитра бренда уже совместима с темным режимом, боги темного режима улыбаются вам.

Дизайн приложения в темном режиме от Velinsi.

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

Подчеркните свою отрасль

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

Стань минималистичным

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

Создавайте эмоции

Пытаетесь вызвать определенный эмоциональный отклик? Как таинственность или небольшая драма? Поскольку низкая видимость вызывает любопытство и усиливает эмоциональное напряжение, темный режим может стать идеальным средством для вашего бренда.

Темный веб-дизайн от novidraft

Символ статуса

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

Элегантный и высококачественный дизайн веб-сайта на темную тему от Aneley.

Лучшие методы разработки темного режима

—

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

1. Не слишком темнеть

Книжные издатели не используют чисто белую бумагу, потому что контраст с черными чернилами слишком резкий. Это заставляет щуриться и может вызвать головную боль. То же самое и с цифровыми устройствами. Держитесь подальше от чистого черного. Глазам сложно смотреть на высококонтрастный экран. Хорошие цвета темного режима — это оттенки серого в сочетании с ненасыщенными цветами.

Темный дизайн приложения от Neolist.

2. Обеспечьте надлежащую контрастность

Фон в темном режиме должен быть достаточно темным, чтобы отображался белый текст. Предложение от Google Material Design — использовать уровень контрастности текста и фона не менее 15,8: 1.

3. Обесцветьте цвета

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

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

через Сергея Золотникова

4. Используйте правильные цвета «на»

Что за цвет? Тот, который отображается поверх элементов и ключевых поверхностей. Для надписей обычно используются «включенные» цвета. Цвет пользовательского интерфейса темного режима по умолчанию — чистый белый (#FFFFFF).Не используйте это. #FFFFFF кажется вибрирующим при просмотре на темном фоне. Выберите светло-серый.

5. Не переворачивайте

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

6. Погрузись глубже

Чем выше слой, тем он должен быть светлее.Это создаст визуальную иерархию в темном режиме, которая идет от наиболее часто используемых элементов на вашем дисплее к наименее используемым.

Более светлые цвета сверху создают визуальную иерархию. Через возвышенный текст.

7. Испытайте и дайте свободу

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

Погаснуть!

–

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

Хотите узнать больше о веб-дизайне? Ознакомьтесь с нашей статьей о том, как создать веб-сайт.