Дизайн инфографики: простые правила

Это статья — перевод оригинала, опубликованного в Smashing Magazine. Сознаюсь, я немало подсократила рассуждения автора (Amy Balliett — одна из создателей дизайн агенства Killer Infographics в Сиэтле). Но все практические рекомендации, которые помогут начинающим «инфографам» — сохранены. Далее последует перевод весьма интересного ответа на эту статью. Не пропустите! 

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

Думай об инфографике правильно

Создавать инфографику – совсем не то, что проектировать сайты, буклеты или иллюстрировать книги. Есть вебдизайнеры, чьи портфолио заставят вас меленько дрожать. А попросите их нарисовать для вас инфографику — останетесь разочарованы. Действительно, это направление дизайна требует особого склада ума. Вот несколько правил, которые помогут нам открыть свой разум чистому сиянию инфографики.

Не говори – показывай!

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

Как проверить, насколько успешна наша инфографика? – Сгруппируйте весь текст и положите его в отдельный слой (в графическом редакторе, например, в программе Photoshop или Corel Draw). Сделайте этот слой невидимым и взгляните на свое творение…

Если тема, идея, история ясны и без текстовых пояснений – значит, задача решена. Ну, а если нет…

Это просто картинка, но вся информация представлена в виде текста. Можно было и вообще без графики обойтись…

А, может, инфографика и вовсе не нужна?

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

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

В верхней части мы видим просто диаграмму. Внизу она вписана в визуальную концепцию (это, типа, спидометр!)

Типографика – не основа инфографики

Часто дизайнер с большим энтузиазмом принимается за создание визуализации. Но необходимость выражать информацию невербально гасит его пыл. В английском языке есть хорошее выражение, которое описывает развитие такого процесса: «Быстрые решения — хреновый результат» («quick decisions and poor solutions»). Вот, например:

Ну и где тут инфографика?! – Явно, дизайнер просто использовал свои любимые шрифты (ну и шедевральная инфа: за год в самолетах пустует 237 млн кресел, что соответствует 522 026 м², на которых можно разместить 13,8 млрд змей!)

А вот и другое, более «инфографичное» решение. Здесь показаны и самолеты, и пустые кресла. Круг представляет год и 217 дней, на которые можно было бы занять аэропорт О’Хара в Чикаго, если бы все эти пассажиры отправились в полет. Правда, тут уж не нашлось места для 13.8 млрд змей, что очень жаль:

Но типографика играет свою заметную роль, например, в заглавии. Используйте здесь свои любимые шрифты и эффекты, чтобы привлечь внимание ко всей картинке!

История – как ее рассказать?

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

Далее, стоит подумать, как распределить эти опорные точки в пространстве. Довольно часто картинки-кадры располагают вертикально, один над другим, отделяя их заголовками. Эта стандартная схема выглядит довольно скучно. Так что, стоит поиграть с несколькими колонками, перемещением взгляда зрителя в разных напрвлениях.

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

Хук прямо в глаз

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

Самая важная информация – на самом заметном месте

Раскрашивай правильно

В практике вебдизайна постоянно дискутируется, как разные цвета и сочетания цветов воздействуют на зрителя. Созданы «успешные» и «провальные» палитры. Вот несколько правил, которых стоит придерживаться:

• Темный фон и неоновые цвета затрудняют считывание информации;
• Белый фон, также, плох, т.к. есть большая вероятность, что ваша инфографика сольется с общим фоном сайта или блога, на котором ее опубликуют;
• Наиболее «легкая» для глаза – тройная палитра. Выберите три основных цвета. Наиболее светлый послужит фоном, а два других – для разных секций инфографики. В качестве дополнительных цветов можно взять оттенки трех главных;
• Используйте для выбора палитры доступные инструменты. Например, сайт Adobe’s Kuler, где можно, по крайней мере, почерпнуть вдохновение, рассматривая разные палитры из пяти цветов;