11/02/2016

Infografías animadas: nuevas herramientas para transmitir información

Infografías animadas: nuevas herramientas para transmitir información

Las infografías existen en los medios impresos desde el siglo XIX, pero se han revitalizado gracias a la Web. Las infografías tradicionales, estáticas, permiten presentar información de una forma más divertida y comprensible que un simple artículo de texto. Pero las nuevas tecnologías potencian aun más este beneficio al incorporar animaciones e interactividad. Asi, en los últimos años se han popularizado muchas infografías que, aunque puedan abocarse a temas poco atractivos, resultan irresistibles por su cuidado diseño y sus características dinámicas. Estas características aportan tres ventajas considerables:

  • Hacen que la infografía sea memorable. Seguramente los usuarios la compartan y la recuerden.
  • Le brindan a la marca un aspecto trabajado, profesional y positivo.
  • Resultan divertidas para el usuario.

Veamos algunos ejemplos inspiradores de infografías animadas realizadas con tecnologías web.

13 Reasons Why Your Brain Craves Infographics

Una infografía animada que explica, partiendo de estudios científicos, por qué nos gustan tanto las infografías. La página fue creada por una agencia de diseño para demostrar el poder de este recurso, y puede decirse que ha logrado su cometido: las ilustraciones animadas que la componen son muy atractivas. Al pie de la página se nos informa el tiempo que estuvimos navegando por ella, en una demostración de lo mucho que capturó nuestra atención.

The Evolution of the Web

Esta infografía refleja, a través de una línea de tiempo, el nacimiento, la evolución y la desaparición de diversos navegadores y tecnologías de desarrollo que fueron conformando la Web que hoy conocemos. El gráfico logra representar una gran cantidad de información en un espacio reducido: las explicaciones, capturas de pantalla y enlaces externos no se muestran al principio, sino que recién aparecen cuando cliqueamos sobre un elemento particular para conocerlo mejor. Así, se incluyen muchos datos sobre cada tecnología sin saturar la pantalla. Sobre el mismo eje temporal podemos superponer un gráfico que muestra cómo creció el uso de Internet en el período considerado. Disponible en varios idiomas.

2015 Annual Report

Informe interactivo sobre la actividad que tuvo durante 2015 el 9/11 Memorial Museum, institución que recuerda a las víctimas de los atentados del 11 de septiembre de 2001. Rozando los límites del concepto de «infografía», la página incluye textos informativos, mensajes de las autoridades, íconos, fotos, videos, ilustraciones, estadísticas, noticias y reseñas, enmarcados en un sobrio diseño de pocos colores.

Dangers of Fracking

Esta animación interactiva nos guía por el proceso de fracturación hidráulica (fracking) y advierte sobre sus aparentes peligros. Entre los aciertos de esta infografía se pueden mencionar lo descriptivo de sus ilustraciones, su facilidad de uso y el hecho de que se puede recorrer en poco tiempo. Así, la información es fácil de asimilar.

How Search Works

A través de texto e ilustraciones animadas, Google explica cómo funciona su buscador. Muchos de los elementos se pueden cliquear ya sea para reproducir las animaciones o para obtener más información al respecto, incluyendo datos sobre resultados de búsqueda que se actualizan en tiempo real. La infografía sigue los principios del flat design.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce