Содержание

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 — плагин для проверки контрастности элементов переднего плана и фона

Спасибо за внимание 🙌

Темная сторона дизайна | Далее

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

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

В своем пакете графики Design Kit для проектирования интерфейса программ для iOS Apple дал пакет инструментов сразу для светлого и темного варианта. Apple создал темную тему для Apple TV (How to use Dark Mode on Apple TV), а у iPhone и iPad теперь есть режим «ночной смены», придуманный для нейтрализации голубого света, который мешает уснуть.

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

Выбор дизайнеров

Дизайнер из Лондона Константина Мальтезу проанализировала выбор цветовых тем для программ дизайнеров. Темная тема позволяет обращать внимание на инструменты только тогда, когда они действительно понадобятся, а все остальное время видеть их на заднем плане. Поэтому фокус смещается в основную контентную область, где находится моделируемый 3D-объект или элементы дизайна мобильного приложения. Будьте осторожны, выбранная тема не должна «прятать» от пользователей необходимый функционал.

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

Эти тезисы подтверждает опыт работы дизайнеров Далее:

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

Выбор разработчиков

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

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

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

Удобочитаемость

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

Контраст

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

Свободное место

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

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

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

Тестирование цветовой темы

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

Фокус на контенте

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

Эстетика

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

Вывод

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

Веб-сайты с темным фоном: как это сделать правильно

Иногда темный дизайн веб-сайта не является подходящим решением для клиента или бизнеса клиента.

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

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

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

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

Когда следует выбирать темную тему вместо светлой?

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

Вы бы не хотели иметь темный фон на свадебных сайтах, верно?

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

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

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

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

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

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

Если вы делаете информативный веб-сайт с объявлениями и новостями, черный фон веб-сайта не подходит.

Элегантность или удобство чтения?

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

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

Есть ли место для пробела?

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

Варианты текста для веб-сайта с черным фоном?

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

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

Контраст между темными фоновыми изображениями и текстом

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

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

Решение заключается в балансировке масштабов между темным фоном и светлым текстом.

Приятные для глаз шрифты

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

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

Насыщенная цветовая гамма недопустима.

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

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

И светлое, и темное

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

Лучшее использование темного дизайна веб-сайта

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

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

Окончание мыслей на темном фоне

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

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

веб-дизайн

35 лучших темных тем для веб-сайтов

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

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

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

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

1. Refraction

Источник изображения

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

Что нам нравится :

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

Основные цвета : черный (#040404), светло-серый (#F2F1F2), фиолетовый (#95A1F9)

2.

Конференция Awwwards

Источник изображения 9000 3

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

Что нам нравится :

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

Основные цвета : розовый (#FC93AD), светло-серый (#FEFDFB), черный (#1F1F1F)

3. Evervault

Источник изображения

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

Что нам нравится :

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

Основные цвета : темно-фиолетовый (#010314), ярко-фиолетовый (#592DD1), белый (#FFFFFF)

4. Ventriloc

Источник изображения

900 02 Ventriloc — агентство, которое помогает предприятиям с данными интеграция и анализ.

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

Что нам нравится :

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

Основные цвета : Темно-красный (#401D19), Ярко-оранжевый (#F9672C), Светло-красно-оранжевый (#ECCFC5)

5. Opera

Источник изображения

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

Что нам нравится :

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

Основные цвета : темно-зеленый (#191A19), нежно-белый (#F2F2F2), темно-серый (#444544)

6. Памятка

Источник изображения

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

Что нам нравится :

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

Основные цвета : черный (#000000), светло-серый (#CDCDCD), ярко-зеленый (#5AFE73)

7. Paxafe

Источник изображения

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

Что нам нравится :

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

Основные цвета : темно-голубой (#03131A), светло-серый (#F8F8F8), пастельно-синий (#8FD6E8), пастельно-зеленый (#D4FF9D)

8.

Kinsta

Источник изображения

Кинста — это популярный управляемый хост WordPress, который также расширен до общего хостинга приложений.

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

Что нам нравится :

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

Основные цвета

: сине-пурпурный (#0E0A1B), фиолетовый (#5333EC), бирюзовый (#32D3D8)

9. Агентство дизайна eJeeban

Источник изображения

9 0002 EJeeban Design Agency — агентство веб-дизайна. базируется в Малайзии. Веб-сайт агентства дизайна eJeeban использует темно-сине-пурпурный фон и светло-серый текст. Затем он добавляет немного энергии и творчества с розово-красным акцентом.

Что нам нравится :

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

Основные цвета : сине-пурпурный (#121220), светло-серый (#F0EDF2), розово-красный (#EC5A64)

10. Eco

Источник изображения 90 003

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

Что нам нравится :

  • У Blue есть ассоциации доверия, что отлично подходит для бизнеса в финансовой сфере или других нишах YMYL (ваши деньги или ваша жизнь).
  • Бирюзовый акцент добавляет энергии и интереса.

Основные цвета : королевский синий (#18148A), белый (#FFFFFF), бирюзовый (#67DEE5)

11. Le Studio Culotté

Источник изображения

Le Studio Culotté — французское дизайнерское агентство. который работает с предприятиями в сфере вина и алкоголя. На веб-сайте Le Studio Culotté используется темно-фиолетовый/пурпурный фон с более ярко-фиолетовым цветом для CTA и привлекательными цветовыми градиентами.

Что нам нравится :

  • Градиенты добавляют яркости и энергии темной теме веб-сайта.
  • Ярко-фиолетовые CTA по-прежнему достаточно контрастны, чтобы привлечь внимание посетителей.

Основные цвета : пурпурный (#020021), ярко-фиолетовый (#5D13F9), белый (#FFFFFF)

12. Cuberto

Источник изображения

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

Что нам нравится

:

  • Черно-белая — классическая темная тема веб-сайта.
  • Желтый акцент по-прежнему добавляет интереса и энергии дизайну.

Основные цвета : черный (#121212), белый (#FFFFFF), желтый (#E0FD60)

13. GetSport

Источник изображения

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

Что нам нравится :

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

Основные цвета : Голубо-голубой (#162936), Белый (#FFFFFF), Ярко-зеленый (#8CC92D)

14. Критическая опасность

Источник изображения

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

Что нам нравится :

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

Основные цвета : темно-бордовый красный (#3B1C1C), ярко-красный (#E41E2D)

15. Daily Gogen

Источник изображения

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

Что нам нравится :

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

Основные цвета : Темно-синий (#2F3B6D), Голубо-зеленый (#2AF6A2), Светло-серый (#F2F3F6)

16. GBL Studio

Источник изображения 9 0003

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

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

Что нам нравится :

  • Этот сайт предлагает классическую черно-белую тему веб-сайта.
  • Желтые акценты придают дизайну интерес и энергию.

Основные цвета : черный (#000000), белый (#FFFFFF), желтый (#FBE10F)

17. Made In Evolve

Источник изображения

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

Made in Evolve также предлагает как светлый, так и темный режимы, при этом светлый режим переключает черный и белый (например, фон становится белым, а текст черным, если вы включаете светлый режим).

Что нам нравится :

  • Фиолетовые акценты добавляют интереса к дизайну.
  • Сохраняя простоту цветовой темы, Made in Evolve может предлагать как светлый, так и темный режимы.

Основные цвета : черный (#222222), белый (#FFFFFF), фиолетовый (#A09DFF)

18. The Quake

Источник изображения

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

Что нам нравится :

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

Основные цвета : Темно-красный (#2B1F17), Ярко-красный (#C21814), Белый (#FFFFFF)

19.

Спектральный

Источник изображения

9 0002 Spectral стремится стать первым кредитным рейтингом Web3 чтобы помочь людям контролировать свою кредитоспособность в сети. Он использует черно-белую тему веб-сайта в качестве основы, но добавляет цвет с помощью своего ромбовидного логотипа и анимации.

Что нам нравится :

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

Основные цвета : черный (#000000), белый (#FFFFFF)

20. CardioOne

Источник изображения

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

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

Что нам нравится :

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

Основные цвета : черный (#000000), белый (#FFFFFF)

21. Web-Systems Solutions

Источник изображения

Web-Systems Solution s — агентство по разработке, которое работает с Shopify (и также Вордпресс). Web-Systems Solutions в основном использует черно-белые изображения. Тем не менее, на сайте присутствуют зеленые акценты, что хорошо соответствует его направленности на развитие Shopify.

Что нам нравится :

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

Основные цвета : черный (#151515), белый (#FFFFFF), зеленый (#67C22F)

22. Aaron McGuire Design

Источник изображения

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

Что нам нравится :

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

Основные цвета : черный (#111013), нежно-белый/желтый (#F5EFDF)

23. Питер Арендт

Источник изображения

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

Питер также добавляет крошечных цветовых акцентов, таких как красный цвет на букве «L» в «Разработчик».

Что нам нравится :

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

Основные цвета : черный (#0F0D0D), желтый (#FBE094), красный (#FA2256)

24. Valemtimes

Источник изображения

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

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

Что нам нравится :

  • Темный фон не сплошной, что создает визуальную интригу.
  • Небольшое использование красного цвета связано с брендингом/посланием инструмента (валентинка/любовь).

Основные цвета : черный (#121212), белый (#FFFFFF), красный (#A7445D)

25. Alster

Источник изображения

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

Что нам нравится :

  • Серая строка меню выделяется, сохраняя темную тему веб-сайта.

Основные цвета : Черный (#0F1217), Белый (#FFFFFF), Серый (#3F4246)

26.

Дэвид Любофски

Источник изображения

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

Что нам нравится :

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

Основные цвета : черный (#161617), белый (#FFFFFF), желтый (#FAD700)

27. SunVest

Источник изображения

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

Что нам нравится :

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

Основные цвета : темно-синий (#0F1625), желтый (#FACE34), белый (#FFFFFF)

28. Shahadat Hussain

Источник изображения

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

Что нам нравится :

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

Основные цвета : Темно-голубой-синий (#0A192F), Голубой (#CBD5F5), Бирюзовый (#64FDDA)

29.

Alukaze

Источник изображения 9 0003

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

Что нам нравится :

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

Основные цвета : черный (#000000), белый (#FFFFFF), желтый (#FBFA03)

30. 3AI

Источник изображения

9000 2 3AI — финансовая компания, целью которой является использование ИИ и финансовые данные для повышения доходности. На веб-сайте 3AI используется темно-голубой фон с белым текстом. Он также добавляет цвет и акцент с лососево-розовым акцентом.

Что нам нравится :

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

Основные цвета : голубой (#3D4045), розовый (#ED9B81), белый (#FFFFFF)

31. Flow Ninja

Источник изображения

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

Что нам нравится :

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

Основные цвета : Темно-синий (#19224C), Голубой (#DEE2FF), Белый (#FFFFFF)

32.

Broadgate Creative

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

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

Что нам нравится :

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

Основные цвета : сине-пурпурный (#15151B), светло-серый (#F3F3F3)

33. Регенерация: Black Cinema

Источник изображения

Regeneration: Black Cinema — это веб-сайт, который «исследует богатую историю участия чернокожих в американском кинематографе с момента его зарождения до самого начала движения за гражданские права».

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

Что нам нравится :

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

Основные цвета : черный (#282828), белый (#F9F9F9), желтый (#FCE48B)

34. Lonsdale

Источник изображения

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

Что нам нравится :

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

    No related posts.