Дизайнер дал советы о выборе палитры для инфографики
Главный дизайнер интерфейсов сайта с инфографикой Graphiq Саманта Чженг (Samantha Zhang) написала пост с несколькими советами и принципами выбора удачных палитр для инфографики.
«Если найти хорошие палитры в наше время просто, то найти удачное сочетание цветов для визуализации данных всё ещё трудно», — пишет Чженг. В поиске цветов для инфографики она выделяет три основные проблемы.
Палитра Flat UI Colors
Во-первых, не все палитры предназначены для визуализации. Например, цвета из руководящих принципов дизайна интерфейсов (например, материальный дизайн Google) могут плохо восприниматься дальтониками и просто слабо отличаться друг от друга.
Палитры из четырёх цветов с сайта Color Hunt
Во-вторых, во многих существующих палитрах недостаточно цветов. В качестве примера она приводит сайт Color Hunt, где можно найти удачные сочетания четырёх цветов. Но для инфографики обычно нужно от 6 до 12 цветов.
Градиентные палитры с сайта Color Hunt, цвета из которых будут плохо различаться на инфографике
В-третьих, цвета некоторых палитр слабо различаются по яркости, поэтому их будет сложно отличить друг от друга, особенно если они стоят рядом.
Чтобы выбрать хорошее цветовое сочетание для инфографики, Чженг советует использовать три правила.
Слева направо: палитра голубого из материального дизайна, она же в протапонии, она же в чёрно-белом
Во-первых, нужно проверить, есть ли у цветов из палитры достаточно сильное различие по яркости. «Отличие по яркости будет универсальным», — пишет дизайнер. Также большая разница в яркости поможет адаптировать палитру для дальтоников. Можно посмотреть, как её воспримут люди с протапонией (пониженной чувствительностью красного), дейтеранопией (пониженной чувствительностью зелёного или другого цвета), а также если перевести её в чёрно-белый.
Во-вторых, для палитры лучше использовать естественные сочетания. В качестве примера Чженг приводит переход от светло-жёлтого к тёмно-фиолетовому и от светло-фиолетового к тёмно-жёлтому. «С чисто математической точки зрения они должны выглядеть примерно одинаково», — пишет она, отмечая, что первое сочетание выглядит натуральнее второго. Дизайнер связывает это с тем, что человек привык видеть сочетания из первой палитры в природе, например, во время заката.
Сетка для работы с градиентами
В-третьих, при формировании палитры лучше использовать градиент, чтобы лучше почувствовать разницу в цвете. Чтобы облегчить задачу, Чженг советует сделать сетку с цветами в Photoshop, такую как на скриншоте выше. Градиенты, уверяет она, эффективны при выборе и двух, и 12 цветов.
Удачные палитры для инфографики
Также дизайнер посоветовала 12 полезных ресурсов для работы с цветом и палитрами. Их список можно посмотреть в конце поста на Medium.
Комментарии
Подписаться