Публикуем перевод статьи из блога SEOmoz– одного из крупнейших западных разработчиков SEO-программ. В ней бренд-менеджер компании Миранда Ренч рассказывает о популярных в их команде инструментах прототипирования и визуализации данных.

Привет! Я Миранда Ренч, менеджер по продукту SEOmoz и поклонница визуальных коммуникаций. Визуальное представление информации – один из самых эффективных методов демонстрации сложных идей и связей. Это отличный способ рассказать о сервисе или продукте и создать качественный контент. В нашей команде, обсуждая новые идеи и функции сервиса, мы часто используем диаграммы и командное рисование на доске.

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

Инструменты для создания простой инфографики и визуализации данных

1. Piktochart

Piktochart – это веб-инструмент, в котором есть шесть приятных бесплатных шаблонов (в платной версии их намного больше) для создания простой графики.

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

Можно добавлять простые графики, гистограммы и секторные диаграммы на основе данных из CSV-файлов или вводить их напрямую. Возможен экспорт файлов в форматы PNG и JPG в разрешениях для печати и для веб. Обратите внимание: при использовании бесплатной версии в нижней части загруженного PNG- или JPG-изображения появляется маленький водяной знак Piktochart.

2. Easel.ly

Другой бесплатный онлайн-сервис для создания инфографики – Easel.ly. С ним не получится создать график на основе реальных данных, но он отлично подходит для визуализации идей и историй.

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

Инструмент отличается самым широким набором объектов (люди, коллекции иконок, достопримечательности, карты, животные и т.д.) и фонов из всех, что я видела. Кроме того, в бесплатной версии можно загружать собственные изображения. JPG-файл можно сохранить в разрешении для веб. Сервис находится в стадии бета-тестирования, но, на мой взгляд, работать с ним уже достаточно удобно.

3. Infogr.am

Ещё один бесплатный онлайн-инструмент – Infogr.am – обладает прекрасным интерфейсом для создания простой инфографики и имеет в своём распоряжении несколько красивых шаблонов.

Сюда можно загружать собственные изображения и видео. После того, как информационный плакат готов, его можно вставить на сайт или опубликовать в галерее infogra.am (способа сохранить изображение я не нашла). Этот сервис тоже существует в виде бета-версии, но и он показался мне довольно убедительным решением. 

4. Visual.ly

Visual.ly предлагает несколько простых, но достойных внимания бесплатных инструментов, многие из которых интегрируются с социальными сетями и анализируют данные Twitter и Facebook.

С его помощью можно создавать забавные диаграммы Венна, «поединки» Twitter -аккаунтов, визуализации употребления хэштегов и некоторые другие схемы, однако сервис не предусматривает персональных настроек.

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

5. Tableau

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

Хотите ещё больше функций для создания потрясающей инфографики?

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

Приложения для создания диаграмм и прототипов

6. OmniGraffle

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

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

У приложения есть свои недостатки: это не самое дешевое программное обеспечение – стандартная версия обойдется в 99 долларов, профессиональная – в 199 долларов, при этом оно работает только на Mac.

7. Balsamiq

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

Другие инструменты для обмена идеями с помощью визуализации данных

8. Создание видео

Серия роликов RSA (иллюстрации CognitiveMedia) – замечательный пример того, как можно использовать визуальные коммуникации для сопровождения текста.

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

9. TimelineJS

TimelineJS использует Google-таблицы со ссылками на YouTube, Flickr, Twitter, Sound Cloud и другие медиа-ресурсы для создания приятных для глаза временных шкал.

Этот инструмент можно использовать для создания интерактивной инфографики об истории вашей компании, компании клиента, истории отрасли и так далее.

10. Present.me

Приложение Present.me позволяет создавать презентации, в которых запись вашего выступления соседствует со слайдами.  

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

Планирование и подготовка данных для инфографики

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

1. Учитесь у других

Если вы не уверены, какой вид инфографики использовать, изучите работы других людей на таких сайтах, как:

• Visual.ly – содержит огромное количество классной инфографики, способной вдохновить вас и ваших дизайнеров.
• Informationisbeautiful.net предлагает массу отличных информационных плакатов.
• Datavisualization.ch предоставляет огромный выбор интерактивных визуализаций и информационной графики.

2. Разберитесь в назначении различных видов диаграмм

Изучение существующих видов диаграмм и их назначения очень полезно. Программа Many Eyes IBM Research содержит обширный перечень различных видов схем и их функций – то есть, описания условий, для которых лучше подходит гистограмма, сравнительная или точечная диаграмма и т.д. В Visual-literacy.org создали периодическую таблицу средств визуализации, где приведены примеры всех видов графического представления информации, какие только можно представить.

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

Юмор и социальная критика: интересные наблюдения о человеческой природе, обзор вин, шкала доврия к бородам разных форм и т.д.

Демонстрация взаимосвязей между элементами: удельные доли, пропорции, отличия.

Блок-схемы в виде последовательности вопросов и ответов: сделайте варианты ответа и направления движения чёткими.

Временная шкала: покажите последовательность событий.

3. Продумайте будущую инфографику

Приступая к поиску идеи для будущей визуализации, можно опираться на следующий порядок работы:

1. Определитесь с назначением инфографики.
   Что нового должна узнать аудитория? Хотите ли вы призвать зрителей к каким-то действиям? Или вы стремитесь вызвать у них определённый эмоциональный отклик (например, заинтересовать, удивить, или заставить почувствовать, что они понимают предмет)?

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

3.  Изучите работу других людей (вдохновляющие сайты перечислены выше).
   Добавьте в свой список все идеи относительно композиции и графического представления.

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

5. Создайте изображение, используя один из описанных инструментов, или наймите кого-нибудь для выполнения этой задачи. Для найма дизайнеров, специализирующихся на инфографике, мы рекомендуем ресурсы: Freelancer, 99 designs, Designcrowd, Elance, Odesk, Nowsourcing, Columnfive, Infog8 и Mikewirthart.

6. Займитесь продвижением! Джастин Бриггс (Justin Briggs) недавно написал замечательную статью о стратегиях продвижения инфографики.

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

Статья переведена и опубликована с разрешения авторов. Компания SEOmoz не является партнёром данного сайта.

cmsmagazine.ru