27 de febrero de 2012

Guía de 5 minutos: Principios de Diseño Gráfico para la Visualización de Información


Feltron nos vuelve a presentar el informe que realiza de forma anual sobre su vida de forma gráfica. Además nos presenta una guia de visualización aplicable a su último trabajo.


Durante los últimos años, la visualización de la información ha sido de los medios de comunicación contemporáneos clave y técnicas de investigación. Pero a menos que usted fuera a la escuela de diseño, ¿cómo se puede crear buenos diseños de futuro, como los que están en estos sitios?
www.visualizing.org
feltron.com
(Tenga en cuenta que no estoy hablando de la parte de visualización en sí - la forma de traducir eficazmente los datos en representaciones visuales, que las técnicas de visualización a utilizar cuando, etc - sino que forma parte del diseño sobre la gráfica, es decir, la forma de su “estilo” visualizaciones.)


Una visualización del Informe Anual 2010 de Nicholas Feltron.









Hay libros interminables y guías de diseño gráfico, pero sólo funcionan si se pasan años practicando.
El propósito de esta guía es reducir el sentido moderno de diseño común de algoritmos esenciales: principios de la mecánica que se debe seguir meticulosamente para llegar a un diseño de visualización de una buena apariencia. Es probable que usted no venga inmediatamente con algo tan bueno como ejemplos de arriba de inmediato, pero al menos se iniciará en la dirección correcta.
Se me ocurrió con estos “algoritmos”, mientras que la enseñanza de clases de visualizaciones a estudiantes de pregrado de la UCSD durante los últimos cuatro años. Me di cuenta de que cada vez nos fijamos en sus tareas, los mismos problemas vienen una y otra vez, y yo le daría el mismo consejo. Así que me decidí a escribirlo todo.


Aquí están mis 7 algoritmos para el diseño de buen aspecto visualizaciones:
(Si usted estudia la visualización por encima de lo que viene a partir de 2010 el Informe Anual por el célebre diseñador Michael Feltron, podrás ver todos estos principios en el trabajo).


1. Diseño moderno = uso sistemático de sólo unas pocas opciones para cada atributo visual:
Todos los diseños de visualización de la información tiene una serie de atributos visuales. Atributos más comunes son puntuales, colores, anchos de línea, tipo de letra, tamaños de fuente, la ubicación de los bloques de texto, etc. El principio de diseño más importante es esto: el uso de sólo unas pocas opciones para cada atributo. Por ejemplo, para las líneas, utilice sólo el máximo de dos anchos de línea. Por tamaño de la fuente, del mismo modo utilizar el uso a sólo dos tamaños: uno para el título, una para las etiquetas (por ejemplo). Para el color, utilizar una paleta de tres o cuatro colores, y así sucesivamente.


2. Conecte los atributos visuales con la semántica:
Conecte estas opciones de atributos con la semántica de la visualización (es decir, lo que representan estas imágenes.) Cada opción visual distinto - una anchura de línea diferente, el tamaño de fuente, un color, una posición en una malla espacial, etc - tiene que indicar el tipo diferente de los contenidos. No se limite a introducir más opciones para hacer de su diseño “bonito”.


3. Color:
A menos que esté capacitado profesionalmente, seguir adelante y el uso de de los numerosos sitios web que contienen paletas de colores profesionalmente y generadores de la paleta de colores. Elija la que más le guste para su visualización y se adhieren a ella. Búsqueda de “paleta de colores” o “generador de paleta de colores” para llegar a estos sitios.


4. Fuentes:
No utilice más de un tipo de letra en su diseño, con sólo algunas variaciones en el tamaño o el estilo (dos es mejor de tres). Aunque esto es sólo un ejemplo de algoritmo 1, es probablemente el número 1 error que cometen los principiantes - por lo que hice en un principio por separado.


5. Grid:
Otro principio clave de diseño moderno es el uso de las redes. Mientras que son menos importantes cuando se crea una visualización única, que se convierte en importante de lo que empezar a combinar una serie de visualizaciones juntos en un solo diseño. También puede utilizar una red al agregar bloques de texto descriptivo para una visualización. (Esto es también un caso particular de algoritmo 1.)


6. Quita todo lo que no es esencial:
Un famoso diseñador de productos japoneses, dijo: “Cuando diseño, me quitan hasta que no queda nada que sacar.” Al diseñar los gráficos, pregúntate: ¿realmente es necesario incluir las etiquetas en este gráfico? o líneas de la cuadrícula? o líneas de eje? Simplificar, simplificar, simplificar y otra vez.


7. Buscar una visualización bien diseñada y aplicar su diseño para una visualización propia:
Durante siglos, los artistas jóvenes estaban aprendiendo artesanía, copiando obras de antiguos maestros .. Utilice estos principios probados tanto para hacer visualizaciones bien diseñados, mientras que al mismo tiempo, el aprendizaje de diseño. Buscar una visualización que contiene el gráfico (s) u otros elementos que necesita para diseñar (por ejemplo, la leyenda de texto) y aplicar su diseño para su visualización propia.


¿Quiere asegurarse de que la visualización que desea copiar el estilo de la que realmente bien diseñado? La mayoría de las visualizaciones de recoger en estas galerías de renombre o blogs es “buen diseño”, por lo que los utilizan:
www.visualizing.org
infosthetics.com


Otras galerías de clave o blogs con un montón de buenos ejemplos:
www.visualcomplexity.com
flowingdata.com
datavisualization.ch


No busques en Google por “mejores visualizaciones” o frases similares - en mis experiencias a menudo las “mejores” listas no contienen visualizaciones bien diseñadas.


Entre los ejemplos de grandes diseños de sitios web (para su propio proyecto o sitio web de la cartera):
Una vez que hizo sus buenas visualizaciones que buscan, que quieren mostrar al mundo.
Revise el diseño de los sitios web de reconocido diseñador de la visualización Ben Fry, el software artista Casey Reas, o producto / espacio de diseño de Tokujin Yoshioka excelentes ejemplos de la estética del diseño moderno:
Casey Reas http://benfry.com/
Ben Fry http://reas.com/
Tokujin Yoshioka http://www.tokujin.com

Esta es una traducción el texto original se encuentra en este enlace

No hay comentarios: