30 jul. 2010

Diseñar webs con una buena base: Rejillas

diseño con rejillas
Antes de iniciar el diseño digital de una web, lo normal es disponer de un boceto, wireframe, mockup (como se le quiera llamar), que a grandes rasgos se vea reflejada claramente la estructura base de la web que se nos ha encargado.
Dicho boceto seguramente no encajará con las medidas de pantalla, por lo tanto el siguiente paso será hacer que encaje dentro de una rejilla base.

Un ejemplo de mockup de una web puede ser el siguiente, con un poco de suerte recibiremos el de la derecha. :P
ejemplos de mock ups

La rejilla base

 
Las rejillas base sirven para tener unas guías donde colocar los elementos y mantener una coherencia de espaciados y columnas dentro de una estructura, y ayudan mucho a hacernos una idea de los tamaños y proporciones que podrán tener las cajas de texto, bloques de información o imágenes de la web que vayamos a diseñar.
Existen muchos métodos y rejillas pre-diseñadas para trabajar sobre ellas, aunque dependiendo de nuestras necesidades también podemos crear una que se adapte mejor a nuestro objetivo.

Una de los sistemas de rejilla que últimamente se está popularizando bastante por sus buenos resultados es el famoso 960 grid system, y es en el que me centraré, ya que a parte ofrece herramientas para expandir este sistema.



960 grid system

960 grid system se basa, como su nombre indica, en una rejilla con un ancho total de 960 píxeles divididos en 12 ó 16 columnas.
En la web además de poder descargarnos el sistema de rejillas en todo tipo de formatos: Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, Visio, Exp. Design... nos proporciona una serie de interesantes herramientas online, que si bien están enfocadas más a la maquetación en html y css, pueden servirnos por si queremos comprobar las medidas en vivo sobre el navegador. Se tratan del Custom Css generator, Html Layout Generator y el Grid overlay bookmark.

El Custom Css generator sirve para generar un código css que colocar en tu web y comprobar si mantiene la estructura 960 grid system. Pone por encima una capa de columnas transparente del color y sub divisiones que hayamos elegido.

Html Layout Generator
generará la estructura HTML de tu web según el ancho total, número de columnas y ancho de cada columna, sobre una base de cabecera, contenido y pié de página.

Y el Grid overlay Bookmark es un enlace que te guardas en favoritos,  y cada vez que lo actives verás una rejilla sobre la web que estés visitando, y un menú en la parte izquierda con varias opciones de configuración (medidas de ancho, columnas, ver filas horizontales, color de las columnas, etc.). Es perfecto para comprobar la estructura de webs que te interesen y ver si se adaptan a alguna rejilla.

Otra buena opción como he comentado al inicio, es diseñarte tu propia rejilla base. Con las herramientas automáticas anteriormente comentadas la tarea es bastante sencilla. Pero si queremos ir más allá y estudiar en profundidad el mundo de las rejillas, dejo unos cuantos enlaces interesantes donde se dan las pautas.





Enlaces de interés:



    No hay comentarios:

    Publicar un comentario

    Comenta aquí lo que quieras