Как и когда создавать сайт с черным фоном
Автор: Елизавета Гуменюк
Просто люблю писать, переводить и давать людям возможность читать интересный контент. И пусть я не всегда идеальна — есть к чему стремиться!!!
Черный всегда был — если не самым популярным цветом дизайна — цветом, о котором дизайнеры говорят больше всего. Это сложный, энергичный, таинственный, элегантный, мощный, стильный и полная противоположность белому, используемого по умолчанию.
Теперь мы хотим сосредоточиться на том, что это полная противоположность белому (я буду говорить об этом дальше в тексте), потому что это то, что вам нужно и что вы хотите в дизайне—что-то другое и интригующее, например, черный цвет.
Но зачем вам это нужно? Когда настает правильное время создать черный фон для вашего сайта? Я собираюсь рассказать обо всем этом и многом другом в этом посте, и справедливое предупреждение: это станет действительно темным, затем еще темнее, и наконец, этот мрачный оттенок, который еще темнее, чем # 555 (ваши коллеги-разработчики знают, что я говорю).
Итак, без лишних слов, давайте исследовать эту черную материю дальше!
Немного о дизайне с черным фоном
Конечная цель дизайнеров — сделать контент сайта привлекательным и выделяющимся из подобных. Однако еще большая цель (если не самая главная) — создать веб-сайт, который служит его цели. Вот что вам нужно знать: дизайнеры должны подчеркивать важные элементы. Это их цель почти во всем, что они делают, и их задача — создать иерархию в этом акцентировании, чтобы выделить наиболее важные детали на веб-сайте.
Черный идеально подходит, если вы хотите подчеркнуть что-то на фоне любого другого цвета, особенно на белом. Белый цвет представляет собой пустой старт в нашем опыте (он обозначает дневной свет, чистую бумагу, страницу без контента и т. д.), в то время как цвет черный считается ничем иным, как любым другим цветом, например контентом. Вот почему белый цвет является первым выбором для фона веб-сайта.
С другой стороны, черный цвет «самый тяжелый» из всех, и из-за этого нам может быть трудно выделить другие элементы.
Однако вы можете использовать эту черноту, чтобы подчеркнуть другой контент. Возможно, вы заметили, что элементы, имеющие черный фон, всегда кажутся меньше. Это впечатление вызвано психологическим эффектом, который имеет черный цвет у людей: мы склонны рассматривать черный как отсутствие цвета с потенциально чем-то в нем.
Самая большая проблема пользовательского опыта с темным фоном по-прежнему удобочитаемость, которая заметно уменьшается, когда мы используем темный фон, причем не только потому, что нашим глазам труднее заметить разницу в цвете, но и из-за света экрана, который создает белый отблеск.
На практике это звучит так:
- Не используйте черный цвет, если у вас слишком много контента.
- Будьте особенно осторожны с текстом на черном / темном фоне.
- Вы можете свободно использовать черный фон для изображений и графических элементов.
- Хорошо использовать черный фон для небольших элементов, показывая их в другом цвете.
По большому опыту, люди обычно считают сайты с темным фоном ненадежными, потому что они нетрадиционны. Тем не менее, люди, которые являются художественными, даже немного, находят такой выбор интересным и заманчивым. Итак, в конце концов, все дело в аудитории.
В чем проблема с черным цветом?
Главная из них заключается в том, что люди считают его менее привлекательным, чем другие цвета.
Люди думают о нем как о депрессивном, пессимистичном, серьезном, грустном и цвете негатива, и, видя, что мы реагируем на такие вещи бессознательно, мы мало что можем сделать, чтобы изменить это.
Было доказано снова и снова, что люди ожидают увидеть белый цвет, когда они приходят на веб-сайт, и они чувствуют себя знакомыми и в безопасности с ним. Вот почему эксперты UX не слишком заинтересованы в смене стандартного белого на нетрадиционный черный.
Как видите, проблема с черным цветом фона реальна.
Итак, есть ли место для черных фонов в дизайне?
В мире дизайна нет строгих правил о том, что вы можете и не можете сделать, и то же самое касается черного цвета.
- Портфолио
- Студии дизайна
- Эксклюзивные презентации продукции
- Нетрадиционный контент
Советы по использованию черного цвета в дизайне
Прежде всего: даже при использовании черного фона важно создать много «белого пространства», потому что черная поверхность визуально меньше. Белый фон также служит «разрывом», который является вещью, отсутствующей на темном фоне. Также важно более тщательно проверить удобство использования. По опыту, вы никогда не должны использовать тонике начертания шрифта, и он всегда должен быть на 2 или 3 пикселя больше, чем тот же шрифт на белом фоне.
Как уже упоминалось, самая большая проблема с черным фоном — читаемость, и каждый дизайнер должен знать, как с ней обращаться (подсказка: увеличение размера шрифта, кернинг).
При выборе темных фонов в качестве базы вам нужно помнить, что шанс для вас использовать обычные, изученные элементы дизайна снижается.
Помимо того, что дизайнеры должны думать немного сильнее об обычных элементах, они также должны приложить усилия, чтобы сделать контент более интересным и эффекты более творческими.
На что вам нужно обратить внимание, так это то, какие цветовые оттенки вы используете. Это касается того, как вы всегда должны использовать тонированный черный цвет в дизайне и что этот оттенок должен исходить из основного цвета, который вы используете. В примерах, которые добавлены, используются тонированные и истинные черные (# 000), поэтому я думаю, что идея не является обязательной.
Идея оттенить базовый цвет исходит от природы, где очень трудно увидеть оттенки #000000 и #ffffff (не только из-за формата).
Другая проблема заключается в том, что ночные режимы используют именно эту «проблемную» компоновку (черный фон). Каждое расширение браузера и инструмент для оптимизации в темном окружении предлагает возможность использовать темный фон и белый текст. Кроме того, если есть возможность изменить окружающий цвет в приложении, всегда есть вариант черного фона.
Ситуации, в которых вы всегда можете использовать черный фон
Этот пост может быть о сайтах с черным фоном, но хочется затронуть пару элементов, которые отлично работают с черным фоном. Скорее всего, вы будете создавать эти элементы в какой-то момент, так что все вышеперечисленное наверняка пригодится. Элементы, о которых я говорю, это:
- Выделенные разделы
- Хедер, футер, навигация,
- Комментарии
- Всплывающие окна
Помните, когда я сказала, как в дизайне, выделение играет огромную роль, и черный действительно может помочь вам сделать это правильно. Черный фон в хедере не так уж и распространен, но и это не удивительно. Футер также может быть темнее, потому что хедер и футер символизируют края контента веб-сайта, и это может быть довольно удобным выбором для их окраски в более темный цвет.
То же самое относится и к другим элементам, которые были упомянуты: разделы, комментарии и всплывающие окна.
Вывод
Если вам удастся найти нужное место и вовремя использовать черный фон, то делайте это. Однако имейте в виду, что эти возможности случаются редко, и если вы упустите свой шанс, вам, вероятно, нужно будет долго ждать следующего подходящего момента, чтобы сделать это.
Вам лично может нравиться черный цвет (в этом нет ничего плохого), но вы не должны быть дизайнером, который использует черный во всех своих проектах: настоящие дизайнеры знают, как распознать время и место для него.
Всем успешной работы!
Темный веб-дизайн. Читайте на Cossa.ru
Несмотря на визуальный эффект темных тем оформления, многие дизайнеры боятся использовать мрачные тона, чтобы не отпугнуть пользователя.
Существует мнение, что если сайт выполнен в темных тонах, это негативно сказывается на его читабельности и он становится менее привлекательным для читателей.
Кроме того, темный дизайн оставляет меньше возможностей для применения традиционных элементов оформления веб-страниц.
Webdesigner Depot дает несколько советов, которые помогут сделать сайт с темным дизайном востребованным более широкой аудиторией, в то же время никак не ограничивая дизайнерскую креативность.
Недавний опрос показал, что светлые темы оформления сайтов по душе основной части веб-серферов (47% опрошенных). Главная причина этого — читабельность. Большинству людей не нравится читать светлый текст на темном фоне, потому что «устают глаза», что делает опыт посещения таких сайтов не особенно приятным.
С другой стороны, 10% респондентов отметили, что им всегда больше нравились сайты с темным фоном, а еще 36% посчитали, что удачность или неудачность темной темы оформления напрямую зависит от типа самого сайта.
Запускай таргетированную рекламу с МегаФон Таргетом и получай 100% кешбэк за три месяца
Самостоятельно настраивай рекламу и продавай тем, кто:
- Уже интересуется похожими товарами и услугами;
- Регулярно бывает рядом с вами;
- Заходит на сайты конкурентов, получают звонки и SMS.
Размещай рекламу там, где ее заметят: SMS и MMS-рассылки, мобильные баннеры, реклама в мессенджерах, обзвон и e-mail-рассылка!
Попробовать →
Реклама. ПАО «МегаФон». ИНН 7812014560.
Так какой же ответ верный? Выбор субъективен.
Учитывая достаточно большой процент людей, которые вполне терпимо относятся к темным сайтам, а иногда и вовсе предпочитают именно такой стиль оформления, веб-дизайнеры просто обязаны учиться тому, чтобы создавать эффективные темные образцы дизайна для самих себя и клиентов.
Это значит, что нужно убедить «адептов светлых тонов» в том, что темный дизайн может быть более читабельным и дружественным пользователю, чем их любимые светлые сайты.
Больше свободного пространства
Эффективное использование пустого пространства важно для любого типа дизайна, однако для сайтов с темным фоном это просто необходимо.
Темный дизайн обычно выглядит «тяжелым», и если такой сайт еще и выглядит захламленным, то впечатление тяжеловесности только усилится.
Взгляните на популярные образцы темного веб-дизайна, представленные ниже, и обратите особое внимание на эффективное использование свободного пространства для выделения нужных элементов.
Шаблон Black Estate часто встречается в сети. Уникальным его делает именно эффективное использование свободного пространства для выделения тех или иных элементов.
Вокруг логотипа много свободного пространства — это первое, что бросается в глаза посетителю сайта. Затем его внимание привлекает главный контент страницы и бутылка справа. Как можно заметить, свободное пространство весьма эффективно использовано для выделения текста надписи на бутылке и заголовка над главным контентом страницы.
Основное свободное пространство обрамляет связанный контент и сопутствующие изображения шаблона Tictoc. Двигаясь вниз по странице, мы видим все меньше пустого пространства, что заставляет нас внимательнее относиться к представленному контенту.
Идея здесь в том, что свободное пространство постепенно ведет пользователя к концу страницы.
Темный фон добавляет дизайну глубины. Поскольку сайт так сильно зависит от наличия свободного пространства, то без креативного эффекта черного фона он выглядел бы куда менее интересно.
В шаблоне сайта Mark Dearman свободное пространство распределено равномерно. Пустое пространство, окружающее каждый элемент портфолио, позволяет контенту свободно дышать. Кроме того, этот прием позволяет читателю передохнуть, перед тем как перейти взглядом к следующему элементу.
Большое количество пустого пространства очень важно для темного дизайна, поскольку оно помогает избежать захламления страницы, но и выделяет важные элементы, добавляя при этом элегантности всей композиции сайта.
Текстовое свободное пространство
В связи с тем, что именно из-за читабельности больше всего переживают противники темных фонов, дизайнерам следует приложить дополнительные усилия к самому тексту.
Как и в дизайне вообще, улучшения читабельности темных сайтов можно добиться, увеличив пустое пространство путем регулировки размера параграфов, кернинга и высоты строки (leading).
Ниже представлен пример, который облегчает понимание той разницы, что присутствует при близком расположении строк текста на темном и светлом фоне.
Еще один способ улучшить читабельность текста при использовании темного фона — увеличение размера шрифта. Увеличение шрифта также означает большее количество свободного пространства на странице. Чем больше буквы, тем больше пустого места будет вокруг них и между ними.
Например, буква на картинке ниже имеет тем больше свободного пространства вокруг себя, чем больше она становится. При выборе типографики для нового сайта уделите время тестированию шрифта, чтобы понять что текст разборчив и легко читается. Если выяснится, что дела с этим обстоят не очень хорошо, попробуйте увеличить размер шрифта и взгляните, стало ли лучше.
Контрастность текста
Многие согласятся с тем, что самые неудобные для восприятия темные сайты вызывают раздражение и боль в глазах. Обычно тому виной слишком большая или, наоборот, недостаточная контрастность.
Если вы находитесь в черной комнате, то внезапно включенный свет вряд ли будет вам приятен. Но если смотреть на мягкий свет в чуть менее темной комнате, то все будет отлично. Тот же принцип вполне применим к веб-дизайну.
Поиск наилучшей контрастности означает баланс «темноты» фона и «светлоты» текста.
Ниже преставлена грубая инструкция, демонстрирующая, как работает контрастность между текстом и фоном. Обратите внимание, что по мере осветления фона то же самое происходит и с текстом.
Чтобы найти наилучший баланс, поэкспериментируйте с разными оттенками. Обычно лучшего результата удается добиться, когда фон не совсем черный, а текст не совсем белый.
Работа с шрифтами
Шрифты играют в дизайне большую роль, и над ними следует хорошенько подумать при использовании темного шаблона оформления сайта. На картинке ниже представлен шрифт в 14 пунктов на темном фоне в двух вариантах: с засечками и без.
Очевидно, что шрифт без засечек более читабельный. Но несмотря на это большое количество дизайнеров все равно выбрали бы шрифт с засечками из-за его большей элегентности.
Весь фокус в том, чтобы писать шрифтом с засечками только большой текст, так, чтобы появлялось большее свободное пространство вокруг букв, что сделает текст более разборчивым.
Скриншот ниже принаджелит уже обсуждавшемуся в этой статье сайту. На нем используются как шрифты с засечками, так и без них, но сделано это по-умному.
Болший текст, к примеру, в заголовках новостей, навигациях и хедерах набран шрифтом с засечками для большей элегантности. А для лучшей контрастности и читабельности основной текст набран обычным шрифтом без засечек.
Минимальные цветовые схемы
Чтобы добиться чистого и незагроможденного внешнего вида своего темного дизайна, дизайнеры всегда должны стремиться использовать минимальные цветовые схемы.
Ниже представлено несколько примеров, которые иллюстрируют то, как слишком нагруженные цветовые схемы вредят темным сайтам из-за своей слишком резкой контрастности.
Старайтесь использовать один или два цвета. Чтобы добавить новый цвет, попробуйте темный фон.
Однако — факт, что многие темные сайты используют куда как более яркие цветовые схемы, так что это правило частенько нарушается, но делать это можно только при использовании правильных техник.
В общем случае же цвет часто является фактором, перегружающим сайт. Поскольку темные сайты уже обладают хорошей глубиной дизайна, будьте осторожны с цветом.
Переключатель стилей
В то время как мы уже обсудили кучу хороших практик для улучшения внешнего вида темных сайтов, есть еще один простой способ, который поможет удовлетворить нужды всех без исключения пользователей без всяких усилий.
Обязательно реализуйте переключатель стилей для того, чтобы пользователи всегда имели возможность видеть привычный темный текст на светлом фоне.
Для этого понадобится, собственно, два стиля — один для дефолтного темного шаблона, второй для альтернативного светлого.
По этому поводу есть отличный туториал на Site Point. Вместо использования «оранжевой», «голубой» и «белой» версий стилей, которые в нем упомянуты, просто возьмите «светлый» и «темный» стили.
Элегантный темный дизайн
Темный цвет может быть глубоким, авторитетным и сильным и часто выглядит элегантно там, где он уместен. Представляем вашему вниманию несколько техник придания элегантности темному дизайну.
Сайт Larissa Mee использует для фона простой шаблон в винтажном стиле, задавая тон элегантности. Другие причудливые особенности оформления придают дизайну оригинальности.
Эта техника может использоваться для различных сайтов. Винтажные или классические шаблоны и текстура могут создать впечатление элегантности и современности.
Большинство людей ассоциируют винтажные шаблоны с чем-то высококлассным, так что сделать подобный сайт, используя эту технику, довольно просто.
Сайт Depth Core обладает очень чистым дизайном с темным фоном, который добавляет стиля и класса. Кроме того, в дизайне чувствуется авторитетность. Подобная элегантность представляет работу из портфолио дизайнера как более ценный результат.
Обратите внимание, что в этом образце дизайна нет никакой текстуры или изображений кроме тех, что входят в портфолио.
В противном случае, дизайн был бы значительно перегружен, а так контент отлично сочетается.
Хороший процесс создания сайта заключается в первоначальном добавлении важного контента с последующим навешиванием дополнительных элементов дизайна в случае необходимости. После добавления каждого нового элемента дизайнер может брать паузу и анализировать результат, чтобы убедиться в том, что шаблон не стал слишком навороченным.
Но не только художественные работы могут выглядеть в более выгодном свете при использовании темного дизайна — это также касается и продуктов. Темный и «прилизанный» (sleek) дизайн, как Tapbots и подобные, помогает продемонстрировать тот факт, что продукт продается.
Дизайн является отображением продукта в целом, со всеми его градиентами и световыми эффектами. Некоторые дизайнеры даже имитируют текстуру своих высокотехнологичных продуктов.
Креативный темный дизайн
Помимо впечатления элегеантности, которые оставляют темные сайты, они также могут вызывать больший эмоциональный отклик, чем стандартные светлые сайты, что делает темный дизайн идеальным выбором для креативных проектов.
Давайте взглянем на парочку примеров возможных креативных дизайнов.
На сайте, который представлен ниже, очень мало контента, но уникальный шаблон и темные цвета, придающие глубину. Темный дизайн превосходно подходит сайтам с малым количеством контента.
И, поскольку такой дизайн требует больше свободного места на странице, то у дизайнера остается неплохое поле для маневра.
«Гранжевый» дизайн может проявляться в разных формах, но поскольку гранж — это «темный и грязный», темный фон — это лишь одна из его форм.
Темный гранжевый дизайн, как Trozo, кажется, нарушает все возможные правила: загруженные текстуры, захламленный шаблон и широкий набор цветов оформления. И при всем при этом сайт отлично работает. Как такое возможно?
Со всем своим обилием «грязных» элементов, с которыми можно работать, гранжевый дизайн может быть сложноват для начинающих дизайнеров. Конкретно этот пример работает благодаря своей организации.
Фон страницы состоит из четких блоков, ведущих взгляд пользователя и помогающих разделять контент на секции, с которыми можно легко разобраться.
Во-вторых, на сайте полно свободного пространства. Фон может быть затекстурирован, однако пользователь видит повторяющийся паттерн, который воспринимает как свободное пространство, что облегчает дизайн.
Это пустое пространство наиболее очевидно слева от логотипа сайта, на правой стороне страницы и под навигацией.
Даже между «Exhibit 01» и «Exhibit 02» больше свободного пространства, чем обычно можно встретить на подобных сайтах.
Свободное пространство выравнивает элементы на странице, даже если оно не выглядит, как пустое пространство, из-за наличия текстуры. Минимальное количество текста и небольшое количество секций (всего три) также работают на это впечатление простоты.
Дизайн сайта Drew WIlson определенно нарушает правило использования минимального количества цветов. Но при этом сайт отлично работает благодаря тому, что ярко раскрашенный хедер страницы — это один из немногих элементов в этом минималистичном дизайне, так что ничто его не перегружает.
Темный фон придает хедеру еще большей экстраординарности и яркости. Темные фоны часто используются для того, чтобы выделить световые эффекты и яркие цвета.
Такие образцы дизайна являются удивительными креативными исключениями из правила минимальных цветов. Однако правило следует нарушать с осторожностью: избегайте отвлекающих градиентов, текстур и цветов далее на странице.
Заключение
Темный фон придает элегантности и креативности веб-дизайну, делая его превосходным для портфолио, однако не подходит для любого сайта.
Для больших сайтов, особенно для тех, которыми пользуются люди с проблемами зрения или другими заболеваниями, темный дизайн нельзя применять даже при наличии переключателя стилей.
Источник: Webdesigner Depot
Как сделать это правильно
Поскольку все больше и больше популярных приложений и сайтов, от Duolingo до Uber, переходят в темный режим, становится ясно, что компании соблазняются темной стороной. Дизайн с черным фоном не только выглядит изящно и драматично, но и приятнее для глаз, чем яркий или белый фон, что делает ночное чтение более успокаивающим.
Но черный фон таит в себе много подводных камней, если вы используете его неправильно.
Здесь вы найдете профессиональные советы о том, как использовать черный фон на своем веб-сайте и в дизайне приложений, какие HEX-коды использовать, какие цвета сочетать с темными тонами и как интегрировать текстуры, фотографии и градиенты в темный фон для создания захватывающего и захватывающего дизайна веб-сайта.
Как использовать черный цвет на веб-сайтах и в приложениях? №
Черный — это вечно шикарный цвет, давно любимый дизайнерами моды и полиграфии. Но только недавно этот цвет получил широкое распространение в веб-дизайне.
Темный дизайн веб-сайта с использованием этого изображения от автора YARUNIV Studio. В веб-дизайне HEX-код #000000 — чисто черный. В то время как #000000 позволяет добиться простой темно-черной заливки макета вашего веб-сайта, ему может не хватать глубины и интереса. Пользователи могут воспринять это как безразличное отсутствие цвета, а не как смелое заявление.
Вместо этого ищите альтернативные HEX-черные цвета, чтобы придать дизайну вашего веб-сайта особое качество. Черный цвет может быть более теплым или холодным, или склоняться к угольно-серому цвету (#36454f) или сланцево-серому (#3D4849) для более тонкого взгляда на темный тренд. Различные оттенки черного также прекрасно сочетаются с определенными цветовыми группами, такими как пастельные, неоновые или яркие цвета. Существует множество признанных вариаций черного цвета — гагат, оникс, черное дерево — и каждый из них подходит для определенной цели. (Ознакомьтесь с нашим руководством по черному цвету, чтобы узнать больше о диапазоне черных цветов, которые вы можете использовать, а также о психологии, стоящей за этим мощным оттенком.)
В то время как сочетание #000000 с четким белым может создать впечатляющую схему (см. ниже), другие схемы выиграют от слегка отличающихся черных тонов.
Ниже представлены шесть цветовых палитр для современных и ультрасовременных черных фонов веб-сайтов.
Используйте эти палитры, чтобы придать дизайну вашего сайта больше глубины и драматизма. Вы также найдете советы по использованию фотографий и текстур как части темной схемы веб-сайта.
Черный фон Дизайн №1: минималистичный черно-белый
Черно-белая схема веб-сайта с использованием этого абстрактного фона значка от автора molaruso.Черное и белое — это самая контрастная цветовая комбинация, которую вы можете использовать в Интернете, и это взаимодействие темного и светлого может сделать веб-сайт эффектным и элегантным.
Высокая контрастность между черным и белым также делает веб-сайты удобными и доступными для людей с нарушением зрения. Это также хорошая цветовая схема, если вы настроены на использование шрифтов с засечками, курсива или новых шрифтов, которые обычно труднее читать на экране, чем шрифты без засечек.
Черный фон помогает выделить белые элементы, привлекая внимание к белому тексту или белым кнопкам.
Черный фон может создать впечатление необъятности, что поможет создать впечатление, что ваш веб-сайт выходит за пределы экрана.
Помогите своим пользователям сориентироваться на просторах темного веб-сайта, выделив действенные элементы абсолютно белым цветом. Контраст в цвете поможет направить путь UX.
Попробуйте эти черно-белые цветовые схемы и фоны в дизайне вашего веб-сайта:
Изображение предоставлено автором Mayer George. Изображение предоставлено автором PsyComa.Дизайн с черным фоном #2: Черные текстуры
Макет веб-сайта с использованием текстуры фона из черной каменной стены, разработанный автором TippaPatt.Совершенно черный фон иногда может выглядеть немного плоским, поэтому добавление текстуры в ваши проекты может быть удивительно преображающим.
Текстуры не должны быть очевидными. Фоновой фотографии с легким шумом, сбоями или текстурой пыли может быть достаточно, чтобы придать вашему сайту больше глубины и интереса. Веб-дизайн, проверенная техника дизайнеров полиграфии, также может извлечь выгоду из способности текстурированного фона сделать макет менее иронично оцифрованным и клиническим.
Альтернативный подход — искать более яркие узоры и геометрические узоры. Когда они отображаются полностью черным цветом, они по-прежнему сохраняют дух минимализма и являются прекрасным способом привлечь больше внимания к макету сайта, когда вы не хотите использовать фотографии или слишком много типографики. Они также по-прежнему представляют собой чистый холст темного цвета, что позволяет вам играть с цветом кнопок и текста.
Вот несколько простых черных текстур для использования в дизайне вашего веб-сайта:
Изображение предоставлено автором sumroeng chinnapan. Изображение предоставлено автором Shuttersv. Изображение предоставлено автором: chanchai Howharn.Черный фон Дизайн #3: Неоновые градиенты
Неоновый текст в сочетании с черным фоном придает веб-сайтам ретрофутуристический вид, в основном благодаря стилю, вдохновленному кодом Матрица . Однако сочетание неона и черного продвинулось вперед и модернизировалось.
Это больше не визитная карточка только технических фирм или веб-разработчиков.
Сегодня целый ряд компаний могут извлечь выгоду из привлекательного потенциала неоново-черной палитры на своих веб-сайтах и в приложениях. Как дизайнеры могут сделать палитру более технологичной, чем технологичной? Градиентные неоновые цвета придают макету веб-сайта больше динамики и глубины в сочетании с чернильно-черным фоном и выглядят особенно эффектно в крупномасштабной типографике или прокручиваемых разделах.
Вы можете создавать градиентные цвета с помощью кода CSS. Выбрать и закодировать свой цвет с помощью онлайн-инструмента CSS Gradient очень просто. Используйте ползунки, чтобы выбрать цвета для простых двухцветных линейных градиентов или более сложных радиальных градиентов, и скопируйте приведенный ниже код для вставки в редактор CSS.
Попробуйте эти две неоновые и черные схемы, чтобы придать вашему веб-сайту современный вид в стиле 1980-х годов.
В качестве альтернативы можно мгновенно добавить неоновый цвет на свой веб-сайт, используя фотографию, подобную этой, от автора rail fx: 9.
0003 Изображение предоставлено автором rail fx.
Дизайн с черным фоном #4: Фотографии в полный рост
Дизайн веб-сайта с использованием черно-белого портрета бабуина от автора Dramas.Фотографии с черным фоном создают невероятно стильные и эффектные изображения. Неудивительно, что этот стиль часто предпочитают фотографы моды и стиля жизни. Фотографии с черным фоном придают веб-сайтам захватывающий кинематографический вид, который подходит для широкого круга компаний, от корпоративных услуг до моды, путешествий и электронной коммерции.
Простой трюк? Используйте фотографию в качестве не очень тонкой визуальной подсказки, используя угол зрения или жесты рук, чтобы привлечь внимание пользователя к важным кнопкам, предложениям или пунктам меню.
В библиотеке Shutterstock можно найти изображения чрезвычайно высокого разрешения с черным фоном, подходящие даже для самых больших экранов Retina.
Нужно увеличить ширину фотографии, чтобы она соответствовала адаптивному веб-дизайну? Отсутствие деталей на черном фоне позволяет плавно расширить границы фотографии.
Используйте плагин Eyedropper для Chrome, чтобы выбрать определенный тон HEX из выбранной фотографии.
Ниже вы найдете подборку лучших фотографий с черным фоном. Эти изображения помогут вам создать привлекательные и захватывающие полноразмерные веб-макеты.
Изображение предоставлено автором Zamurovic Photography. Изображение автора Djomas.Дизайн с черным фоном #5: Древесный уголь и сланец
Дизайн веб-сайта с не совсем черным фоном, любезно предоставленным этим стильным изображением сланцевой пластины от автора YARUNIV Studio.Может быть пятьдесят оттенков серого, но столько же оттенков черного. От черного дерева до оникса, от угольно-черного до угольного, от сланца до серо-коричневого — на выбор предлагается множество вариантов черного цвета с соответствующими шестнадцатеричными кодами.
Не совсем черные оттенки могут придать темным веб-сайтам более утонченный и профессиональный вид, что делает эти черные оттенки идеальным выбором для корпоративных веб-сайтов или неброских стильных дизайнерских компаний, таких как архитекторы и дизайнеры интерьеров.
Менее резкие, чем чистый черный, тона древесного угля и сланца выглядят очень элегантно. Они также делают стильную фольгу для широкого спектра акцентных цветов, таких как коралловый, мятный, темно-розовый и небесно-голубой.
Цветовая схема, которую предпочитает веб-сайт SwissOne Capital, является элегантным упражнением в том, как использовать более тонкую угольно-черную палитру в макете веб-сайта. Томатно-красный используется умеренно в качестве привлекающего внимание акцента, а темно-серый и белоснежный создают корпоративный фон.
Поэкспериментируйте с этой эффектной, но элегантной цветовой гаммой в дизайне собственного веб-сайта или попробуйте фотографию с грифельным оттенком для слегка темного фона:
Изображение предоставлено автором YARUNIV Studio.Ищете новые источники вдохновения для дизайна веб-сайтов? Не пропустите эти полезные советы и приемы создания красивых и эффективных веб-сайтов:
- 30 Обновление цветовых палитр для вашего веб-сайта
- 20 Веб-сайты с великолепным узорчатым фоном
- Простые советы по дизайну макета веб-сайта, которым может следовать каждый
- 4 способа обеспечить внешний вид вашего веб-сайта в будущем
- Какой конструктор веб-сайтов вам лучше всего подходит? Откройте для себя нашу разбивку
Изображение на обложке от автора Mykolastock.
Дизайн Вдохновение Советы по дизайну Тенденции дизайна Дизайнер Ресурсы для дизайнеров Советы и руководства Веб-дизайн
Недавно просмотренные
${cat_name}
${name}
$ {выдержка}
22 черных веб-сайта для вашего вдохновения (2021)
Если вы потратили какое-то время на изучение тем WordPress или использовали их для своего собственного веб-дизайна, вы знаете, что пустое пространство — это не только тенденция, но и навязчивая идея.
Идея белого цвета заключается в том, что он создает передышку для вашего контента, а также придает ему чистый и современный вид.
К сожалению, это оставляет черный цвет в пыли, так как по какой-то причине люди склонны избегать черного, потому что он противоположен белому. Единственная проблема с этим рассуждением заключается в том, что белый цвет — это не то, что делает дизайн чистым и современным, а количество используемого белого цвета. Когда черный реализован правильно, он имеет тот же эффект, что и белое пространство.
Не говоря уже о черных веб-сайтах, создающих элегантную и богатую атмосферу, которая, как известно, нравится как мужчинам, так и женщинам. Поскольку темные веб-сайты предлагают прекрасные способы выделиться из толпы, мы составили список лучших черных веб-сайтов для вашего вдохновения.
Используйте их, чтобы стимулировать творчество в своих собственных проектах, и не стесняйтесь сохранять предложения в качестве закладок на будущее.
Что может быть лучше, чем начать этот список с потрясающего черного веб-сайта творческой студии? Хотя не каждая их страница черная, большинство из них черные.
Возьмем, к примеру, страницу о компании anv.studio. Он имеет достаточно пробелов и четкие белые тексты и черные фотографии. Все эти различные элементы создают высококачественный, эксклюзивный вид, но он не выглядит натянутым или загроможденным. Вместо этого эти элементы дизайна создают стильный внешний вид студии.
Фотография на их странице «О нас» — отличный пример, чтобы вызвать к себе внимание.
Темный, без сомнения, но он исключительно хорошо подобран.
Это отличный пример, поскольку он показывает, что вам не нужно ограничиваться темными цветами или темными фотографиями, чтобы добиться высококачественного внешнего вида.
Веб-сайт The Hangar Door имеет серо-черный фон со стальными текстурами, что соответствует тому факту, что компания продает ангарные двери.
Веб-сайт является отличным примером более темного макета, поскольку он соответствует миссии компании и отлично смотрится с нейл-графикой и фирменными кнопками социальных сетей.
Далее у нас есть космическая и авиационная компания с еще одним хорошо сделанным черным веб-сайтом. Их сайт включает. фоновые видеоролики, фотографии, переходы и другие элементы дизайна, которые объединяются для a. креативный и хорошо оформленный сайт.
Когда вы прокручиваете домашнюю страницу, сайт рассказывает замечательную историю компании. Несмотря на то, что не каждая отдельная секция черная, темные и светлые области хорошо сочетаются друг с другом.
Сайт Anderbose не совсем сплошной черный, но он использует все оттенки от черного до коричневого и даже белого.
Anderbose дает прекрасный пример того, как вы можете использовать более темные оттенки для отображения своего личного блога, где лента блога находится справа, а затемненные цвета привлекают внимание к написанным словам.
Веб-сайт 1MD отличается минималистичным темным дизайном. В частности, на их домашней странице мало что происходит, нет беспорядка. Каждый отдельный раздел имеет определенную цель и предназначение. Посетителю легко сосредоточиться и понять эти разделы.
Используются различные цветовые выделения, анимация. и переходы, которые добавляют индивидуальности и интереса. дизайн сайта.
Рабочие страницы отдельных портфолио также хорошо оформлены, понятны и просты. Они также используют переходы и анимацию, чистую систему сетки и достаточно пробелов, чтобы создать отличный поток для своих тематических исследований.
Take the Walk — это благотворительная организация, которая стремится убедить людей пройти милю, чтобы предотвратить СПИД и бедность.
Большая часть фона покрыта черным, а акценты выделены красным, показывая, что черный — один из лучших цветов для работы, поскольку вы можете использовать практически любой другой цвет в качестве акцента.
Apple часто использует черный фон для демонстрации своих продуктов, и новейшая серия Apple Watch не стала исключением. Темный фон в сочетании с большими фотографиями крупным планом создает очень интимный и эксклюзивный вид, когда вы просматриваете страницу.
Фон экрана Apple Watch также черный, что позволяет выделить детали экрана и привлечь внимание зрителя к фотографиям.
Сетка в сочетании с большим количеством пустого пространства, четкой типографикой и хорошо выполненной фотографией объединяется в элегантный черный дизайн страницы.
Веб-сайт Dropbase — отличный пример черного веб-сайта, на котором не так много острых ощущений, но он хорошо спроектирован и хорошо представляет продукт.
Независимо от того, находитесь ли вы в блоге, на странице с ценами или на домашней странице, сайт Dropbase придерживается своего руководства по стилю, которое включает в себя крупный белый шрифт без засечек, хорошо зарекомендовавшую себя сетку и даже небольшое использование акцентных цветов повсюду.
Следующий пример немного отличается, потому что, хотя на веб-сайте Delta Board используется темный фон, общий дизайн светлый и живой.
В этом дизайне выделяются четыре основных элемента: темнота. серый фон, светлая и минималистичная фотография, белая типографика и оранжевый акцентный цвет.
Вместе эти элементы работают очень хорошо, поэтому это отличный пример темного веб-сайта, который живой, но не перегружает посетителей.
Synthese — еще один отличный пример черного веб-сайта, который мы сегодня добавим в наш список. Это потому, что этот веб-сайт сочетается исключительно хорошо.
Он использует как белый, так и черный фон, а в некоторых разделах также использует черный цвет в качестве акцентного цвета.
То, как дизайнеры использовали черный цвет в дизайне веб-сайта Synthese, делает его достойным примером. посмотреть!
Void фокусируется на потрясающих анимациях пространства и времени, рассказывая вам историю, основанную исключительно на визуальных эффектах.
Каждая страница почти полностью черная, что создает ощущение чуда и зловещих чувств.
Они дополняют темные цвета дразнящими тонами и музыкой. Затем вы можете щелкать по сайту, чтобы насладиться повествованием.
Просматривая веб-сайт Clover, обратите внимание, насколько светлым кажется этот темный дизайн. Это не многолюдно и не подавляюще.
Это прекрасный пример стильного черного веб-сайта и визуального оформления, часто создаваемого белым или светлым дизайном веб-сайта. Различные оттенки темно-серого хорошо сочетаются друг с другом.
Переходы и анимация в современном и слегка ярком штрихе. В то же время белые и фиолетовые цветовые акценты привлекают внимание к различным деталям каждого раздела при прокрутке.
Здесь у нас есть черное онлайн-портфолио UI-дизайнера. Само портфолио — еще один замечательный пример мастерства дизайнера.
Два раздела домашней страницы, разумеется, имеют черный/темно-серый фон. Тем не менее, именно заголовки явно являются центральной частью.
Этот пример веб-сайта является фантастическим, поскольку он показывает, что черный фон может действовать как акцент, а не как основная часть дизайна веб-сайта просто из-за цвета.
Сайт Блейка Аллена — еще одно творческое портфолио, на этот раз кинематографиста. Портфолио — это простота. Многие дизайнеры думают, что им нужно добавить множество анимаций и элементов, чтобы их портфолио выделялось. Но Блейк Аллен предлагает другой подход, с четкой и мелкой белой типографикой на черном фоне, окруженной большим количеством белых пятен.
Это прекрасный сайт для вдохновения, поскольку на нем всего несколько ссылок и минимум компонентов дизайна.
Целевая страница автоматизации маркетинга для GoSquared отличается креативным дизайном. Естественно, у него черный фон (иначе он не попал бы в этот список), который обеспечивает прекрасный контраст с зеленым, синим и фиолетовым цветами, используемыми на этой целевой странице.
Очевидно, что использование цвета в дизайне этой страницы было стратегически важным, поскольку он играет важную роль в повествовании и потоке страницы.
Цветовой контраст используется для привлечения внимания посетителя, когда вы прокручиваете страницу вниз, узнавая об их процессе автоматизации маркетинга и продукте.
Let It Bleed — это книжный веб-сайт, который обращает все внимание на обложку книги, используя значительное количество черного цвета на заднем плане.
Что интересно на этом сайте, так это то, что отзывы и цитаты из книги хорошо видны, потому что большая белая типографика очень выделяется.
Blacks Who Design, как следует из названия, представляет собой набор профилей и портфолио чернокожих дизайнеров в области технологий.
Этот дизайнер не упустил возможности создать черный веб-сайт, чтобы еще больше подчеркнуть свою миссию и цель. И это прекрасно работает! черно-белые изображения профилей дизайнов не выглядят подавляющими на черном фоне.
Вместо этого ваш взгляд направлен на них. Текст, ссылки и кнопки хорошо используют дополнительные цвета, что позволяет легко заметить различную информацию от ссылок профиля до навигации по сайту, не перегружая посетителей.
Haptic — минималистичный журнал для iOS. Естественно, целевая страница приложения также минималистична. Здесь задействованы четыре основных элемента дизайна: черный фон, типографика, фотографии и пустое пространство. Из-за черного фона и пробелов текст и элементы фотографий легко выделяются и привлекают ваше внимание при прокрутке этой страницы.
В портфолио Лии Хаггар много светлых областей, но основные модули верхнего и нижнего колонтитула затемнены и эффективны благодаря сочетанию видео, крупного шрифта и даже замечательной области «О программе» в нижнем колонтитуле, которая быстро и легко читается.
Текст «О программе» расположен по центру, что повышает полезность черного фона, поскольку ничто больше не загромождает пространство, и создается впечатление, что ваши глаза смотрят именно туда.
Корпоративная страница Avocode имеет черный фон. Большинство других страниц сайта — нет.
Хотя фирменный стиль Avocode не самый яркий, он веселый и творческий.
Вот что делает этот фантастический пример для этого списка, так как эта страница темная, но все еще игривая и причудливая.
Используется множество различных пастельных тонов, а также визуальные украшения с помощью различных форм и фотографий.
В общем, они хорошо сочетаются на этой странице и подходят ко всему веб-сайту. Тот факт, что у вас черный или темный фон, не означает, что ваш дизайн должен быть серьезным, он вполне может быть игривым, молодежным или просто забавным.
Вы обязательно должны проверить следующий пример в нашем списке, CometChat. Это потому, что черный хорошо используется в визуальном стиле компании. Целевая страница cometChat PRO вся черная.
Здесь вы можете легко увидеть, как черный цвет используется как часть их цветовой схемы, а не просто как фоновый цвет.
Например, в бежевом разделе черный не только текст, но и изображения. На этой странице черный и белый кажутся доминирующими цветами в их брендинге, а бежевый и фиолетовый — второстепенными.
