Diseñando con Grillas

Patricio Rodríguez M.

Antes de pensar en contenedores, estilos y tags…definamos la grilla constructiva

"Una Grilla CSS debe ser fácil de entender, usar y modificar, económica en el uso del código y flexible para adaptarse a la mayor cantidad de necesidades de diagramación"

Patricio Rodríguez M.

Durante los años '50 las grillas fueron una parte fundamental de una corriente de diseño conocida como el Estilo Tipográfico Internacionalo Estilo Suizo. La premisa de este estilo está en la búsqueda de la mera función a través de la legibilidad, la objetividad y la simpleza para cada pieza visual

Patricio Rodríguez M.

Hoy, este estilo continúa influenciando el trabajode muchos diseñadores web modernos. Enlos Estados Unidos, el mejor ejemplo lo podemos encontrar en el blog de Khoi Vinh, director de diseño del New York Times Online.

En Latinoamérica, diarios en la Web como Clarínde Argentina, recientemente rediseñado, demuestran claramente una inclinación al uso degrillas tipográficas para su armado.

Patricio Rodríguez M.

Las ventajas de diseñar con una grilla de baseson evidentes. El armazón de columnas y filasresultante, contrariamente a lo que sepiensa, no limita la creatividad, sino que la anima.

La grilla permite una disposición natural y segura de los elementos

Patricio Rodríguez M.

Composición de una grillaComo su nombre lo indica, la grilla es una malla de columnas y filas separadas por espacios.

Este espacio entre columnas, conocidocomo gutter, es muy útil para sugerir la ideade que el diseño respira y de que sus elementosno están pegados unos con otros.

Patricio Rodríguez M.

ModosEn cada columna y/o fila, ubicaremos el contenidodisponible, ya sea texto o imágenes.

Si, por ejemplo, tenemos una grilla con doce columnas, podemos unir tres columnas en el ladoizquierdo para formar una barra de navegacióny dejar las nueve restantes para elcontenido.

Patricio Rodríguez M.

Patricio Rodríguez M.

Patricio Rodríguez M.

pasos para definir una grilla

Para construir una grilla, primero debemos conocer los elementos que vamos a colocar en la página.

Conocer de antemano el tamaño de los elementos es muy importante, ya que a partir de esto empezaremos a jugar con el ancho de las columnas de nuestra grilla para acomodarlos.

Patricio Rodríguez M.

Otro requisito es definir el ancho del sitio.

Podemos tener en mente diseñar para pantallas con resoluciones de 1024 x 768 píxeles, por lo que un canvas o lienzo de trabajo de unos 900 píxeles de ancho es suficiente.

Patricio Rodríguez M.

También podemos basarnos en una grilla de docecolumnas con tres supercolumnas.

Esta alternativa nospermite columnas más amplias para textos e imágenes.

Patricio Rodríguez M.

subdividir el espacio

Patricio Rodríguez M.

ubicar los bloques del contenido.En negro y sobre la grilla, perfectamente alineados,los elementos que requiere el diseño. Como se ve,todo se podría modificarse fácilmente.

Patricio Rodríguez M.

Propuesta.basado en la explicación del uso de la grilla, trabajar el contenido de sus layouts en formato de grilla constructiva

Jueves 17 de septiembre