The Do’s And Don’ts Of Infographic Design

• 12 min read
• Design,Data Visualization,Infographics
• Saved for offline reading
• Share on Twitter, LinkedIn

Since the dawn of the Internet, the demand for good design has continued to skyrocket. Desde la Web 1.0 hasta la Web 2.0 y más allá, los diseñadores han permanecido atentos a la hora de definir las tendencias y las expectativas de nuestro universo online.

Nota del editor: Quizá quieras leer el artículo de Nathan Yau The Do’s And Don’ts Of Infographic Design: Revisited aquí en Smashing Magazine que es una respuesta a este artículo.

Desde los albores de Internet, la demanda de un buen diseño ha seguido disparándose. Desde la Web 1.0 hasta la Web 2.0 y más allá, los diseñadores han permanecido atentos a la hora de definir las tendencias y expectativas de nuestro universo online. Internet es un gran patio de recreo para los diseñadores, y las empresas en línea aprecian cada vez más lo que se puede conseguir con un poco de atractivo visual bien ejecutado. En los últimos dos años, este hecho se ha convertido en la columna vertebral de una tendencia creciente en el marketing online: la infografía.

Las infografías son representaciones visuales de la información, o «data viz» como lo llaman los chicos guays de hoy en día. El término «data viz» viene de «data visualization», que implica que los conjuntos de datos se mostrarán de una manera única que se puede ver, en lugar de leer. Esta visualización no debe dejarse a la interpretación, sino que debe diseñarse de forma que proporcione una conclusión universal para todos los espectadores. En los términos más simples, las infografías no son demasiado diferentes de los cuadros y gráficos que programas como Excel han estado escupiendo durante años.

Más lecturas en SmashingMag:

• Interesantes ejemplos de diseño infográfico interactivo
• Recursos de visualización de datos e infografía
• Imagina un gráfico circular pisando fuerte en una infografía para siempre
• Diversión con la física en la visualización de datos

Por supuesto, al igual que la Web 2.0 cambió la 1.0, las infografías actuales son mucho más llamativas que los simples gráficos circulares y de barras. Hoy en día, las infografías compilan muchas visualizaciones de datos diferentes en una pieza cohesiva de «caramelo para los ojos». Han evolucionado con las tendencias de diseño, han recibido algunos retoques creativos y ahora Internet se está llenando de información interesante entregada de forma cautivadora.

Aunque algunas tendencias de diseño van y vienen, las infografías han llegado para quedarse. Con marcas como USA Today, The New York Times y Google, e incluso el presidente Obama, que las apoyan, las infografías se están convirtiendo en una poderosa herramienta para difundir grandes cantidades de información a las masas. Empresas grandes y pequeñas están utilizando infografías para construir sus marcas, educar a su público y optimizar su clasificación en los motores de búsqueda a través de la construcción de enlaces. Es por ello que aprender a diseñar una buena infografía es una necesidad, y evitar las trampas comunes del diseño infográfico podría significar la diferencia entre el aterrizaje de un gran cliente y perderlo por completo.

Entregando su mente alrededor de Data Viz y el diseño infográfico

Diseñar una infografía no es lo mismo que diseñar un sitio web, volante, folleto, etc. Incluso algunos de los mejores diseñadores, con portafolios que le harían babear, no pueden ejecutar un diseño infográfico eficaz. Crear infografías es un reto y requiere una mentalidad que no es natural para todos. Pero esa mentalidad puede adquirirse con la práctica y ciñéndose a ciertas normas, la más importante de las cuales es respetar y entender el viz de datos. Aquí hay algunas reglas sencillas que hay que seguir cuando se envuelve la mente en un viz de datos adecuado.

Mostrar, no contar

Una regla del cine es mostrar, no contar. Lo mismo ocurre con el diseño de infografías. La base de cualquier buena infografía es la visualización de datos. Como diseñador de infografías, usted puede o no determinar el concepto y compilar toda la investigación para el diseño final, pero de cualquier manera usted es responsable de convertir esa información en un diseño visualmente estimulante y cohesivo que cuente una historia y que no pierda una sola oportunidad de visualizar datos. Tomemos como ejemplo esta parte de una infografía sobre Twitter realizada por ViralMS:



¿Qué tiene de malo esta infografía? Rompe la primera regla desde el principio. Cuando tengas la oportunidad de mostrar información de forma visual, aprovéchala. Aquí, los tweets por segundo podrían haberse mostrado al menos en un gráfico de barras. Esto permitiría a alguien mirar rápidamente esta sección y ver lo que está pasando; al ver las distintas alturas de las barras, el ojo podría haber calibrado rápidamente las diferencias en los tweets por segundo por evento sin tener que leer nada.

Si tienes problemas para cumplir esta regla, intenta mantener todo el texto en una sola capa de tu archivo AI (excluyendo el texto dentro de los cuadros y gráficos). De vez en cuando, desactive la capa de texto y compruebe si la infografía sigue teniendo sentido. Si no hay ninguna visualización de datos, o si a un montón de imágenes les falta contexto, entonces está haciendo demasiado relato y no lo suficiente para mostrar.

Si el cliente quisiera un gráfico de Excel, no le necesitaría

Puede sonar duro, pero es cierto. Si las infografías fueran tan sencillas como colocar un montón de cuadros y gráficos estándar en una página, los clientes no necesitarían buscar grandes diseñadores. Hay muchas herramientas en línea que pueden crear coloridos gráficos circulares, de líneas y de barras, así que hay que llevar las cosas al siguiente nivel para que el diseño destaque. Tomando los datos de arriba, ¿cuál de los dos gráficos de abajo crees que haría más feliz a un cliente?



Si has contestado el gráfico B, lo estás entendiendo. Por supuesto, no todos los datos se prestan a gráficos creativos y únicos. El gráfico A podría funcionar muy bien si el resto de la infografía compartiera una estética similar. A veces sólo hay que morder la bala y producir un gráfico de barras tradicional o un gráfico circular; sin embargo, siempre hay que considerar formas de vestirlo, como en los ejemplos siguientes:



La tipografía no debe ser una muleta

La tipografía puede hacer o romper un diseño, pero no debe ser la solución a un problema de visualización de datos. La mayoría de las veces, los diseñadores comienzan una infografía con una gran cantidad de energía y emoción, pero pierden el vapor rápidamente a medida que continúan por la página. Esto a menudo conduce a decisiones rápidas y soluciones pobres, como el uso de la tipografía para mostrar un gran número en lugar de visualizarlo de alguna manera. He aquí un ejemplo:



Cada vez que veo esto, me acuerdo de la campaña publicitaria «¿Dónde está la carne?», y pienso: «¿Dónde está la visualización de datos?». Aunque Sketch Rockwell es una de mis fuentes favoritas de todos los tiempos, este es un ejemplo perfecto de confiar demasiado en la tipografía.

Cada vez que te proporcionen un número de investigación para una infografía, pregúntate cómo se puede visualizar. Los porcentajes siempre se pueden visualizar con gráficos circulares creativos; los valores numéricos de un conjunto normalmente se pueden convertir en un único gráfico de barras; y cuando los números no encajan en una escala consistente, podrías visualizarlos en un diagrama. He aquí otra forma en que se podrían haber visualizado los datos anteriores:



La tipografía tiene su lugar

Dicho esto, la tipografía tiene sus usos, que no deben ser ignorados al crear una infografía. La mayoría de las veces, querrá centrar sus energías tipográficas creativas en los títulos y los encabezados. El título de la infografía es una oportunidad perfecta para utilizar una fuente divertida y llamativa y darle un tratamiento que se ajuste al tema o asunto. Sólo hay que asegurarse de que el título no distraiga tanto como para alejarnos de la razón por la que estamos viendo la infografía en primer lugar. La verdad es que algunos temas infográficos son aburridos, pero el diseño correcto del título puede enganchar a la gente lo suficiente como para desplazarse a través de él.

De manera similar, los títulos ayudan a romper una infografía y hacer que los datos sean más fáciles de asimilar, lo que le da otra oportunidad de dejar volar su bandera de font-nerd.



Organización y línea argumental

Organizar una infografía de forma que tenga sentido y mantenga el interés del espectador no siempre es fácil, pero es parte del trabajo de la mayoría de los diseñadores de infografías. Por lo general, se le dará una gran cantidad de datos y tendrá que crear una historia visual a partir de ellos. Esto puede ser un reto al principio, pero puede seguir algunas reglas generales para hacer las cosas más fáciles.

Enmarcar la infografía

Enmarcar una infografía le permite elaborar un guión gráfico y un diseño. Es posible que tenga una idea de la historia que quiere contar, pero cuando empiece a maquetar las cosas, puede chocar con un muro y tener que volver a empezar. Tener que reorganizar después de haber hecho gran parte del diseño es increíblemente frustrante. Evita esto estableciendo tu línea argumental al principio para determinar qué datos mostrar y cómo. Dedica una hora a hacer bocetos y asegúrate de que todo tiene sentido. Esto también le ayudará a asegurarse de que la paleta de colores que elija dirija la atención a los puntos importantes y mantenga la mirada fluyendo por la página.

Piense fuera de la caja

A medida que haga el wireframe de la infografía, identificará los cortes de sección que ayudan a contar la historia. La mayoría de las infografías en línea tienen un flujo vertical, en el que cada sección tiene un título para distinguirla de la anterior. Esto aburre rápidamente. Organizar los datos y seccionar la información sin depender enteramente de los encabezados y las rupturas de color es una buena manera de romper la monotonía.

