Тёмная тема: как выключить свет правильно
Темная тема становится все более популярной. Хотите включить его в свой дизайн? Мы расскажем как это сделать
Правильно разработанная тёмная тема выглядит стильно и современно. Казалось бы, просто смени цвета на контрастные — и ты в топе. Но не все так просто. Чёрный цвет в дизайне — это не просто отсутствие света, как любят говорить физики, а целый ряд оттенков и цветов, используя которые нужно учитывать контрастность, яркость, глубину и много-много чего еще. И все же тёмная тема считается эталоном элегантности и стиля. Поэтому каждый уважающий себя дизайнер должен уметь дизайнить «по-тёмному».
Почему её так любят
Начнём с того, что тёмная тема не говорит об использовании чистого чёрного цвета. Скорее, это оттенки серого и приглушенные, менее яркие цвета, которые приятней для глаза в мало освещенных помещениях или в тёмное время суток. Это особенно ощутимо для людей с нарушениями зрения и светобоязнью. К тому же, такой режим позволяет снизить яркость и экономить заряд батареи гаджета.
Google Docs акцентирует внимание на тёмной теме.
Многим дизайнерам тёмный фон полюбился и за свои практические преимущества. Он отлично оттеняет контент и помогает акцентировать внимание пользователей на важных элементах и функциях. Это похоже на эффект кинотеатра, где в тёмной комнате все наше внимание сосредоточено на экране.
Дьявол в деталях
Горькая правда в том, что не у всех получается достойно воплотить в жизнь «тёмный дизайн». Интернет пестреет неудачными примерами. Мы рассмотрим несколько принципов, которые помогут не споткнуться о «подводные камни» и гарантируют вам успех.
Контрастность
Все мы знаем, что дизайн не любит чисто белого цвета. То же можно сказать и о чёрном. Он может подойти для мелких элементов, но для фона вместо #000000 лучше использовать оттенки по типу тёмно-серого (#121212). Он отлично сочетается с разными оттенками тёмно-синего, создавая приятный для глаз интерфейс.
Сочетание темно-серых и синих оттенков на сайте Brittany Chiang
Особенного внимания заслуживает типографика. Кстати, недавно мы уже писали про 8 советов, как улучшить типографика в ваших интерфейсах. Так вот, как мы уже говорили, не стоит использовать чистый белый (#ffffff), но и слишком приглушенные оттенки снизят контрастность и сделают текст плохо читаемым. На восприятие также влияет размер шрифта, объем, яркость и даже разрешение экрана. Дизайн выглядит слишком примитивно, когда между UI-элементами слабо выделено разделение.
Контраст между текстом и фоном в темной теме в WHOOP
Цвет
Лучше всего использовать светлые ненасыщенные оттенки. Тёмный фон сам по себе отлично выделяет цвета. Ограничьтесь одним акцентным цветом и парой смежных оттенков. Таким образом, останется больше негативного пространства и улучшится контрастность и чистота дизайна.
Яркие цвета в темной теме на примере How We Feel
Поиграться с насыщенностью и яркостью цветов вы можете в сервисе pigment.shapefactory.co, ранее мы рассказывали о нём в своем Instagram. На нашей странице ещё много полезностей для подбора цветов и шрифтов. Пользуйтесь на здоровье!
Негативное пространство
Преобладание тёмного может показаться мрачным и подавляющим, если не оставить места для «воздуха». Как говорил Клод Дебюсси: «Музыка — это пространство между нотами». Точно так же хороший дизайн прослеживается в пространстве между элементами.
Минимализм в темной теме. Источник — BRGP, Or Halevi
Негативное пространство повышает сканируемость, акцентирует внимание на главном и дарит ощущение легкости. Минимум деталей и максимум воздуха — то, что нужно для тёмной темы.
Глубина и высота
В светлой теме глубина и объем довольно легко выстраиваются за счет теней. В темном дизайне все гораздо сложнее. Приходится использовать 3-4 уровня высоты с соответствующими цветовыми схемами. Глубина помогает воспринимать дизайн более реалистично и выстраивает иерархию. Мы естественно воспринимаем то, что ближе к нам (то, что выводится на передний план с помощью осветления), как более важное. Чтобы сохранить контрастность, цвет текста будет изменяться в соответствии с цветом фона.
Глубина света в темном UI. Источник — YouTube
Дизайним правильно
Не так уж страшна тёмная тема, как ее рисуют. Используя контрастность, правильно подбирая цвета, глубину и высоту, вы сможете профессионально спроектировать тёмный дизайн. Ну и, конечно же, не забудьте о негативном пространстве. «Воздух» ведь всем нужен!
В нашем Инстаграме мы подготовили краткий гайд на эту тему. Так сказать, выжимка из всего вышесказанного с наглядной иллюстрацией «что такое хорошо и что такое плохо». Ну а кто хочет узнать обо всех «подводных камнях» и нюансах, welcome к нам на обучение. Мы рады всем, кто хочет реализоваться в дизайне и делать этот мир лучше и эстетичнее.
Не все дизайнеры любят тёмную тему. Но если вам она нравится, и вы хотите оседлать эту тёмную лошадку, то мы с радостью научим, как это сделать стильно и эффектно!
