Para los que quieren diseñar con cuadriculas de fondo

Por Toni | Comentarios ( 3 ) | Trackbacks ( 0 )

En XYBERNETICOS mencionan un artículo de Carlos Leopoldo, que me ha gustado mucho. Nos habla sobre las ventajas de diseñar páginas web utilizando grid (cuadriculas, rejilla, etc.), un recurso muy útil a la hora de distribuir cada uno de los elementos que forman parte de tu diseño (gráficos, texto e imágenes).

Es algo muy utilizado en los medios tradicionales (revistas y periódicos) pero apenas hace poco tiempo que se ha estado haciendo popular entre los diseñadores web. Hace mucho tiempo que utilizo ese recurso, pero en autoedición (Adobe PageMaker), pero en diseño web no lo he utilizado nunca. Así que nunca es tarde.

Como vale mas una imagen que mil palabras, aquí te dejo el siguiente ejemplo gráfico de una cuadrícula:

Con dicha cuadricula como base, se pueden hacer los siguientes diseños para distribuir el contenido:

En el ejemplo siguiente encontramos un diseño con la cuadricula y despuós sin ella, donde se ve el resultado final, aquí tienes la descarga del ejemplo empleado de cuadricula en formato PSD (44kb):

Aquí tenemos algunos recursos sobre el tema:

• Design by Grid una galería de sitios web pero enfocada en aquellos sitios que respetan el diseño con grilla.
• Grid se trata de una imagen genórica que sirve cómo guía para la mayoría de los diseños web, creada por Cameron Moll.
• Grid Calculator un generador de retículas pero que se basa en un tamaño de letra, el número de columnas, el ancho de la columna y el ancho de canal.
• Grid Generator otro generador de cuadrículas para utilizar como fondo a la hora de diseñar. Una vez generada, podremos descargarla.
• Phiculator esto es simplemente una calculadora de secciones áureas además la puedes descargar para Windows, Mac o en un SWF de Flash.
• Sobre esta la comentó hace un tiempo [Retícula para el diseño de nuestras web], se trata de Layout Grid donde podremos descargar una retícula que nos servirá como base, la cual utilizaremos como fondo a la hora de diseñar nuestras web.
• Esta es mi aportación, se trata de Blueprint Grid CSS Generator es otra herramienta online que nos posibilita configurar la grilla de maquetación con los valores que nosotros definamos.

No dejes de darle un vistazo a estos tres artículos que complementan el tema:

• Systemas de “cuadricula” para diseño web.
• Cutting and sewing grid-based design: Part 1. En este artículo habla sobre la cuadricula y los codigos CSS a partir de ella.
• Grid-based design: Part 2. El propósito de este artículo es dar una idea de cómo enfocar el diseño del blog usando un sistema de retícula.

Puedes dejar un comentario, o suscribirte al feed.