Views Comments Previous Next Search
Электронная инфографика. Часть 2: прошлое — Приглашенный редактор на Look At Me

Приглашенный редакторЭлектронная инфографика. Часть 2: прошлое

«Юмор — один из инструментов в копилку эффективной инфографики»

В ближайшие недели на сайте Look At Me Алексей Волков выпустит серию статей об инфографике на всех возможных электронных устройствах. Вторая часть — про статичную инфографику — ниже.

 

Электронная инфографика. Часть 2: прошлое. Изображение № 1.

 

Алексей Волков

Создаёт мобильные приложения и веб-сайты. Интересуется инфографикой, фотографией, графическим дизайном. В данный момент работает в компании «Мамба» арт-директором.

facebook

 

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

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

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

1Блок-схемы, цифры, графики

Электронная инфографика. Часть 2: прошлое. Изображение № 3.

The Feltron 2008 Annual Report

 

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

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

Электронная инфографика. Часть 2: прошлое. Изображение № 4.

 Тендерная концепция главной страницы сайта «Альфа Страхования»

 

А это пример из веба, являющийся собратом предыдущего по визуальному приёму. Если говорить о процессе создания блока «Почему нас любят клиенты», то на входе был огромный кусок маркетингового бреда про преимущества компании, из которого было слито 99 % воды и оставлено только самое важное — статистические показатели — то, что имеет хоть какое-то значение для современного, искушённого в информации посетителя. При таком способе отображения задача выполняется на раз: человек увидел, понял, сделал выводы и пошёл дальше в нужном нам направлении.

Электронная инфографика. Часть 2: прошлое. Изображение № 5.

 Промостраница фильма к 30-летию «Макинтоша»

 

Тот же самый приём с увеличенным кеглем на числах, дополненный тематическими пиктограммами, выполняет похожие задачи и на промостранице Apple о фильме, созданном к 30-летию со дня появления первого Мака. Во-первых, эти числа разбавляют текстовые блоки, находящиеся с ними по соседству. И вкупе с чередующимися картинками и акцентированной вёрсткой они подталкивают человека к изучению этого самого текста. Во-вторых, выделенные числа акцентируют наше внимание на масштабности проделанной работы для создания ролика. Поэтому в конечном итоге даже самый ленивый посетитель, пробежавшись глазами по диагонали, сможет уловить основную суть сообщения, что уже очень даже неплохо.

 

Электронная инфографика. Часть 2: прошлое. Изображение № 6.

Gregory Ferembach: The Movies Flowcharts

 

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

Электронная инфографика. Часть 2: прошлое. Изображение № 9.

Презентационный слайд для интернет-магазина «Канта»

 

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

Электронная инфографика. Часть 2: прошлое. Изображение № 11.

Раздел о карьере в «Штокмане»

 

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

 

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

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

 

Электронная инфографика. Часть 2: прошлое. Изображение № 15.

Два варианта блока в разделе карьеры в «Штокмане»

 

Туда же. Слева — непринятый эскиз блока про молодых и опытных сотрудников на «Штокмане». Справа (для сравнения) — то, что в итоге приняли. В первом случае можно отметить использование в метафоре юмора. Ну, типа, что было сначала: яйцо или курица? Жаль, что побоялись такого немного неформального подхода и не приняли, потому что подобные фишки придают живости сухой статистике, обращая тем самым на себя внимание и запоминаясь наиболее естественным для человека образом. Поэтому юмор — это ещё один инструмент в копилку эффективной инфографики.

Электронная инфографика. Часть 2: прошлое. Изображение № 16.

Электронная инфографика. Часть 2: прошлое. Изображение № 17.

Электронная инфографика. Часть 2: прошлое. Изображение № 18.

Электронная инфографика. Часть 2: прошлое. Изображение № 19.

Carl Kleiner: Swedish Ikea Cookbook

 

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

2Технические иллюстрации

Электронная инфографика. Часть 2: прошлое. Изображение № 20.

Журнальная инфографика про комплекс из четырёх небоскрёбов в центральном деловом районе Сантьяго (Чили)

 

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

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

Электронная инфографика. Часть 2: прошлое. Изображение № 21.

Раздел на сайте «Штокмана» про морской добычной комплекс

 

А это техническая иллюстрация всё с того же сайта «Штокман», теперь уже про схему добычи газа. Она замечательно отображает ещё один принцип создания успешной инфографики: правильнее всего выбирать свежайшие темы, которые «взорвали» общественность либо которые будоражат умы уже долгое время, и споры по этому поводу не прекращаются.

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

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

Электронная инфографика. Часть 2: прошлое. Изображение № 22.

Информаторий «Газпрома»

 

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

Ну и напоследок ещё один замечательный пример инфографики, сделанной на основе технических иллюстраций:

Электронная инфографика. Часть 2: прошлое. Изображение № 23.

Разделы на сайте «Сахалин-2» — про добычу и сепарацию и транспортировку покупателям

 

Маленький вывод из всего вышесказанного: не бойтесь экспериментировать. Используйте привычные журнальные формы, давая им новую интерпретацию в электронном мире. Смешивайте всевозможные графические стили с приёмами из других областей дизайна. Делайте всё, что придёт вам в голову, неважно, что это будет. Главное — не останавливайтесь. Потому что только так, небольшими, но постоянными шагами, можно прогрессировать во что-то новое.

А вот во что, на мой взгляд, прогрессировала инфографика, о которой я рассказывал сегодня, и в какой точке находится индустрия в настоящий момент — вы узнаете через неделю. До встречи.

  

Рассказать друзьям
0 комментариевпожаловаться

Комментарии

Подписаться
Комментарии загружаются
чтобы можно было оставлять комментарии.