Темные фона: Attention Required! | Cloudflare — Главная

Содержание

Красивый темный фон — 62 фото

Мрачный фон

Темные обои

Текстура кирпича

Коричневый фон для презентации

Тёмный фон для рабочего стола

Обои на рабочий стол текстуры

Узоры на рабочий стол

Темная абстракция

Черный фон с узорами

Темная тема

Глубокий синий цвет

Разноцветный дым

Мемные фоны для презентаций

Бэкграунд темный

Темно синие обои на рабочий стол

Задний фон темный

Черная текстура

Фиолетовые обои

Тёмные обои на телефон

Тёмный фон для рабочего стола

Стильный фон для портрета

Обои на рабочий стол абстракция

Черный фон с узорами

Задний фон черный

Атомный фон

Задний фон темный

Черный фон абстракция

Обои цвета

Красивый темный фон для фотошопа

Текстура огня

Красивые темные обои

Темный фон гранж

Черные обои

Магический фон

Бордовый фон с узорами

Темная заставка

Красивые темные обои

Фоновые изображения для рабочего стола темные

Красивые цветы на черном фоне

Цветные блики

Красивый синий фон

Темные обои

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

Темный фон

Обои цвета

Красно-фиолетовый цвет

Красивые картинки для фона

Темный фон

Черный градиент

Темный фон

Цветы абстракция

Абстракция дым

Мрачный фон для презентации

Черный фон с узорами

Обои на рабочий стол темные

Фиолетово черный

Темный фон

Огненный свет

Темный фон

Темная текстура

Светлые vs темные интерфейсы | USABILITYLAB г.

Москва

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

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

Эксперты советуют использовать темный фон в следующих случаях:

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

необходимо “спрятать” элементы интерфейса, чтобы они не отвлекали от просмотра контента или работы с ним — считается, например, что по этой причине интерфейс Photoshop темный;
необходимо облегчить “сканирование” контента, помочь с первого взгляда выделить самое главное — поэтому часто оказывается хорошо располагать на таком фоне графики (что видно из кейса Salesforce) или фотографии.

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

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

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

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

Хороших вам интерфейсов!

Ссылки для тех, кто хочет углубиться в вопрос

https://bit.ly/2vI4EJ1 – научная статья с обширным литературным обзором старых научных исследований восприятия текста на фоне разных цветов и описанием собственного эксперимента авторов;

https://sforce. co/2APBPQG – кейс Salesforce;

https://bit.ly/2M87otn – хорошая обзорная статья с примерами темных интерфейсов;

https://bit.ly/2vOy746 – статья с примерами правильного применения темных цветов в интерфейсе.

Как создавать темные темы. Руководство от Superhuman

Темные темы – это последний тренд в дизайне приложений. macOS представила темную тему в прошлом году. Android выпустил темную тему в прошлом месяце. iOS представила свой вариант.

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

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

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

противоположного эффекта: мы увеличим напряжение глаз и усложним чтение при слабом освещении.

Мы можем даже нарушить информационную иерархию приложения.

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

1. Затемните отдаленные поверхности

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

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

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

Темная тема Superhuman состоит из пяти оттенков серого. Более близкие поверхности используют более светлые оттенки серого; отдаленные поверхности используют более темные оттенки серого.

Более близкие поверхности используют более светлые оттенки серого; отдаленные поверхности используют более темные оттенки серого

2. Пересмотрите эффект контраста (перцептивный контраст)

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

Например, в светлой теме контактная информация черная с непрозрачностью 60%. Но в темной теме мы сделали контактную информацию белой с непрозрачностью 65%. Хотя оба коэффициента контрастности превышают стандарт AA, дополнительные 5% предотвращают усталость, особенно в условиях низкой освещенности.

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

3. Уменьшите большие блоки яркого цвета

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

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

Уменьшите большие блоки яркого цвета, чтобы было легче сосредоточиться на том, что важно

4. Избегайте чистого черного или белого цветов

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

4.1. Реализм

Настоящий черный цвет не существует в окружающем нас мире. (Самый темный в мире, материал, который еще предстоит назвать, изобрели в Массачусетском технологическом институте, все еще на 0,005% не дотягивает до абсолютного черного!) Поэтому наше зрение приспособилось воспринимать относительную темноту, как настоящий черный. Вот почему цвет #000000 может показаться очень резким, особенно против светлых элементов. Это не соответствует тому, что мы обычно видим.

4.2. Смазывание черного цвета

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

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

Эффект смазывания черного в iOS-приложении «Часы» (нужно просматривать на OLED-дисплее)

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

4.

3. Глубина

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

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

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

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

4.4. Эффект халяции

Чисто белый текст на чисто черном фоне создает максимально возможную контрастность – 21: 1. В количественном выражении стандарта доступности WCAG – это мечта.

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

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

Людям, страдающим астигматизмом (примерно 50% населения) труднее читать белый текст на черном, чем черный текст на белом. Частично это связано с уровнями освещенности: при ярком дисплее (белый фон) радужная оболочка закрывается немного больше, уменьшая эффект «деформированной» линзы; с темным дисплеем (черный фон) радужная оболочка открывается, чтобы получить больше света, а деформация линзы создает в глазу более размытый фокус.

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

5. Измените глубину цвета

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

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

Чтобы создать более глубокие цвета для темных тем: сохраните оттенок, уменьшите яркость и увеличьте насыщенность

Вывод

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

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

Затемните отдаленные поверхности
Пересмотрите Эффект контраста
Уменьшите большие блоки яркого цвета
Избегайте чисто черного или белого
Измените глубину цвета

Я надеюсь, что эти советы помогут вам создать восхитительные темные темы. Если у вас есть идеи или вопросы, пишите автору @ifbirdsfly, [email protected] ?‍?

Большое спасибо Jared Erondu, Dave Klein, Jayson Hobby, Tim Boucher,Tamas Sari иJiho Limза вклад в написание статьи!

Задний фон темный (63 фото)

Темный фон

Глубокий черный

Зелено черный фон

Жуткий фон

Темный фон вертикальный

Задний фон темный

Пустая деревянная комната

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

Фон стена и пол

Фон для презентации темный синий

Темная текстура

Задний фон темный

Обои текстура

Красивый темный фон для фотошопа

Тёмно фиолетовый фон

Фон черный металл

Темный задний игровой фон

Мрачный фон для фотошопа

Стильный черный фон

Орнамент черепа

Темный текстурированный фон

Темный фон для шапки

Красивый темно синий фон

Черная стена

Черный фон с узорами

Красивые текстуры

Интересный темный фон

Красивая стена текстура

Задний фон Темнота

Студийный фон

Глубокий синий цвет

Рабочий стол черный кирпич

Темный фон

Красивый черный фон

Фон узоры

Фон для канала

Текстура потертости

Стена с обоями для фотошопа

Темный фон для слайдов

Обои на рабочий стол черные

Синий фон для рабочего стола

Красивые темные обои

Красивый темный фон

Темная абстракция

Темный текстурный фон

Темные шторы

Задний фон черный

Фон узоры

Коричневый фон на рабочий стол

Задний фон темный

Темный задний план

Задний фон мебель

Обои текстура

Задний фон

Темный фон

Фон однотонный темный

Темный фон

Текстурный фон

Темная текстура

Задний фон темный

Серо синий фон

Задний фон градиент

%d1%82%d0%b5%d0%bc%d0%bd%d1%8b%d0%b9 %d1%84%d0%be%d0%bd PNG, векторы, PSD и пнг для бесплатной загрузки

схема бд электронный компонент технологии принципиальная схема технологическая линия

2000*2000

green environmental protection pattern garbage can be recycled green clean

2000*2000

с днем отца 84

1200*1200

be careful to slip fall warning sign carefully

2500*2775

blue series frame color can be changed text box streamer

1024*1369

облака комиксов

5042*5042

три группы 3d реалистичное декоративное яйцо с золотым цветом на гнезде bd с золотым всплеском текстовый баннер

5000*5000

12 7 84 clean

