Как нарисовать красивый график или диаграмму. Приемы оформления
В этой статье я хочу показать как можно сделать графики и диаграммы не только удобными, но и красивыми. Покажу подходы к выбору цветов, способы органично вписать их в общий дизайн, и оформительские приемы, которые сделают их интереснее визуально. Эти советы будут полезны не только дизайнерам, но и всем кто постоянно работает с инфографикой для отчетов, презентаций или сайтов: программистам, менеджерам, аналитикам. Также они помогут при выборе из вариантов, сгенерированных нейросетями.
Я не буду описывать какие типы инфографики бывают, какой тип выбрать, и не буду приводить здесь базовые советы по работе с данными, потому что они уже хорошо описанны, в том числе и на VC. Например, рекомендую эту статью. Мои же советы помогут сделать инфографику красивее, вписать в современный дизайн и сделать ее ярким элементом оформления. Конечно, эти приемы также помогут сделать графики более понятными - зритель будет быстрее считывать информацию и видеть важные акценты, но основной упор будет именно на визуальной состовляющей.
1. Облегчение сетки вспомогаельных линий
Чтобы сделать инфографику более красивой, стоит облегчить сетку вспомогательных линий. Уменьшить их количество, толщину и яркость. Убрать лишние элементы типа засечек или стрелок на осях, уменьшить шрифт подписей. Универсальное решение, подходящее для большинства случаев, - это сетка из одних горизонтальных или только вертикальных линий небольшой контрастности, может быть пунктирных. Частоту сетки нужно подобрать в зависимости от размера графика. Иногда от сетки можно избавится полностью, без потери смысла. Благодаря визуальному облегчению график становится не только красивее, но и понятнее, потому что мы переносим внимание на данные. Главное учитывать контекст и характер данных, иногда мжет понадобится больше линий.
2. Сругление углов и добавление градиентов
Так как в современном дизайне повсеместно используются элементы со сгругленным углами, то же самое стоит использовать и для оформления инфографики. Благодаря этому она будет выглядеть интереснее, и лучше впишется в дизайн сайта или презентации. Также можно использовать градиенты - как для заливки столбчатых диаграм, так и для окраски площади под линейными графиками. Это не только их украсит, но может сделать понятнее, особенно линейные графики, которые приобретут объем.
3. Выбор палитры цветов
Для того чтобы инфографика с большим количеством параметров была понятной, нужно выбирать для них отличные друг от друга контрастные цвета. Однако это нужно делать аккуратно, чтобы вписать графики в дизайн и не сделать слишком разноцветными. Если нужно 2-3 разных цвета, то можно взять цвета, близкие друг к другу на цветовом круге, подходящие под основной цвет дизайна страницы или презентации. Если нужно больше - можно взять и противоположные, но уменьшить их яркость или насыщеность. Такой подоход не только сделает график красивее, но и позволют соблюсти визуальный баланс между парамтерами. Ни один из них не будет выделяться из группы из-за цвета. Если на графике есть несколько групп похожих параметров, можно назначить каждой их них свой цвет и менять прозрачность внутри группы.
4. Подбор палитры в завсисмости от цветов дизайна
Инфографика будет выглядеть лучше, если вы будете использовать основной цвет дизайна страницы или презентации, и добавите к нему близкие по тону соседние цвета. Если основной цвет холодный - то хлодные оттенки, если теплый - то теплые. При этом нужно помнить, что цвета для линий должны сильнее отличаться друг от друга, чем цвета для столбцов.
5. Выделение ярким цветом главного параметра
Если в инфографике есть один самый важный параметр, а остальные второстепенные (например, доля нашей компании на рынке, или доля чистой прибыли в стоимости товара), можно выделить этот параметр контрастным цветом, а остальные сделать разными оттенками второго или в градациях серого.
6. Баланс и нейтральность цветов
Важно выбирать цвета так, чтобы они оставались нейтральными и не добавляли в инфографику нежелательную информацию. Особенно, если речь идет о паре цветов. Например, если вы не показываете положительные и отрицательные значения (прибыль+убыток или рост+снижение), то стоит избегать пары красный+зеленый. Или, если параметры равнозначные - нужно выбирать цвета с одинаковой яркостью и насыщенностью, чтобы случайно не сделать один из параметров ведущим.
7. Штриховка и пунктир
В некоторых случаях хорошо работает использование не сплошной заливки и линий, а разных штриховок. Раньше этот прием применяли в черно-белой печати низкого качества, где нельзя сделать даже градации серого для разных параметров. Но и в экранной графике это также можно использовать, если мы хотим подчеркнуть иерархию параметров. Например, показать планируемый прирост с помощью штриховки, или показать пунктиром график за прошлый год.
8. Градации одного цвета в завсисимости от данных
Иногда, в зависимости от контекста и значений, можно использовать градации одного цвета для одного и того же параметра. Например, выделить ярче выбранный день, или покрасить столбцы в разные оттенки в зависимости от их высоты.
9. Переход на темную тему
Темный фон для инфографики сделает ее гораздо ярче и интереснее. Яркие цвета на темном фоне не только будут лучше смотреться, но и привлекут внимание к инфографике - диаграммы и графики станут центральным элементом дашборда или презентации даже без увеличения размера. На больших экранах, особенно в зале с приглушенным светом, это работает еще лучше.
10. Брендирование
Для того чтобы лучше вписать график в окружающий дизайн или брендированную презентацию, можно использовать основной цвет этого дизайна. Даже если вы показываете рост продаж компании, можно покрасить график в красный если это рост продаж Кока Колы.
11. Согласование графиков между собой
Если у вас в презентации или на дашборде много разных графиков, естественно, нужно использовать одинаковые цвета или одну гамму цветов. Однако, кроме сходства стоит также разделить графики, если речь идет о разных параметрах. Лучше всего выбрать разные типы инфографики для каждой страницы или блока на дашборде. Это будет удобнее для пользователя дашборда, потому что он будет быстрее находить глазом блок с нужным параметром. И сделает дизайн презентации интереснее, потому что слайды будут больше отличаться друг от друга.
Спасибо за внимание.
Читайте другие мои статьи про оформление таблиц и контента в таблицах