Предисловие
Это первая часть из микро-цикла статей о продуктовой колористике. Этот цикл пригодится для коллег-дизайнеров младших грейдов, а также для тех дизайнеров, кто хочет узнать больше про колористику в целом и конкретно про работу с цветом в дизайн-системах.
Первая часть — подготовительная, чтобы разобраться в терминах, базовых принципах и с этими знаниями уже знакомиться с остальными частями цикла, а также применить эти знания на практике.
Прежде чем погружаться в продуктовую колористику, я рекомендую изучить работу Иоханнеса Иттена «Искусство цвета», а также уделить особенное внимание цветовому кругу, разобраться в том, как цвета создаются и как сочетаются, что есть комплементарные и аналоговые цвета, изучить вопрос контраста, в том числе симультанный контраст, чтобы понимать, какие визуальные иллюзии может порождать сочетание различных цветов.
Проблема
Проблемы, которые подтолкнули меня к созданию цикла статей о колористике: первая — системность работы с цветом в дизайн-системах, вторая — это слабая осведомленность дизайнеров о продуктовой колористике.
Первая проблема — в дизайн-системах даже крупных компаний до сих пор есть проблемы выбора и структуризации цветов. Да, есть color-переменные, их используют, но цвета очень часто выбирают точечно и они являются субъективным решением дизайнера или дизайн-команды, которые делают дизайн-систему для продукта.
Вторая проблема (на основе моей менторской статистики) — многие дизайнеры не могут самостоятельно разобраться с созданием колористической системы в продукте.
Чтобы работа с цветом была эффективной, разберём базовые темы, которые помогут начать процесс создание колористической системы и уменьшить количество ошибок в работе дизайнера.
Цветовые модели
Начнём с цветовых моделей, которые важны, ведь именно они определяют, как будут выглядеть цвета на устройствах вывода изображения. Для продуктового дизайна подходят несколько цветовых моделей. Отбросим сразу CMYK и RYB — они не для наших задач. Самая распространенная модель на данный момент — это RGB (HEX — не модель, а интерпретация записи RGB), HSL — не такая распространенная модель, но уже знакомая для некоторых дизайнеров, OKLCH — это пока что новая для нас модель, но есть предпосылки, что она станет наиболее актуальной для продуктового дизайна в ближайшие годы. Так, какую модель выбрать и использовать для колористики продукта: RGB, HSL, OKLCH?
Этот вопрос стоит остро, потому что модель всегда даёт колористике продукта качество именно в отображении на различных экранах различных гаджетов — опытные дизайнеры поймут, как порой сложно, когда на ретине цвет отрабатывает отлично, а на экране ноутбука с Windows этот же цвет блекнет или выглядит грязно и грубо, влияя на весь дизайн, визуально удешевляя его.
OKLCH имеет больше преимуществ, нежели привычные нам RGB и HSL. Отличия в том, что RGB неудобен для трансформаций цвета, поскольку большинству людей интуитивно сложно задавать цвета, изменяя количество красного, голубого и зелёного. А OKLCH как раз кодирует цвет так, как люди воспринимают цвета, используя оттенок, насыщенность и яркость. У OKLCH есть также преимущество в том, что эта модель поддерживает P-3 — это расширенный набор цветов, известный, как широкий цветовой охват (wide-gamut colors). Это отлично можно увидеть, работая с OKLCH Color Picker & Converter. А появился P-3 благодаря тому, что сейчас все современные устройства Apple и многие OLED-экраны поддерживают на 30% больше цветов, чем есть в RGB, и в P-3 не просто оттенков больше, но цвета могут быть ярче. Больше про модели и конкретно про OKLCH можно узнать в этой статье.
Дизайнер на опыте, конечно же, спросит: «А, как же формат HSL?». Если сравнить HSL и OKLCH, а конкретно поведение яркости и оттенка, то можно увидеть, что в HSL компонент L, то есть светлота, ведёт себя непредсказуемо и сильно зависит от оттенка, а это может привести в свою очередь к проблемам с контрастом и доступностью. Например, в HSL жёлтый при L=50 будет достаточно светлым, а синий при L=50 будет выглядеть тёмным, при этом в OKLCH те же жёлтый и синий будут визуально на одном уровне светлоты. Посмотреть различные колористические модели можно в Huepolot.
WCAG
Вопрос цветовой доступности также очень важен, когда мы подбираем колористику для продукта и прорабатываем её для дизайн-системы. Поэтому коэффициент контрастности — это базовая потребность при подборе цвета в продукт, а не дополнительное пожелание к цветовой палитре.
Коэффициент контрастности важно не путать с контрастом. Контраст — чувствительность глаза к яркости и цвету, а контрастность (contrast ratio) — степень контраста, отношение яркости самой светлой и тёмной точек в интерфейсе. Чтобы лучше изучить тему contrast ratio, можно использовать всем известный гайдлайн WCAG (Web Content Accessibility Guidelines) — это руководство по доступности контента, которое также описывает стандарты работы с contrast ratio. Подробнее ознакомиться с темой можно в этой статье.
Нам важен contrast ratio при подборе продуктовой колористики и создании тоновых растяжек, потому что создавая базовую систему колористики в нашей дизайн-системе, мы обязаны заранее проверить и понять, насколько наши цвета отвечают WCAG, а значит, насколько они эффективны для разных групп пользователей, включая людей с заболеваниями и патологиями зрения.
Подбор цвета в продукте (3-17-80)
Когда мы создаем продукт, а точнее бренд для нашего продукта, то чтобы выразить ценности и смыслы, мы подбираем типографику, рисуем лого, создаем набор базовых цветов, которые в сочетании с основным цветом, он же — бренд-цвет, станут визуальными якорями, которые в совокупности сделают наш продукт узнаваемым, придадут ему уникальность и помогут клиентам лучше фокусироваться на бренде.
Поэтому для колористики мы собираем набор core-цветов: хроматические и ахроматические — это небольшой набор, от 8 до 25 основных базовых цветов, которые мы сможем использовать для фона, акцентов, текстов, линий и проч. В ахроматические цвета, например, черный и серый мы можем подмешивать хрому бренд-цвета, чтобы усиливать через них восприятие бренда и сделать их более интересными и комфортными. Когда мы подбираем core-цвета, то можем выбирать их точечно, исходя из их насыщенности, яркости, совместимости и прочих свойств.
Для работы с колористикой в продукте лучше всего использовать схему: 3-17-80 (или её вариации: 5-15-80, 5-25-75) — это процентное соотношение цветов в дизайне нашего продукта, где 3-5% — это бренд-цвет для всех самых главных акцентов, 15-20% — это весь остальной хроматический набор цветов, а 75-80% — это белый, чёрный и оттенки серого. Такой процентаж колористики позволяет контролировать распределение цветов внутри наших макетов так, чтобы дизайн был эстетичным, все акценты были видны и понятны пользователю, фокусировали его и вели внутри пользовательских сценариев, а колористика работала на Success rate и Task time.
Цветовые и тоновые растяжки
Цветовые и тоновые растяжки — это фундамент всей колористической системы внутри продукта и его UI-автоматизации, потому что именно с них начинается создание примитивных переменных, чтобы на всех уровнях и во всех компонентах ДС была консистентность. Но сначала разберемся: что есть тоновые растяжки, а что есть цветовые растяжки, и для чего их можно использовать.
Цветовая растяжка — это приём в колористике, позволяющий сделать плавный переход от одного цвета к другому. То есть, это те самые градиенты, которые мы так сильно полюбили за последние несколько лет и которые так часто используют теперь повсеместно дизайнеры: продуктовые, коммуникационные, графические — мы используем градиенты в кнопках, фонах презентаций, лендингах, баннерах и проч.
Тоновая растяжка — это приём в колористике, позволяющий добиться плавного перехода от светлых тонов к темным тонам одного цвета. Тональная разница достигается за счёт примеси к основному цвету либо белого, либо черного цветов — так мы можем получить плавный переход в одном цвете, что даёт максимальную консистентность дизайну нашего продукта в будущем.
Уже от core-цветов мы строим тоновые растяжки, которые сможем комфортно интегрировать в светлую и, при необходимости, в тёмную темы. А, самое главное — каждый тон, используемый где-то в продукте, будет наследоваться от core-цвета, и за счет этого мы достигнем максимальной консистентности. И есть важный лайфхак: если вы сделаете тоновую растяжку достаточно длинной, более 25 цветов, а лучше от 30, то это даст вам возможность при любых изменениях продукта, в том числе при его росте и масштабировании, при появлении различных крупных фичей или даже подпродуктов — всегда найти и подобрать нужный тон в любой существующей тоновой растяжке. При большом количестве тонов — увеличивается вариативность переменных, а чем выше вариативность, тем больше возможностей и меньше рисков при появлении новых потребностей у бизнеса или у пользователей.
В следующих частях я разберу инструменты для работы с колористикой, уровни переменных, на которых мы работаем с колористикой в дизайн-системе, варианты создания тоновых растяжек в разных цветовых моделях и проч. А, пока вы можете изучить ссылки и инструменты, которые представлены в первой части.
