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

Как и когда создавать сайт с черным фоном

Автор:

Елизавета Гуменюк

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

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

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

Но зачем вам это нужно? Когда настает правильное время создать черный фон для вашего сайта? Я собираюсь рассказать обо всем этом и многом другом в этом посте, и справедливое предупреждение: это станет действительно темным, затем еще темнее, и наконец, этот мрачный оттенок, который еще темнее, чем # 555 (ваши коллеги-разработчики знают, что я говорю).

Итак, без лишних слов, давайте исследовать эту черную материю дальше!

Немного о дизайне с черным фоном

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

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

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

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

На практике это звучит так:

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

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

В чем проблема с черным цветом?

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

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

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

Как видите, проблема с черным цветом фона реальна.

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

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

• Портфолио
• Студии дизайна
• Эксклюзивные презентации продукции
• Нетрадиционный контент

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

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

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

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

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

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

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

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

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

• Выделенные разделы
• Хедер, футер, навигация,
• Комментарии
• Всплывающие окна

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

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

Вывод

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

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

Всем успешной работы!

Источник

Темный веб-дизайн.

Читайте на Cossa.ru

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

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

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

Недавний опрос показал, что светлые темы оформления сайтов по душе основной части веб-серферов (47% опрошенных). Главная причина этого — читабельность. Большинству людей не нравится читать светлый текст на темном фоне, потому что «устают глаза», что делает опыт посещения таких сайтов не особенно приятным.

С другой стороны, 10% респондентов отметили, что им всегда больше нравились сайты с темным фоном, а еще 36% посчитали, что удачность или неудачность темной темы оформления напрямую зависит от типа самого сайта.

Так какой же ответ верный? Выбор субъективен.

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

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

Больше свободного пространства

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

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

Шаблон Black Estate часто встречается в сети. Уникальным его делает именно эффективное использование свободного пространства для выделения тех или иных элементов.

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

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

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

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

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

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

Текстовое свободное пространство

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

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

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

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

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

Контрастность текста

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

Поиск наилучшей контрастности означает баланс «темноты» фона и «светлоты» текста.

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

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

Работа с шрифтами

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

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

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

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

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

Минимальные цветовые схемы

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

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

Старайтесь использовать один или два цвета. Чтобы добавить новый цвет, попробуйте темный фон.

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

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

Переключатель стилей

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

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

Для этого понадобится, собственно, два стиля — один для дефолтного темного шаблона, второй для альтернативного светлого.

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

Элегантный темный дизайн

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

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

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

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

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

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

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

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

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

Креативный темный дизайн

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

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

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

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

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

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

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

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

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

Даже между «Exhibit 01» и «Exhibit 02» больше свободного пространства, чем обычно можно встретить на подобных сайтах.

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

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

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

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

Заключение

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

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

Источник: Webdesigner Depot

Как и когда создавать сайт с черным фоном | Фриланс в России

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

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

Но зачем вам это нужно? Когда настает правильное время создать черный фон для вашего сайта? Я собираюсь рассказать обо всем этом и многом другом в этом посте, и справедливое предупреждение: это станет действительно темным, затем еще темнее, и наконец, этот мрачный оттенок, который еще темнее, чем # 555 (ваши коллеги-разработчики знают, что я говорю).

Итак, без лишних слов, давайте исследовать эту черную материю дальше!

Немного о дизайне с черным фоном

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

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

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

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

На практике это звучит так:

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

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

В чем проблема с черным цветом?

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

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

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

Как видите, проблема с черным цветом фона реальна.

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

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

• Портфолио
• Студии дизайна
• Эксклюзивные презентации продукции
• Нетрадиционный контент

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

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

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

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

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

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

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

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

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

• Выделенные разделы
• Хедер, футер, навигация,
• Комментарии
• Всплывающие окна

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

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

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

Вывод

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

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

Всем успешной работы!

Черный фон-цвет после элемента html

У меня на сайте возникла проблема с цветом фона. Код между тегами html работает отлично

<!DOCTYPE html>
<html>
//...
</html>

Чтобы получить желаемый результат. HOWEVER, если экран слишком велик, чтобы вместить bage, черный цвет фона появляется внизу, чтобы занять это пространство:

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

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

QUESTION: есть ли способ в CSS (или Javascript) изменить цвет по умолчанию черной области на изображении (которая находится после элемента HTML)?

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

Следующий веб-сайт является примером:
https:/ / www. phpbb.com / styles / demo/3.1 / board/index. php? style=1246

если вы прокрутите страницу назад с веб-сайта и используете опцию google chromes «inspect», вы увидите, что html не занимает всю страницу, а черная часть внизу-это что-то отдельное. Я хотел бы знать, как изменить эту черноту внизу на другой цвет (например, белый).

html

css

background-color

1

Здесь вы видите свой живой пример один раз с активным правилом background-color на body и без него. И вы видите, что именно body ‘s background-color вызывает черный цвет.

Активный :

Не активен :

Если вы хотите сохранить body черным, то установите background-color вашего тега html в нужный вам цвет (в данный момент он прозрачен, поэтому пропускает черный цвет тела).

Для вашего желаемого Белого вы бы сделали что-то вроде:

html {
  background-color:#ffffff;
}

Я не знаю, можете ли вы изменить значение по умолчанию, но если нет, то вы можете просто добавить !important сразу после цветового кода.

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

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

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

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

Один из опросов, результаты которого были опубликованы давным-давно, в 2009 году, на ProBlogger уже тогда выявил довольно интересные моменты. Читателей спрашивали, какого рода фон предпочитают в блогах. Почти половина из них ответили, что светлый предпочтительнее – и это вполне разумно, поскольку в блогах мало что есть, помимо текста. Поэтому аспект читабельности перевесил всё остальное. Тем не менее, 10% респондентов ответили, что предпочитают тёмные фоны, и более трети отметили, что выбор должен зависеть от характера блога и его содержания. Дизайнером не следует пренебрегать мнением столь большой части пользователей при поиске конструктивных решений. Более того, в случае меньшей концентрации текста в цифровом проекте вроде сайта или мобильного приложения процентная доля людей, предпочитающих тёмные цвета, может оказаться значительно больше. Это хороший пример, показывающий важность исследований и опросов. Их проведение должно быть важной частью процесса разработки. Зная, чего хотят пользователи или, по крайней мере, чему они готовы, поможет вам выйти за пределы традиционного видения.

Научные исследования, проведённые Ричардом Холлом и Патриком Ханной, подчёркивают важность визуального восприятия фона и его влияния на производительность проекта. Проанализировав результаты экспериментов в сфере читабельности и эффективности веб-страниц, которые проводились учёными ранее, авторы подвели итог: «Они обнаружили, что комбинации с положительной полярностью приводят к более высокой производительности сайтов (речь о тёмном тексте на светлом фоне), а более высокий контраст цветовых решений приводит к дальнейшему росту эффективности ресурса». Поэтому тёмный фон может быть столь же эффективен, как и светлый в случае, если другие аспекты, в частности, контрастность и разборчивость элементов макета спроектированы должным образом. Исследование содержит много интересной и полезной информации, полученной на основе пользовательского тестирования различных цветовых комбинаций и их эффективности, поэтому рекомендуем его к ознакомлению дизайнерами.

Аспект читаемости

Один из самых известных гуру дизайна пользовательских интерфейсов Якоб Нильсен отметил: «Используйте цвета с высоким контрастом между текстом и фоном. Оптимальная разборчивость требует использования тёмного текста на белом фоне (так называемый позитивный текст). Белый текст на чёрном фоне (негативный текст) хорош почти в той же степени. Несмотря на то, что коэффициент контрастности в обоих случаях одинаковый, инвертированная цветовая схема всё же немного замедляет чтение. Читаемость всегда страдает в случаях, когда текст светлее привычного чёрного, а фон темнее всеми любимого чистого белого».

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

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

• Тёмный фон поглощает некоторую часть света от других элементов, так что необходимое наличие достаточного количества пустого пространства, «воздуха» между элементами;
• Выверенная длина линии текста может сделать его более читаемым, удобоваримым для пользователей. Продумывайте размеры абзацев, заголовков;
• Тёмный цвет не всегда означает чёрный, поэтому в каждом конкретном случае разработки дизайна важно выделить время на эксперименты с различными тёмными оттенками фона и цветов других элементов, составляющих содержание страницы;
• Эффекты тени, градиентов и свечения могут влиять на читаемость;
• Шрифты без засечек (sans-serif), как правило, являются более разборчивыми. Вычурные сложные шрифты могут выглядеть более элегантными, но воспринимаются труднее для чтения.

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

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

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

Одно из ранних исследований фактора контрастности как средства увеличения читаемости привело к такому выводу: «Используя тёмный фон, убедитесь, что у вас нет слишком ярких надписей: понизьте тон белого цвета букв на светло-серый или другой тускловатый цвет для минимизации бликов и чрезмерной контрастности. Уже 5% серого цвета помогут сократить блики от яркого белого. Примечательно, что такой текст будет по-прежнему восприниматься как белый, но читаться гораздо лучше. Также сделайте шрифт жирным, это позволит ему лучше выделяться и не быть «съеденным» окружающей темнотой». Эксперименты с этими особенностями читаемости помогут выявить оптимальные варианты тонировки цветов и обеспечить эффективный, естественный контраст между элементами на странице.

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

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

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

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

Согласно всем пунктам, описанным выше, мы можем подвести итог: использование тёмного фона может принести весомые выгоды, среди которых:

• Стиль и элегантность позиционирования продуктов;
• Ощущение таинственности;
• Роскошный и престижный внешний вид;
• Широкое поле применения контраста;
• Поддержка визуальной иерархии;
• Глубина визуального представления контента;
• Внешняя привлекательность.

Выводы и рекомендации

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

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

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

Перевод: https://goo.gl/Aj2c60

Фон для сайта темный — 60 фото для презентаций и картинок на рабочий стол

Фон для сайта

Черная доска фон

Черная поверхность

Темно серые обои

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

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

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

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

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

Черное полотно

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

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

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

Черный кирпич стена

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

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

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

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

Стильный фон

Темный фон

Темный фон

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

Стильный фон

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

U963 st9

Темно-синий фон для фотошопа

Черный паттерн

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

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

Фоновое изображение для шапки сайта

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

Темный фон

Фон для визитки

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

Фон для сайта бесшовный темный

Черный стол текстура

Темный фон

Атомный фон

Темные текстурные обои

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

Темный фон

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

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

Фон для сайта

Темный фон

Фон в темных тонах

Фон для сайта

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

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

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

Черная абстракция

Атомный фон

Черный металлик «черное зеркало» (638)

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

Тёмный фон для фотошопа

Carbon Fiber 4k

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

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

Металлические детали текстура

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

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

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

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

Дизайн сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

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

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

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

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

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

Содержание

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

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

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

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

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

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

Блейк Аллен

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

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

Duft & Co.

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

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

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

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

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

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

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

Томас Ритм

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

Пустота

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

Обычный

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

Kruppa Hosk

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

Пленки для навесов

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

КОНТРАТЕР

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

GT Супер

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

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

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

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

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

Ложка вилочная

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

DIA

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

Саймон Фиппс

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

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

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

Осужденные

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

Титуан Матис

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

RUKI Product Planner

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

Printworks Лондон

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

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

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

Ник О’Рирдон

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

Дэвид Ариас

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

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

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

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

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

GT Haptik Шрифт

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

черных сайтов / Темный дизайн веб-сайтов: 35+ примеров в 2021 году

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

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

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

35 фантастических примеров черных сайтов

Вот несколько замечательных примеров, которые мы обещали.

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

1. Канашкевич Митчелл

2.Дев арт

3. Джек Дэниэлс

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

4. Pasticceria Adami

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

5. Divi с шаблоном цифровых платежей

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

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

Щелкните здесь, чтобы получить скидку 10% на Divi с темным оформлением до июня 2021 г.

6. ​​Astra — Адаптивная тема для электронной коммерции

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

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

Зайдите на стартовые сайты Astra на веб-сайт Prestige Black

7. Rhapsody — Многоцелевая тема WordPress

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

Ознакомьтесь с темой Rhapsody

8.KingGym — тема Magento для фитнеса, тренажерного зала и спорта

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

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

Узнать больше о KingGym Magento Theme

9. Kallyas — адаптивная многоцелевая тема WordPress

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

10. HotDot

11. Орегон Гридирон

12. Велти

13.Parallax Pro от Genesis StudioPress

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

Оцените Parallax Pro

14. Неве с сайтом для начинающих фотографов

Neve от ThemeIsle — еще одна тема WordPress с безграничными возможностями, но стартовые сайты Photographer проводят ее по пути черного минимализма.Проверьте это в демонстрации ниже.

Посмотрите живую демонстрацию и получите скидку 10% только до июня 2021 года (эксклюзивно для CollectiveRay)

15. Minimalize — Одностраничная многоцелевая тема WordPress

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

16. Ритмичный HTML-шаблон

Если вы ищете HTML-шаблон, на котором можно строить, этот выигрышный шаблон Awwward — отличный выбор.

17. Нериссон

18. Kaber Tech

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

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

21. Райан Малфорд

22. Агентство талантов Vitamin

23. Книга Бород

24. Vool

25. Умар Шейх

26. BlackBerry

27.Ламборджини

28. Больше сна

29. Технология существ

30. EXO — Тема для творческих и корпоративных целей

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

Увидеть Exo в действии

31. Металл — шаблон бизнес-шаблона «Строительство и строительство для мобильных устройств»

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

Металл — отличный пример такого использования.

Нажмите здесь, чтобы узнать больше о Metal

32. StyleShop

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

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

33. Uno — WordPress тема для творческой фотографии

У

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

Посмотреть демо Uno

34. PhotoLux — Тема WordPress для фотографического портфолио — Тема WordPress для фотографического портфолио

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

Посетить PhotoLux Demo

35. RSW — Адаптивная полноэкранная студия для WordPress

RSW (Адаптивная полноэкранная студия для WordPress) — мощная тема для фотографов и творческих художников, включающая светлый и темный варианты темы, поддерживающие многоцветную настройку элементов темы с помощью палитры цветов.

См. Демонстрацию RSW

Черные сайты: истинное чувство трезвости и серьезности

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

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

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

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

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

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

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

Вот некоторые соображения при рассмотрении дизайна веб-сайтов в черном цвете:

1. Сделайте текст читабельным

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

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

2. Проанализировать бренд

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

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

3. Выберите правильные шрифты

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

Цвет шрифта также важен.

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

4. Используйте больше пробелов

Увеличение пробелов — еще один отличный способ улучшить читаемость темных веб-сайтов. Термин «пробел» относится к «пустому» пространству на странице и является наследием печатных СМИ.Несмотря на то, что мы говорим здесь о черных веб-сайтах, пробелы все еще актуальны.

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

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

5. Изображения исключительного качества

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

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

6. ​​Используйте отражения в изображениях

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

7. Поместите как можно меньше содержимого

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

Действительно ли темный дизайн влияет на читабельность?

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

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

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

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

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

Какие типы веб-сайтов лучше всего подходят для темного дизайна?

Фотографии и арт-сайты

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

Это отличный список сайтов для фотографов и художников.

Сайты электронной коммерции и магазинов

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

Хотите создать сайт электронной коммерции с использованием черного дизайна?

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

Черные сайты для минималистичных страниц

Если на вашем сайте мало контента, вы можете попробовать темный дизайн сайта.

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

Подробнее: 30+ лучших бесплатных и премиальных минимальных тем WordPress

HotDot, Velthy и OregonGridiron, представленные в нашем списке выше, являются двумя очень хорошими примерами минималистичных веб-сайтов, которые используют темный дизайн для большого эффекта:

Хотите создать минималистичный веб-сайт с использованием темного дизайна?

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

Отличное использование шрифтов на черных веб-сайтах

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

Бренды, которые использовали черные сайты

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

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

Lamborghini и BlackBerry (представленные в нашем списке) — это фантастические дизайны от крупных брендов, которые заставили черные веб-сайты работать на них.

Хотите создать темный веб-дизайн для своего бренда?

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

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

Хотите использовать темный или черный дизайн на своем следующем веб-сайте?

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

Часто задаваемые вопросы

Что такое черные сайты?

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

Что означают черный или темный цвет в теории цвета?

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

Заключение по чёрному / тёмному дизайну сайта

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

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

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

Есть мнение о черных веб-сайтах или темном веб-дизайне? Расскажите об этом в комментариях ниже!

Об авторе

Аджит — старший веб-разработчик в WordPressIntegration — поставщик услуг от PSD до WordPress, где он отвечает за написание пользовательского кода JavaScript в процессе преобразования.В свободное время он пишет на различные темы, связанные с JavaScript, WordPress и веб-дизайном, чтобы поделиться своим опытом работы с другими.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

25 Темных и удивительных веб-сайтов

Эта страница может содержать ссылки на наших спонсоров или партнерские ссылки. Учить больше.

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

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

Джастин Финли

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

Инес Мария Гамлер

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

Sage

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

Тобиас ван Шнайдер

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

Заказ

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

Ashcroft

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

Статическое интерактивное

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

PMD Group

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

Haptic

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

Проект беженцев

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

Co & Co

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

McChillin

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

PROWEB

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

Эван Эккард

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

Джеймс Корчак

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

Дэвид Хеллман

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

Aluxion

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

hellohello

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

TM

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

Bind

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

Visual Soldiers

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

Cinemateket

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

Parallel

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

Quoit Works

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

Nimax

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

Заключение

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

Дизайн в темном режиме: 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

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

Оззи Осборн

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

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

причин создания веб-сайта с черным фоном

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

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

  что-то разные и интригующие, нравится цвет черный  

.

Но зачем оно вам? Когда вам нужно создать сайт с черным фоном? Я собираюсь рассказать обо всем этом и многом другом в этом посте и честно предупредить: он станет действительно темным, затем еще темнее и, наконец, темным оттенком, который даже темнее, чем # 555 (мои коллеги-разработчики знают, что я я о чем).

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

Немного о дизайне черного фона

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

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

  Вот что вам нужно знать: дизайнеры должны подчеркивать важные элементы.  

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

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

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

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

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

На практике это звучит так:

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

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

В чем проблема черного цвета?

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

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

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

Как видите, проблема с черным цветом фона вполне реальна.

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

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

• Веб-сайты портфолио,
• Веб-сайты дизайн-студии,
• Эксклюзивные презентации продуктов,
• Нетрадиционное содержание.

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

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

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

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

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

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

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

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

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

• Выделенные разделы,
• Верхний / нижний колонтитул / навигация,
• Комментарии,
• Всплывающие окна.

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

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

Заключение

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

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

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

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

Примеры соответственно:

• https://www.apple.com/mac-pro/,
• http://www.formigari.it/,
• https://uppertodo.com/,
• https://www.spotify.com/,
• http://culture.basicagency.com/,
• https: // ninjatune.net / 2017 /,
• https://culture.doberman.co/,
• http://www.tramont.in/,
• https://20jahre.stimmt.ch/,
• https: // www.fiftythree.com/paste,
• http://www.ouiwill.com/,
• https://www.strv.com/,
• https://overclothing.com/,
• https: / /www.weareenvoy.com/.

Ранее опубликовано на https://kolosek.com/a-website-with-a-black-background-design/

Истории по теме

Теги

Присоединяйтесь к Hacker Noon

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