martes, 24 de marzo de 2009

Diseño para torpes: La rejilla

Nos encontramos hoy ante uno de los instrumentos fundamentales siempre que queramos acercarnos a un diseño que vaya a salir en formato impreso, sobre el que se asienta todo diseño que pretenda tener una calidad que supere al clásico trabajo escrito en 'Word' a interlineado 1,5.
Para conseguir una definición me remitiré a los que de verdad saben del tema. En la entrega XL de su 'Diseñario' , la gente de 'en caja baja' nos da la siguiente definición:
Rejilla.- ...es el esqueleto de la página. Elemento de gran importancia porque en él se indica el ancho de la página, el alto, los márgenes verticales y horizontales, la línea base, el número y ancho de columnas, la medida de los corondeles, los módulos de altura para encajar la publicidad, si la página es doble, sencilla, central, etc.

Quizás muchos de esos términos, para los profanos en este mundo, se nos escapen. Pero en resumidas cuentas, bien podríamos decir que en una rejilla se van a especificar las carácterísticas internas en torno a las cuales tomará forma la página impresa. Para que os hagáis una idea, va a venir determinada por una serie de guías horizontales y verticales que nos van a dividir la página en bloques. Con esto facilitamos la toma de decisiones a la hora de fijar la altura, anchura o posición exacta de un bloque de texto o una imagen. Además, hacemos que todas esas decisiones sean consistentes, dotando a la página de un orden interno que, si bien no es evidente a simple vista, es percibido por todos los observadores como una sensación de armonía que le indica que el diseño está bien realizado.

El salto a la web
La traducción de estas ideas al HTML y las CSS nos permite ahora manejar estos mismos conceptos en el diseño de páginas web. El caso de 960.gs del que hablamos el otro día es solo uno de ellos. En internet podemos encontrar multitud de recursos que nos llevan desde plantillas en InDesign (si lo nuestro es el trabajo impreso) o Illustrator para realizar nuestros bocetos, hasta auténticos frameworks que por medio de CSS nos implementan ya este sistema de columnas (960.gs o Blueprint). En uno de los últimos artículos de Cosas Sencillas, realizan una recopilación de herramientas de diseño a partir de la cuadrícula.
Quien esté realmente interesado en empezar a aplicar este sistema en sus diseños no debería dar ni un paso más sin darse un paseo por The Grid System, una de las mejores recopilaciones de información, tanto en contenido como en organización. Además de ver el uso de la rejilla en la maquetación de la página tenemos los mejores artículos, blogs, libros, plantillas y webs para nuestra inspiración en cuanto al uso de la rejilla.
Es este un campo en el que no estoy más que rascando en la superficie para introducir mínimamente el concepto, pero en el que se puede empezar a profundizar casi hasta el aburrimiento, siempre añadiendo un poquito más. Os dejo algunos de los mejores enlaces para ampliar el tema, la mayoría alcanzados a traves de The Grid System.

Links
La retícula. Diego Areso (Quinta tinta), en sus apuntes de la asignatura de Diseño de Revistas, le dedica un tema.
Grid Design Basics: Grids for Web Page Layouts, de Dev.Opera. Si no tienes suficiente con alguno de los frameworks, a través de este tutorial puedes desarrollar tu propia rejilla con css.
Setting Web Type to a Baseline Grid, de Dev.Opera. Introduce un nuevo concepto, la línea base: una rejilla de guías horizontales que con un ritmo constante nos van a indicar dónde se va a asentar el texto en cada línea. Así nos aseguramos de que el texto de dos columnas esté correctamente alineado en vertica. Con este tutorial portamos este concepto a nuestra rejilla en CSS.
The Complex Grid, de Whatype. De nivel más avanzado nos describe cómo se construyó esa rejilla (en la imagen) que podemos descargar también en su formato A4 y para InDesign de The Grid System.

No hay comentarios:

Publicar un comentario