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

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

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

В закладки

Если вы:

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

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

Домашняя страница Stuff & Nonsense в светлом и тёмном исполнении

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

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

Слева: Mail, iTunes и Напоминания. Справа: Fantastical и iA Writer

Единственно правильного тёмного цвета нет

Благодаря функции «Подсвечивание» цвета тёмного режима меняются в зависимости от выбранного в настройках цветового акцента. В 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, и пользователи этих браузеров также увидят тёмное оформление вашего сайта.

Пользовательские свойства CSS

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

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

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

Дизайн

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

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

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

Выбираем цвета

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

Слева: наиболее контрастная палитра не соответствует ни одному из трёх условий. Она не сочетается с другими приложениями, текст читать сложно, да и Stuff & Nonsense такая палитра, кажется, не подходит. Справа: цвета AppKit сочетаются с операционной системой, но не с брендом Stuff & Nonsense

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

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

Палитры меньшей контрастности зачастую улучшают читаемость, при этом сочетаясь с другими приложениями. Но Stuff & Nonsense они всё ещё не подходят

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

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

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

Контрастность и удобство

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

Типографика

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

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

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

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

Кое-что ещё

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

Домашняя страница Stuff & Nonsense в тёмном оформлении

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

#apple #macos


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Космоплан Virgin Galactic впервые достиг «космической высоты»

В компании ранее уточняли, что, как и ВВС США, подразумевают под этим высоту около 80 км. Частная американская космическая компания Virgin Galactic провела очередное испытание туристического суборбитального космического аппарата SpaceShipTwo и почти покорила рубеж космической высоты. Об успешном запуске компания ...

Гендиректор ASUS Джерри Шин уйдёт в отставку после 11 лет работы ради развития своего стартапа

Гендиректор ASUS Джерри Шин уйдёт в отставку после 11 лет работы ради развития своего стартапа — Карьера на vc.ru Свежее Вакансии Написать Уведомлений пока нет Пишите хорошие статьи, комментируйте,и здесь станет не так пусто Войти Его место займут сразу два ...