Памятка о цвете в датавизе

Привет! Я собрала небольшую шпаргалку о цвете в визуализации данных ⬇️

Картинка к посту взята из книги The Big Book of Dashboards

☝️У цвета есть две функции: кодировать информацию и акцентировать внимание.

Есть 3 типа палитр: последовательная, расходящаяся и категориальная.

1️⃣ Последовательная (sequential).
В палитре данного типа изменение яркости цвета соответствует продвижению от низкого к высокому: чем больше значение, тем темнее цвет. Применяем для числовых значений, например, для количества заказов или суммы продаж.

2️⃣ Расходящаяся (diverging).
Используем для метрик, где надо показать переход через точку. Чаще всего это 0, но может быть медиана или другая важная отметка, например, прожиточный минимум. Центральное значение обычно присваивается светлому цвету, а чем дальше от центра, тем темнее.

3️⃣ Категориальная (categorical).
Используется для обозначения категорий (измерений), чтобы их выделить и разграничить. Это могут быть, например, города, страны, виды бытовой техники и т.п. Чем больше цветов, тем сложнее их сопоставлять. Рекомендуется использовать не более 5-6 цветов.

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

Цвета должны помогать понять то, что происходит на графике.

Для этого:

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

✔️ Цвета должны быть выбраны логично.
Для этого важно соблюдать порядок: например, светофорные цвета для шкалы «хорошо/плохо» или наращивание потемнения с увеличением значения.

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

🎨 Как подобрать цвета?
• взять готовую палитру
• подсмотреть в других датавиз-проектах, картинах или фотографиях и переиспользовать код цвета с помощью функции «пипетка» в графических редакторах

Сайты по работе с цветами:

🔹 Сolor designer.io
Можно подобрать оттенки, связать гармоничные варианты по цветовому кругу, есть подборки готовых палитр.

🔹 Learnui.design/tools/data-color-picker
Выбираем цвет, получаем нужное количество оттенков. Можно выбрать степень яркости и интенсивности цвета.

🔹Colorscheme
Простой инструмент для подбора цветов и генерации цветовых схем.

🔹Adobe Color CC
Инструмент позволяет не только создавать свои собственные палитры, но и смотреть, что сделали другие. Можно выбирать цвет с цветового круга или прямо с изображения и применять разные правила для генерации палитры.

🔹Nightpalette
Сервис подбирает цвета для темной темы.

🔹Oddcontrast
Удобный сервис для подбора цвета и проверки контраста.

🔹Палитра Сьюзи Лу
Сервис для просмотра сочетаемости цветов на разных типах графиков и того, как их видят люди с особенностями зрения.

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

❓А вы много времени тратите на подбор цветов для дашборда?

#цвет #дашборд #подборка
Датавиз в BI • Алиса Ручкина