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!
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.
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:
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.
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í )
los evolución de la web infografía.
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:
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.