2000*2000

Золотая буква b логотип bc письмо дизайн вектор с золотыми цветами

8334*8334

prohibited use mobile phone illustration can not be used

2048*2048

буква bc 3d логотип круг

1200*1200

bd письмо 3d круг логотип

1200*1200

в первоначальном письме bd шаблон векторный дизайн логотипа

1200*1200

в первоначальном письме bd логотипа

1200*1200

сложный современный дизайн логотипа с биткойн символами и буквами bc

8331*8331

be careful warning signs warning signs be

2000*2000

в первоначальном письме bd шаблон векторный дизайн логотипа

1200*1200

have electricity prohibit be careful be

2000*2000

логотип готов использовать год до н э

6667*6667

bc логотип шаблон

1200*1200

asmaul husna 84

2020*2020

82 летняя годовщина векторный дизайн шаблона иллюстрация

4083*4083

испуганные глаза комиксов

5042*5042

bd письмо логотип

1200*1200

год до н э письмо логотип

1200*1200

bd письмо логотип

1200*1200

серые облака png элемент для вашего комикса bd

5042*5042

asmaul husna 82

2020*2020

82 летняя годовщина логотип дизайн шаблона иллюстрацией вектор

4083*4083

break split orange be

2000*2000

год до н э письмо логотип

1200*1200

в первоначальном письме bd логотип шаблон

1200*1200

3d золотые числа 82 с галочкой на прозрачном фоне

1200*1200

Простые буквы буквы буквы логотипы компании

2250*2250

bd tech логотип дизайн вектор

8542*8542

круглая буквица bd или db logo

5000*5000

84 года лента годовщина

5000*3000

82 летняя годовщина векторный дизайн шаблона иллюстрация

4167*4167

комикс бд страшно один темно

5042*5042

82 лет юбилей празднования вектор шаблон дизайн иллюстрация

4187*4187

абстрактные векторные 3d рендеринга редактируемые цифры 84 с прозрачным фоном

1200*1200

3d числа 84 в круге на прозрачном фоне

1200*1200

bc beauty косметический логотип дизайн вектор

8542*8542

3d золотые числа 84 с галочкой на прозрачном фоне

1200*1200

черный градиент 3d номер 84

1200*1200

be careful warning signs warning signs be

2000*2000

испуганные оранжевые глаза комиксов

5000*5000

буква bd crossfit logo фитнес гантели значок тренажерный зал изображения и векторные изображения стоковые фотографии

5000*5000

bd письмо логотип

1200*1200

82 летний юбилей ленты

5000*3000

Краткий гайд по тёмной теме в письмах — Блог EMAILMATRIX

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

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

Почему в письмах используют тёмную тему

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

Тёмную тему в рассылках предпочитают

17% мобильных пользователей (ист. EMX)
45% пользователей Apple mail на iOS (ист. EMX)
7,5% пользователей Apple mail на MacOS (ист. Litmus)

Как почтовики реагируют на тёмную тему

Не реагируют на тёмную тему вообще.
Большинство десктопных почтовых клиентов и некоторые веб-почтовики.
Частично инвертируют яркость цветов — меняют светлый фон на тёмный и тёмный текст на светлый. Изначально тёмный фон со светлым текстом останутся неизменными.
Яндекс на мобильных, Mail. ru на мобильных и в веб-интерфейсе, Outlook на мобильных и в веб-интерфейсе, Gmail на Андроиде.
Делают инверсию яркости независимо от изначального цвета: даже тёмный фон со светлым текстом преобразуются в светлый фон с тёмным текстом.
Gmail на iOS.
Поддерживают кастомизацию элементов в зависимости от выбранной темы на устройстве.
Apple mail на MacOS и iOS, Outlook в веб-интерфейсе и на мобильных, Mail.ru в веб-интерфейсе.

Что делать, чтобы письма выглядели хорошо в любой теме

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

Кастомизация тёмной темы в рассылках

В Apple Mail на MacOS и iOS, в веб-интерфейсе Mail.ru и частично в Outlook можно настроить индивидуальный дизайн для светлой и тёмной темы: фон, цвета, шрифты, графику.

