La Gaceta de Linux ...¡ haciendo a Linux un poco más divertido !

Diseño a Conciencia

Por Mark Seymour

Traducción al español por Eleonora Batt
el día 14 de Diciembre de 2005, para La Gaceta de Linux

Los paradigmas valen mucho más de veinte centavos

(Vea la biografía del autor para acceder a los artículos precedentes en esta serie.)

Ahora que ha reunido sus textos e imágenes, identificado sus archivos, y obtenido las aprobaciones y traducciones, Ud. está listo para agregar estructura a sus datos. Para comunicarse efectivamente, Ud. debe crear una jerarquía para sus datos, porque nuestras mentes intentan instintivamente ordenar el desorden.

Un ejemplo temprano de esto serían las constelaciones, en este caso los seres humanos prehistóricos convirtieron un grupo desordenado de estrellas en el cielo nocturno en la Osa y el Cinturón de Orion y dieron nombres a otros 86 patrones más (vea http://www.astro.wisc.edu/~dolan/constellations/constellation_list.html para obtener una lista completa), así como los naipes, los primeros mazos que datan del siglo XIV en Italia. (Para ver la historia de los naipes, mire este sitio británico, http://wopc.co.uk, o este museo francés, http://www.issy.com/statiques/musee/index.html.) En relación a los mazos de Tarot, pero sin su contexto espiritual, los naipes son una unidad de información muy compleja. Organizables según el color y la posición numérica, estos 56 objetos ordenados son usados todos los días por personas que no hablan un idioma en común y no tienen una herencia artistocrática; es difícil imaginar otro sistema de información igualmente exitoso:

Como desafío de diseño, intente crear su propio mazo de cartas personal (vea http://www.communigate.co.uk/hants/playingcards/page4.phtml para más información al respecto) o fíjese en los últimos mazos de alta tecnología en http://www.zbyte.com.

En los cinco siglos y medio posteriores a Gutenberg (vea http://www.gutenberg.de y http://www.dotprint.com/fgen/history1.htm),varios grandes paradigmas de información han sido creados: el libro, el diario, la revista, y el catálogo. Cada uno tiene su método distintivo de presentar la información, dando a cada uno un aspecto gráfico tradicional y predecible. Cada uno sirve a un nicho particular en el sistema de información; como Umberto Eco observó, "Los egipcios podían esculpir sus registros en obeliscos de piedra, Moisés no pudo." (Para leer su discurso completo de 1996, De Internet a Gutenberg, vea http://www.italianacademy.columbia.edu/pdfs/lectures/eco_internet_gutenberg.pdf.)

La mayoría de los sitios web emula, con éxito variable, uno o más de estos cuatro paradigmas.

Los libros han sido, tradicionalmente, los primos aburridos y abultados en la familia de la información. Muchos hoy en día tienen solapas anti-polvo a todo color, o cubiertas blandas, pareciéndose más a un poster que a un libro tradicional encuadernado con tapas de cuero:

Pero sus portadas a todo color siguen envolviendo un interior de texto solamente, y casi todos los libros todavía tienen la página de medio título, la página de título, la página de derechos de autor, la página de contenidos; un esquema organizativo textual desarrollado hace cientos de años. La mayoría están impresos en dos tipografías, con poca diferencia excepto en las páginas que abren cada capítulo, y muchos todavía tienen una noción débil, el colofón, al final, donde el diseñador menciona la tipografía utilizada, usualmente incluyendo la historia de esa tipología en sí. La información en la mayoría de los libros es muy linear, sin embargo la tabla de contenidos o el índice (encontrado en la mayoría de los libros que no son de ficción), así como la barra de navegación o el campo de búsqueda de un sitio web, permiten encontrar rápidamente una sección de interés o una referencia en particular.

Los libros publicados en línea o como archivos para descargar generalmente han retenido este aspecto "antiguo" (vea http://www.ebookmall.com/index.html para encontrar ejemplos), y hay muchos sitios que proveen versiones gratuitas especialmente de textos más antiguos: Proyecto Perseus y Proyecto Gutenberg. Como los libros son la mayoría de las veces publicados en primer lugar fuera de internet, sus equivalentes en línea se ven obligados a imitar las versiones palpables; desafortunadamente, la muy esperada "revolución del hipertexto" todavía no ha llegado.

Los diarios siempre fueron un medio 'frío'. Aquí les presento pares de diarios de Londres (1797 & 1940) y Nueva York (1863 & 1945), producidos a 143 y 82 años de diferencia entre sí:

A excepción de los titulares grandes (que se hicieron necesarios debido a un cambio en la táctica de venta, de los voceadores a los escaparates), hay poco de diferente entre los de una era y otra. Mientras que los diarios han adoptado tinta de colores y fotografía a color dentro de los límites de su provisión de papel, hasta el New York Times todavía se vé bastante igual hoy en día, 141 años después de la edición sobre la guerra civil de más arriba:

Aun en su versión en línea, el Times adopta la familiar disposición en columnas múltiples: http://www.nytimes.com/, y sigue pareciendo un diario. Note que el diario en sí continúa usando un estilo de tipografía "Inglés Antiguo" (basado en la tipografía de letras negras alemana) para su placa de identificación.

Éste ha sido un estilo de tipografía tradicional para los diarios de todo el mundo durante más de 150 años, aunque el Times de Londres hizo que Stanley Morrison diseñara su propia tipografía homónima (Times New Roman, por supuesto) en 1931. (Para una buena reseña sobre cómo la misma tipografía puede hacerse sutilmente diferente dependiendo de la imprenta que la produce, vea http://www.myfonts.com/fonts/linotype/times-roman/familytree.htm.)

Las revistas, por supuesto, siempre han sido el medio más 'caliente'. Empezaron a utilizar ilustraciones por sobre el texto en forma temprana, a partir de los 1940s, Life y Look hicieron de la fotografía su herramienta de información primaria, muchas veces reduciendo el texto a meros copetes. Mientras que diseños tempranos, como el número sobre el 'General Montgomery' de 1944 del New York Times Magazine, usaron sólo fotografía, las portadas de las revistas de hoy en día tienen suficiente cantidad de referencias en texto a los artículos que contienen, así como los sitios web muestran prominentes enlaces a sub-páginas, calificando como tablas de contenidos en sí mismos, y muchas veces hasta tapan la foto que está por debajo:

Los catálogos son enviados por correo en grandes cantidades (12.8 billones cada año, lo que da un promedio de 1.7 catálogos por hogar por semana, según Fast Company), y existen en línea para casi todo tipo de producto. Sears, Roebuck fue uno de los primeros catálogos masivos, comenzando en 1888; vea http://www.bgsu.edu/departments/acs/1890s/sears/sears4.html para detalles de este período. Más recientemente el famoso catálogo de J. Peterman (el verdadero, no el personaje del show de Seinfeld) fue una versión altamente artística del paradigma, usando ilustraciones hechas a mano y prosa florida para describir los productos. Recientemente renacido, su versión en línea, http://www.jpeterman.com/default.htm, imita el tono de la versión impresa casi perfectamente. Por lo general, los catálogos son grandes cantidades de fotos de productos, usualmente mostraods en entornos elaborados, para promover estos productos, y sus versiones en línea usualmente coinciden con esto (vea http://www.ikea-usa.com/ para comparar):

Cada uno de estos paradigmas, libro o diario o revista o catálogo, tiene su propia manera de jerarquía, y los lectores esperan que sigan las normas de la categoría; un libro que tiene forma de catálogo puede ser intrigante pero, a menos que su contenido sea de gran valor, los lectores van a mirarlo con mala cara. Cuando se crean grupos de información complejos y multi-propósito, como un informe anual o un catálogo universitario o un sitio web, sin embargo, usted tiene mayor flexibilidad; secciones diferentes del conjunto pueden tener diferentes propósitos y requerir estructuras de datos diferentes, y, muchas veces, un diseño de estructura también muy diferente.

Como se observó anteriormente, hay equivalentes en línea de las estructuras jerárquicas existentes: las barras de navegación son similares a las tablas de contenidos, y las casillas de búsqueda son índices automáticos. El modelo de portada de revista hoy en día se usa en sitios web, con la ventaja agregada de la imagen animada: http://www.kohler.com y http://www.luerssen.de/frame.html son buenos ejemplos.

Juntando Todo

Entonces, ¿cómo creamos una jerarquía? Necesitará determinar una matriz de diseño o una grilla, donde los items de importancia similar o que comparten relevancia (encabezados al mismo 'nivel', información en texto standard, gráficos y cuadros, epígrafes de fotografías, etc.) se les dé formato usando el mismo (o muy similar) estilo. El estilo, por supuesto, consiste en todas las características visuales del texto (tipo de tipografía, su grosor, su estilo y/o su color) además de un número de marcadores tradicionales que indican jerarquía. Estos marcadores, para usuarios de idiomas europeos occidentales, son por lo general los mismos: al frente, superior, a la izquierda y tamaño. Esto significa que un objeto, ya sea texto o una foto o un ícono, que está en frente de otro (piensen en cada ventana emergente que Ud. vé), o sobre otro, o a la izquierda de otro, o que es más grande que otro, es más importante. De manera similar algo que está en una tipografía más oscura, o de un color más fuerte (no necesariamente más brillante), es más importante; piense en un encabezado rojo en negrita versus uno negro en una fuente de grosor normal. (La cursiva puede a veces remarcar la importancia de algo, y a veces disminuírla, así que sea cuidadoso cuando lo use o cuando use cualquier cosa dentro del menú de estilo de tipografía en su aplicación de diseño)

Si observa la portada de los diarios de más arriba, verá que todos se corresponden con este sistema. El materia basado en la web debe obedecer la misma estructura, con la adición de 'primero' o 'anterior' en el caso de animaciones y películas. (Observe que no incluyo el uso de TODO EN MAYÚSCULA entre las variables de énfasis; el estilo ha permanecido durante mucho tiempo en los titulares de diarios, y debe ser usado con cuidado, si acaso. El texto es mucho menos legible en si está todo en mayúsculas, como se observa aquí, y 'grita' al lector; debe considerarse inapropiado de usar en material impreso o en línea, así como en correo electrónico.)

Decidir qué es importante es, aunque parezca extraño, lo más importante que usted puede hacer. Mientras que la bonita fotografía que Ud. ha encargado o el lujoso cuadro en el cual usted se esforzó trabajando durante horas, pueden parecer importantes, ¿lo son realmente para su público? Después de haber comprendido sobre qué se trata su obra (¿Está usted proporcionando la historia de su ciudad, vendiendo una ratonera mejor, o dando indicaciones para llegar al hospital más cercano? Nunca asuma que el lector ya sabe), tener un método claro para encontrar información específica en su trabajo, ya sea una tabla de contenidos o un mapa del sitio o un índice, es muchas veces lo que el público espera y rara vez encuentra.

Ahora corte y recorte sus datos tan cuidadosamente preparados. Determine si lo apropiado para su material es el tipo de flujo linear de la información, u otro; si trabaja en línea, por supuesto, el flujo de información de tipo 'araña' o de enlaces cruzados se presta mucho más que en el material impreso. Acomode cada sección y subsección siguiendo el patrón que ha elegido, y decida qué método visual usará tanto para conectarlos como para distinguirlos; esto será su matriz de diseño.

Una vez que haya determinado la matriz de diseño, lo cual significa que ya ha establecido el tamaño, tipografía y color de un encabezado o cuerpo de texto o el epígrafe de un cuadro o una nota al pie junto con todos los otros tipos de datos en sus archivos, junto con el tamaño proporcional para las fotografías e ilustraciones, usted puede fácilmente aplicarlo a sus datos. Por supuesto, no sea rígido en el uso de la matriz: algunas cosas necesitan estar en una tipografía diferente, o un color diferente, para remarcar su importancia. Un cambio en el tipo de datos (de texto a cuadros y gráficos, por ejemplo; el informe anual es un ejemplo clásico) puede forzar a un cambio (disposición, estructura de tipografía, o sistema de colores) en una sección en particular; la consistencia puede ser el sambenito del diseño. Pero cambiar todo, sólo por cambiar, únicamente conduce a la confusión. Si bien puede ser visualmente tentador, cambiar la estructura de datos o la tipografía o aunque sea solamente el sistema de uso de colores, tanto en cada página o de sección a sección, puede confundir y algunas veces hacer enojar a su lector. Mientras que un usuario enojado que ha comprado su libro o revista puede que nunca vuelva a comprar otro, el cliente frustrado que tiene en sus manos un catálogo de alto costo de impresión que le llegó por correo, o que está mirando su sitio web de costosísimo diseño, simplemente lo tirará o hará click para ir a otro sitio, y toda su inversión de tiempo y dinero en la producción de este material se habrá perdido instantáneamente.

Elija sus tipografías y colores cuidadosamente. Seguro, usted puede poner un encabezado en Frutiger Bold Italic Outline de 144 puntos, color #FF9900 naranja, y que el texto que está debajo sea Helvetica Narrow Underlined de 6 puntos en color #FF0000 rojo, todo sobre un fondo de color #009900 verde, pero ¿tiene que hacerlo? Use colores que no se peleen unos con otros, y mantenga la elección de colores, tipografías, tamaño y grosor de letra en un mínimo. Dos tipografías, una para encabezado y otra para texto, usada en tres tamaños cada una con frugal uso de negrita y cursiva para cada una, le da una buena cantidad de variaciones. Elegir una paleta de colores pequeña y delicada (vea http://www.visibone.com/color/,  http://www.websitetips.com/color/, y http://www.webcolors.freeserve.co.uk/ para encontrar buenos sistemas de colores para la web) evitarán que el lector se vuelva ciego o le den náuseas. Por supuesto, hay situaciones (un buen sitio de música thrash, por ejemplo; vea http://punkrockskateboards.com/stage_dive.htm o http://www.tenfootpole.com/) donde todo vale, y el lector apreciará lo mejor, o por lo menos lo más extraño, que usted pueda ofrecerle.

Ahora que ha aplicado su sistema de jerarquía al diseño de cada sección, asegúrese de dar un paso hacia atrás (literalmente, si es necesario) y ver si todo el sistema en conjunto funciona bien. Es muy fácil dejarse atrapar en la manipulación de pequeños fragmentos (epígrafes, encabezados, notas al pie, títulos y pies de página, etc.) y no notar el terrible fracaso del conjunto en proporcionar un flujo de la información claro y comprensible para el lector.

Conclusiones Finales

Crear una jerarquía puede ser tan simple (usando tamaños de tipografía decrecientes) o tan complejo (usando enlaces cruzados y sistemas de colores y familias de tipografías y botones animados) como Ud. lo desee. Pero no hacerlo a conciencia, o de manera consistente, puede terminar resultando como si no hubiera hecho nada en absoluto. Proveer al lector un sistema para determinar importancia y navegar la información que sea elegante y fácil de usar es una solución que vale el esfuerzo.

 


[BIO]

Empecé a hacer diseño gráfico en los primeros años de escuela secundaria, cuando todavía estábamos en la Era Oscura de la tecnología.  Tanto Bill Gates como Steve Jobs tenían once años, y lo mejor en el rubro era tipear documentos maestros en un mimeógrafo Gestetner. He trabajado en cada nuevo tipo de tecnología desde esa época, pero todavía poseo un cuchillo X-acto y sé cómo usarlo.

He trabajado de manera autónoma, y en agencias de publicidad, imprentas, editoriales, y organizaciones de marketing en corporaciones de primera línea. También hice una docena de años [1985-1997] en Apple Computer; mi primera Macintosh fue una Lisa con una impresionante memoria de 1MB, y la computadora que tengo actualmente es una Cube con pantalla plana.

He tenido un sitio web desde 1997, y he creado el más reciente en 2004. Todavía estoy aprendiendo, con esfuerzo, cómo el diseño web es diferente, aunque no necesariamente mejor, que el diseño sobre papel impreso.

Derechos de autor © 2004, Mark Seymour. Editado bajo la Open Publication License

Publicado en el Número 105 de Linux Gazette, Agosto de 2004