тёмная сторона курса «таблицы и прочие радости»

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

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

https://www.igorshtang.ru/course/tables/
до 15 августа даём скидку 3000 ₽ на покупка курса с практикой

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

начнём с главного:

зрение важнее всего

приличная часть курса — чужие картинки, которые мы хитро перевёрстываем, улучшая разные аспекты в зависимости от темы главы:

и если какая-то картинка-пример режет глаза в тёмной теме, то извини, автор, но я её адаптирую под тёмное окружение.

да, это неправильно, ведь я меняю оригинал, хоть и просто цсс-стилями. но я не хочу портить зрение ни себе, ни кому-то ещё. поэтому вот так.

простое инвертирование не катит

контрастный чёрный текст на белом фоне читается днём прекрасно, это все мы знаем. но это не значит, что ночью будет прекрасно читаться белый текст на чёрном фоне.

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

глава 1 · табличное представление

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

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

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

после того, как подобраны основные стили для двух тем, можно работать с изображениями.

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

filter: invert() contrast(83%)

то есть инвертируем и снижаем немного контраст. именно фильтром «контраст» это делать необязательно. подойдёт и яркость, и непрозрачность — тут что лучше и проще сработает в вашем случае, то и берите.

глава 2 · шрифт
глава 11 · вместо таблицы

с цветом ситуация посложнее и нужно смотреть на каждый конкретный случай. на картинке ниже, например, цвета линий одинаковые для обеих тем, а цвет подложки для области «можно за руль» в светлой теме темнее фона, а в тёмной — светлее:

глава 11 · вместо таблицы

но это уже наш переделанный вариант в формате свг, где можно было работать с каждым цветом отдельно (про работу с свг потом напишу отдельно как-нибудь), поэтому можно сказать повезло.

если бы не повезло и картинка была бы растровой, то следующее правило:

простые цветные картинки инвертируем с коррекцией цвета

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

поэтому цвет инвертируем, но оттенок смещаем обратно, не забывая о коррекции контраста:

filter: invert() contrast(83%) hue-rotate(180deg)

получаем вполне приемлемый вариант:

глава 1 · табличное представление

ну явно лучше вот этого варианта без смещения цвета, согласитесь:

красиво, конечно, и богато, но не то. в примере важно было показать чернила, и они остались чернилами.

ещё пара пар как работает такое правило:

глава 7 · линейки и чересполосица
глава 12 · шапка

идём дальше:

сложные цветные картинки оцениваем по виду и логике применения

бывает, что перед нами вот такой пример:

глава 12 · шапка

здесь инвертирование со смещением работает, ну, не идеально:

цвета сместились обратно как и надо, но инвертирование вывернуло тени в обратную сторону, и они стали бликами. акула выглядит особенно странно.

пришлось подумать: важно ли это для примера и лучше ли без инвертирования. на мой взгляд это слишком ярко ночью:

так что пришлось смириться со странностью акулы — зрение целее.

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

но не всегда. если в примере попадётся фотография, инвертировать картинку уже не получится, и придётся оставить как есть и немножко пострадать:

глава 7 · линейки и чересполосица

вот так слишком ужасно:

можно было бы нарисовать свой вариант, но тогда курс бы до сих пор готовился.

и наконец мой самый любимый принцип:

если есть авторский тёмный вариант, то берём его

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

глава 5 · «направление чтения и поиска»
глава 10 · наглядность
глава 12 · шапка

ну и конечно классика:

если норм и тут и там, то просто ничего не делаем

глава 7 · линейки и чересполосица

и версия про: с другого конца

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

глава 10 · наглядность

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

хотя технически можно было бы:

как это всё работает можно посмотреть, например, в первой главе «табличное представление» — она открыта для всех.

Читайте «Дизайн-кабак»: ВКонтакте | Telegram | Facebook | Twitter

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store