Темный фон в дизайне сайта
Создавая новый проект, часто оказываешься перед выбором цветовой схемы дизайна. Собственно, наиболее актуальны фоны светлого тона, они создают ощущение простора, не давят на сознание и легче помогают воспринять информацию.
Однако, не под каждую информацию подойдут светлые оттенки, да и при частом повторении такой дизайн просто надоедает.
Как же сделать красивый, привлекательный, интересный сайт используя темный фон? Для этого следует выполнить несколько моментов.
Темный цвет палитры замечательно подходит для каталога или же сайтов-галерей. Яркие, светлые картинки очень выразительно смотрятся на темной основе.
Если вы желаете придать своему ресурсу элегантный, стильный вид, неплохо использовать отражения. На темном фоне они будут смотреться весьма выигрышно.
Но особое внимание придется уделить цветовой гамме. На «черном» фоне любой цвет может оказаться решающим. Поэтому прежде, чем сочетать цвета на темном фоне, нужно быть уверенным, что они друг другу подходят.
Но если вы не уверены в том, что способны грамотно и правильно подобрать цвета, то есть решение попроще. Выберите для себя один основной цвет, который намерены использовать в виде заголовков, в названиях и прочем. Это позволит привлекать внимание к нужным элементам сайта.
Впрочем, если у вас совсем не будет складываться с цветами, их можно вообще не использовать, отдав предпочтение серым и белым тонам. Если применить их со вкусом, дизайн получится просто великолепный.
А вот со шрифтом лучше не мудрить, выбирая самый простой и приемлемый для понимания. Текст – это самое главное, что есть на сайте.
Не стоит, однако считать, что темный фон означает однородность и отсутствие насыщенности. Можно создать контраст между темными и светлыми местами, однако ни один элемент не должен сливаться с окружением.
Для того, что бы ваш текст был максимально читабельным, используйте между текстовыми блоками, строками и буквами, отступы.
Отличным вариантом придания сайту оригинального вида, это смешать картинку с цветом фона. Если правильно подобрать изображение, соответствующее тематике ресурса, эффект получится просто потрясающий.
Для создания «темного» сайта можно использовать самые разные хитрости. Кисти и текстуры разбавят мрачность и сделают сайт привлекательным и оригинальным.
Темный цвет сайта не всегда является хмурым, и подходит не только для готических ресурсов. Если использовать его разумно, он всегда сыграет на пользу вашего ресурса.
← предыдущая следующая →
Почему сайты с темным фоном полностью отстой [мнение]
Вы читаете MakeUseOf прямо сейчас, веб-сайт, который в основном использует темный текст на светлом фоне. Что так и должно быть. Эта полоса в верхней части со светлым текстом на темном фоне и раздел в нижней части, который почти никто не читает, хороши тем, что представляют собой лишь небольшие части сайта. Больше, и я должен был бы дать моим боссам совет о том, как улучшить внешний вид сайта в целом — потому что веб-сайты с темным фоном полностью отстой.
Вы не согласны с такой оценкой? Тогда читайте дальше, пока я спорю, почему это так. Если вы все еще не согласны, когда дойдете до конца, то я боюсь, что вас не спасет от плохого дизайна сайта
будущее, которое вы отправились на пути к. Есть причина, по которой 99 процентов (полностью вымышленная фигура) Интернета используют темный текст на светлом фоне …
Дизайн сайта
Дизайн сайта постоянно развивается. Просто введите любой URL в The Wayback Machine, чтобы увидеть, как далеко мы продвинулись за последние 15 лет. Элементы, включенные в веб-страницу, изменились, с различными встроенными медиа и полностью интегрированы. Ох, и теперь везде вы смотрите рекламу. Что может раздражать, но держать сайты, такие как MakeUseOf, доступными для всех.
Тем не менее, большинство веб-сайтов по-прежнему сохраняют тот важнейший компонент, как текст. За исключением фотоблогов и т. П., Если нет текста, нет способа узнать, на что вы смотрите, или по какой причине вы хотите на него смотреть.
Черное и белое
Книги в основном состоят из белой бумаги и черного текста. Поэтому это стандартный способ, которым человечество научилось читать печатные материалы. Когда компьютеры впервые вышли на массовый рынок, они поставлялись с монохромными дисплеями, поэтому многие из нас впервые получили зеленый текст на черном фоне. Мальчик, это отстой. К счастью, цветные мониторы скоро вступили во владение.
Когда Интернет начал развиваться в то место, которое мы знаем сегодня, многие сайты приняли странный и причудливый подход к дизайну. Яркие цветовые схемы и вспыхивающий текст были в моде. К счастью, мы снова пошли дальше, и большая часть Интернета теперь следует очень осторожной и продуманной линии дизайна, которая видит удобство и простоту чтения и дает прецедент над визуальным стилем, предназначенным для оглушения, но с большей вероятностью может вызвать эпилепсию.
Веб Стандарты
В то время как цвета, отличные от черного и белого, лучше во многих случаях (телевидение и фильмы для начинающих), для текстовых средств массовой информации, таких как большинство веб-сайтов, правило черного и белого.
Нетрудно понять почему. Черным по белому работает. Вы можете ясно видеть текст, не отвлекая ничего от вашего поля зрения.
Поскольку большая часть Интернета заняла эту разумную позицию, когда веб-пользователь попадает на сайт, который занял противоположную позицию, это очень заметно. Глаза занимают некоторое время, чтобы приспособиться к светлому письму и темному фону, в то время как мозг изо всех сил пытается понять, почему кто-то сделал бы такую вещь.
Возможно, если бы на каждом сайте использовался темный фон, все было бы не так плохо, но так как светлый фон — стандарт, странное исключение выглядит ужасно.
Надо стараться
Итак, большинство сайтов с темным фоном полностью отстой. Но им не обязательно сосать столько, сколько они в настоящее время делают. Те, кто отвечает за разработку, создание и поддержку веб-сайтов с темным фоном, могут и должны стараться изо всех сил.
У депо веб-дизайнера есть несколько хороших примеров сайтов с темным фоном, которые хотя бы пытаются улучшить ситуацию.
Очевидно, они все еще отстой, но, регулируя простые элементы, такие как размер и шрифт текста, длину абзаца и контраст между оттенком светлого текста и оттенком темного фона, эти сайты сводят всасывание к минимуму.
Другими словами, количество, которое веб-сайты с темным фоном сосут, существует по скользящей шкале. И немного больше времени и усилий (и адаптация чувствительности дизайна к темному фону) приводит к более терпимым примерам. Старайтесь изо всех сил, и, возможно, мы не будем так легко отказываться от вашего дизайна.
Выводы
Какой ты предпочитаешь? Темный текст на светлом фоне, как это норма, или светлый текст на темном фоне, как это странно? Не стесняйтесь разбирать мой аргумент о том, почему сайты с темным фоном полностью отстой. Или, если вы предпочитаете согласиться со всем, что я сказал, чтобы внутри меня было тепло и нечетко, тогда это тоже хорошо.
Авторы изображений: Том Ф, Крис Гилмор, purplejavatroll
Google выпустила обновление Chrome с ночной темой для сайтов.
Как включить Наверное, все помнят со школьных времён, как учителя заводили себе любимчиков, которых постоянно ставили в пример другим. Конечно, это совершенно непедагогично, но, если этим любимчиком оказывались мы сами, жаловаться особенно не приходилось. Компания Google ведёт себя как тот самый учитель, который постоянно выделяет одно своё детище, делая вид, что других не существует вовсе. Речь, конечно же, о Google Chrome, который обновляется чуть ли не каждую неделю, а теперь получил и поддержку продвинутой ночной темы.
Google Chrome получил поддержку ночной темы для сайтов
На этой неделе Google начала распространение обновления Google Chrome для настольных платформ. В текущей версии разработчики исправили массу уязвимостей в браузере, сделав его более защищённым, а также добавили поддержку расширенной ночной темы. В отличие от классической ночной темы, которая доступна пользователям Google Chrome уже давно, расширенная позволяет изменить не только оттенок интерфейса браузера, но и содержание самого сайта, о чём многие просили Google уже очень давно.
Как включить ночную тему для сайтов в Chrome
Chrome «красит» сайты в чёрный довольно посредственно, поэтому, возможно, многие предпочтут отказаться от ночной темы вообще
Несмотря на то что ночная тема появилась в Google Chrome, найти её в системных настройках не получится. Дело в том, что Google скрыла её в экспериментальном меню, очевидно, сочтя недостаточно проработанной. Поэтому, чтобы активировать ночную тему, которая бы изменяла цвет фона открытых веб-страниц на тёмный, нужно перейти в chrome://flags, отыскать параметр Force Dark Mode for Web Contents и в выпадающем меню напротив него выбрать пункт Enabled, после чего перезагрузить браузер. Только после этого вы сможете включить расширенную ночную тему.
Читайте также: Чёрный экран в Google Chrome? Как исправить
Поскольку Google Chrome окрашивает фон веб-страниц в тёмный самостоятельно в соответствии с представлениями встроенных алгоритмов о том, как должны выглядеть сайты с ночной темой, зачастую результат оставляет желать лучшего.
В отличие от мобильной ночной темы, которая окрашивает интерфейс браузера в тёмно-серый цвет, настольная красит фон сайтов в чисто чёрный, оставляя цветные элементы без изменений, из-за чего создаётся впечатление инверсии. Некоторым такое сочетание не нравится, заставляя их глаза слезиться от такого сочетания оттенков.
Почему сайты в Chrome так плохо выглядят с ночным режимом
Скорее всего, ситуацию можно исправить, но только при условии, что владельцы сами захотят адаптировать свои сайты под ночную тему Google Chrome. Для этого им придётся разработать новый дизайн, чтобы все элементы веб-страниц гармонично смотрелись на тёмном фоне. А поскольку для этого потребуются значительные финансовые вливания, скорее всего, большинство администраторов откажутся от этой затеи. Поэтому всё, что останется пользователям, — это довольствоваться тем, как действуют алгоритмы Google Chrome.
Читайте также: Google научила Chrome блокировать разделы некоторых сайтов. Зачем?
Обновление Google Chrome с расширенной ночной темой распространяется постепенно, а потому пока может быть доступно не всем.
По словам разработчиков Google, этот процесс может длиться от нескольких дней до нескольких недель. Поэтому, если вы ещё не получили апдейт, нужно ещё немного подождать. Правда, до момента установки актуальной версии браузера активировать ночную тему для сайтов вы тоже не сможете, поскольку соответствующий пункт в меню флагов появляется именно в Google Chrome 78.
Тёмный режим для сайтов в окне Google Chrome
Привет, друзья. Эта статья для любителей тёмного или, как его ещё называют, ночного режима оформления программного интерфейса. Для любителей, а также тех, кто заботится о сохранности своего зрения при длительной работе за компьютером или, увы, уже имеет ослабленное зрение. И в этой статье мы будем говорить о возможности реализации в окне браузера Chrome тёмного режима для сайтов в Интернете. Не для отдельных каких-то сайтов типа YouTube или Facebook в новом дизайне, которые позволяют в своих настройках выбрать тёмную расцветку фона с белым шрифтом публикаций, а для всех подряд сайтов.
Тёмный режим для сайтов в окне Google Chrome
На днях Google Chrome обновился до версии 78. Мы не увидим в нём новинок невооружённым глазом, обновления касаются внутреннего содержимого браузера: из него выпилены некоторые старые, более не используемые технологии и внедрены новые функции, которые теперь какое-то время будут тестироваться. И если впоследствии утвердятся компанией Google, то, соответственно, станут частью стабильных сборок Chrome. Тестовые функции браузера может использовать любой желающий, активировав их в скрытых настройках. И вот в числе таких скрытых тестовых функций появился Force Dark Mode for Web Contents – форсированный тёмный режим для веб-контента.
Форсированный тёмный режим для веб-контента позволяет задействовать для любого сайта в Интернете тёмную тему оформления.
Чтобы включить тёмный режим для веб-контента, идём в раздел скрытых настроек, а для этого в адресную строку Chrome вписываем:
chrome://flags
В поисковое поле скрытых настроек вводим:
#enable-force-dark
Ставим значение параметра в положение «Enabled» и жмём кнопку перезапуска браузера «Relaunch Now».
После перезапуска увидим раздел скрытых настроек в тёмном оформлении.Вот так, друзья, в ночном стиле будет выглядеть поисковик Google.Вот так Википедия.Вот так торговая площадка AliExpress.А вот так наш сайт RemontCompa.Ru.Ну а вот так, друзья, строго, стильно и лаконично тёмный режим для веб-контента смотрится в тандеме с активной тёмной темой оформления самого браузера.
Кто не знает, таковая сама активируется при включении системной тёмной темы оформления в Windows 10. Для других же версий Windows необходима коррекция свойств ярлыка запуска Google Chrome. Подробнее об этом читайте в статье «Тёмная тема оформления в Google Chrome».Метки к статье: Браузеры Google Chrome Кастомизация
Темный режим в Outlook.com и Outlook в Интернете
Темный режим изменяет яркий цвет фона по умолчанию в Outlook.com и Outlook в Интернете на более темный цвет, что удобнее для зрения при слабом освещении или если вы предпочитаете менее яркие интерфейсы.
Примечание: Темный режим доступен только в новых Outlook.comи Outlook_on_the_web режиме.
Как включить темный режим?
-
В верхней части страницы выберите пункт Параметры .
-
Щелкните переключатель рядом с полем Темный режим.
Поддерживаются ли в темном режиме темы?
В настоящее время в темном режиме поддерживается только синяя тема по умолчанию.
Почему в области чтения темный фон?
После включения темного режима, область чтения отображается на темном фоне, чтобы снизить нагрузку на глаза. Вы можете сделать область чтения более яркой, нажав кнопку в ее верхней части. Если эта кнопка не отображается, выберите .
Как просмотреть исходное форматирование сообщения?
Чтобы просмотреть исходное форматирование сообщения, выберите
в верхней части области чтения.
почему многие сервисы создают темные темы и нужны ли они
Темные интерфейсы смотрятся эффектно, стильно и элегантно. Тем не менее, дизайнерам стоит выбирать «темную сторону» осторожно, поскольку не всегда это оправдано. В каких случаях темный интерфейс уместен, а в каких нет, попробуем сегодня разобраться.
Особенности дизайна темной темы
Создание внешнего вида продукта — одна из основных обязанностей дизайнера. Дизайнерское решение учитывает в первую очередь концепцию продукта, конкретную ситуацию его применения и аудиторию. Изначально предполагается, что цветовая схема разрабатывается для длительного использования, поэтому выбирать ее необходимо тщательно. Все начинается с подбора фона — своеобразного «холста», на котором потом будут размещены элементы дизайна. Обычно по умолчанию выбирают белый фон.
Для выбора светлого фона есть веские причины. Контрастность, текст, удобочитаемость и возможность работать с широким спектром неярких оттенков — вот некоторые из них.
Согласно научным исследованиям, оптимальную разборчивость дает черный текст на белом фоне. Брендинг также может повлиять на решение, поскольку логотипы и цвета компании не всегда гармонично сочетаются с темной цветовой палитрой.
Результаты большинства исследований показывают, что темный текст на светлом фоне читается легче, чем светлый текст на темном фоне. Также гораздо меньше становится в таком случае нагрузка на глаза.
Есть определенный стереотип: люди привыкли видеть различные надписи и даже изображения темными чернилами на белом фоне. Вспомните газеты и журналы, которые существуют уже более 350 лет. Если заглянуть еще дальше — на 35 000 лет назад, в эпоху палеолита (дни пещерного человека), можно увидеть наскальные рисунки львов и мамонтов, нанесенные в основном на светлый фон углем или обожженными костями.
Доисторические рисунки в пещере Шове, Франция, которым 30 000 летСовременные дизайнеры выбирают темную цветовую схему по ряду причин, если тематика проекта обязывает.
Зачастую это всего лишь эстетический выбор, чтобы произвести впечатление или вызвать вау-эффект. В некоторых случаях дизайнер хочет объединить таким образом дизайн с брендингом в одно целое или выделить визуальный контент.
Однако если дизайнер решит перейти на «темную сторону», он может столкнуться с некоторыми трудностями. Начинаются различные проблемы юзабилити, в основном связанные с возможностью сканирования, читабельностью и контрастностью. Важно соблюдать оптимальный контраст между текстом и фоном. Необходимо обращать внимание на контекст (условия использования) и среду, а также устройство, на котором интерфейс будет просматриваться.
Breitling выбрал черный фон, чтобы сделать акцент на дизайне своих изделийТемный интерфейс и нагрузка на глаза
Некоторые темные интерфейсы разработаны так, чтобы минимизировать компьютерный зрительный синдром.
Это настоящая проблема, с которой ежедневно сталкиваются миллионы людей, ведь с ростом цифровых технологий мы смотрим на экраны большую часть дня. Спровоцировать компьютерный синдром может что угодно, от чрезмерного использования компьютера до регулярного воздействия яркого света. Основные симптомы: головная боль, боль в шее, потеря остроты зрения и жжение в глазах.
Можно ли этого избежать? Об этом давно задумываются разработчики. К примеру, продукты SaaS для бизнеса и приложения для редактирования мультимедиа обычно используются несколько часов подряд. Многие из них были разработаны в темном интерфейсе, чтобы уменьшить нагрузку на глаза. При этом они поддерживают визуальную четкость на оптимальном уровне. Однако такой подход требует тщательной предварительной оценки проектирования.
Приложения Bloomberg Anywhere для iOS (Джереми Фюрст)
Разработчик Toptal Амин Шах Гилани отмечает: «Я использую темную тему для моего редактора кода. Я предпочитаю такой интерфейс, потому что темный фон комфортнее для глаз.
Особенно мне нравится его использовать при неярком освещении или работе ночью».
Для интерфейсов игровых приложений также часто используется темная тема. Игровой контекст и среда, в которой находятся игроки, лучше сочетаются с черной цветовой палитрой. Темное фоновое оформление подчеркивает яркие визуальные эффекты, привносит чувство тайны, усиливает контраст и поддерживает визуальную иерархию.
HALO Wars— стратегии в реальном времениКогда нужны темные интерфейсы
Большинство развлекательных сервисов (Smart TV, игровые приставки, приложения для телевидения и кино), как правило, имеют темный дизайн. Причины понятны: в основном они используются вечером и находятся на расстоянии 1,5-3 метров от глаз в плохо освещенных помещениях, то есть экран соответствует окружающей обстановке. Кроме того, яркий контент резко выделяется на темных интерфейсах и привлекает внимание.
Представьте себе ситуацию: темнеет, вы расслабляетесь и хотите посмотреть телевизор.
Но не тут то было. Подобно тысячам крошечных лампочек, цифровые дисплеи излучают свет через яркие пиксели. Если тема будет светлой, экран превратится в прожектор, что крайне нежелательно в темноте. Поэтому дизайн интерфейса необходимо подстроить под контекст: устройство, контент, активность и среду.
Надеемся, вы помните, что всегда необходимо учитывать контекст, в котором интерфейс будет использоваться, чтобы темная тема была уместна. Как мы уже говорили, выбор зависит от контента и ситуации: что, когда, где и на каком устройстве. Чего можно достичь с помощью темной темы:
- Получить яркий визуальный эффект.
- Передать чувство стиля и элегантности, роскоши и престижа.
- Создать интригу и тайну.
- Помочь пользователю сосредоточиться и удержать его внимание.
- Подчеркнуть визуальную иерархию и информационную архитектуру.
Темные интерфейсы имеет смысл использовать только с небольшими блоками, в которых содержится минимум текста и информация подана четко, а основной акцент делать на визуальные эффекты — подсветку текста. Цвет текста должен контрастировать с темным фоном — предпочтение чисто белому или другим ярким (не темно-серым) оттенкам.
CINEMATEK, киноархив в Брюсселе, использует черный фон для усиления визуального эффектаКогда темные интерфейсы не нужны
Выше мы отметили, что интерфейсы с темной темой плохо подходят для больших массивов текста и данных или для использования с различными типами содержимого (текст, изображения, видео, таблицы данных, выпадающие списки, поля и т. д.). По общему мнению дизайнеров, темные интерфейсы — настоящая проблема для разработки, если только вы не работаете с простым контентом или редкими вкраплениями текста.
Если гнаться за оптимальным контрастом, это может снизить удобочитаемость, которая напрямую влияет на общее впечатление пользователей от интерфейса.
Как правило, все цвета работают на белом фоне, а вот с темным режимом сочетаются далеко не все оттенки.
Так быть или не быть темной теме? Вот в чем вопрос!
Принимать решение об использовании темного интерфейса нужно обдуманно. Если вы хотите слепо следовать моде или копировать чей-то стиль, лучше еще раз взвесить все за и против. Потому что у темной темы есть как определенные преимущества, так и много подводных камней, которые нельзя игнорировать.
Когда можно использовать темные интерфейсы:
- Это оправдано цветовой схемой бренда.
- Дизайн скромный и минималистичный с несколькими типами контента.
- Подходит для контекста и использования, например, ночные развлекательные приложения.
- Необходимо снизить нагрузку на глаза, например, страницы аналитики, которые используются в течение длительного времени.
- Для создания яркого, эффектного образа.
- Чтобы вызвать эмоции, добавить ореол интриги и тайны.
- Создать ощущение роскоши и престижа.
- Поддерживать визуальную иерархию.
Когда лучше держаться подальше от темных интерфейсов:
- Много текста (читать на темном фоне сложно).
- На экране много смешанного контента.
- Для приложений B2B с большим количеством форм, компонентов и виджетов.
- Дизайн требует широкого спектра цветов.
Принимаем правильное решение
К переходу на «темную сторону» следует подходить с осторожностью. Перед принятием такого серьезного решения рекомендуется провести глубокие, тщательные исследования и анализ, чтобы в дальнейшем не пожалеть о своем выборе. Если вы пошли по этому пути, повернуть назад будет уже сложно. Дизайнеры должны внимательно рассмотреть все факторы перед стартом и взвесить плюсы и минусы.
А вам нравятся темные интерфейсы? Поделитесь своим мнением.
Источник информации
6 лучших темных расширений для Chrome — Интернет И Социальные Сети
Google Chrome официально поддерживает темную тему, но он работает только в определенных областях, таких как панель закладок, вкладки и т. д. Темная тема не применяется к веб-страницам, где она больше всего требуется. Вот почему мы собрали 6 лучших расширений для темного режима для Chrome, которые поддерживают темную тему на всех сайтах.
Веб-страницы в основном белые с черным текстом. Людям, которые любят темный режим, это не нравится. Они предпочитают веб-страницы с черным цветом фона с белым текстом на них. К сожалению, темы Chrome не позволяют вам этого делать. Отсюда и причина использования расширений Chrome темного режима.
Мы отобрали 6 лучших расширений Chrome, чтобы сделать сайты темными. Все они хорошо работают с изображениями. Они не меняют цвета изображения. Давайте проверим их.
https://www.websitebuilderexpert.com/designing-web …
Правильная цветовая схема — базовый навык для любой сети дизайнер. Выбрать базовый цвет несложно, но настоящая проблема — получить правильный набор цветовых сочетаний. Поэтому многие дизайнеры будут использовать инструменты цвета, чтобы найти лучшую цветовую схему.
Существует множество цветовых схем и инструментов.Некоторые инструменты предназначены для использования определенным образом, в то время как другие могут удовлетворить только определенные конкретные потребности. Эта коллекция цветных инструментов из блога о творчестве содержит информацию для веб-дизайнеров по всем сценариям дизайна.
25 Темных и удивительных веб-сайтов
Эта страница может содержать ссылки на наших спонсоров или партнерские ссылки. Учить больше.Хотя темный фон — не лучший выбор для каждого веб-сайта, они могут помочь создать красивый веб-сайт в правильной ситуации. Ищете черный дизайн сайта вдохновение? В этом посте мы продемонстрируем 25 примеров красивых темных веб-сайтов, которые помогут развить творческий потенциал.
Надеюсь, эти примеры могут дать некоторые идеи и вдохновение, которые можно использовать в своей работе, когда вы рассматриваете возможность использования темного фона. Вы можете заметить, что некоторые типы сайтов, такие как сайты портфолио и сайты фотографий, как правило, лучше подходят для темного фона. Одна из основных причин этого заключается в том, что эти типы сайтов, как правило, больше полагаются на изображения и фотографии для общения с посетителями, чем на текст. В то время как темный фон часто затрудняет чтение текста, когда он находится в более длинных частях, фотографии и графика часто отлично смотрятся на темном фоне.
Джастин Финли
UI / UX-дизайнер и разработчик У Джастина Финли есть красивый сайт-портфолио, на котором демонстрируются его работы. Некоторые части сайта, такие как область над сгибом, имеют черный фон, в то время как другие разделы сайта используют вместо него белый фон. Темный фон используется очень эффективно, а белый фон используется для разделов с большим количеством текста.
Инес Мария Гамлер
Дизайнер интерфейсов и иллюстратор Инес Мария Гамлер также использует дизайн, сочетающий темный или черный фон с другими областями сайта, использующими светлый фон.Страницы и разделы, содержащие много текста, используют светлый фон для облегчения чтения, но другие разделы имеют жирный вид с черным фоном.
Sage
Sage — это мобильное приложение, и на его веб-сайте используется темный фон с белым текстом. В верхней части главной страницы вы сразу увидите макет смартфона с установленным приложением Sage. Это простой одностраничный сайт, который направляет посетителей на страницы загрузки мобильного приложения для iPhone и Android.
Тобиас ван Шнайдер
Веб-сайт Тобиаса ван Шнайдера в основном черно-белый, с некоторыми всплесками цвета в определенных местах. В области над сгибом на главной странице используется черный фон с большим белым текстом.
Заказ
На веб-сайте Ордена используется черный фон, но все же удается включить много цветов. Над сгибом в основном вы увидите белый текст и желтые кнопки, но при прокрутке вниз добавляются более красочные элементы.
Ashcroft
Веб-сайт Ashcroft несколько необычен, потому что темный фон сохраняется по всему сайту, включая страницы с большим количеством текста. Фоновое изображение также используется с темным фоном.
Статическое интерактивное
Этот веб-сайт портфолио использует немного минималистский подход. Журнал / блог использует светлый фон, но остальная часть сайта имеет темный фон и светлый текст.
PMD Group
На сайте PMD Group используется черный фон в сочетании с яркими цветами.
В дизайне используется элегантный черный фон, градиенты (включая текст) и области с белым фоном.
Haptic
Haptic — это приложение для iPhone с красивым темным веб-сайтом. Прокручивая страницу вниз, вы увидите много текста, несколько макетов приложения на iPhone и кнопки с призывом к действию.
Проект беженцев
Веб-сайт проекта беженцев довольно уникален. Как вы можете видеть на скриншоте ниже, домашняя страница очень минимальна с текстом на черном фоне.В других частях этого сайта, таких как карта, также используется темный фон.
Co & Co
Консультации по маркетингу Co & Co использует темный фон с полноэкранным видео на главной странице. В некоторых частях сайта используется черный фон, а в других — белый.
McChillin
McChillin — это веб-сайт дизайнера и разработчика Майка Макмиллана. Его сайт использует минималистичный макет с темным фоном. Сайт в основном просто ссылается на его работы и на его профили на других сайтах.
PROWEB
Сайт-портфолио PROWEB использует черный фон над сгибом с запоминающейся иллюстрацией, которая выделяет сайт. Это уникальный сайт с интересным дизайном, с анимацией и эффектами, которые привлекут ваше внимание.
Эван Эккард
Дизайнер Эван Эккард имеет веб-сайт портфолио, на котором в одних местах используется темный фон, а в других — белый. Домашняя страница имеет темный фон над сгибом, за исключением белого заголовка с меню навигации.
Джеймс Корчак
Этот сайт, посвященный памяти Джеймса Корчака, использует темный фон и несколько действительно креативных и интересных эффектов прокрутки. Прокрутите страницу вниз и посмотрите, как она работает.
Дэвид Хеллман
На главной странице Дэвида Хеллмана используется огромный белый текст на черном фоне. Помимо блога, остальная часть сайта также использует темную почву.
Aluxion
Этот сайт полностью черно-белый с некоторыми нарисованными вручную иллюстрациями и анимационными эффектами.Примерно половина сайта использует черный фон и примерно половина сайта использует белый фон.
hellohello
Темный сайт портфолио hellohello содержит видео на главной странице. На сайте везде используется темный фон и белый текст, широко используются фотографии и мелкие элементы, которые добавляют цвет.
TM
Портфолио веб-сайта TM использует черный фон на главной странице. Большая часть остальной части сайта использует белый фон для лучшей читаемости текста.
Bind
Bind использует темный фон на всем сайте с большим количеством добавленных цветных пятен.
Visual Soldiers
Веб-сайт портфолио Visual Soldiers имеет черный фон над сгибом. По мере прокрутки вниз цвет фона меняется. В разделах сайта с большим количеством текста используется светлый фон, но темный фон используется для придания смелости и элегантности везде, где это возможно.
Cinemateket
На этом веб-сайте, ориентированном на кино, на главной странице используется черный фон.Он использует простой макет с комбинацией фотографий и текста на темном фоне.
Parallel
Parallel решила использовать черный фон для своего консультационного веб-сайта. На сайте много фотографий и неизменно темный фон.
Quoit Works
В этом красивом сайте-портфолио используется темный фон с некоторыми цветными вкраплениями благодаря элементам в дизайне. Большая часть сайта имеет темный фон с белым текстом.
Nimax
На главной странице Nimax используется темный фон с большим жирным белым текстом, который действительно выделяется.
Заключение
Мы надеемся, что вам понравилась эта коллекция черных веб-сайтов и что она дает некоторые идеи и вдохновение, которые можно использовать в вашей собственной работе. Чтобы узнать больше о дизайне, см .:
Дизайн в темном режиме: 14 примеров работающих веб-сайтов с черным фоном
Вы заметили, что в последнее время ваш экран стал немного темнее? Ты не одинок.По мере того как темный режим становится все более популярным — среди операционных систем, браузеров и приложений — растет и его распространение в веб-дизайне.
Несмотря на то, что дизайн в темном режиме выглядит свежим, нет ничего нового. Если вы когда-нибудь пользовались компьютером в 80-х с монохромным экраном (или видели, как они использовались в фильмах — Ferris Bueller, ? Кто угодно, кто угодно?), Вы знаете, как это выглядит. Большинство первых домашних компьютеров отображали зеленый или белый текст на простом черном фоне.
Прочтите, чтобы узнать о плюсах и минусах создания веб-сайтов с черным фоном и увидеть 14 примеров удачного дизайна в темном режиме.
Что такое темный режим?
Также называемый черным режимом, темной темой или ночным режимом, темный режим — это термин дизайна, используемый для описания любой цветовой схемы «свет-на-темноте», которую многие пользователи предпочитают использовать в условиях низкой освещенности. В своей самой простой итерации представьте, что жирный белый текст на угольно-черном фоне.
Пятьдесят оттенков (темного) серого
Темный режим — это не просто выбор цвета фона веб-сайта со значением чистого черного (шестнадцатеричный код # 000000) и его выполнение. То, что работает в одном дизайне веб-сайта, может не повлиять на другой.Чтобы добиться нужного эффекта, необходимо больше нюансов подобрать цвет.
Когда вы будете готовы покрасить его в черный цвет, не ограничивайтесь # 000000. Благодаря множеству различных цветовых решений темного режима, доступных для фона вашего веб-сайта, подумайте, какой холодный черный или теплый черный лучше всего подойдет пользователю, дополнит общий дизайн веб-страницы и улучшит цветовую палитру вашего бренда.
Профессиональный совет: темный режим не обязательно означает переход в оттенки серого.
Выбор темного веб-сайта не обязательно должен быть буквально черно-белым.Есть много способов получить темный вид с другими цветами, похожими на черный.
Возьмем, к примеру, всемирно известный Миразур. Их фирма по веб-дизайну выбрала землистый кофейно-черный цвет для фона своего веб-сайта, чтобы создать впечатление от домашней страницы, которое соответствовало бы репутации французского ресторана в создании уникального обеда. На их сайте также есть фоновые цвета, такие как бархатистый баклажан и дымчато-зеленый сосновый цвет, чтобы создать темный образ.
Не знаете, с чего начать охоту за идеальным оттенком фона в темном режиме? Вот некоторые из самых популярных значений шестнадцатеричного кода темного режима, используемых для добавления насыщенной темноты на веб-сайты:
- # 0A0A0A
- # 121212
- # 15292B
- # 161618
- # 181818
- # 192734
- # 212121
- # 212124
- # 22303C
- # 242526
- # 282828
- # 3A3B3C
- # 404040
Что такого хорошего в темном режиме, а что не так
Темный режим помогает сделать изображения яркими
Вы когда-нибудь замечали, что многие музеи и фотографы часто используют черный фон на своих сайтах? Это не просто изысканное эстетическое предпочтение.Они делают этот выбор сознательно, чтобы их фотографии и иллюстрации оживали. Белый фон часто размывает изображения, но из-за того, что черный цвет становится меньше, фон в темном режиме заставляет изображения с более яркими цветами выделяться и оживать.
Еще один перк? Если большинство людей заходят на ваш сайт со своих смартфонов, вы будете очень довольны, потому что интерфейсы с фоном в темном режиме требуют меньшего заряда батареи.
«Взгляд всегда привлекает свет, но тени могут сказать больше. — Грегори Магуайр
Темный режим часто мешает читаемости
Исследователи обнаружили (pdf), что светлый текст на темном фоне труднее читать, чем темный шрифт на белом фоне из-за эффекта «ореола». Это явление делает темный режим менее чем идеальным выбором почти для всех веб-сайтов с большим количеством копий.
По словам дизайнера пользовательского интерфейса Джейкоба Нильсона, «для оптимальной разборчивости требуется черный текст на белом фоне. Белый текст на черном фоне почти так же хорош…. Разборчивость в большей степени страдает от цветовых схем, которые делают текст светлее чистого черного, особенно если фон сделан темнее, чем чистый белый ».
Если ваш веб-сайт, вероятно, будет использоваться ночью или пользователями в условиях более тусклого / слабого освещения, исследователи обнаружили, что темный режим может быть лучшим выбором для ограничения нагрузки на глаза. Взгляд на ярко-белые экраны, созданные на ярком белом фоне веб-сайта, может вызвать ощущение дискомфорта, когда пользователи находятся в темных комнатах.
Как и в большинстве случаев, в этом споре о разборчивости есть исключения. Например, пользователи с катарактой действительно находят веб-сайты с темным фоном для чтения легче, чем веб-сайты с белым фоном. Дважды проверьте исследование персонального персонажа своего веб-сайта, чтобы узнать, есть ли какие-либо демографические данные, которые имеют смысл проводить редизайн веб-сайта в темном режиме.
Темный режим вызывает сильные эмоции
Черный не нейтрален. Это доминирующий цвет, связанный с элегантностью, стилем и мощью, который при стратегическом использовании в качестве цвета фона веб-сайта добавляет визуальной привлекательности и глубины.
Совет для профессионалов: узнайте, чем занимаются ваши конкуренты в Интернете.
Дизайнерские решения не должны основываться только на эстетике и удобстве использования. Вы также должны думать о потребностях вашего бизнеса. Если ваши клиенты видят веб-сайты в темном режиме, когда посещают ваших конкурентов в Интернете, выбор привлекательного, светлого и легкого дизайна веб-сайта может помочь вам выделиться из толпы в их браузерах.
12 примеров дизайна веб-сайтов в темном режиме
WeTransfer
WeTransfer доказывает, что черно-белое изображение совсем не скучно, благодаря элегантному дизайну домашней страницы в темном режиме.Spotify
Spotify — это OG в мире дизайна темного режима. Их команда веб-дизайнеров всегда использовала черный фон на своих веб-сайтах и в приложениях, чтобы оживить макеты и заставить обложки альбомов «петь».Британский музей
На главной странице Британского музея веб-дизайнеры используют простые типографские методы и насыщенный черный цвет фона, чтобы выделить свои привлекательные фотографии.Субботний вечер в прямом эфире Поговорите о том, чтобы знать своих пользователей и думать о доступности. Saturday Night Live , зная, что многие пользователи придут сюда поздно вечером, когда будет транслироваться шоу, использует темный режим, чтобы упростить просмотр при слабом освещении для глаз аудитории.
Отслеживание футбола
Не готовы пойти ва-банк в темном режиме? Разделите разницу, как «Отслеживание футбола», используя дизайн темного режима, чтобы вызвать интерес вверху его домашней страницы, и белый фон внизу, чтобы представить более подробную информацию об их услугах. Узнайте больше о дизайн-проекте веб-сайта Tracking Football.Apple AirPod Плюсы
В зависимости от продукта или контента, которым делятся, Apple меняет шаблоны своих веб-сайтов со светлого режима на темный, как показано в этом примере их целевой страницы с черным фоном для AirPod Pro.Звездные войны
Не говорите Йоде, но веб-сайт Диснея, посвященный вселенной Star Wars , перешел на темную сторону … и включил черный фон для всех своих шаблонов страниц — даже для своего блога!MIT
Правая сторона главной страницы Массачусетского технологического института переходит в темный режим с размытым темно-синим фоном, на котором размещаются ссылки на последние новости, объявления и исследования.Морская пехота США
На каждой странице веб-сайта набора морских пехотинцев США реализована эстетика темного режима от навигации до области героя, поддерживаемая черным фоном, который эффективно обрамляет копию в области основного содержимого.DeWalt
Дизайн домашней страницы DeWalt в темном режиме стратегически сбалансирован со светло-серым элементом карусели для продвижения своих избранных продуктов среди пользователей.Монитор кампании
Обратите внимание, как темный фон привлекает ваши глаза к форме после того, как вы отсканируете лица справа? Даже если остальная часть вашего веб-сайта не имеет темного режима, вы используете темные цветные поля, чтобы улучшить взаимодействие пользователей с ключевыми веб-страницами.Кошки Повторяя культовый дизайн афиши мюзикла, на главной странице Cats используется черный фон с белыми и желтыми вкраплениями, чтобы направлять пользователей на популярный контент.
Penn & Teller
Домашняя страница самых известных фокусников в темном режиме разбивает плотный черный фон сеткой ярких новостей, фотографий и рекламных акций.Оззи Осборн
И последнее, но не менее важное: поговорите о том, что вы являетесь на марке . Конечно, у «принца тьмы», также известного как Оззи Осборн, есть темный сайт со зловещим черным фоном.Вам также может понравиться:
Преимущества темного фона на вашем веб-сайте
Светлый фон для веб-сайтов — это повсеместная тенденция, поскольку, согласно многочисленным исследованиям, люди находят его более привлекательным и более читабельным. Трудно не согласиться, поэтому … Есть ли преимущества использования темного фона на веб-сайте?
В целом белый дизайн веб-сайтов привлекает более широкую аудиторию, так как HTML и CSS по умолчанию имеют белый фон.Поэтому многие разработчики придерживаются его, даже не задумываясь о внесении каких-либо изменений. Вы когда-нибудь задумывались, почему в книгах обычно белые страницы с черными буквами? Собственно, это кажется настолько естественным, что никто в этом не сомневается. Но все мы знаем, что из каждого правила есть исключения.
Почему белый фон так популярен в веб-дизайне?
Давайте ненадолго вернемся к книгам. Несомненно, темные буквы на светлом фоне снижают стоимость печатных материалов и улучшают удобочитаемость, поэтому веб-дизайнеры начали копировать эту тенденцию.Тем не менее, темный веб-дизайн становится все более популярным среди веб-дизайнеров, и при правильном использовании он может иметь элегантную и творческую привлекательность.
Дело в том, что более темный фон требует множества экспериментов, чтобы найти правильный баланс, и сохраняет его привлекательным для посетителей веб-сайта . Использование белого шрифта на черном фоне может утомлять глаза пользователей, так как его не так легко читать. С другой стороны, то же самое касается светло-серого цвета шрифта на белом фоне. Все дело в эстетике и приятном контрасте между фоном и используемым шрифтом.Это, конечно, требует больше времени, затрачиваемого на дизайн, поэтому он может вызвать проблемы, особенно если вы не хотите пропустить срок.
Давайте будем честными, белый фон настолько распространен, потому что он проще для дизайнеров, и многие владельцы бизнеса верят, что он будет выглядеть более заслуживающим доверия в глазах их потенциальных клиентов. Более того, белый цвет часто ассоциируется с западной культурой, с искренностью, совершенством, чистотой и добротой. Это также одна из основных причин яркости большинства корпоративных сайтов.
Еще одна причина выбора белого фона — это нейтральный цвет. Это не влияет на другие элементы веб-сайта, поэтому их все проще собрать. Когда дизайнер хочет использовать более широкую цветовую палитру, ему требуется провести больше экспериментов, что означает больше времени и денег, потраченных на проект. В целом использование белого фона упрощает весь процесс.
Итак, если вы не хотите экспериментировать или не уверены, достаточно ли у вас хороших результатов, используйте светлый фон, но вы также можете рискнуть и заставить изменения работать на вас.
Преимущества темного фона
Темный фон подходит не для каждого веб-сайта, и не каждому дизайнеру легко создать красивый сайт с более темными цветовыми схемами. Это из-за меньшей читабельности и необходимости больше экспериментировать, чтобы найти баланс между фоном и другими элементами сайта. Однако с помощью нескольких проверенных приемов они могут выразить ваше творчество и создать веб-сайт, который доставит вам удовольствие.
Итак, каковы причины использовать темный фон на вашем сайте?
Одна из основных причин заключается в том, что легче просматривать веб-сайты с темным фоном в течение длительного времени, так как это не напрягает глаза, особенно вечером или ночью.Он не нарушает естественные циклы организма, с которыми сталкиваются многие люди при использовании мобильных телефонов перед сном. Вот почему популярные платформы, такие как Twitter и YouTube, заметили проблему и теперь предлагают возможность переключиться в темный режим. Это также может продлить срок службы батареи.
Более темные цвета — лучший выбор для определенных отраслей — просто подумайте о большинстве игровых компаний. То же самое, скажем, с металлической группой. А теперь подумайте о веб-сайте Netflix, вы можете представить, как он будет выглядеть на светлом фоне? Знаете ли вы, что черный часто ассоциируется с элегантностью, престижем и властью? В целом, темный фон обычно лучше подходит для интерфейсов, основанных на графических элементах, а не для веб-сайтов с большим количеством контента.
Есть много способов использования более темного дизайна, чтобы подчеркнуть характер бизнеса и его цель. Дело в том, чтобы использовать цвета с высоким контрастом между текстом или картинками и фоном. Вам нужно приложить дополнительные усилия, чтобы конечный продукт был хорошо читаемым.
Выбор идеального фона для вашего сайта
Как видите, есть доказанные преимущества использования более темного фона, и вы знаете, почему белый фон в наши дни так распространен.Выбор подходящего фона играет жизненно важную роль в дизайне вашего веб-сайта, поэтому дважды подумайте, прежде чем принимать окончательное решение. Тем не менее, темный фон не так популярен, но при правильном использовании может помочь вам выделиться среди конкурентов, и создаст веб-сайт, который привлечет ряд новых клиентов .
Теперь вы знаете сильные и слабые стороны темного дизайна веб-сайтов, поэтому вам решать, какой фон вы выберете для своего проекта. Подумайте о цели и эффекте, которого вы хотите достичь.Помните, что более темные цвета могут помочь вам привлечь более молодую аудиторию, и помните, что темный не всегда означает черный.
20 бесплатных темных фонов для веб-проектов, проектов пользовательского интерфейса и графического дизайна
В наши дни вроде бы все упирается в чистоту, минимализм и чрезмерное использование белого пространства, но как насчет темного дизайна ?! Темные веб-сайты и проекты графического дизайна также выглядят чистыми, простыми и минималистичными, если они спроектированы правильно.
Взгляните, например, на эти 20 бесплатных темных фонов! Вы можете использовать эти черно-серые фоны практически для всего, что угодно, , от проектов веб-дизайна до дизайна пользовательского интерфейса, дизайна для печати и даже дизайна логотипов! Многие из них также могут использоваться в качестве текстур, поэтому вы можете создавать потрясающие 3D-иллюстраций или 3D-текстовых эффектов , а некоторые даже могут использоваться 3D-художниками и архитекторами при визуализации и моделировании!
В этом списке вы обязательно найдете бесплатный темный фон, который ищете.Используйте их для создания мокапов , презентаций, логотипов или просто в качестве обоев для смартфонов или ноутбуков .
Это высококачественное изображение с высоким разрешением, которое на самом деле представляет собой 3D-рендеринг с некоторыми прожекторами на кирпичной стене. Вы можете использовать это изображение для различных типов проектов, от демонстрации макетов плакатов, логотипов до даже создания темных и шероховатых макетов продуктов для вашего клиента.
Этот сайт просто потрясающий! Он предлагает огромную галерею текстур и бесплатные темные фоны на выбор.Независимо от того, являетесь ли вы 3D-художником, архитектором или графическим / веб-дизайнером, вы обязательно найдете текстуру или фон для своего проекта. Самое приятное то, что эти текстуры можно также использовать в 3D-моделях! Большинство темных текстур и узоров в этой коллекции представляют собой текстурированные изображения с высоким разрешением реальных материалов, таких как двери, кожа, гравий, металл, асфальт, мех, стены и многое другое. Вы также можете успешно использовать их в Photoshop, если вам нужно создать реалистичный дизайн.
Это простое изображение на черном фоне с геометрическим рисунком сверху.Он идеально подходит для использования в графических материалах, таких как листовки, плакаты, журналы, обложки книг и т. Д., Или в качестве фона для презентации вашего логотипа вашим клиентам. Вы даже можете использовать его в веб-баннерах, немного изменив его.
Вот еще одна реалистичная текстура, которую можно использовать по-разному. Загрузите это изображение в высоком разрешении и используйте его в качестве фона для логотипов — вы даже можете создать штампованный 3D-эффект, чтобы оно выглядело более реалистично, или в проектах веб-сайтов! Подумайте о меню с текстурой кожи или пользовательском интерфейсе с кожаной тематикой!
Это отличное бесплатное темное фоновое изображение, которое вы можете скачать в высоком разрешении и использовать по-разному.Он имеет эффект сияющего прожектора в центре и деревянный пол в перспективе. Вы можете использовать его для демонстрации дизайна ваших продуктов, 3D-работ или даже логотипов!
Вам нужна темная шероховатая текстура стены или фон? Возможно, это то, что вы ищете. Это отличная текстура с тонким, но действительно привлекательным эффектом асфальта / бетона. Используйте его как наложение или как фон для макетов, логотипов и многого другого.
Нам нравится этот крутой темный фон с симметричным геометрическим узором! Представьте, что ваш логотип написан прямо посередине изображения.Как бы это круто выглядело ?! Вы также можете использовать его как наложение на тексты, чтобы добавить к ним современный футуристический эффект, текстуру или просто как фон!
Эту текстуру черной стены можно использовать по-разному. Это идеальный темный фон для демонстрации ваших минималистичных логотипов. Его также можно использовать в печати для создания потрясающих 3D-эффектов, дизайна веб-сайтов или пользовательских интерфейсов! Возможности безграничны.
Эта темная текстура в стиле гранж немного напоминает гранит, не так ли ?! Его можно использовать как текстуру с высоким разрешением, и вы можете наложить ее на что угодно, или в качестве фона для макетов, презентаций логотипов, баннеров, изображений в социальных сетях и т. Д.
Этот черный фон с абстрактными треугольными формами и тонкими тенями идеально подходит для изящных, минималистичных проектов графического дизайна. Представьте это как обложку электронной книги, в журналах, на баннерах или даже на веб-сайтах! Круто, да?!
Шероховатые текстуры почти всегда темные, и их можно использовать в качестве потрясающих фонов для вашего смартфона, ноутбука или для ваших проектов графического дизайна. Опять же, как и другие текстуры из этого списка, вы можете наложить их в Photoshop на любой слой!
Ищете крутой минималистичный геометрический фон темного цвета? Этот черный фон может быть отличным выбором.Если вы хотите создать геометрический рисунок под углом, это может быть тот узор / текстура, который вам нужен.
Этот темный фон с высоким разрешением можно использовать для создания потрясающих фотоэффектов! Наложите его на изображения, и с небольшим редактированием вы можете добиться потрясающих эффектов капель дождя!
Возвращаются проекты пиксельного графического дизайна! Используйте этот темный фон с большими пикселями в своих проектах. Он выглядит круто и может быть использован в качестве текстуры, фона или любым другим способом, который вы сочтете нужным.
Эта креативная текстура ручной работы похожа на абстрактную картину! Дизайнер, стоящий за ним, очень талантлив и предложил его бесплатно! Используйте его так, как считаете нужным. Пусть творческое вдохновение течет через вас!
Если вы ищете что-то простое, то вот оно. Этот черный фон имеет тонкую текстуру и легкий эффект приглушенного света в центре. Когда дело доходит до использования этого ресурса, возможности безграничны.
Макро-снимки повседневных предметов также могут стать великолепным темным фоном! Возьмем, к примеру, это! Это макросъемка металлической ткани.Выглядит довольно интересно, правда ?! Будьте изобретательны и используйте это в своих дизайн-проектах.
Если вы хотите создать эффект углеродного волокна, этот тонкий темный фон может быть лучшим выбором. Самое замечательное в этой халяве то, что она также является файлом шаблонов для веб-сайтов!
Вы хотите, чтобы на вашем веб-сайте был мозаичный фон размером 3 пикселя? Тогда это может быть именно то, что вам нужно! Этот темный фон состоит из небольших темных квадратных плиток различных оттенков серого.
Как мы создали темный интерфейс для веб-IDE GitLab | GitLab
Один из самых популярных и интересных запросов о функциях, о которых мы часто слышим от нашего замечательного сообщества, — это темный режим для всего пользовательского интерфейса GitLab. В настоящее время это вторая по популярности проблема для всего GitLab.
Темный режим не только очень популярен в мире дизайна и разработки, но и может быть невероятно полезен для пользователей с нарушениями зрения. Один из членов нашего сообщества опубликовал этот комментарий, который очень хорошо демонстрирует, насколько ценным может быть предоставление пользователям возможности выбирать между светлым и темным режимами:
Это действительно сводится к доступности веб-сайта.Я официально слеп, и часть моего состояния глаз — это то, что называется светобоязнью (это плохо называется — это не «страх» света, а то, что прямой яркий свет, особенно внезапный прямой яркий свет, подобен тому, что мне воткнули ледоруб. глазные яблоки.)
В GitLab мы верим в небольшие изменения и быстрые итерации. Когда наша команда дизайнеров думала о том, как мы могли бы разделить эту проблему и решить ее небольшими шагами, мы искали отдельные части нашего пользовательского интерфейса, для которых мы могли бы создать темный режим, и особенность, которая выделялась, была веб-IDE.
Что такое Web IDE?
Web IDE (интегрированная среда разработки) — это редактор кода в браузере, который позволяет изменять сразу несколько файлов. После этого вы можете зафиксировать их изменения в ветке и создать запросы на слияние, чтобы обсудить эти изменения и, в конечном итоге, объединить их.
Веб-среда разработки GitLab
Пользователи Web IDE считают его полезным для быстрого внесения небольших изменений или простого просмотра файлов в знакомом контексте, похожем на их внешний вид в локальном редакторе.
Подсветка синтаксиса
Решив, что Web IDE будет первой функцией пользовательского интерфейса GitLab, которая получит темный режим, мы столкнулись с одним фундаментальным вопросом: как темный режим будет согласовываться с темами подсветки синтаксиса, уже существующими в GitLab? Есть несколько тем, которые пользователи могут выбрать для отображения файлов своего репозитория, фрагментов или других элементов кода по своему усмотрению.
Настройки темы подсветки синтаксиса пользователя
Web IDE существует как инструмент в более широком контексте GitLab.Точно так же темы синтаксиса существуют в контексте Web IDE. Наша цель состояла в том, чтобы избежать сценариев, в которых область кода, следующая за темой выделения синтаксиса, не будет выровнена с остальной частью пользовательского интерфейса, что может вызвать раздражение.
Мы приняли решение сохранить настройки легко потребляемыми и рассматривать темный режим для пользовательского интерфейса Web IDE как расширение темной темы подсветки синтаксиса. Начиная с версии 13.0, вы можете включить его, выбрав темную тему выделения синтаксиса, и остальная часть Web IDE будет автоматически следовать.Это также дает нам возможность позже расширить другие темы и согласовать остальную часть пользовательского интерфейса Web IDE с их цветами.
Процесс проектирования
Светлый и темный интерфейс по сравнению с темами
Изначально мы определили несколько концепций, которые помогут сформировать наш подход. Мы относимся к светлому и темному пользовательскому интерфейсу с точки зрения их качеств, таких как яркость, глубина, структура и иерархия. В GitLab темы — это предпочтительные стили, которые находятся в пользовательском интерфейсе и используют цвет для изменения внешнего вида только нескольких элементов.
Разница между UI и темами в GitLab
Работа в Figma
Как только мы захотели начать экспериментировать с пользовательским интерфейсом, мы из первых рук заметили, что «каждый может внести свой вклад» — это не только основная миссия GitLab, но и идея, которая очень жива в сообществе Figma. Великолепные дизайнеры Microsoft создали открытый набор инструментов проектирования для Visual Studio Code, который позволяет нам легко извлекать нужные фрагменты, вставлять их в наш собственный файл дизайна и манипулировать ими.
Асинхронная обратная связь
Еще один аспект, глубоко укоренившийся в методах работы GitLab и в том, как мы создаем наши продукты, — это асинхронное сотрудничество. Мы являемся крупнейшей в мире полностью удаленной компанией, и два дизайнера, работающие над этой функцией, расположены в часовых поясах с разницей в семь часов.
Использование Figma для совместной работы и обратной связи по нашим идеям позволило нам реализовать эту функцию, при этом нам нужно было запланировать только одну встречу, а остальные обсуждения обрабатывались с помощью комментариев Figma.Поскольку эти обсуждения велись между дизайнерами и касались исключительно визуальных аспектов, мы сохранили обсуждение внутри Figma вместо использования наших собственных функций управления дизайном, которые вступили в игру позже, во время обсуждений с инженером, работающим над этой функцией. Это также позволило нам легко привлечь множество других членов команды и получить комментарии от других дизайнеров со всего мира.
Отзыв об асинхронном дизайне в Figma
Проблемы проектирования
Главной задачей дизайна было и остается понимание того, как внешний вид элементов меняется в зависимости от того, как они выглядят на свету.темный интерфейс. Как правило, структурные элементы пользовательского интерфейса, похожие на контейнеры, уменьшают яркость, но контент работает наоборот и иногда почти инвертируется. Основы света, тени и глубины не меняются, но меняется способ их использования элементами. Точно так же не меняются принципы разборчивости, иерархии и контрастности контента, но контент поддерживает эти принципы.
В приведенном ниже примере бок о бок мы сравнили всего несколько элементов пользовательского интерфейса, чтобы продемонстрировать, как они могут изменяться между светлым и темным пользовательским интерфейсом.
Сравнение светлого и темного пользовательского интерфейса в Web IDE
Когда мы отображаем изменения в этой небольшой выборке, начинают проявляться закономерности. Такие элементы, как фон, равномерно становятся темнее вместе, чтобы сохранить такое же ощущение глубины, в то время как некоторый текстовый контент почти инвертируется, а кнопка почти остается той же.
Отображение цвета элемента в светлом и темном UI
На первый взгляд может показаться, что многие элементы перевернуты, но это чрезмерное упрощение, которое приводит к тому, что интерфейс выглядит не совсем правильно.Вот как мы думаем о некоторых конкретных проблемах дизайна, с которыми мы столкнулись.
Элементы с состоянием
В светлом пользовательском интерфейсе мы затемняем состояния элементов, чтобы увеличить контраст, и обычно делаем наоборот в темном пользовательском интерфейсе. Это не относится к вкладкам и аналогичным элементам, фон которых более тесно интегрирован в другие разделы пользовательского интерфейса. И хотя границы на кнопках стали светлее, фон не стал, потому что нам нужно было сохранить контраст текста.
Сравнение состояний элементов в светлом и темном UI
Это раскрывает тонкие различия в подходе между темным и светлым пользовательским интерфейсом, и мы все еще ратифицируем различия и устанавливаем повторяющиеся шаблоны.Излишне говорить, что каждый элемент заслуживает особого внимания.
Визуальная иерархия и глубина
Как упоминалось выше, к глубине в темном режиме обычно подходили так же, как и в светлом пользовательском интерфейсе. Более яркие элементы располагаются вперед, а более темные отступают. В случае вкладок и дерева файлов мы используем другой подход и делаем эти области темнее для увеличения контраста, а не равномерно затемняем слои. Мы узнаем, что и глубина, и контраст могут быть эффективными инструментами, но они не всегда одинаково используются в темном и светлом пользовательском интерфейсе.
Небольшое замечание о тенях, их не следует заменять свечением — совершенно другой эффект. Тени заметно менее эффективны в темном режиме, поэтому мы исследовали большее разнообразие серого фона для соседних участков.
Графика и иллюстрация
Графика, созданная для светлого пользовательского интерфейса, может показаться яркой или неуместной в темном пользовательском интерфейсе. К изображениям следует обращаться в индивидуальном порядке, но к иллюстрациям и значкам можно обращаться в целом. Мы изучаем переменные и классы CSS для цветов заливки и контуров SVG.Одним из примеров, который нам пришлось решить, были значки состояния конвейера. Они существуют в нескольких местах в нашем продукте и изначально имели белый фон. Поскольку это заставляет их слишком сильно выделяться в темном режиме, нам пришлось переписать их код SVG, чтобы вместо этого они были прозрачными.
Обеспечение возможности настройки графики, как и значков
С этим мы можем сопоставить светлые и темные палитры. На данный момент мы просто следим за тем, чтобы в SVG не было фонов, которые кажутся неуместными.
Как отправлять мелкими частями
Наша философия — выпускать изменения или функции, как только они могут помочь пользователям. Иногда это приводит к тому, что функции доставки не полностью отшлифованы, что соответствует знаменитой цитате Рейда Хоффманна, основателя и генерального директора LinkedIn:
Если вас не смущает первая версия вашего продукта, вы запустили слишком поздно.
В первой версии этой функции, которую мы выпустили, была только область кода, стилизованная под темную тему подсветки синтаксиса.Несмотря на то, что это казалось немного неуместным, мы получили хорошие отзывы, которые свидетельствовали о том, что мы движемся в правильном направлении.
Темный режим MVC со светлым деревом файлов
С этого момента мы разделили оставшийся пользовательский интерфейс на более мелкие части. Каждый раз, когда мы заканчивали работу, мы выпускали новейшую версию для всех наших пользователей и начинали работать над следующей областью. Такой итеративный подход неприемлем во многих других компаниях, но в GitLab мы верим в минимальные жизнеспособные изменения (MVC).
Еще мы узнали, что темный режим обнаруживает не только структурные недостатки пользовательского интерфейса, но и негибкий код. Наше первоначальное намерение состояло в том, чтобы оставить несколько редко посещаемых областей без стиля, но мы заметили, что предотвращение перетекания стилей CSS в эти области вызовет больше проблем и усилий, чем исправление всего этого.
Эффективное прототипирование
Как показано в предыдущих параграфах, одной из самых сложных проблем при разработке темного режима являются элементы с несколькими состояниями.Это также один из аспектов, с которым дизайнеры все еще борются при создании прототипа, что привело к тому, что мы решили эту проблему двумя способами:
- Создание большого прототипа с множеством монтажных областей для представления крайних случаев и состояний
- В значительной степени полагаться на четко определенную цветовую систему
- Несколько вызовов синхронизации с инженером для исправления мелких аспектов, например анимации на лету
Для следующей итерации прототипа мы собираемся исследовать, можем ли мы использовать компоненты Figma таким образом, чтобы кнопки имели одинаковые состояния наведения / фокуса / активности на нескольких артбордах.Мы провели первый небольшой тест, чтобы доказать, что это возможно, но еще не использовали его на более сложном прототипе.
Прототип Web IDE в Figma для демонстрации состояний
Что мы узнали на данный момент
- Ответы на вопросы о темном режиме приводят к множеству вопросов о том, почему мы делаем что-то определенным образом в светлом пользовательском интерфейсе. Это создает отличный круговой эффект, который ставит под сомнение наше представление обо всем пользовательском интерфейсе, что приводит к твердым убеждениям.
- Даже с темным режимом можно работать небольшими итерациями.В ходе этого процесса мы создали темные версии для всех элементов пользовательского интерфейса, специфичных для Web IDE, а также для раскрывающихся списков и модальных окон, которые являются глобальными элементами. Это не только помогает нам думать о дизайне, но и о том, как должен быть структурирован код для глобального темного режима.
- Мы явно стоим на плечах гигантов. Спроектировать и разработать этот темный режим в таком быстром темпе стало возможным только потому, что у нас было много обширных ресурсов о темном режиме, доступных нам.Два, которые выделялись больше всего, — это Apple Human Interface Guidelines и раздел темных тем из Material Design.
Web IDE темный режим
Следующие шаги
- Что касается Web IDE как функции, мы находимся в процессе упрощения тематики нашего кода, чтобы можно было более гибко расширять другие темы подсветки синтаксиса.
- Мы также планируем очистить созданный нами прототип и либо создать набор пользовательского интерфейса Web IDE, либо интегрировать его в нашу систему дизайна Pyjamas, чтобы другие могли легко получить к нему доступ, изменить и внести свой вклад.
Наконец, вы тоже можете внести свой вклад! Нам особенно хотелось бы увидеть дополнения к другим темам выделения синтаксиса для остальной части пользовательского интерфейса Web IDE. Если у вас есть что-то еще в отношении Web IDE, которое вы хотели бы, чтобы мы рассмотрели, создайте новую проблему и обязательно отметьте GitLab UX Department (@ gitlab-com / gitlab-ux). Если вы хотите участвовать в наших усилиях по тестированию на любом уровне, зарегистрируйтесь в нашей программе GitLab First Look. Вы также можете внести свой вклад в дизайн GitLab, начав с нашего UI Kit для пижамы в Figma.
«В GitLab Web IDE теперь есть темный режим» — Марсель ван Реммерден и Джереми Элдер