Как нарисовать красивый график или диаграмму. Приемы оформления

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

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

Чтобы сделать инфографику более красивой, стоит облегчить сетку вспомогательных линий. Уменьшить их количество, толщину и яркость. Убрать лишние элементы типа засечек или стрелок на осях, уменьшить шрифт подписей. Универсальное решение, подходящее для большинства случаев, - это сетка из одних горизонтальных или только вертикальных линий небольшой контрастности, может быть пунктирных. Частоту сетки нужно подобрать в зависимости от размера графика. Иногда от сетки можно избавится полностью, без потери смысла. Благодаря визуальному облегчению график становится не только красивее, но и понятнее, потому что мы переносим внимание на данные. Главное учитывать контекст и характер данных, иногда мжет понадобится больше линий.

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

Для того чтобы инфографика с большим количеством параметров была понятной, нужно выбирать для них отличные друг от друга контрастные цвета. Однако это нужно делать аккуратно, чтобы вписать графики в дизайн и не сделать слишком разноцветными. Если нужно 2-3 разных цвета, то можно взять цвета, близкие друг к другу на цветовом круге, подходящие под основной цвет дизайна страницы или презентации. Если нужно больше - можно взять и противоположные, но уменьшить их яркость или насыщеность. Такой подоход не только сделает график красивее, но и позволют соблюсти визуальный баланс между парамтерами. Ни один из них не будет выделяться из группы из-за цвета. Если на графике есть несколько групп похожих параметров, можно назначить каждой их них свой цвет и менять прозрачность внутри группы.

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

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

Важно выбирать цвета так, чтобы они оставались нейтральными и не добавляли в инфографику нежелательную информацию. Особенно, если речь идет о паре цветов. Например, если вы не показываете положительные и отрицательные значения (прибыль+убыток или рост+снижение), то стоит избегать пары красный+зеленый. Или, если параметры равнозначные - нужно выбирать цвета с одинаковой яркостью и насыщенностью, чтобы случайно не сделать один из параметров ведущим.

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

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

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

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

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

Спасибо за внимание.
Читайте другие мои статьи про оформление таблиц и контента в таблицах