Importancia del diseño con grilla (grid, cuadrícula, malla o rejilla)

Tal vez una de las cosas más olvidadas en el diseño web es el diseño con grilla, esto 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. También se le conoce cómo grilla o retícula editorial.

Empecemos por definir que es una grilla (grid): En el contecto del diseño gráfico una grilla es un instrumento para ordenar elementos gráficos del texto y de las imágenes, aunque muchas personas pueden pensar que diseñar con grillas limita la creatividad pero no te preocupes que esto es un mito. Y no es por eso que no se ha adoptado por todos los diseñadores, es más bien porque la técnica de diseñar sitios web con grillas aún es desconocida por muchos diseñadores web.

Grids de Viva Estudio

Un ejemplo de diseño con grilla es el anterior que pertenece a vivaestudio, otro ejemplo práctico puede ser el sitio de OC Vision.

Recursos para diseñar con grids

  • Design by Grid una de tantas galerías de sitios hechos con CSS pero enfocada más a los sitios que respetan el diseño con grilla aquí lo reseñan.
  • Grid Calculator es una herramienta que nos crea una retícula basada en un tamaño de la letra, el número de columnas, el ancho de la columna y el ancho de canal.
  • Grid Generator se trata de un generador de cuadrículas para guiarnos a la hora de diseñar, la cuadrícula generada es un archivo PNG descargable.
  • Phiculator esto es simplemente una calculadora de secciones áureas Φ además la puedes descargar para Windows, Mac o en un SWF de Flash.
  • 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.

7 Comentarios (Agrega el tuyo)

  1. Comentado 19 de Octubre de 2007 a las 5:56 AM | Permalink | Responder ↓

    Muy bueno ver que notaste el grid en vivaestudio. Para este caso usé un grid sólamente vertical, aunque veo que el horizontal no me quedó del todo desencaminado.

    Saludos

  2. Comentado 19 de Octubre de 2007 a las 11:49 AM | Permalink | Responder ↓

    Pues no te te quedó tan desencaminado, hasta tuviste una mención en el Showcase de Design by Grid

  3. Comentado 25 de Octubre de 2007 a las 3:43 AM | Permalink | Responder ↓

    Esta es mi aportación al tema , 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.

  4. derlys
    Comentado 12 de Febrero de 2008 a las 9:34 AM | Permalink | Responder ↓

    deben de publicar algo sobre la cuadricula y el boceto que eso es muy importante

Escribe un Comentario

Su correo nunca será publicado ni compartido. Los campos requeridos están marcados *

*
*

Comment moderation is enabled. Your comment may take some time to appear.

Trackbacks a este artículo: (URL del trackback)

  1. Por Mas recursos para diseño web (Grids - Reglas) | frogx.three en 24 de Octubre de 2007 a las 1:50 PM

    [...] buena recopilacion de Grids (Reglas) realizada por carlosleopoldo para apoyarnos durante nuestros diseños y poder establecer bien las posiciones donde queremos que [...]

  2. Por Para los que quieren diseñar con cuadriculas de fondo en 25 de Octubre de 2007 a las 3:46 AM

    [...] 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 [...]

  3. [...] Carlos Leopoldo. [...]

Estudios Kurin - Técnicas de video y fotografía