Статьи, приемы, хитрости и Уроки по Photoshop, Illustrator, Web дизайну и кодингу.

3 способа разработать инфографику, которая будет выделяться из толпы

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

Для просмтора обычно используют планшеты, телефоны и рабочие компьютеры. Поэтому правильным инструментом для создания графики в web является HTML5, которым Ваши клиенты обязательно захотят воспользоваться и попросят чтобы Вы такое обязательно создали для них!

1) Думайте о том, почему Вы делаете инфографику, во-первых используя свободный метод.

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

Очевидно, когда проект запустили в последнюю минуту без любого упоминания удобства пользования или качества необходимо использовать “свободный” метод — прежде чем Вы начнете использовать приемы CSS для наведения красоты и перед оформлением интерактивной карты, ответтье на несколько вопросв:

  • Новый ? – Как Ваш проект будет выделяться из толпы?
  • Информативный ? – Вы представляете точные и интригующие факты?
  • Релевантный ? – Ваша информация соответствует теме презентации?
  • Интересный ? – Графика заставляет обратить внимание?
  • Отличающийся ? – действительно ли Ваша инфографика новая? Это было сделано прежде?

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

2) Успользуйте анимацию

Adobe Edge Animate - инструмент анимации HTML5, который позволяет Вам добавлять движение к веб-графике, позволяя расширить Ваши индивидуальные проекты с помощью интерактивности и перемещения. Это также может быть интегрируемо с другими творческими инструментами, чтобы предложить бесшовный мост между проектом и HTML, поскольку Вы создаете для сети.

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

Можно также использовать хитрые переплетения интерактивной графики, которая усиливает эффект от CSS и HTML5, чтобы сделать некоторые довольно необычные эффекты. CSS Формы находятся на последних стадиях спецификации; ТУТ(Github repo здесь).

evolution_web

Развитие веб- инфографики.

3) Данные, данные, данные

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

Есть также хороший список на Quora общедоступные наборы данных, которые могут дать Вам некоторые хорошие необработанные данные, чтобы использовать их. 

Некоторые инфографические службы, (которые обеспечивают все продукты HTML5) для сбора и оценки Ваших данных:

  • Piktochart — бесплатное (платно только pro опция) предложение широкого диапазона настраиваемых тем с гладкой утилитой импорта данных.
  • infogr.am — бесплатное обслуживание (платно только pro опция) предлагающие шаблоны, электронные таблицы и другие утилиты, чтобы пристроить визуальные графики.
  • visual.ly — графическое сообщество. В то время как стандартная цена у них может казаться немного крутой.

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

источник Webdesigner Depot

Последнее изменениеЧетверг, 14 Август 2014 10:01
  • Оцените материал
    (1 Голосовать)
  • Опубликовано в Creative
  • Прочитано 2063 раз
SeRbGa

SeRbGa

мечтатель

Сайт: www.serbga.ru
Другие материалы в этой категории: 10 креативных визитных карточек »

Оставить комментарий

You have no rights to post comments

Наверх

Популярные статьи

  • 1
  • 2
  • 3
  • 4

последние комментарии

ON-Line Блог SeRbGa.ru предоставляет самую свежую и актуальную информацию для веб-дизайнеров и разработчиков в виде тематических материалов, уроков созданных собственноручно, а так же переводов статей и новостей, полученных с зарубежных информационных ресурсов.

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на данный сайт!

ДИСКЛЕЙМЕР/DISCLAIMER:

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