Сайты с черным фоном: 30 удивительно красивых сайтов с тёмным дизайном

Содержание

Как сделать удачный сайт с темным фоном

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

Сделайте изображения и видео светлее и ярче

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

Применяйте отражения

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

Тщательно подберите цвета

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

Выберите один насыщенный цвет и применяйте его многократно

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

Попробуйте вариант в оттенках серого

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

Все надписи должны читаться

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

Контрастный фон

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

Обратите внимание на отступы между текстовыми блоками

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

Растворите в темном фоне изображение

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

Попробуйте растворить цвета в фоне

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

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

Примените эффект свечения

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

Применяйте текстуры, кисти, паттерны

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

Итоги

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

В качестве толчка и источника вдохновения — к вашим услугам наши подборки сайтов в темных тонах: часть 1, часть 2, часть 3, часть 4.

Удачного творчества!
Ваша Дежурка

Опубликовано в Веб-дизайн, ноября 4, 2011
Метки: вдохновение, веб дизайн, сайт, сайт с темным фоном, стиль, темный фон

�

Дизайн сайта в темной стилистике: да или нет?

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

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

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

Сама тенденция оформления темными тонами появилась в 2018 году. Сегодня эти стили используются в разных сервисах, таких, как Instagram, Youtube и многих других. Операционные системы Apple и Андроид, также встроили затемненный стиль. Такие наработки привлекают людей своей новизной и удобством.

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

Почему темный дизайн?

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

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

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

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

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

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

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

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

1. Проводите эксперименты с цветами.

Когда дело касается оформления, многие дизайнеры останавливают свой выбор на стандартном белом цвете текста и полностью черном фоне. Но лучше всего подобрать другие цвета. Например, сделать темно-серый фон. Многие компании рекомендуют использовать цветовую палитру #121212. При разработке дизайна в графическом редакторе есть инструмент “палитра”, который пригодиться при редактировании или есть альтернативный вариант – воспользоваться одним из онлайн-сервисом.

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

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

Более светлые тона, которые находятся в диапазоне от 200 до 50, лучше сочетаются с темно-серым фоном. Вы всегда можете поэкспериментировать и подобрать подходящий вариант в сервисе Google Material Design. Рекомендуется делать выбор контраста между фоном и текстом примерно так 15:8:1.

2. Делайте расчет на эмоциональное воздействие

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

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

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

3. Предоставляйте свободу выбора

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

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

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

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

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

4. Помните основы

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

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

Другие советы, по дизайну в темной стилистике.

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

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

Готовы разработать дизайн в темном стиле?

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

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

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

46 примеров веб-сайтов с черным фоном, которые работают

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

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

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

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

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

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

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

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

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

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

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

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

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

Лучшие альтернативы черному фону для дизайна веб-сайта в темном режиме

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

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

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

Черный фон делает изображения эффектными

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

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

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

Более темный дизайн веб-сайта может ухудшить читабельность

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

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

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

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

Узнайте, как цвет влияет на веб-дизайн

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

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

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

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

46 примеров оформления сайтов в темном режиме

WeTransfer

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

TCM

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

Saturday Night Live

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

MasterClass

Фотографии известных инструкторов MasterClass выделяются на главной странице из-за впечатляющего черного фона.

Spotify

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

Primex

На своем сложном веб-сайте B2B Primex использует насыщенный темно-синий фон с экраном своего знака для области навигации веб-дизайна в темном режиме. Узнайте больше о редизайне веб-сайта Primex.

Space Needle

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

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

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

Кардиологическая больница Канзаса

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

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

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

SkillSoft

Основная область главной страницы веб-сайта SkillSoft выглядит в темном режиме благодаря темно-синей фоновой панели.

Thor Industries

Thor Industries использует теневое фото автофургонов в главной области главной страницы, чтобы создать темный вид веб-сайта без сплошного черного фона.

Diageo

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

Blizzard

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

Pepsi

На своей целевой странице в темном режиме для продвижения своего шоу Super Bowl LVI Halftime Show команда веб-дизайнеров Pepsi использовала яркий сине-черный фон.

NACCO

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

Vodafone

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

Apple AirPod Pros

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

3M

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

National Geographic

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

Bobby Rowe

Заглавные буквы h2 в темной области веб-дизайна Bobby Rowe действительно поют благодаря графическому черному фону.

Raytheon

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

RISD

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

Penguin

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

Хлопок

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

Impact Roofing

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

Powster

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

Chelsea Moxy

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

Муниципальный

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

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

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

Брене Браун

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

AMA Journal of Ethics

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

MIT

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

Морские пехотинцы США

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

DeWalt

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

Orange Grove

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

Campaign Monitor

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

BMW

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

Кошки

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

Neil Gaiman

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

Penn & Teller

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

Klarna

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

SpaceX

Фотографии, инфографика и текст на веб-странице SpaceX о программе Dragon оживают благодаря угольно-черному фону, как само космическое пространство (без звезд и спутников).

Школа Риджентс в Остине

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

JGMA

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

Оззи Осборн

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

Часто задаваемые вопросы о веб-сайтах с макетами в темном режиме

Когда темный режим стал популярным?

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

Сегодня даже Google предлагает расширение Chrome под названием Night Eye для поклонников темного режима!

Почему темный режим стал тенденцией? Темные сайты хороши? Должен ли мой сайт иметь темный режим?

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

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

Каковы особенности высококонтрастного веб-дизайна?

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

Почему в веб-дизайне так важен достаточный цветовой контраст?

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

Что такое ахроматический цвет?

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

Какие психологические ощущения у людей ассоциируются с черным цветом?

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

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

Темный фон лучше для сайта? Подходит ли черный фон для веб-сайта?

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

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

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

Можете ли вы сделать так, чтобы любой веб-сайт, который вы посещаете, работал в темном режиме?

Да! Если вы используете Chrome, вы можете персонализировать свой опыт просмотра веб-страниц и переводить веб-сайты в темный режим, даже если сайты, на которых вы находитесь, не предназначены для такого отображения. Один из вариантов — использовать ранее упомянутое расширение браузера Night Eye от Google. Вот инструкции для конкретной операционной системы о том, как получить черный фон на посещаемых вами веб-сайтах:

Chrome, Windows 10
Chrome, macOS

Последний раз это сообщение обновлялось 12 апреля 2022 г.

Шаблоны для лучшего UX

Что делает хороший дизайн веб-сайта?

Цифровой брендинг: создание гибкого логотипа для использования в Интернете

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

13 лучших черно-белых веб-сайтов

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

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

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

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

Эта компания, занимающаяся адаптивным дизайном веб-сайтов, использует диагональный дизайн веб-сайта, чтобы намекнуть, в каком направлении вы будете перемещаться по странице. Вместо вертикальной прокрутки Studio Bjork выделяет своих клиентов и их дизайнерские работы, когда вы прокручиваете вправо. Черный фон веб-сайта работает хорошо, поскольку основное внимание уделяется интерактивному опыту, а не письменному контенту.
Черно-белый дизайн веб-сайта: Duft & Co.

Это простая черно-белая целевая страница, на которой вы можете выбрать интересующую вас сторону этого бизнеса. На Duft & Co. вы можете просмотреть их угощения на их сайте Bakehouse или посмотреть меню их Кирпичный ресторан. Чистый макет служит своей цели, направляя клиентов на правильный веб-сайт, а также четко указывает, что эта компания специализируется на двух типах продуктов питания.
Черно-белый дизайн веб-сайта: Studio Grafite

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

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

Агентство Black Sheep стремится поощрять изменения и делать заявления, и мы считаем, что их смелый черно-белый веб-сайт делает именно это. Они остаются верны черно-белому дизайну на всем сайте, добавляя всплески цвета, чтобы подчеркнуть их различные причины. Нам также нравится анимация прокрутки веб-сайта, которая появляется, когда вы изучаете их веб-сайт.
Черно-белый дизайн веб-сайта: Double Barrel

Этот веб-сайт с черным фоном идеально подходит для этого мощного продукта. Устройство Double Barrel претендует на звание идеального испарителя с двумя баррелями масла вместо одного. Этот черный веб-сайт придает этому гладкому продукту дополнительное ощущение мощи.
Черно-белый дизайн веб-сайта: Made By Sofa

Несмотря на то, что Facebook приобрела команду Sofa в 2011 году, они по-прежнему используют свой веб-сайт, чтобы объяснить своим клиентам и пользователям приобретение их предыдущего программного обеспечения и приложений. Простой черно-белый веб-сайт прост и служит своей цели, сообщая о движении Safa своим клиентам.
Черно-белый дизайн веб-сайта: Мелани ДаВейд

Этот веб-сайт с черным фоном на самом деле является портфолио талантливого UX-дизайнера. Мелани ДаВейд создала отзывчивый веб-дизайн, полный контрастов, и использовала цвет, чтобы отделить и выделить свою работу.
Черно-белый дизайн веб-сайта: Гипимотор

Людям, которые обслуживают Феррари и другие классические автомобили, нужен отполированный и привлекающий внимание веб-сайт. Используя черно-белую фотографию красивого автомобиля, Гипимотор излучает изысканность и класс. Дизайн также имеет наложение черного фона, чтобы придать ему больше силы и авторитета.
Черно-белый дизайн веб-сайта: агентство Salt & Pepper

С таким названием, как Salt & Pepper, неудивительно, что эта компания по разработке адаптивных веб-сайтов выбрала для себя черно-белый веб-сайт. Они специализируются на технической поддержке и настраиваемых функциях веб-сайтов, чтобы помочь клиентам по всему миру запускать проекты по разработке.
Черно-белый дизайн веб-сайта: Каменная известь

Этот черно-белый дизайн веб-сайта был разработан для Stonelime, испанской компании, которая использует инновационные материалы для отделки помещений. Дизайнеры Homeland Studio проделали прекрасную работу, используя разные оттенки серого на заднем плане, чтобы имитировать материалы дизайна, которые использует Stonelime.
Черно-белый дизайн веб-сайта: Airnauts

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

Хотя технически это не черно-белый веб-сайт, он имеет схожие характеристики, которые нам нравятся. Этот веб-сайт с темным фоном сводит текст к минимуму и использует розовые слова и цветовые акценты, чтобы выделять важную информацию при прокрутке.
Позвольте нашим веб-дизайнерам из Де-Мойна помочь вам выделиться с помощью адаптивного черно-белого веб-дизайна
Как компания по разработке адаптивных веб-сайтов в Де-Мойне, мы всегда помогаем компаниям найти правильную цветовую схему для своих новых веб-сайтов. Если вашей команде нужен адаптивный веб-дизайн, который привлечет внимание и выведет ваш бизнес на новый уровень, обратитесь к нашей команде веб-дизайнеров уже сегодня!
Категории:
Веб-дизайн, Веб-разработка
Мэллори Кейтс
Мэллори получила двойную специальность, получив степень бакалавра наук. по маркетингу и менеджменту Университета штата Айова. Она пишет материалы, ориентированные на SEO, создает эффективные кампании цифрового маркетинга и проводит кампании в социальных сетях и SEO, чтобы вернуть трафик на веб-сайты клиентов. Мэллори всегда стремится узнать больше о последних тенденциях в SEO и обо всем, что связано с цифровым маркетингом, и любит решать новые задачи. Она была отмечена в нескольких блогах за ее опыт в социальных сетях и контент-маркетинге.