Цвет и дизайн-система
Привет!
Эта статья входит в цикл «Создание дизайн-системы». Здесь я рассмотрю тонкости создания цветовой гаммы для построения хорошей дизайн-системы.
Почему цвет может стать болевой точкой проекта
Дизайнеры, которые хоть раз видели, как их проекты выглядят в итоге, прекрасно знают это ощущение: вроде это рисовал(а) я, но что-то тут не так. И вот этого «не так» там может быть много. Я не знаю ни одного инструмента, который позволил бы делать макеты «как в жизни» — именно поэтому вы, как создатель, сразу замечаете все несоответствия, даже если макет сверстан качественно.
Цвет, который вы увидите в реализации, зависит от настроек цветовых профилей, конкретного устройства и качества его экрана. Цвет, который увидит конкретный пользователь, зависит еще и от его собственного цветового восприятия. Поэтому иногда поиски идеального оттенка не стоят потраченного времени — он будет идеальным только у вас на макете.
Всё это часто создает проблемы на этапе согласования макетов. Я столкнулась с этим совсем недавно, когда мы не могли утвердить очередной проект внутри компании: на мониторе руководителя цветовые настройки были выкручены, поэтому интерфейс казался раза в три светлее, чем был на самом деле. Неудивительно, что у него всё было какое-то блеклое.
Определитесь с цветовой гаммой
Цветовая гамма проекта влияет на эмоциональное восприятие вашего дизайна, поэтому советую ответственно подойти к ее выбору. Сначала стоит определить основной цвет и его компаньон.
Основной цвет помогает запомнить и узнавать конкретный бренд. Чаще всего этот цвет берется прямо из брендбука, а если его нет, то из логотипа. Он помогает пользователю понять, что это сайт или приложение именно вашего бренда. Основной цвет часто используют для кнопок, интерактивных элементов и акцентов.
Цвет-компаньон необходим, чтобы разбавить основной цвет бренда и сделать проект более живым. Часто дизайнеры определяют такие цвета на свой вкус, но можно подойти к этому и с холодным расчётом.
Рассмотрим самые простые способы определения подходящего цвета, с которыми не будет проблем: комплиментарные, аналогичные и триады.
- Комплиментарные цвета расположены на противоположных сторонах цветового круга. Такое сочетание будет достаточно ярким и активным. Комплиментарные цвета делают друг друга еще ярче и заметнее, если стоят рядом.
- Триады подходят, когда вы хотите выбрать не один цвет-компаньон, а два. Триады образуются сочетанием трех цветов, которые лежат на одинаковом расстоянии друг от друга. Такое сочетание тоже будет достаточно ярким.
- Аналогичные цвета — сочетание от 2 до 5 цветов, расположенных рядом на цветовом круге. В идеале — 2–3 цвета. Аналогичные, в отличие от комплиментарного сочетания, создают более спокойный образ.
50 оттенков серого
Серые цвета используются для основного текстового контента, поэтому очевидно, что главное — сделать текст читабельным. Современные тенденции в дизайне говорят нам про легкость и чистоту. Это правильно, но есть нюансы: в стремлении сделать свой интерфейс легче и чище, дизайнеры используют всё более светлые оттенки серого. Тут очень просто перестараться: если у вас хороший монитор, это может вам навредить, потому что на экранах обычных пользователей слишком светлые серые тона могут вообще исчезнуть. Для элементов вроде светло-серой подложки для отбивки контента это не слишком страшно. Плохо, когда такое происходит с текстом или важными интерактивными элементами.
Чтобы текст был читабельным, нужно добиться высокого уровня контрастности цвета относительно фона. Можно сделать это на глаз, но лучше воспользоваться формулой международного стандарта WCAG. Я уже немного рассказывала об этом в статье про типографику, но здесь раскрою подробнее.
WCAG — руководство по обеспечению доступности веб-контента. В нем собраны рекомендации, которые помогают обеспечивать доступность веб-контента для широкого круга пользователей, независимо от того, есть ли у них какие-то ограничения.
Давайте применим часть этого стандарта, которая сейчас интересует нас больше, и возьмем четыре серых цвета.
На плашках цвета выглядят темнее, чем на самом тексте. Это создает иллюзию, что все цвета достаточно темные и будут смотреться нормально. Но если наложить их на текст, становится видно, что с четвертым цветом есть проблемы.
Теперь прогоним всё через формулу. Для этого нам нужно взять два цвета: один для текста, другой для фона. Почетную роль цвета фона возьмет на себя белый цвет.
Что всё это значит
- Коэффициент ААА — самый лучший итог, который значит, что контрастность отличная.
- Коэффициент АА — читабельность не выходит за рамки нормы, но могла быть и лучше.
- Fail говорит о том, что цвет не прошел по стандарту.
Проверка уровня контрастности показала, что первый цвет хорош для всего контента, второй нам рекомендуют использовать только для заголовков, а остальные цвета провалились.
В защиту второго серого могу сказать, что не считаю запрет на использование этого цвета для более мелкого текста абсолютным. Его можно брать для дат, времени или другой короткой второстепенной информации.
Конечно, не только серые цвета нужно проверять на читабельность. Скорее всего появятся и другие, которые стоит проверить по формуле — как минимум цвета для ссылок и ошибок.
Что в итоге
Для полноценной цветовой гаммы вам понадобятся:
- Главный цвет — доминирующий цвет интерфейса.
- Цвет-компаньон — дополняющий цвет (или несколько), который поможет избежать излишней стерильности интерфейса.
- Гамма серых оттенков для текста и подложек: от 4 до 8 цветов.
- Цвета для позитивных и негативных действий. Чаще всего это зеленый, красный и оранжевый. Хорошо, если они тоже имеют несколько оттенков: темный для текста, яркий для иконок и светлый для подложек.
Названия цветов в системе
После того, как вы определились с гаммой, надо дать цветам названия. И тут конечно же есть много вариантов: рассмотрим те, с которыми я встречалась на разных проектах.
Каждый цвет в дизайн-системе должен иметь несколько оттенков. Например, если ваш основной цвет — blue, вы будете использовать его как фон для кнопок. Тогда вам нужно подобрать еще как минимум два оттенка синего: для состояний по наведению и по нажатию. Также вам пригодится светло-синий для подложек. Чтобы не запутаться, придумайте, как назвать остальные оттенки вашего цвета.
1 Вариант. Можно назвать цвета по степени яркости. Например blue-dark, blue-meduim, blue-light. Но что будет, если между темным и средним цветом появится еще один? Этот вариант названий более понятен и гибок, но все же такая градация может оказаться неудобной. Ее можно использовать только в том случае, если вы уверены в своей гамме и неизменности ее состава.
Вариант 2. Иногда цветам присваивают номера по степени насыщенности, проставляя им номер от 10 до 100. Но это тоже не всегда работает, особенно если вы меняете не только насыщенность, но и оттенок цвета.
Вариант 3. Творческий подход, который нравится мне больше всех. В своей последней дизайн-системе я пришла к варианту с абстрактными названиями цветов. Например, темно-серый для текста называется night, более светлый оттенок серого — asphalt. Это дает мне максимальную гибкость и удобство.
Чего точно не стоит делать
Если вы начнете с кнопок, то есть шанс, что вы будете называть цвета по применению: blue, blue-hover, blue-pressed, а для неактивной кнопки будет цвет grey-disabled. Этого делать не стоит. Называть цвет по назначению — только загонять себя в его рамки. Потом эти оттенки нужно будет переиспользовать для других элементов, например, для иконок или подложек, и эти названия будут вас только путать.
Надеюсь, статья была вам полезна. Буду рада вашим лайкам, репостам и просто добрым словам :)
Смотрите другие статьи из цикла «Создание дизайн-системы»:
