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

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

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

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

1. Облегчение сетки вспомогаельных линий

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

Облегчение сетки<br />
Облегчение сетки

2. Сругление углов и добавление градиентов

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

Градиенты под графиком и смягчение углов<br />
Градиенты под графиком и смягчение углов
Скругление уголв диаграмм и применение градиентов<br />
Скругление уголв диаграмм и применение градиентов

3. Выбор палитры цветов

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

Палитры цветов<br />
Палитры цветов

4. Подбор палитры в завсисмости от цветов дизайна

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

Адаптация инфографики под дизайн окружения<br />
Адаптация инфографики под дизайн окружения

5. Выделение ярким цветом главного параметра

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

Выделение цветом главного параметра<br />
Выделение цветом главного параметра

6. Баланс и нейтральность цветов

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

Баланс и нейтральность цветов<br />
Баланс и нейтральность цветов

7. Штриховка и пунктир

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

Штриховка и пунктир<br />
Штриховка и пунктир

8. Градации одного цвета в завсисимости от данных

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

Использование градаций разного цвета<br />
Использование градаций разного цвета

9. Переход на темную тему

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

Темная тема<br />
Темная тема

10. Брендирование

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

Брендированиие графиков<br />
Брендированиие графиков

11. Согласование графиков между собой

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

Использование графиков разного типа<br />
Использование графиков разного типа

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

3535
5 комментариев

Классно, полезно и интересно. Спасибо. Но много опечаток ;(

2

Очень ценная статья, спасибо вам большое!

1

Спасибо. Рад что было полезно

А можно пару практических примеров как это сделать. Красота такая! Может поделитесь частью своей коллекции артефактов. Брендированный график вообще огонь!

Вот здесь то же самое в видео-формате, там есть хорошие примеры:
https://youtu.be/kWzS2tAgYUU?t=525

1
Пользователи Instagram* пожаловались на наплыв кровавого и порнографического контента в Reels — некоторый показывался без предупреждений

Владеющая соцсетью Meta* извинилась перед аудиторией и сказала, что «исправила ошибку».

1212
44
22
Ну всё правильно. Meta -- экстремистская организация. Что ещё могут публиковать экстремисты и террористы? Только кровавый контент: убийства, насилие, запрещённые вещества. Не зря ведь в России заблокировали.
реклама
разместить
Бывший офис Sony Pictures в России потребовал от российских киносетей около 1 млрд рублей по договорам, заключённым до ухода киностудии из страны

Sony Pictures приостановила развитие российского бизнеса в марте 2022 года.

Кадр из «Анчартед: На картах не значится» Рубена Фляйшера
1313
1010
11
11
11
Ишь чего, а 44 квадрагинтиллиона штрафа не хотите?!
Что такое чистые активы и зачем их считать

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

Что такое чистые активы и зачем их считать
Как монетизировать Telegram-канал с помощью искусственного интеллекта: создаем нейробота и начинаем зарабатывать за 30 минут
Как монетизировать Telegram-канал с помощью искусственного интеллекта: создаем нейробота и начинаем зарабатывать за 30 минут

Рассказываю про заработок на Telegram-канале с помощью нейросетей. Как за 30 минут создать бота, подключить оплату и начать продавать подписки. Экологично, прибыльно, без вложений, регистрации и SMS.

1010
11
День 1100: российский рынок корпоративного ПО вырос на 34% по итогам 2024 года

Собираем новости, события и мнения о рынках, банках и реакциях компаний.

Источник фото: «РИА Недвижимость»
88
44
11
- Заблокировать иностранное ПО, принудительно заставлять ставить русское ПО - Радоваться, что рынок растет Profit
SpaceX успешно запустила к Луне посадочный модуль Athena со станцией сотовой связи

Ракета Falcon 9 стартовала с комплекса Космического центра им. Кеннеди во Флориде, США.

1010
55
Патентный поверенный зарегистрировал не тот знак: что делать?

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

Патентный поверенный зарегистрировал не тот знак: что делать?
44
Сервис «нейродубляжа» ElevenLabs представил модель для преобразования речи в текст

Поддерживает 99 языков, в том числе русский.

Источник: ElevenLabs
3636
11
[]