Дизайн Вадим Скворцов
3 008

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

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

В закладки

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

Как определить основы цветов при создании цветовой палитры бренда

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

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

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

Крис Мессина
экс-сотрудник Uber

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

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

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

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

Фреймворк сетки в масштабе 10 pt для понимания свойств цвета

Сетка для фреймворка

На приведённом выше графике показана зависимость между яркостью, непрозрачностью, тонами, тенями и цветностью для определённого оттенка. Этот график был построен с использованием масштаба 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% сверху вниз.

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

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

1. Метод тонов и теней

Sketch-файл — по ссылке

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

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

2. Метод наложения

Sketch-файл — по ссылке

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

3. Метод наложения Soft Light

Sketch-файл — по ссылке

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

4. Метод наложения холодных цветов

Sketch-файл — по ссылке

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

5. Метод наложения тёплых цветов

Sketch-файл — по ссылке

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

6. Метод настройки яркости

Sketch-файл — по ссылке

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

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

7. Метод одновременной настройки яркости и насыщенности

Sketch-файл — по ссылке

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

Правила

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

Гибридный пример

Пример объединения всех методов

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

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

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

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

#дизайн

{ "author_name": "Вадим Скворцов", "author_type": "editor", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 2, "likes": 23, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 37980, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 37980, "author_id": 120027, "diff_limit": 1000, "urls": {"diff":"\/comments\/37980\/get","add":"\/comments\/37980\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/37980"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

2 комментария 2 комм.

Популярные

По порядку

0

Отличная статья! Добавил в закладки.

Было бы гораздо лучше, если описания цвета Hue, Tints, Tones шли по порядку как на изображении ниже, а не вразброс. Читаешь текст, начинаешь соотносить, но что-то не сходится.

Ответить

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления