mga/blog

La retí­cula tipográfica (bien) aplicada a la creación web permite ampliar las posibilidades de diseño a la vez que mantiene la estructura y jerarquí­a visuales de los elementos. Los primeros navegadores fueron desarrollados con un mí­nimo de funcionalidades tipográficas. En 1996 se introducen las hojas de estilo (CSS) que permiten un mayor control en términos de diseño aunque no fueron adoptadas por sitios web importantes sino hasta 2002. En vista que hoy dí­a la gran mayorí­a de usuarios web tiene un navegador decente (entiéndase esto como Firefox, mi preferido, Opera, Safari o en su defecto Internet Explorer 6 o superior) que puede mostrar las hojas de estilo con cierta precisión, se ha dado un resurgimiento de los conceptos tipográficos elementales, esta vez aplicados al diseño web. Algunos ejemplos:

Mark Boulton tiene una guí­a para la generación de retí­culas que empieza explicando las retí­culas impresas y termina con estos conceptos aplicados a la web.

Khoi Vinh, director de diseño del New York Times Online, dió recientemente una charla en SXSW junto con Boulton donde detallan el proceso de diseño de un sitio web imaginario tomando como base el contenido de Yahoo!. Tiene un excelente post en su blog explicando el rediseño que incluye la presentación en PDF (vale la pena bajarla). Vinh también tiene otro post donde explica el diseño de su blog e incluye un tip para asegurarse que los elementos están quedando alineados mientras se diseña.

Richard Rutter tiene una guí­a principios de tipografí­a básicos aplicados a la web que vale la pena leer. Se recomienda también la bibliografí­a.

Finalmente, en A List Apart hay un artí­culo que explica una forma de usar una retí­cula vertical basada en el interlineado.

Actualización: Andrew Ingram ha creado un plug-in para Adobe Fireworks y Adobe Photoshop que permite crear retículas. GridMaker para Adobe Fireworks, GridMaker para Adobe Photoshop. Hay una versión 2, por ahora solo para Photoshop.

Actualización (17/11/09): Blueprint es un framework gratuito para diseñar usando retículas CSS que facilita el trabajo de diagramación que algunas veces puede ser tedioso.

Los diseñadores apestan – Bruce Nussbaum, director de innovación y diseño de la revista Businessweek (y nombrado en 2005 por la revista I.D. como una de las cuarenta personas más poderosas en el mundo del diseño) hace un discurso en Parsons en el cual habla de una nueva aproximación hacia el diseño empezando con la siguiente afirmación: DESIGNERS SUCK. Vale la pena leerlo. [ví­a 37signals]

La tipografí­a en la web apesta – SXSW (South by Southwest) es un grupo de festivales (música, medios, cine) que se llevan a cabo anualmente en Austin, Texas. En la versión medios Richard Rutter y Mark Boulton abordan el problema del manejo de la tipografí­a en la web y cómo puede ser superado en una conferencia titulada Web typography sucks. No hay video de la conferencia pero hay un PDF con comentarios y un podcast así­ que pueden abrir el PDF y luego darle play al podcast :).

Algo que no apesta – Theo Jansen es un artista que realiza esculturas monumentales con tubos, palos, plástico y papel que se mueven con el viento. El video a continuación es parte de una serie de comerciales que hizo BMW bajo el tema “innovación”:

Mind the gap es un letrero recurrente en el metro de Londres que sirve de inspiración para dos proyectos que vale la pena mencionar:

Hans Rosling es profesor del Instituto Karolinska en Suecia (el instituto que determina el merecedor del premio Nobel de medicina) y fundador de Gapminder.org, una organización sin ánimo de lucro que busca dar acceso y nuevo significado a la información estadística de las naciones (ingreso per cápita, crecimiento económico, población, cantidad de niños por mujer, etc.). Rosling fue invitado a las ya mencionadas TED Talks donde hace una presentación impresionante que replantea algunos mitos sobre los llamados paí­ses en desarrollo. Vale la pena verla, dura apenas 18 minutos. Rosling desde Gapminder desarrolló un software de visualización de dicha información estadí­stica el cual, con la colaboración de Google, ha puesto al alcance de cualquier persona en tools.google.com/gapminder. Es una herramienta basada en Flash que le permite a uno comparar diferentes datos de casi todos los paí­ses desde 1975 (!) y animarlos (!!!). En la imagen capturada de Gapminder se puede ver la comparación de la expectativa de vida (eje vertical) con el ingreso per cápita (eje horizontal) de Colombia (verde oscuro), Argentina (verde claro) y Corea del Sur (rojo) en su evolución desde 1975 hasta 2004:

Cabe anotar que el eje horizontal tiene una escala logarí­tmica (aumenta mucho a medida que se mueve a la derecha).

Ana Vélez es una colombiana que actualmente hace su tesis de maestrí­a en el departamento de Communications Design and Technology en Parsons en Nueva York. Mind the Gaps es el nombre de un ejercicio en el cual hace una reflexión gráfica/subservisa sobre las relaciones entre las diferentes metrópolis contemporáneas a partir de mapas de metro. Un resumen se puede ver en el siguiente video:

Hablando de mapas, Worldmapper.org tiene una interesante colección de mapas donde se distorsiona la forma original de los paí­ses en función de diferentes datos estadí­sticos.

Nota: recientemente Google adquirió Trendalyzer, el software detrás de Gapminder.

Actualización: a continuación la charla de Hans Rosling en TED:

Kandinsky Cartel por Herbert Bayer
©2003 ARS

La tipografí­a juega un papel fundamental en la comunicación de un texto. Para los dadaí­stas,

las letras y las palabras son imágenes de estados emocionales o psicológicos, y su poder emana de las disposiciones visuales agresivas que representan esos estados, no de su condición de soportes de un significado literal. [1]

Kurt Schwitters, uno de sus exponentes, alternaba su obra dadaí­sta con proyectos publicitarios y, junto con Laszlo Moholy-Nagy, Jan Tsichold, El Lissitzky, Herbert Bayer y otros, da inicio a lo que luego se conocerá como diseño gráfico. A partir de la experimentación con la retí­cula tipográfica se genera un nuevo lenguaje visual que alimenta otras disciplinas del diseño.

A continuación algunos ejemplos del uso de tipografía en video:

Famoso diálogo de Pulp Fiction:

[ví­a 37 signals]

Video de MK12 de una conversación sobre el machismo en Brasil que alterna imágenes vectoriales con texto:

Algunos libros recomendados:

• Pioneers of modern typography de Herbert Spencer
• Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students de Ellen Lupton
• Making and breaking the grid de Timothy Samara (versión en español)

1. Samara, Timothy. Diseñar con y sin retí­cula. Barcelona: Editorial Gustavo Gili, SA, 2004.

Actualización: Encontré este otro video basado en un diálogo de Ocean’s Eleven: