Фреймворк для создания цветовой палитры Статьи редакции

Дизайнер продукта в ecommerce-компании Flipkart Рахул Чакраборти — о методах определения спектра цветов в палитре бренда.

Перевод подготовил Николай Геллар, автор блога о дизайне Sketchapp.me.

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

Создание определённого набора систем или правил важно в начале разработки. Цвета — это подмножество DLS (языка дизайн-системы) бренда, и это одна из основных областей, в которой дизайнеры не сформировали точный набор правил использования цветов.

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

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

• Оттенок (Hue) — это цвет (синий, зелёный, красный и так далее).
• Цветность (Chroma) — это чистота цвета (высокая цветность не добавляет чёрный, белый или серый цвета).
• Насыщенность (Saturation) — как много представлено данного оттенка (чем меньше насыщенность, тем меньше цвета и ближе к белому).
• Яркость или значение цвета (Brightness, Value) указывает на то, насколько светлый или тёмный цвет (у тёмного цвета низкая яркость и значение цвета).
• Непрозрачность (Opacity) указывает, насколько прозрачный или непрозрачный цвет.
• Тона (Tones) создаются путём добавления серого к цвету, что делает его более скучным, чем оригинал.
• Тени (Shades) создаются путём добавления к цвету чёрного, делая его темнее оригинала.
• Ненасыщенные тона (Tints) создаются путём добавления белого к цвету, делая его светлее оригинала.

Сводка свойств цвета. Мы будем использовать комбинацию этих свойств для генерации цветовых вариаций.

На приведённом выше графике показана зависимость между яркостью, непрозрачностью, тонами, тенями и цветностью для определённого оттенка. Этот график был построен с использованием масштаба 10 pt. Это означает, что непрозрачность цвета изменяется на 10% по оси X, а яркость изменяется на 10% по оси Y.

Мы будем использовать упрощённую версию вышеприведённого графика, используя масштаб 25 pt для создания нашего базового фреймворка сетки. Эта сетка будет служить нашей игровой площадкой со множеством возможностей для генерации цветов.

Я использовал Sketch App для создания сетки фреймов, но можно создать то же самое в других инструментах проектирования, таких как Photoshop, Illustrator, Figma, Gimp и так далее. Мы будем использовать популярную цветовую систему HSB.

Вы получите изображение, аналогичное тому, что представлено ниже, когда выполните следующие шаги.

1. Выберите базовый оттенок. Создайте квадрат 50×50 px с этим оттенком. Например, я выбрал синий оттенок (H 212, S 67, B 89).

2. Создайте квадратную плитку размером 10×10 px (H 0, S 0, B 100).

3. Продублируйте эти белые плитки (пять строк, пять столбцов), чтобы покрыть весь базовый квадрат из первого шага.

4. Уменьшите непрозрачность каждого столбца белых плиток на 25% слева направо.

5. Уменьшите яркость каждой строки белой плитки на 25% сверху вниз.

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

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

Этот метод является наиболее часто используемым из-за его простоты. С его помощью мы и создали базовую сетку фреймворка. Непрозрачность и яркость белых плиток выше базового оттенка составляет от 100% до 0% (слева направо) и от 0% до 100% (снизу вверх) соответственно.

Цветовая тема на изображении справа была создана с использованием наших трёх базовых оттенков и выбора значений непрозрачности и яркости из центрального столбца слева (обозначено стрелкой).

В этом методе мы используем тот же базовый фреймворк и меняем Blendingmode белых плиток на Overlay. Это создаёт красивую разницу оттенков по всей сетке.

Как и во втором методе, мы меняем режим наложения белых плиток на Soft Light. Это создаёт красивую разницу насыщенности по всей сетке. Затем мы выбираем все эти белые плитки и дублируем их дважды. Это создаёт более сильную разницу насыщения и, следовательно, лучшую цветовую яркость.

В этом методе используется фреймворк сетки, которую мы создали во втором методе. Затем мы выбираем любой холодный цвет (синий, например). Создаём прямоугольник этого цвета и помещаем его на всю сетку. Измените Blendingmode на Overlay. Полученная цветовая сетка будет ярче исходной.

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

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

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

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

• Более светлый оттенок цвета — низкая насыщенность и высокая яркость.
• Более тёмный оттенок цвета — высокая насыщенность и низкая яркость.

На это меня вдохновила одна из статей на Sketch Tricks о быстром способе создания системы цветов в Sketch.

Всё дело в использовании инструментов и освоении основ элементов дизайна. Сочетание различных элементов или методов часто открывает бесконечные возможности.

Есть ещё множество способов генерации цветовых тем. Как вы видите, создание Base Framework Grid было самой важной частью. Сетка служит игровой площадкой для вашего воображения при создании цветовых систем. Вы можете комбинировать несколько методов для создания нового набора цветов из вашего базового оттенка. Попробуйте градиенты вместо однотонного цвета.

Вы также можете использовать метод корректирующих слоёв Justin Mezzell для создания винтажного набора цветов.

#дизайн