Por ejemplo, en lugar de optar por el típico diseño de una columna, podría utilizar dos columnas en ciertas partes. También podrías romper las secciones con bordes, con fondos de diferentes formas o dar a todo el diseño un tema de carreteras o caminos. Aquí hay algunos diseños fuera de lo común para hacer fluir su creatividad:



Cuenta una historia

Todas las buenas historias tienen un principio, un medio y un final. Las infografías merecen el mismo tratamiento. Al principio de la infografía, introduce el problema o la tesis. A partir de ahí, respáldalo con datos. Por último, termine la infografía con una conclusión.

Visualice el gancho

Toda buena infografía tiene un gancho o una idea principal que hace que el espectador diga «¡A-ha!» Como diseñador, debe hacer que este gancho sea el punto focal del diseño si es posible. Colocar el gancho en el centro o al final de la infografía suele ser lo mejor, para que atraiga más la atención. Dé a la información más importante el mayor peso visual, para que los espectadores sepan qué deben llevarse. Aquí hay algunos ejemplos de ganchos bien visualizados:



Limpiar las cosas con el color

La diferencia que puede hacer una paleta de colores es asombrosa, especialmente en el mundo de la infografía. La paleta correcta puede ayudar a organizar una infografía, evangelizar la marca, reforzar el tema y más. Una paleta equivocada puede convertir un gran tema en una monstruosidad, dañar la imagen de la marca y transmitir un mensaje equivocado. Aquí hay algunos consejos a tener en cuenta a la hora de elegir los colores para su infografía.

Hágalo universal

En el diseño web, siempre es importante elegir una paleta que se ajuste al tema del sitio web y que sea lo suficientemente neutral para un grupo diverso de visitantes. Dado que las infografías se comparten principalmente en línea, elegir la paleta adecuada para un conjunto de visitantes es igualmente importante. Por ejemplo, los colores oscuros dominantes y los neones no suelen traducirse bien en las infografías; el neón sobre el negro puede ser difícil de leer, y si hay muchos datos, asimilarlos todos será un reto. Además, evite el blanco como fondo siempre que sea posible. Las infografías se comparten a menudo en varios sitios web y blogs, la mayoría de los cuales tienen fondos blancos. Si el fondo de su infografía también es blanco, entonces descifrar dónde comienza y termina será difícil.

Una paleta de tres colores es fácil para los ojos

Con todos los datos que entran en una infografía, asegúrese de que el ojo del lector fluya fácilmente por la página; la paleta de colores equivocada puede ser una gran barrera para esto. Elija una paleta que no ataque los sentidos. Y considere hacer esto antes de empezar a diseñar, porque le ayudará a determinar cómo visualizar los distintos elementos.

Si elegir una paleta de colores le resulta difícil, siga la regla de tres. Elige tres colores primarios. De los tres, uno debe ser el color de fondo (normalmente el más claro de los tres), y los otros dos deben romper las secciones. Si necesitas añadir otros colores, utiliza tonos de los tres colores principales. Esto mantendrá la paleta cohesionada y tranquilizadora, en lugar de discordante.

Usa las herramientas a tu disposición

Al elegir los colores, no tienes que reinventar la rueda. Un número de grandes sitios web por ahí le ayudará a elegir la paleta correcta para su infografía. Kuler, de Adobe, ofrece temas frescos y una base de datos en la que se puede buscar, así como una herramienta sencilla para ajustar la paleta que te interesa. Un problema con Kuler es que todas las paletas tienen cinco colores, y los colores son a veces de familias completamente diferentes, en lugar de tonos de unos pocos colores primarios, por lo que encontrar la paleta correcta puede ser como buscar una aguja en un pajar.

Otra herramienta de selección de colores es COLOURlovers. Esta base de datos es más fácil de buscar: divide las paletas en diferentes temas y se pueden ordenar por favoritos. Aunque la mayoría de las paletas también constan de cinco colores, no siempre se les da la misma importancia; en su lugar, la herramienta sugiere cuál debería ser el dominante. Aquí hay algunas paletas buenas y malas para las infografías:



Pensamientos finales

Si bien estas normas son importantes a tener en cuenta para la mayoría de los diseños infográficos, a veces aparece una infografía que rompe todas estas reglas y aun así tiene un éxito inmenso. Al final, a los clientes les gusta el «caramelo para los ojos» y los diseños que «¡están de moda!». Aunque estos términos son subjetivos (y molestos para la mayoría de los diseñadores), todos reconocemos un gran diseño infográfico cuando lo vemos, y sus clientes también. Utiliza estas reglas para guiarte en el ámbito de la infografía, pero crea tus propias técnicas y normas cuando hayas adquirido algo de experiencia.

(al)