Инфографика — отличный помощник в передаче и демонстрации важных, но сложных для восприятия цифр и фактов. Но, как и любой другой визуальный продукт, она должна легко восприниматься. Поэтому очень важно выбрать для нее правильную цветовую палитру. Главный дизайнер интерфейса сайта с инфографикой Graphiq Саманта Чженг (Samantha Zhang) делится советами по подбору удачного сочетания цветов. Читаем и запоминаем!

«В то время как найти хорошие палитры сейчас достаточно легко, найти правильное сочетание цветов для визуализации данных все еще непросто» — пишет Саманта. В выборе цветов для инфографики Чженг видит три основные проблемы.

  1. Многие существующие палитры цветов не предназначены для визуализации. Они не просто не обладают большим разнообразием в яркости, но и сложны для восприятия. Например, цвета для интерфейса, предоставляемые ресурсом Flat UI Colors, очень популярны среди разработчиков, но в инфографике их трудно воспринимать, особенно дальтоникам.
1 / 3

choose-color-palette-for-infographic-tips-from-professionals-1 Палитра от Flat UI Colors

choose-color-palette-for-infographic-tips-from-professionals-2 Палитра от Flat UI Colors

choose-color-palette-for-infographic-tips-from-professionals-3 Палитра от Flat UI Colors

  1. Кроме того, в большинстве палитр цветов недостаточно. Саманта приводит в пример ресурс Color Hunt с цветовыми палитрами, состоящими из 4 оттенков. «Цвета отлично смотрятся, но они недостаточно гибкие для передачи сложных данных». Для инфографики обычно требуется от 6 до 12 различных оттенков.

choose-color-palette-for-infographic-tips-from-professionals - 4

Палитры Color Hunt

  1. Очень часто цвета в палитре слабо отличаются по яркости, особенно если стоят рядом.

choose-color-palette-for-infographic-tips-from-professionals - 5

Палитры Color Hunt

 

Как выбрать правильные цвета для инфографики

Саманта делится тремя правилами, которые нужно учитывать при выборе цветов.

1. Разнообразие оттенков и яркости

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

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

2. Выбирайте естественные сочетания цветов

В качестве примера Саманта берет две палитры: переход от светло-фиолетового к темно-желтому и от светло-желтого к темно-фиолетовому. «Чисто математически они должны быть практически одинаковыми» — пишет Чженг. Но это не так. Второй воспринимается гораздо легче, потому что с таким переходом человек часто встречается в природе, например, во время заката.

1 / 3

choose-color-palette-for-infographic-tips-from-professionals-6 Фото Jon Sullivan

choose-color-palette-for-infographic-tips-from-professionals-8choose-color-palette-for-infographic-tips-from-professionals – 8

choose-color-palette-for-infographic-tips-from-professionals-7 Фото Kyle Pearce

3. Используйте градиенты для выбора цветов

По мнению Саманты, градиенты отлично помогают в выборе оттенков. Для этого, она советует делать сетку цветов в Photoshop.

choose-color-palette-for-infographic-tips-from-professionals - 9

В завершение Чженг приводит примеры удачных цветовых палитр от Graphiq.

1 / 3

choose-color-palette-for-infographic-tips-from-professionals-10choose-color-palette-for-infographic-tips-from-professionals – 10

choose-color-palette-for-infographic-tips-from-professionals-11choose-color-palette-for-infographic-tips-from-professionals – 11

choose-color-palette-for-infographic-tips-from-professionals-12choose-color-palette-for-infographic-tips-from-professionals – 12

Советы от профессионалов всегда очень полезны, а правила, которыми поделилась Саманта, нужно запомнить и даже записать на всякий случай! Мы уверены, что теперь ваша инфографика будет выглядеть еще лучше и понятнее.

Оставить комментарий