Выбор цветов, дизайна, типографики: инструкция по созданию тёмной темы для сайта или приложения Статьи редакции

Перевод статьи из блога Stuff & Nonsense веб-дизайнера Энди Кларка.

Если вы:

• читаете эту статью, используя 68 версию Safari Technology Preview;
• уже обновили MacOS до версии Mojave 10.14;
• переключились на тёмное оформление в системных настройках;

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

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

Разумеется, сначала новый дизайн получили приложения, разработанные самой Apple. Компания проделала прекрасную работу, обновив почтовый клиент Mail, iTunes и «Напоминания» в цветах, рекомендуемых для тёмного режима в AppKit. Быстро подоспели с обновлениями и разработчики сторонних программ вроде Fantastical, iA Writer и Sketch; некоторые выбрали для тёмного оформления собственные оттенки.

В AppKit компания представила собственный набор цветов для тёмного режима: светлее для элементов на первом плане, включая панели инструментов, и темнее для фона. Благодаря функции «Подсвечивание» цвета тёмного режима меняются в зависимости от выбранного в настройках цветового акцента.

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

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

Выбор ограничен тремя значениями:

• no-preference: не выбрано ничего;
• light: выбран светлый режим;
• dark: выбран тёмный режим.

Запрос prefers-color-scheme — часть набора опций для медиа-запросов, включающего параметры prefers-contrast, prefers-reduced-motion и prefers-reduced-transparency.

Примечание: поскольку я пишу эту заметку в ноябре 2018 года, запрос prefers-color-scheme был реализован только в 68 версии Safari Technology Preview; сейчас он проходит процесс стандартизации и не является зарегистрированной разработкой.

Его можно использовать и сегодня, а когда Apple окончательно обновит Safari, за ней подтянутся Google Chrome и Firefox, и пользователи этих браузеров также увидят тёмное оформление вашего сайта.

Пользовательские свойства отлично подходят для работы с prefers-color-scheme, так как они позволяют переключать темы, добавив несколько строк кода. Для начала я определил значения цветов для всех не тёмных режимов, включая браузеры и операционные системы, не поддерживающие prefers-color-scheme:

Затем я сформировал набор альтернативных цветов для тёмного режима:

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

На выбор цветов для тёмного режима влияет три критерия:

• сочетание с дизайном других приложений, у которых есть тёмный вариант, и вашей ОС;
• доступность и читаемость;
• сохранение фирменного стиля между тёмной и светлой темами.

В конце концов, ваш сайт должен сохранить свой дух вне зависимости от того, кому какой режим по душе.

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

Apple решила использовать «тёмные линии, чтобы визуально отделить элементы друг от друга» как в тёмной, так и в светлой темах. Вы можете последовать её примеру или же сделать границы светлее, если того требует фирменный стиль.

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

Сохранить узнаваемость, реализовав тёмный режим, так же важно, как и не утратить связь с дизайном других приложений. Чтобы не потерять единство стиля, выбирайте и для тёмного, и для светлого оформления более тёмные оттенки из одной и той же палитры нейтральных цветов. (Моя техника многократной заливки фона и наложения цветов в Sketch тут очень пригодится.)

Каким-то образом ни одна из предыдущих палитр не подошла Stuff & Nonsense, поэтому для фона в тёмном режиме я задействовал иссиня-серый (#38444c). Этот цвет я создал, умножив один из серых оттенков на горилле.

Такие цвета я выбрал в итоге. Логотип, кнопки, буквицы по-прежнему выделяются: я наложил используемый красный ( #ba0e37) сам на себя и осветлил, создав более глянцевый оттенок ( #ff0e46).

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

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

Если ваш шрифт позволяет сделать его тоньше, то, сделав его таковым в тёмном режиме, вы создадите эффект большего расстояния между буквами:

Увеличение интерлиньяжа увеличит разборчивость текста. Так, например, если в светлой теме межстрочный интервал составляет 1,5 пункта, увеличьте его до 1,7 для тёмного оформления:

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

Введение альтернативных цветов и типографики для тёмного режима дело нехитрое, однако моя реализация для Stuff & Nonsense всё же оставляет желать лучшего. Понятия не имею, почему я применил к собственным иллюстрациям отбрасываемые тени вместо того, чтобы использовать CSS-фильтр. В следующие несколько недель я уберу эти растровые тени, заменив их на:

Тем немногим, кто пользуется 68 версией Safari Technology Preview на MacOS Mojave 10.14, мои действия могут показаться роскошью. Не спорю. Но мне кажется, что вскоре prefers-color-scheme доберётся и до других браузеров и даже до iOS, поэтому, может, я не зря потратил время.

#apple #macos