В Apple Mail и в веб-интерфейсе Mail.ru для этого используется медиазапрос @media (prefers-color-scheme: dark).

Как настроить:

«Сообщите» почтовику, что ваши емейлы поддерживают тёмную тему, — в HTML-коде вашего письма добавьте метатеги в тег <head>:
```
<meta name=”color-scheme” content=”light dark”>
<meta name=”supported-color-schemes” content=”light dark”>
```
Настройте почтовики, которые поддерживают кастомизацию, с помощью медиазапроса в <head>:
```
@media (prefers-color-scheme: dark) { }
```

Поменяйте цвета шрифтов и фона — тёмный текст на светлый, а светлый фон — на тёмный:

@media (prefers-color-scheme: dark) {
. copy {
 background-color: #222222;
 color: #eaeaea;
}
}

Можно поменять и размер шрифта, добавив к CSS, например:

@media (prefers-color-scheme: dark) {
 .copy {
 background-color: #222222;
 color: #eaeaea;
 font-size: 20px;
 line-height: 24px;
 }
}

Можно предусмотреть один логотип для светлой темы и другой — для тёмной. Для этого пропишите в коде два варианта логотипа и соответствующие CSS для отображения каждого из них:

<img class=”light-img” src=”logo-light.png” alt=””>
<img class=”dark-img” src=”logo-dark.png” alt=”” style=”display: none;”>

@media (prefers-color-scheme: dark) {
.img_light { display: none !important; }
.img_dark { display: block !important; }
}

Для кастомизации элементов под тёмную тему в Outlook в веб-интерфейсе и на Андроиде можно использовать только префикс для селекторов CSS [data-ogsc]:

[data-ogsc] .dark-mode { display: block !important; }

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

Пример кастомизации картинок и цвета текста с data-ogsc:

[data-ogsc] .img_light { 
display: none !important; 
}
[data-ogsc] .img_dark { 
display: block !important; 
}
[data-ogsc] .text_block { 
    color: #ffffff !important;
    background: #222222 !important;
}
[data-ogsc] .text_block a{ 
    color: #fff2f2 !important;
}

Outlook на iOS поддерживает и медиазапросы, и префикс селектора CSS [data-ogsc], но и то и другое лишь частично. При использовании медиазапросов Outlook на iOS позволяет заменять изображения, но некоторые цвета в самом письме могут остаться неизменными. А при использовании data-ogsc Outlook на iOS вообще не позволяет менять изображения, некоторые цвета при этом также могут остаться неизменными.

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

Сравнительная таблица почтовиков

Инвертирование цвета в разных почтовиках

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

Источники

полезнее ли она для глаз на самом деле

В этой статье мы расскажем вам:

— Люся, привет! У тебя новый телефон? — Таня заглянула Люсе через плечо. — У него черный экран?

— Это темная тема. Сейчас ее ставят по умолчанию на всех новых устройствах. Она полезнее для зрения.

— Правда? А ты не думаешь, что это просто рекламный ход?

— Нет!.. — хотела было возразить Люся, но осеклась. — Не думала… До сих пор. Теперь подумаю.

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

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

Рассказываем, какое влияние оказывает темная тема на глаза на самом деле.

Пользователи не заметили изменения качества зрения

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

Как глаза реагируют на разные цвета

Чтобы узнать, как темная тема влияет на зрение, нужно разобраться, как глаз реагирует на разные цвета.

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

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

Белая тема лучше в светлое время суток

Яркий или белый свет экрана гаджета особенно вреден в условиях высокой контрастности освещения — когда человек смотрит на экран телефона в темной комнате.

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

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

Глаза устают от темной темы в светлое время суток и когда нужно много читать

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

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

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

Контраст должен быть таким, чтобы глаза при чтении не напрягались.

Почитайте нашу статью «Как правильно читать, чтобы не нагружать глаза».

Настоящие плюсы темной темы

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

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

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

Главные выводы о темах оформления экранов

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

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

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

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

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

