Las infografías no son nuevas Y ciertamente, los interactivos tampoco lo son, pero con el lanzamiento de sitios de noticias recientes basados ​​en datos tales como Vox,Quince años y El resultado , se están volviendo más populares.

Y como los espectadores ven esas infografías en tabletas, teléfonos y computadoras de escritorio, construir esos gráficos en HTML5 es el camino a seguir, ¡es probable que la forma en que sus clientes y compañeros de trabajo le pidan que construya!

baseball_info

UN mapa de los fanáticos del béisbol por The Upshot

Aquí hay tres formas de asegurarse de que su infografía interactiva basada en HTML5 rompa el desorden.

1) Piensa por qué estás haciendo la infografía en primer lugar usando el método FIRED

Antes de siquiera pensar en la tecnología, es importante pensar en el gráfico desde el punto de vista de un espectador. Si bien HTML5 le brinda un medio completamente nuevo para presentar la historia de sus datos, no le da automáticamente un propósito o una narración a la pieza.

Es obvio cuando un proyecto se mezcló en el último minuto, sin tener en cuenta la usabilidad o la calidad. ¿Cómo evitas hacer ese trabajo? Me gusta emplear el método "FIRED", una manera fácil de recordar pensar críticamente antes de comenzar a utilizar lo último en trucos de CSS para hacer un mapa interactivo:

  • Fresh - ¿Cómo se diferenciará su diseño de la multitud?
  • Informativo : ¿Presenta hechos precisos e intrigantes?
  • Relevante : ¿su información cuenta una historia armoniosa?
  • Entretenido : ¿el espectador está atraído y emocionado de ser parte de tu historia?
  • Diferente - ¿Es su infografía nueva? ¿Se ha hecho antes?

Hacer estas preguntas lo ayudará a planear los objetivos de su página y cómo desea que su mensaje resuene con su público. Finalmente, su producto final debe enmarcar su idea de una manera clara y agradable. Sé creativo, sí, pero también sé disciplinado. El arte gráfico es lo que debe atraer al lector, pero los datos presentados deben ser sucintos; no dejes que el médium supere el mensaje. Una infografía exitosa atrae a su audiencia por más y es fácil de digerir.

2) Hacer que se mueva

Adobe Edge Animate es una herramienta de animación HTML5 que le permite agregar movimiento a gráficos web, permitiéndole extender sus diseños personalizados con interactividad y movimiento. También se integra con otras herramientas creativas para ofrecer un puente sin fisuras entre el diseño y HTML a medida que crea para la web. Hay algunas plantillas y muestras geniales en el página de exhibición para que comiences Si quiere ir a un nivel más profundo y agregar elementos como scrubbers arrastrables, haga clic y toque, aquí hay una tutorial con activos para que comiences

También puede tejer gráficos interactivos que aprovechan las últimas actualizaciones del navegador para CSS y HTML5 para crear efectos bastante extravagantes. CSS Shapes está en sus últimas etapas de especificación; Echale un vistazo (Repo de Github aquí )

evolution_web

los evolución de la web infografía.

3) datos, datos, datos

Una infografía no es nada sin las poderosas fuentes de datos y las herramientas para ilustrarlas.

Las fuentes de datos pueden variar, ya sea que se trate de su propia investigación o la de su cliente. También hay una buena lista en Quora de conjuntos de datos disponibles públicamente eso puede darte algunos buenos datos brutos para jugar.

Algunos de mis servicios de infografía favoritos (que ofrecen todos los productos HTML5, por supuesto) para recopilar y evaluar sus datos son:

  • Piktochart - un servicio gratuito (con una opción pro paga) que ofrece una amplia gama de temas personalizables con una herramienta de importación de datos pulida.
  • infogr.am - un servicio gratuito (con una opción pro pagada) que ofrece plantillas, hojas de cálculo y otras utilidades para construir gráficos visuales.
  • visualmente - una comunidad de gráficos. Mientras que el punto de precio de visual.ly puede parecer un poco alto (te harán una infografía basada en un resumen creativo que comienza en $ 999), su comunidad es un refugio de inspiración cuando buscas comenzar tu propio proyecto de infografía.

Y si eres especialmente ambicioso y buscas una inmersión profunda en el campo más amplio de la ciencia de datos, hay muchos recursos en línea sobre el tema. Hay MOOC como este curso de ciencia de datos de la Universidad de Washington.