La retí­cula es tu amiga

Subtraction Grid

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.