14 великолепных идей фона для веб-сайта
Karol Andruszków
Опубликовано: 16 ноября 2022 г.
Знаете ли вы, что пользователю требуется всего 17 миллисекунд, чтобы подсознательно оценить ваш сайт? Так что этот момент надо учитывать. Потрясающий фон сайта — один из визуальных элементов, который сразу бросается в глаза посетителям и побуждает их дольше оставаться на сайте. В то же время многим людям необходимо уделять больше внимания его потенциалу, забыть о нем или сделать его скучным. Вы хотите, чтобы фон вашего сайта привлекал внимание пользователей? Обязательно изучите эти 14 советов по созданию лучшего фона для сайта!
Что такое фон сайта?
Как нетрудно догадаться, фон — это все визуальное пространство, на котором отображается содержимое страницы. Фон — основа дизайна любого сайта. Это то, что сопровождает посетителей на протяжении всего пребывания на вашем сайте.
Таким образом, хорошо подобранный фон придает сайту характер, влияет на его положительное восприятие и является важным элементом дизайна.
Какие бывают фоны на сайте?
Прежде чем перейти к выбору фона для вашего сайта, стоит сначала ознакомиться с основами. Вот 3 типа фона, которые вы можете использовать при создании своего сайта!
Body background — основной фон сайта
Шаблон BOWWE со стандартным фоном для всего сайта.
Сайт с фоном тела — это повторяющаяся область, которая находится как на главной странице, так и на многих подстраницах сайта. Обычно он занимает большую часть отображаемой страницы. Он может состоять из иллюстраций, различных текстур, целой фотографии или цветовых градиентов. Самое распространенное решение на сайтах — заливка белым или другим светлым цветом.
Content background — фон для контента
Шаблон BOWWE с фоном содержимого.
Фон содержимого не покрывает весь экран, а обычно окружает область вокруг текста или графики на странице. Его задача — выделить текст или изображение, улучшить его видимость и структурировать страницу, отделив отдельные разделы друг от друга.
Header background — фон в заголовке
Шаблон BOWWE с фоном в шапке сайта с деловым характером.
Другой фон для шапки в верхней части страницы — проверенный способ привлечь внимание посетителей и сфокусировать их на определенном элементе. Привлекательный фон в виде интересной иллюстрации, уникальной графики или цветов вашего бренда на таком видном месте позволит сосредоточить внимание на отображаемом там элементе, например, товарном предложении и призыве к действию.
Что можно использовать в качестве фона сайта?
Вариантов разработки фона на сайте много. Он может принимать разные формы, в зависимости от эффекта, которого вы хотите достичь.
Вот основные приемы создания фона:
→ сплошной цвет
→ градиент
→ картинка или фотография
→ графика
→ анимация
→ фон с эффектом параллакса
⚡ Совет BOWWE:
Эффект параллакса набирает популярность, потому что это проверенный способ привлечь внимание получателя на более длительный срок. Подробнее об этом эффекте и ценных приемах его использования на сайте вы найдете здесь — «Тенденции в дизайне сайтов 2023 [и как их использовать]» .
Почему стоит позаботиться о бэкграунде сайта?
Бэкграунд — один из важнейших визуальных факторов, который может определить восприятие и следовательно, успех всего веб-сайта. Внешний вид веб-сайта так же важен, как его содержание или функциональность. Ведя онлайн-бизнес, вы должны постоянно спрашивать себя, как вы можете положительно повлиять на восприятие всего веб-сайта и на результаты, которых он достигает. Итак, проверьте, что может сделать хорошо продуманный фон на вашем сайте:
Создает хорошее первое впечатление
Фон — один из первых элементов, который бросается в глаза пользователям, как только они заходят на сайт.
По данным Google, пользователю требуется 17 миллисекунд, чтобы подсознательно сформировать мнение о веб-сайте. Фон придает сайту нужный тон и повышает его эстетический уровень, что выражается в положительном первом впечатлении. Фон, цвет и шрифт — наиболее важные визуальные аспекты веб-сайта, которые сразу бросаются в глаза. Эти элементы могут эффективно побуждать посетителей оставаться на сайте, если они образуют связную композицию.
Привлекает внимание
Чуть более 2 секунд достаточно, чтобы взгляд пользователя остановился на самом интересном элементе. Метод айтрекинга позволяет отслеживать движение глазных яблок пользователей на сайте. В результате таких исследований визуальные тепловые карты показывают, что на сайте вызвало интерес у пользователя и как долго он на этом сосредоточил свой взгляд. Исследования юзабилити веб-сайтов показывают, что глаза посетителей в первую очередь направляются на фотографии и графику.
Основное изображение или заполнитель страницы привлекает внимание пользователей и удерживает их взгляд до 5,94 секунды, прежде чем они прочитают содержимое сайта или перейдут к отдельным разделам.
Значительно повышает удобство использования сайта
UX (User Experience) — это сумма положительных впечатлений пользователей во время их пребывания на веб-сайте. Правильно подобранный фон влияет на UX веб-сайта, то есть на его удобство для пользователя. Фон, который гармонирует со всем дизайном, сразу выделяет самые важные элементы сайта, такие как заголовок или кнопка призыва к действию. Благодаря этому посетители будут оставаться в курсе, просматривая ваш сайт, и быстро найдут то, что ищут. Более того, они запомнят ваш сайт как ценный и удобный для навигации.
Вызывает доверие к бренду
Качественный дизайн с эстетичным фоном свидетельствует о профессионализме и побуждает посетителей оставаться на вашем сайте.
Это быстро приведет к укреплению доверия к вашему бренду. В свою очередь неудачный дизайн сайта будет отпугивать посетителей от знакомства с вашим предложением, что, несомненно, приведет к потере продаж. Чтобы развивать свой бизнес в Интернете, стоит позаботиться обо всех элементах сайта, включая фон. Помните, что последовательный дизайн сайта всегда будет положительно влиять на интерес к вашему предложению и повышать достигнутый уровень конверсии.
14 идей для потрясающих фонов для веб-сайтов
Если у вас нет большого опыта в разработке веб-сайтов, вам может быть трудно решить, какой фон лучше всего подойдет для вашего проекта. Чтобы помочь вам, ниже я собрал 14 советов, которые следует учитывать при выборе или создании фона веб-сайта.
1. Обратите внимание на контраст
Шаблон BOWWE с темным фоном и высококонтрастными деталями.
Профессиональный фон веб-сайта должен подчеркивать то, что наиболее важно на вашем веб-сайте.
Для этого следует следить за тем, чтобы фон контрастировал со всей графической композицией страницы.
Неправильный контраст фона с другими элементами — самая распространенная ошибка дизайна. Слишком низкий контраст снижает удобочитаемость контента, тем самым эффективно препятствуя его чтению. Высокая контрастность требует правильного подбора цветов и оттенков — иначе просмотр страницы будет утомлять глаза. Обязательно убедитесь, что фон вашего сайта отличается по цвету от текста и графики. Правильно контрастный фон подчеркнет суть контента и направит внимание получателей туда, куда вам нужно.
2. Включите красивую фоновую фотографию
Шаблон BOWWE с фоновой фотографией, которая четко показывает тему страницы.
Веб-сайт с фоновым изображением — это классический выбор, который позволит вам идеально передать эмоции вашей аудитории. Помните, однако, что только некоторые фотографии подходят для использования в качестве фона.
Если на картинке будет слишком много элементов, это отвлечет получателя и снизит читаемость текста. Поэтому избегайте изображений со слишком большим количеством деталей. Это особенно важно, когда вы добавляете текст к обложке. Например, пейзажи могут быть отличным фоном для веб-сайта, потому что они радуют глаз и не содержат слишком много отвлекающих деталей. Еще одна важная вещь — соответствие вашему бизнесу. Какой бы красивой ни была фотография, выбирайте ее только в том случае, если она отражает характер вашего бренда.
3. Сделайте ставку на однородный фон отличительного цвета
Фон яркого цвета придает веб-сайту сильный акцент и характер. Источник: swabtheworld.com
Не нравится идея использования фотографии или фоновой графики? Если вы предпочитаете минималистичные решения, попробуйте однотонный цвет. Фон насыщенного цвета точно не помешает читабельности страницы и даже сделает весь проект более привлекательным.
Если вы хотите придать своему сайту выразительность и характер, поставьте на фон сплошной цветовой акцент. Кроме того, обеспечьте хороший контраст с остальными элементами сайта.
4. Создайте спокойную атмосферу с помощью приглушенного цвета фона
Шаблон BOWWE с приглушенным фоном.
Вам нравится идея однотонного фона, но вы ищете более четкое решение? Выберите приглушенный цвет фона, чтобы сайт выглядел элегантно и эстетично. Приглушенный равномерный цвет в оттенках коричневого или серого поможет добиться успокаивающего эффекта и придаст сайту утонченное выражение.
5. Улучшите читаемость на светлом фоне
Шаблон BOWWE с современным фоном сайта.
Светлый фон придаст вашему сайту эстетичный и современный вид. Белый фон улучшит читабельность сайта и выделит самую важную информацию. Фон белого или светлых оттенков – классическое решение, которое всегда актуально.
6. Сделайте ставку на элегантный темный фон
Черный фон сайта с минималистскими графическими элементами. Источник: Stillwater-artisanal.com
Черный цвет фона не является универсальным решением для каждого сайта. Тем не менее, темный фон с правильно контрастными элементами — менее традиционное решение, которое добавит элегантности и оригинальности вашему сайту. Несмотря на популярность белого фона, иногда стоит выбирать темные цвета для фона страницы. Темные схемы лучше всего работают на элегантных или дизайнерских персонажах веб-сайтов. Это хороший фон для веб-сайта, на котором вы хотите отображать свои продукты.
⚡ Совет BOWWE:
Черная тема на сайтах набирает все большую популярность. Используется в определенных разделах страницы и по всему сайту. Узнайте, как эффективно использовать этот тренд на своем сайте!
7. Используйте психологию цветов
Шаблон BOWWE для фитнес-индустрии с энергичным оранжевым фоном.
Создавая фон для веб-сайта, вы можете использовать цвет, который будет ассоциироваться с вашим бизнесом. Уместно использованные цвета вызовут эмоции получателей. Поэтому используйте цвета, чтобы произвести отличное первое впечатление и создать ассоциации с вашим брендом.
Например, энергичный оранжевый и красный подойдут для фитнес-индустрии, зеленый вызовет ассоциации с экологией или здоровым питанием, а темно-синий подчеркнет суровый характер финансовой деятельности.
8. Примените динамический градиент
Красочный градиент фона сайта. Источник: apple.com/apple-card/
Воспользуйтесь повторяющейся тенденцией дизайна градиентов. Это сочетание цветов с постепенным переходом между ними. Градиенты можно использовать как отдельный фон или накладывать на фото, придавая оригинальность вашему сайту.
⚡ Совет BOWWE:
Создав страницу в BOWWE , вы сможете быстро создать потрясающий градиентный фон без необходимости создавать его в другой программе или искать готовые узоры!
9.
Оживите фон с помощью анимацииАнимированный фон сайта с анимацией. Источник: www.flyhyer.com
Вы действительно хотите выделиться из толпы? Попробуйте анимацию! Использование фонового движения привлечет внимание и быстро расскажет посетителям о характере вашей компании.
Анимированный фон веб-сайта — отличный способ оживить его. Помните, что анимация должна быть тонкой, чтобы она не отвлекала от основного изображения или сообщения.
10. Произведите неизгладимое впечатление с героем бренда
Фон сайта с героем бренда. Источник: discord.com/nitro
Интересная идея — создать так называемого героя бренда, т. е. героя, который будет ассоциироваться с вашим брендом. «Герой» может появляться в разных местах вашей страницы, включая фон вашего сайта. Как было сказано выше, также стоит оживить проиллюстрированного персонажа на заднем плане с анимацией.
11.
Создайте персонализированный фон с вашим продуктомШаблон BOWWE с персонализированным фоном.
Если вы хотите выделиться, создайте персонализированный фон, который вы не увидите на сайтах конкурентов. Как вы создаете такой особенный проект? Используйте свой собственный продукт для создания уникального фона.
Вы можете интегрировать изображение продукта в фон и использовать его характеристики, т.е. цвет или форму, в других графических элементах на странице. Интеграция физических особенностей вашего продукта в визуальную композицию разнообразит проект и создаст прочные ассоциации с вашим брендом.
12. Адаптируйте фон к экранам мобильных устройств
Шаблон BOWWE с адаптивным фоном сайта.
В настоящее время адаптивные веб-сайты необходимы, поэтому убедитесь, что ваш фон масштабируется соответствующим образом для небольших экранов. Например, объемное изображение может плохо смотреться на мобильных устройствах.
13. Расскажите историю через фон
Фон веб-сайта, который меняется в зависимости от повествования. Источник: nasaprospect.com
Если вы хотите добиться реального вовлечения аудитории, создайте фон, на котором вы будете рассказывать историю своего бренда. Техника сторителлинга позволит вам создать увлекательную историю, используя фоновую графику. Для этого можно использовать горизонтальную навигацию, анимацию и параллакс.
14. Разорвите шаблон
Обычно не существует правил, которые вы абсолютно не могли бы нарушить помните, что в веб-дизайне . Лучшие проекты часто нарушают стандарты. Самое главное — это UX опыт пользователя.
Для вдохновения следите за тенденциями веб-дизайна и будьте в курсе последних новостей. Благодаря этому вы сможете попробовать интересные эффекты, которые разнообразят фон и добавят привлекательности вашему сайту.
Ищете больше вдохновения? Взгляните на готовые шаблоны BOWWE , где вы найдете много вдохновения для создания эффектного фона!
Создайте фон для сайта, который порадует посетителей!
Готовы создать свой сайт?
Используйте самый удобный конструктор сайтов, которому доверяют тысячи дизайнеров, и создавайте сайты, которые принесут вам клиентов!
Начинай сейчас!
Фон веб-сайта оказывает реальное влияние на то, как ваш сайт воспринимается.
Плохо спроектированный, он может помешать интернет-пользователям быстро покинуть сайт и перейти на конкурс. Итак, давайте вдохновимся современными тенденциями веб-дизайна и создадим идеальный фон для вашего сайта! Не забывайте при его создании следовать рекомендациям, данным в статье, чтобы фон действительно покорял привлекательность вашего сайта и радовал его посетителей!
Читайте также:
Karol Andruszków
Генеральный директор BOWWE
Кароль — предприниматель, спикер по электронной коммерции, в том числе для Всемирного банка, и основатель 3 стартапов, в рамках которых он консультировал несколько сотен компаний. Он также отвечал за проекты крупнейших финансовых учреждений Европы на сумму более 50 миллионов евро.
Он получил две степени магистра, одну в области компьютерных наук, а другую в области управления маркетингом, во время учебы в Польше и Португалии. Получил опыт работы в Силиконовой долине и руководил компаниями во многих странах, включая Польшу, Португалию, США и Великобританию.
Более десяти лет он помогает стартапам, финансовым учреждениям, малым и средним предприятиям улучшить их функционирование за счет цифровизации.
категории:
ВСЕ Agentstva Sozdayte svoy sayt Vedeniye bloga Sovety dlya biznesa Biznes-prilozheniya Blestyashcheye portfolio i rezyume Frilansery i sozdateli SEO Sotsial’nyye media Onlayn marketing Veb-dizayn
ПОСЛЕДНИЕ ПОСТЫ:
Как создать потрясающий свадебный сайт
2023 February 27
SEO подсказки ChatGPT для максимального эффекта
2023 February 20
60 статистических фактов о блоге, которые нужно знать
2023 February 13
Станьте заметнее в Интернете: 23 совета по продвижению сайта
2023 February 03
Как создать микросайт — полное руководство
2023 January 27
8 советов по созданию темного пользовательского интерфейса
Для начала разберемся, что же такое темный режим? Темный режим — это цветовая тема, преимущественно включающая приглушенные оттенки / оттенки серого, которую используют в условиях низкой освещенности.
Темные цвета отражают меньше света, поэтому людям удобнее изучать такие интерфейсы. Все благодаря высокому контрасту между светлыми элементами и неброским фоном.
Вступление
Обычно разработчики добавляют на сайт или в приложение специальный переключатель, нажав на который пользователь может активировать темный режим. Последний играет роль дополнительной опции по отношению к стандартной (или светлой) теме.
Этот режим стал довольно популярным, поскольку темный фон выгодно подчеркивает светлый контент. Но какие еще преимущества есть у такого решения?
Преимущества темного режима
1. Темная тема — отличный маркетинговый ход, который поможет компании выделиться среди конкурентов. Насыщенный эффектный фон может стать прекрасным дополнением к визуалу любого бренда.
2. Темный режим снижает нагрузку на глаза в процессе взаимодействия пользователей с вашим продуктом. Он поможет им сконцентрироваться на изучении контента, особенно если интерфейс содержит большое количество текста.
3. Темный режим может сэкономить заряд батареи вашего телефона. Доказано, что в этом случае потребление энергии сокращается в 6 раз за счет того, что дисплей излучает меньше света, а, значит, вы сможете дольше пользоваться устройством без подзарядки.
Обратите внимание: потребление энергии зависит в основном от типа вашего телефона, а не от цветов на экране. Если вы хотите измерить, насколько эффективно темный режим экономит заряд батареи, изучите руководство разработчика для конкретных типов телефонов и экранов.
Некоторые эксперты утверждают, что темный режим позволяет дольше сохранить здоровье глаз, однако другие приходят к противоположным выводам. На мой взгляд, темный режим — это просто тренд. Такой дизайн выглядит элегантно и может сделать сайт вашего бренда более удобным для пользователей.
Итак, давайте рассмотрим лучшие практики, которые помогут вам создать отличный темный интерфейс.
1. Тщательно выбирайте цвета
Не используйте белый цвет на черном фоне (#000)! Вы можете выбрать черный для фона, но тогда необходимо немного затемнить текст.
Достаточно, чтобы глаза пользователей не болели из-за слишком высокого контраста.
Когда мы смотрим на чистый белый цвет, наши глаза поглощают больше света. В этом случае шрифты начинают расплываться, особенно на старых моделях мониторов.
Пример слева — читая текст, приходится напрягать глаза, пример справа — чтобы прочитать текст требуется меньше усилий, приглушенные цвета позволяют сконцентрироваться на чтении.
2. Используйте фирменный цвет бренда
Чтобы темный режим выглядел уникально, используйте темную версию основного цвета вашего бренда в качестве фона. Добавьте в интерфейс цветные шрифты, чтобы сделать его еще более особенным! ✨
Комбинация фирменного цвета фона и красочных шрифтов — отличное решение для создания оригинального темного режима. Другой подход — использовать только градации белого и черного цветов. Главное убедитесь, что текст выглядит не слишком причудливо и его легко прочитать.
Оба варианта допустимы. Пример слева — градации белого и черного.
Пример справа — выглядит более оригинально и отражает характер бренда.
3. Сделайте цвета менее насыщенными
Не используйте цвета с насыщенностью 100%. В сочетании с темным фоном они создают эффект “дрожания”. Вместо этого выбирайте оттенки с низкой насыщенностью или немного приглушенные версии основных цветов, тогда ваш интерфейс получится по-настоящему удачным.
4. Постарайтесь передать глубину
Используйте шкалу цветов — от темного к светлому — чтобы придать интерфейсу глубину. Не добавляйте элементам тени. Вместо этого используйте рамки, чтобы показать разные уровни глубины UI-элементов.
Сделайте объекты переднего плана светлее, чтобы создать иллюзию, будто они выступают из экрана. Это поможет выстроить эффективную визуальную иерархию.
5. Проверьте уровень контрастности
Темный режим, точно так же как и светлый, должен соответствовать требованиям WCAG (Руководство по обеспечению доступности веб-контента). Это необходимо, чтобы текстовый контент был разборчивым и читабельным.
Для проверки уровня контраста, вы можете воспользоваться специальными плагинами.
Вот наши любимые инструменты, которые помогут вам узнать коэффициент контрастности, не покидая любимый графический редактор:
- Stark (плагин для Figma, Sketch и XD)
- Contrast (плагин Figma)
- A11y (плагин Figma)
Пример слева — контрастность недостаточная, справа — оптимальная.
6. Начните с разработки светлого режима
Когда вы трансформируете свой дизайн из светлого режима в темный, размещайте визуальные элементы в том же порядке. Не удаляйте оттенки, чтобы не запутать пользователей. Вместо этого подготовьте цветовую палитру, с помощью которой вы сможете инвертировать существующие цвета без ущерба для эффективности UI.
Существует множество плагинов, которые помогут вам справиться с этой задачей. Вот наши фавориты:
- Appearance (плагин Figma)
- Dark mode magic (плагин Figma)
- Camilo (плагин Sketch)
7.
Используйте базовые цветаЧтобы вам было проще превратить светлую тему в темную, с самого начала создайте список базовых “нейтральных” цветов с фиксированными значениями прозрачности. Такая палитра может сильно упростить вам жизнь.
Используйте эти прозрачные цвета вместо того, чтобы постоянно выбирать разные оттенки серого, и вы без труда конвертируете дизайн в темный режим.
8. Не злоупотребляйте темным режимом
Чаще всего темный режим — отличная идея. Тем не менее, иногда дизайн будет намного эффективнее, если использовать яркие цвета. Темный режим идеален, чтобы помочь пользователю сфокусироваться на задаче, однако ничто не сравнится с кричащим рекламным объявлением, которое бросается вам в глаза в 2 часа ночи на eBay или Amazon.
Светлый режим привлекает внимание. Он способен растормошить пользователя и мгновенно притянуть его взгляд к одной из важных точек, таких как призыв к действию, заголовок, кнопка или форма.
Совет: Если вы разрабатываете продукт для Mac / Windows, сделайте так, чтобы тема автоматически синхронизировалась с текущей темой пользователя.
Это поможет произвести на людей хорошее первое впечатление и заставит их почувствовать себя как дома.
Заключение
Следуйте нашим советам, когда будете разрабатывать темный режим для своего цифрового продукта.
Помните, что у вас должна быть веская причина, чтобы имплементировать его в уже существующий и отлично функционирующий продукт. Проанализируйте контент, варианты использования и устройства, на которых будет отображаться дизайн.
Тем не менее, темный режим может сделать продукт эффективнее, особенно если ваши клиенты любят просматривать мемы в темноте, часто пользуются смартфоном ночью или хотят, чтобы он дольше работал без подзарядки.
Полезные ресурсы
- Руководство по материальному дизайну — темная тема
- Вдохновляющие примеры темных интерфейсов
- Figma tokens — плагин, который поможет кастомизировать и адаптировать вашу дизайн-систему под несколько тем.
- Contrast — плагин для проверки контрастности элементов переднего плана и фона
Спасибо за внимание 🙌
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 использует веб-дизайн темного режима, чтобы сделать просмотр при слабом освещении более удобным для глаз своей аудитории.
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 привлекает внимание к главным статьям своего журнала, используя сочетание высококонтрастных цветов — черного и белого — для оформления веб-сайта в темном режиме.
Bobby Rowe
Заглавные буквы h2 в темной области веб-дизайна Bobby Rowe действительно поют благодаря графическому черному фону.
Raytheon
Если переход всего вашего веб-сайта в темный режим не является фирменным, следуйте примеру Raytheon и добавляйте его с осторожностью — например, на панели предупреждений о файлах cookie на вашем веб-сайте — где он будет оказывать незначительное визуальное воздействие.
RISD
Микросайт RISD по сбору средств имеет насыщенный темно-синий, почти черный фон, чтобы создать темный фон для вдохновляющих школьных фотографий.
Penguin
Веб-сайт Penguin яркий и красочный — пока вы не прокрутите страницу до конца. Их нижний колонтитул веб-сайта в темном режиме выделяет его нижние ссылки среди остального содержимого веб-страницы издателя.
Хлопок
Компания Cotton использует игривую фотографию джинсовой ткани с вышитым вручную h2 в качестве фона для создания темного героя на своем веб-сайте.
Impact Roofing
Impact Roofing использует черный фон, чтобы выделить контактную форму на своей целевой странице для платной рекламы.
Powster
На веб-сайте Powster используются элементы дизайна в темном режиме, в том числе в нижнем колонтитуле с черным фоном.
Chelsea Moxy
На домашней странице Chelsea Moxy используются навигационные элементы веб-дизайна в темном режиме для кадрирования видео в основной области контента.
Муниципальный
Даже бренды одежды попадают в тренд дизайна веб-сайтов в темном режиме. Муниципальный веб-сайт имеет угольно-черный фон, который помогает создать маркетинговую копию, а оповещения потрескивают на его динамичной домашней странице.
Звездные войны
Не говорите Йоде, но веб-сайт Disney для всего, что связано со вселенной Звездных войн , перешел на темную сторону… и принял черный фон для всех своих шаблонов страниц — даже для своего блога!
Брене Браун
Чего не умеет сказочная Брене Браун? Вот доказательство того, что она даже знает, как нанять веб-дизайнера. На домашней странице идейного лидера искусно используется ярко освещенная фотография Брауна, записывающая свой подкаст, чтобы создать привлекательный вид веб-сайта в темном режиме.
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
Веб-сайты с темным фоном: как это сделать правильно
Иногда темный дизайн веб-сайта не является подходящим решением для клиента или бизнеса клиента.
Да, если все сделано правильно, он оставляет неизгладимое визуальное впечатление, но если веб-дизайнер не знает, как это сделать, веб-сайт может показаться посетителю непривлекательным.
Элегантный черный фон расплачивается меньшей удобочитаемостью и меньшими возможностями для традиционных элементов дизайна. Согласно недавнему опросу, широкая аудитория предпочитает светлый дизайн из-за лучшей читабельности.
В конце концов, на него нет правильного ответа. И темный, и светлый дизайн имеют свое применение. Эта статья поможет вам использовать дизайн с темным фоном, чтобы выразить свое творчество, а также сделать себя и своего клиента счастливыми и довольными дизайном.
Готовы ли вы стать послом черных веб-сайтов и убедить объединенную аудиторию в том, что темный фон может быть таким же читабельным и удобным для пользователя, как и светлый?
Когда следует выбирать темную тему вместо светлой?
Есть некоторые факторы, которые дизайнер должен учитывать при принятии решения о разработке веб-сайта в темной теме.
Вы должны иметь в виду тему или тему бизнеса клиента, выбор цветов и их контраст, который служит способом передачи эмоций.
Вы бы не хотели иметь темный фон на свадебных сайтах, верно?
В настоящее время лучшие веб-дизайнеры даже учитывают, кто является средним посетителем веб-сайта, и ищут способ удовлетворить их возможные предпочтения. Они адаптируют свой веб-сайт к социальному уровню посетителя и даже к возрастной группе.
Совет здесь состоит в том, чтобы создать портрет посетителей веб-сайта вашего клиента, чтобы вы знали, какие цвета и контрасты вы должны использовать, какие элементы добавить или убрать, какие шрифты и общие стили макета будут лучше всего подходят для целевой группы.
Мы упомянули возраст как одну из вещей, которые вы должны учитывать, и опасность здесь заключается в том, что многие веб-дизайнеры делают поспешные выводы и думают, например, что пожилые люди предпочитают веб-сайты с легкой тематикой из-за удобочитаемости.
Со временем у людей вырабатываются привычки, которые влияют на их восприятие – они могут предпочесть определенный макет веб-сайта просто потому, что привыкли к нему и привыкли.
Наконец, если вы хотите реализовать черный фон веб-сайта, вы должны учитывать цель веб-сайта, которая в некотором роде похожа на тему и тему веб-сайта.
Если вы создаете веб-сайт для фотографа, создание прохладного темного фона выделит каждый цвет на фотографии клиента.
Если вы делаете информативный веб-сайт с объявлениями и новостями, черный фон веб-сайта не подходит.
Элегантность или удобство чтения?
Интернет-пользователи и даже некоторые дизайнеры критикуют темный дизайн за его главный недостаток — плохую читабельность и плохое юзабилити сайта. Все они утверждают, что светлый текст на темном фоне читать сложно, и мы с этим согласны.
Однако есть способы противостоять этой проблеме, и если вам интересно, продолжайте читать.
Есть ли место для пробела?
Одной из последних тенденций дизайна является использование белого (пустого) пространства, и даже если это не так, его использование обязательно для всех веб-сайтов с темным эстетическим фоном.
Без него визуальные эффекты будут казаться тяжелыми и ошеломляющими.
Варианты текста для веб-сайта с черным фоном?
Основная проблема темного дизайна — читабельность, и если это не сделано правильно, посетители и даже ваш клиент могут счесть это непривлекательным. Имея это в виду, следует уделить особое внимание тексту — его формату, стилю, шрифту и сочетаемости с фоновым цветом.
Мы предлагаем увеличить пустое пространство в тексте, отрегулировав размер абзаца, кернинг и интерлиньяж, так как это, безусловно, улучшит читаемость.
Контраст между темными фоновыми изображениями и текстом
Мы считаем, что об этой возможной проблеме с форматированием текста следует говорить отдельно от упомянутых ранее.
Причина этого в том, что слишком большой или слишком маленький контраст между текстом и фоном вызывает напряжение глаз, что является основной причиной, по которой посетители немедленно закрывают страницу.
Решение заключается в балансировке масштабов между темным фоном и светлым текстом.
Приятные для глаз шрифты
Как и в случае с фоном любого другого веб-сайта, выбор и формат шрифта играют большую роль в макете дизайна. Мы заметили, что шрифты без засечек более читабельны, чем элегантные шрифты с засечками.
Знание того, как скомпоновать их вместе, чтобы сделать текст более разборчивым, приходит с практикой, и мы советуем вам помещать более крупный текст в шрифты с засечками.
Насыщенная цветовая гамма недопустима
Эмпирическое правило гласит, что темные рисунки не сочетаются с насыщенной цветовой схемой из-за резкого контраста между фоном и цветными элементами.
Что вам нужно сделать, так это придерживаться одного или двух цветов, поиграть с ними и посмотреть, как они сочетаются с вашим фоном. Мы очень впечатлены сочетанием красного и черного фона!
И светлое, и темное
Если у вас достаточно времени и ресурсов, вы можете создать дизайн, который убьет двух зайцев одним выстрелом. Внедрение переключателя стилей — хороший способ позволить посетителям выбрать предпочитаемый дизайн, будь то светлый или темный.
