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

Leave a Comment / Разное / By /

Содержание

Темные сайты — часть 3

Подбор цветов сайта является одной из самых важных задач. Палитра может вызывать у посетителя определённые эмоции и устанавливать своеобразные правила использования и просмотра сайта. Веб сайты в тёмных тонах могут быть элегантными, с использованием нетрадиционных дизайнов, представлять модные тенденции и даже быть яркими и блестящими.  
Использование тёмного бекграунда дает возможность сосредоточить внимание на контенте, и делает более эффективным размещение на нем портфолио, галлерей с изображениями и подборок дизайнов.  
В этой статье вы сможете увидеть 42 примера тёмного дизайна. Некоторые из этих сайтов вы могли видеть в статьях посвящённых хедерам, некоторые в подборке о бекграунде, но у каждого из них есть свои отличия, а похожи они тем что во всех них преобладающими являются тёмные тона. Это третья часть подборок под названием “Тёмные сайты”, также вы сможете увидеть Тёмные сайты — часть 2 и 32 тёмных сайта.

Сайт axe choco сделан в шоколадных тонах

Сайт Starbucks Coffee At Home

Тёмный иллюстрированный сайт electricurrent

Креативный и необычный сайт Pikaboo

Российский сайт бренда befree

Тёмный дизайн сайта TAKE THE WALK

Тёмный природный дизайн Bird Malaysia

На сайте Elan Snowboards дизайн в серых тонах

Тёмный дизайн на сайте Eye Candy

Серый дизайн с ярким хедером на Mike Poss’ Rock Guitar Blog

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

Сайт Nile Inside в тёмных тонах и стиле гранж

Чёрный сайт Batman The Dark Knight in 3D

Тёмный блестящий сайт glasshine посвященный необычным стаканам

Забавный сайт LaRedoute

Иллюстрации на тёмном фоне сайта BootB

Сайт графического дизайнера B. N. WEISS сделан в стиле ретро

Тёмный бекграунд с музыкальными элементами на Riffs Music Academy

Стильный тёмный сайт орехов Мачо

Тёмный беграунд в серую полоску на cyan

Креативный тёмный дизайн сайта Meet the BigMan

Сайт ресторана Twelve Restaurant & Lounge Bar в серых тонах

Тёмный дизайн сайта AdaptD с яркими элементами в ретро стиле

Хороший тёмный дизайн сайта Pixel Farm

Элегантный сайт R1 nanotek также сделан в тёмных тонах

Тёмный дизайн сайта радио Серебрянный дождь

Сайт веб-дизайнера Elliot Jay Stocks выполнен в тёмных тонах

Тёмный дизайн сайта коллектива состоящего из художников различных возрастов и стран depthCORE

Креативный сайт IDEO

Сайт 2Pitch посвящен компании графических дизайнеров и их работам

Дизайнерский сайт JUXT Interactive в тёмном гранжевом исполнении

Сайт Let It Bleed посвящен группе Rolling Stones

Ещё один сайт дизайнерской студии Level9 Design

Rabotilnica – сайт небольшой студии креативного дизайна

Сайт Hamish Macpherson интересен тем что вы сможете менять его цветовую гамму в пяти вариациях не изменяя контента

Сайт программиста выполненный в стиле гранж и коричневых тонах — Timothy van Sas

Сайт венгерского дизайнера в темно-коричневых тонах new {concept}

Серый сайт интузиаста и фотографа coda. coza

Иллюстрированный сайт Dead Metropolis Recordings

Сайт детективного фильма Mad Detective

Необычный тёмный сайт Wacom Pen Collective посвященный коллективу состоящему из графических дизайнеров, фотографов, 3D модельеров и многих других людей.

А на сайте Krista’s Creations можно найти весь латинский алфавит в виде множества креативных фотографий к каждой букве.

Автор — sixrevisions

Перевод и редактирование — Дежурка

  • Опубликовано в Веб-дизайн, ноября 4, 2008
  • Метки: дизайн, дизайн сайта, креатив, палитра, сайт, цвет

Tweet

�



[an error occurred while processing the directive]

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

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 предлагают пользователям переключаться на темную тему, т.к. их часто используют в вечернее время после работы в помещении с приглушенным светом.

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

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

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

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

Эстетика

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

Вывод

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

Самые крутые черные веб-сайты, которые вы можете найти в Интернете