Почитайте статью «Как выбрать линзы, если вы весь день работаете за компьютером» и попробуйте первую пару линз бесплатно!

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

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

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

Не должно быть.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Широко цитируемый опрос, проведенный 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 с сайтом для начинающих фотографов

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

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

3.Genesis с Parallax Pro

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

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

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

Объектив

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

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

Посетить объектив сейчас

5.Диви с набором темного электрика

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

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

6. Альдо из ThemeRex

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

Посетите Aldo Live Preview

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

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

Подробнее о Neve

8. Говорим с помощью Gamer Layout

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

Посмотреть живую демонстрацию

9. Далее

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

Посмотреть Nextout в прямом эфире

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

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

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

Отъезд Гестия

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

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

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

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

Об авторе

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

Почему использование темного фона на веб-сайте не так уж и плохо

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

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

Содержание

Что следует знать о темном фоне

Понимание того, как визуализируются темные оттенки

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

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

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

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

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

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

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

Говоря об эмоциональном восприятии

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

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

Сделать все читабельным

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

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

Преимущества использования темного фона

Подходит для уставших глаз

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

Эстетично

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

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

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

Похож на вариант ночного режима

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

Подходит для темных интерфейсов

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

Прочие льготы

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

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

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

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

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

Несколько примеров веб-сайтов с темным фоном

Томас Ритм

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

Тим Брэк

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

Ройдна

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

Самоуничтожающаяся книга

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

Год

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

Мы делаем крутые

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

аниме.js

Anime.js (/ˈæn.ə.meɪ/) — это легкая библиотека анимации JavaScript с простым, но мощным API.Он работает со свойствами CSS, SVG, атрибутами DOM и объектами JavaScript.

Вайот

Блокчейн

и искусственный интеллект (AI) — это две революционные технологические тенденции, которые могут стать еще более революционными, если их объединить.

CSS-уловки

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

Укладчик облигаций

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

Блоки

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

Самуэль Скальцо

Цифровой дизайнер-фрилансер из Льежа, Бельгия, который любит создавать привлекательные возможности для Интернета.Работаю дизайнером с 2007 года и имел возможность работать и сотрудничать с различными компаниями и брендами.

НОМАД

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

Джоннивино

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

Эскиз

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

D2 Design Agency

Студия дизайна, которая воплощает органические идеи в элегантные творения.

Сессий

Sessions with Typography — это самостоятельный эксперимент, посвященный шрифтам Typekit и Adobe Muse. Отправьтесь в путешествие, поскольку мы исследуем границы типографики, разумеется, без необходимости кодирования.

Вундеркинд

Радикально эффективное машинное обучение.Инструмент аннотации, основанный на активном обучении.

Ешьте Бытие

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

Skinfinity

Лаборатория

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

Состояния артборда

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

Темные фоны для вашего сайта

Интерьер в темном стиле гранж с сияющими прожекторами на деревянном полу

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

Бесплатные текстуры черного

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

3D визуализация точечных светильников на кирпичной стене в стиле гранж

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

Черный темный фон с серой геометрической формой

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

Текстура стен Темного города

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

Завершение мыслей об использовании темного фона для вашего веб-сайта

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

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

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

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

Темный режим — Визуальный дизайн — iOS — Руководство по человеческому интерфейсу

Тёмный режим

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

Темный режим

Легкий режим

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

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

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

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

Цвета темного режима

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

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

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

Используйте динамические цвета, которые адаптируются к текущему виду. Семантические цвета, такие как разделитель, автоматически адаптируются к текущему виду (руководство см. В разделе «Цвета динамической системы»). Если вам нужен собственный цвет, добавьте актив Color Set в каталог ресурсов вашего приложения и укажите светлый и темный варианты цвета, чтобы он мог адаптироваться к текущему режиму внешнего вида.Избегайте использования жестко заданных значений цвета или цветов, которые не адаптируются.

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

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

Соответствующие инструкции см. В разделе Цвет.

Цвет изображения, значка и символа

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

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

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

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

Материалы

Vibrancy может помочь сохранить хороший контраст текста на темном фоне.

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

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

