Antitodo Kreativos

Aunque puede parecer una perogrullada, a la hora de diseñar una maqueta web deberíamos atenernos a ciertas normas, sobre todo cuando se trata de una web con buena cantidad de información.

Desde el principio, las páginas se han articulado imitando a la maquetación editorial, en columnas, esto ha sido así desde los célebres tiempos cuando se maquetaba con tablas de ‘border=0′. Quizá estas tablas obligaban un poco más a guardar las formas y tener un poco más clara la presencia de una rejilla detrás de la página, el hecho es que con el CSS hay un poco más de libertad y muchas veces se emprenden diseños que, aunque tengan buen aspecto, ganarían mucho más si se diseñasen conforme a una rejilla.

La rejilla o cuadrícula (en inglés, ‘grid’), es esa pequeña ayuda que siempre desactivamos en los programas de diseño. Pues al contrario de lo que piensas, la rejilla es tu amiga, te ayuda a diseñar mejor. También tiene parte de culpa que muchos programas de diseño no aportan opciones sobre la utilización de cuadrículas, se pueden mostrar u ocultar, pero poco más.

Hace tiempo que están proliferando plantillas, artículos y recursos relacionados con las ‘grids’ dentro del diseño web. Después del caos, siempre vuelve el orden.

Personalmente, ya contaba con una ayuda similar, construida con base en mis experiencias. Yo, que suelo diseñar las maquetas con Fireworks (sí, con ese extraño programa), utilizaba una plantilla propia con las guías donde a mí me gustaban, pero ahora veo nuevas opciones, enfoques diferentes y horizontes muy interesantes.

Por ejemplo, de un tiempo a esta parte, diseñaba la página dentro de un div container de 900px de ancho, centrado en la ventana del navegador. Así, los usuarios con resolución de 1024px verían un pequeño margen a ambos lados, el texto no se pegaría a los bordes de la pantalla. En resumen:

1024px - 24px de la barra de scroll - 900px del container = 50px a izquierda + 50px a derecha.

Estoy descubriendo otras opciones que utilizan un ancho de 960px, con lo cual quedarían unos 20px libres a cada lado, y tampoco me disgusta.

En concreto, hoy he encontrado esta página con unos recursos muy interesantes: plantillas para Photoshop, Fireworks (yeaaaah), y otros programas, plantillas de CSS y hasta una especie de storyboard en PDF. Very interesting and useful.

En mi caso, para el container de 900px, creaba 5 columnas de 170px cada una, con 10px de separación, pero veía que algunas veces 5 columnas eran insuficientes y daban poco juego. Ahora sé por qué.

En 960 Grid System plantean rejillas de 12 y de 16 columnas, donde los diseños se realizan combinando dos o más columnas. En su página podéis ver ejemplos y hasta una demo del CSS funcionando.

Veamos un ejemplo de las rejillas con el antes y el después. En la página de Subtraction encontramos esto:

Antes: página sin rejilla, CAOS TOTAL.

Después: utilización de una rejilla, aparte del diseño más moderno, la cosa mejora bastante, ¿verdad?

En Smashing Magazine podéis ver explicado lo anterior, y por supuesto mejor ilustrado y ampliado.

Solamente decir que voy a probar las plantillas de 960.gs, quizá no son precisamente una técnica “antitodo” pero tampoco todos los trabajos lo son (qué más quisiera yo).

Os dejo otra vez el enlace al recurso en cuestión: 960 Grid System.

Esta entrada fue publicada el Miércoles, 26 de Marzo de 2008 a las 22:40 y está clasificada bajo: Recursos, Artículos, Diseño web. Puede hacer un seguimiento de los comentarios de esta entrada gracias al feed RSS 2.0. Puede dejar un comentario, o enviar un trackback desde su sitio.