Jeffrey Zeldman — mejor conocido por su revista web A List Apart, ha sido nombrado King of Web Standards (rey de los estándares web) por la revista BusinessWeek. Zeldman se convirtió en una celebridad luego de escribir Designing with web standards en el 2003. Como cofundador del Web Standards Project Zeldman contribuyó a la creación de estándares sobre los cuales se deberían crear los navegadores web: sin un estándar, empresas como Microsoft y Netscape creaban los navegadores que les daba la gana (algo como “mi navegador hace esto que el otro no hace… usa mi navegador”) y los diseñadores/desarrolladores web nos veíamos obligados a crear múltiples versiones de los sitios web (algo que todavía sucede pero en un menor grado… aunque ¿alguien ha podido ver Yahoo! Music en Firefox?). Recomiendo ver el slideshow que acompaña el artículo.

Posiblemente conozcan el logo arriba. Fue diseñado por Milton Glaser, uno de los más importantes e influyentes diseñadores gráficos (y de quien ya se había hecho mención acá). La revista Foro Alfa tiene en su más reciente número digital una transcripción de una charla que Glaser, ya por sus 78 años, dió a la AIGA en Londres llamada “Diez cosas que aprendí”. Algunos apartes:

Desafortunadamente nuestro campo, el así llamado creativo (odio esa palabra porque se suele usar mal, odio el hecho de que se la use como sustantivo, ¿te imaginas llamar a alguien creativo?) [...]

Soy un gran defensor del dibujo, no por haberme convertido en ilustrador, sino porque creo que el dibujo cambia el cerebro de la misma forma en que encontrar la nota correcta cambia la vida de un violinista. El dibujo te vuelve atento, te hace prestar atención a lo que ves, lo cual no es tan fácil.

Las creencias profundamente arraigadas de cualquier tipo evitan que te abras a experimentar, y es por eso que encuentro cuestionable a toda posición ideológica sostenida con firmeza. Me pone nervioso cuando alguien cree demasiado en algo. Ser escéptico y cuestionar toda convicción arraigada es esencial. Por supuesto hay que tener clara la diferencia entre escepticismo y cinismo, porque el cinismo es tan restrictivo a la propia apertura al mundo como las convicciones apasionadas: son como gemelos. En definitiva, resolver cualquier problema es más importante que tener razón.

El artículo completo acá

Siguiendo con el feeling existencialista de la charla de Glaser está este divertido video/animación creado por Clemens Kogler, diseñador austriaco de 25 años, que es una rara combinación entre Nietzsche y PowerPoint:

Si reconocen el personaje de arriba conocen el trabajo de Shigeru Miyamoto. Este japonés es el padre de Mario, Donkey Kong, Zelda y demás personajes y juegos de Nintendo. Es la cabeza detrás del enormemente exitoso Wii (del cual se ha hecho mención anteriormente acá). Fue nombrado caballero de la Legión de Honor por el gobierno francés y recientemente El Mundo de España publicó una entrevista con él [vía]:

Cuando tengo una idea no es exclusivamente para un juego. Es una idea general sobre algo que luego trato de implementar en un juego. No hablo con los ingenieros o los especialistas hasta que tengo clara la idea y la solución de cómo aplicarla a un videojuego. Así que mi forma de diseño de juegos está más cercana al diseño industrial que otra cosa. Y ése puede ser uno de los secretos, como dices, de mi éxito.

La entrevista completa acá

Para terminar, el primer trabajo de CombatTV (un grupo al cual pertenecen estudiantes y profesores del Departamento de Arte de la Universidad de los Andes) que se inspira y hace homenaje a Game Over (sí… de este también se ha hecho mención acá). En este caso se trata de Breakout, un conocido juego de video de los ochentas:

Jeffrey Zeldman, Milton Glaser, Shigeru Miyamoto originalmente escrito en mga/blog en August 11, 2007.

Actualización 20/3/2009: un blog que recopila 40 diseños muy reconocidos que usan Helvetica.

Actualización 21/12/2008: un artículo en la AIGA que refuta a la creencia general de que Helvética ha sido la fuente “oficial” del sistema de señalización de New York desde hace años:

There is a commonly held belief that Helvetica is the signage typeface of the New York City subway system, a belief reinforced by Helvetica, Gary Hustwit’s popular 2007 documentary about the typeface. But it is not true—or rather, it is only somewhat true. Helvetica is the official typeface of the MTA today, but it was not the typeface specified by Unimark International when it created a new signage system at the end of the 1960s. Why was Helvetica not chosen originally? What was chosen in its place? Why is Helvetica used now, and when did the changeover occur? To answer those questions this essay explores several important histories.

Lea el artículo completo acá

—

Helvetica —pronunciada helvética— es una fuente tipográfica creada por los diseñadores suizos Max Miedinger y Eduard Hoffmann. Su nombre se deriva del nombre en latí­n de Suiza. Este año (2007) Helvetica se cumplen 50 años de la creación de esta legendaria fuente que se convertiría en una de las más representativas del diseño gráfico moderno. Para celebrar el cincuentenario, Swiss Dots y Veer se unieron para producir “Helvetica: a documentary film“. Dirigida por Gary Hustwit (quien también ha trabajado en proyectos documentales sobre bandas como Wilco y pioneros musicales como Robert Moog, inventor del Moog) el documental incluye entrevistas con destacados diseñadores y el sitio web lo describe de la siguiente manera:

Helvetica encompasses the worlds of design, advertising, psychology, and communication, and invites us to take a second look at the thousands of words we see every day.

Al final de este post hay varios apartes del documental disponibles en YouTube.

Helvetica tiene muchos amigos; en MySpace ya tiene 3195. Khoi Vinh, quien ha sido mencionado anteriormente en este blog, diseñó una camiseta homenaje a Helvetica:

Cuando Apple creó el primer Mac en 1984, Helvetica fue incluida con el sistema operativo (pagando una licencia a los diseñadores que la crearon) contribuyendo a la popularidad de la fuente.

Arial es una fuente que muchos creen es basada en Helvetica pero no tan elegante. Al lanzar Windows 3.1, Microsoft optó por licenciar Arial en lugar de Helvetica (posiblemente por ser una licencia más económica) a pesar de ser esta última la más utilizada. Windows resultó ser un éxito y, por consiguiente, Arial se convertirí­a en una “hermana bastarda” de Helvetica, “usada por los no-profesionales”. Esta rivalidad Helvetica-Arial ha generado varios artí­culos y hasta un juego donde las dos fuentes luchan por la supervivencia (uno es Helvetica, por supuesto). También hay un libro-homenaje a la fuente. En términos web nos toca conformarnos con una coexistencia de ambas fuentes.

Hablando de tipografí­a, encontré este blog del diseñador y tipógrafo chileno Juan Pablo de Gregorio. Tiene muchos tutoriales y tips de diseño y tipografí­a y está en español (también tiene una versión en inglés).

Entrevista con Wim Crouwel:
[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Experimental JetSet:
[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Neville Brody y Rick Poynor:
[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Erik Spiekermann:
[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Larga vida a Helvetica originalmente escrito en mga/blog en May 11, 2007.

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.

La retí­cula es tu amiga originalmente escrito en mga/blog en April 19, 2007.

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”:

El diseño apesta originalmente escrito en mga/blog en March 25, 2007.

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:

mind the gap originalmente escrito en mga/blog en March 23, 2007.

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:
[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.][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:

Tipografía, Pulp Fiction y machismo originalmente escrito en mga/blog en March 4, 2007.