Чтобы узнать больше о взаимодействии яркости и материалов, см. Материалы.

Преимущества темного фона на вашем веб-сайте

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

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

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

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

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

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

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

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

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

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

Итак, , каковы причины использовать темный фон на вашем сайте?

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

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

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

Выбор идеального фона для вашего сайта

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

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

темных интерфейсов. Хорошее и плохое. Что можно и чего нельзя.

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

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

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

Большинство исследований показали, что темный текст на светлом фоне превосходит светлый текст на темном фоне, т. Е. Его легче читать. В одном известном исследовании «зрительная усталость» была значительно выше, когда испытуемые читали светлые символы на темном фоне по сравнению с темными символами на светлом фоне (Бауэр, Д., Бонакер, М., и Кавониус, К. Р., 1983).

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

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

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

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

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

Компания Breitling выбрала черный фон, чтобы выделить дизайн своих часов.

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

Есть даже такие вещи, как синдром компьютерного зрения (CVS) и «глазной дискомфорт». Согласно исследованию, более 83 процентов американцев используют цифровые устройства более двух часов в день, при этом 60,5 процента сообщают, что испытывают симптомы цифрового перенапряжения глаз.(Переэкспонированные глаза: дилемма цифровых устройств.)

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

Bloomberg Anywhere iOS Apps (Джереми Фуэрст).

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

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

Редактор кода ведущего разработчика Амина Шаха Гилани от Atom.

Пользовательские интерфейсы игрового приложения

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

Когда темный интерфейс работает хорошо

Большинство пользовательских интерфейсов, связанных с развлечениями (Smart TV, игровые консоли, приложения для ТВ и фильмов), как правило, имеют дизайн пользовательского интерфейса в темной тематике — не зря.Большинство мероприятий, связанных с развлечениями, происходят вечером, за ними наблюдают с расстояния 6-10 футов и наблюдают в тускло освещенных комнатах — другими словами, экран соответствует обстановке. Кроме того, красочный контент (например, обложки и промо) резко выделяется на темных пользовательских интерфейсах.

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

Hulu.

Netflix.

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

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

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

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

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

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

Когда темные интерфейсы не работают должным образом

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

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

В этом примере недостаточный контраст некоторых элементов пользовательского интерфейса влияет на пользовательский интерфейс. (Автор GUOHAO.W)

Вот реальный пример того, как , а не использовали пользовательский интерфейс в темной тематике: я был вовлечен в проект B2B SaaS, где генеральный директор был непреклонен, что для того, чтобы «отличаться от других», он хотел пойти с темный пользовательский интерфейс, который соответствовал бренду компании … для всей платформы. За все. После нескольких встреч и сплочения команды дизайнеров и менеджеров по продукту, стоящих за этим делом, мы смогли отговорить его от такого потенциально пагубного решения.

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

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

Пользовательские интерфейсы, аналитика и инфографика

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

Что можно и чего нельзя использовать при использовании темного интерфейса

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

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

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

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

Когда много текста (читать на темном фоне затруднительно)
Когда на экране много смешанного контента
В случае приложений B2B с большим количеством форм, компонентов и виджетов
Когда дизайн требует широкой цветовой гаммы

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

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

• • •

Дополнительная литература в блоге Toptal Design:

Темный режим лучше для ваших глаз?

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

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

Читаемость

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

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

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

Какова мораль этой истории? Для наших электронных книг мы рекомендуем использовать «светлый режим» или темный текст на светлом фоне.

Напряжение для глаз

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

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

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

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

Итак, каков вердикт?

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

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

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

Дизайн в темном режиме: 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 — это OG в мире дизайна темного режима. Их команда веб-дизайнеров всегда использовала черный фон на своих веб-сайтах и в приложениях, чтобы оживить макеты и заставить обложки альбомов «петь».

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

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

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

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

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

Apple AirPod Плюсы

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

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

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

MIT

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

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

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

DeWalt

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

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

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

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

Penn & Teller

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

Оззи Осборн

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

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

Темные фона: Attention Required! | Cloudflare