The Grid and Web Design

0 Comments Ì Discussion Open

Tiempo atrás estuve interesado en conocer mas sobre el uso de la grid in web design, después de mucho leer y de dedicarle tiempo en tratar de entender como podría usar la grid para tener un mayor control de los elementos a la hora de definir la localización dentro de un predeterminado layout, por otra parte, quería saber si el usar esta herramienta gráfica podría facilitarme la labor a la hora al tener que hacer modificaciones.

Pero en la medida que mas leía, sentía a través de los innumerables articulos en internet que no existía una cosa tan clara al momento de aplicar la teoría en practica, en especial a la hora de considerar la programacion.

En la gran mayoría de los articulos consultados se referían al uso de la grid in diseño gráfico, tratando de adaptarla a web design, era como tratar de usar un traje de otro, no encajaba del todo pero podrías sentir que era algo importante de intentar.

Destacados web designers, graphic designers and web programers, hablan de la importancia del uso y aplicación de la grid, pero a pesar de existir gran cantidad de información, no se encuentran aplicaciones y explicaciones adecuadas a la hora de diseñar una pagina web; al final no eran menos los articulos que dejaban mas dudas que respuestas. Porque? se preguntaran, tal ves por que la grid en si es tan solo lineas horizontales y verticales, es, una estructura invisible usada para posesionar elementos y que ayuda al manejo del espacio en blanco y controlar las proporciones; en otras palabras un es un sistema para crear composición, usada por muchos años in imprenta, pero no fue hecha para ser aplicada en una pantalla de computador, en especial cuando tienes que considerar elementos como browsers o la resolución de una pantalla determinada por el usuario que imposibilitan la simple imitación del uso de la grid en imprenta.

Pero, ademas tengo la impresión personal que esta herramienta gráfica por si sola no es efectiva a la hora de definir un layout de dimensiones predeterminadas o "fixed", a no ser que se use con otros importantes conocimientos asociados, como es la geometría aplicada al designo, o ciertos elementos gráficos tales como el uso de la tipografía; que finalmente ayudan a definir la composición visual de la información, y quizás en ese instante se puedan sentar las bases para crear un potente designo usando la grid.

No intento dejar la sensación que estos son los únicos elementos a considerar, quisiera dejar abierta la puerta a otros aspectos, como por ejemplo el uso de advertising; el tamaño del AD pude pre determinar el diseño y por supuesto la grid a utilizar.

Quizás el mayor problema es algo mental, es pensar que el sistema de grid debería ser la fundación de cada pagina que se diseña, pero esta sed de "control" se topa con un simple problema el usuario con computador, en palabras deDan Cedelhorn " the problem with fixed-width approach to interface design is that it's asking the user to adapt to the design rather than the reverse ".

Una ultima idea del porque muchos articulos acerca de la grid son confusos, tal vez porque web designers están en un proceso continuo de asimilación, de hacer nuestros los conocimientos que tienen cientos de años en impresión pero no en este nuevo medio, la internet, y es por esta razón la existencia de tantos articulos y tanto interés en saber. Será cosa de tiempo de tomar el control y generar una técnica adecuada al medio.

Bien después de cientos de paginas y cuatro libros, casi puedo sentir las palabras del gran webdesigner ingles Mark Boulton hablando de la Golden section y el uso de grid en diseño gráfico indico ..." has taken me over 15 years to even begin to understand. So what is the importance of this boring rectangles and how do they related to design?..." quince años mm! tal vez he dado un paso en la correcta dirección, pero en definitiva queda mucho pasto que cortar aun, no quisiera dejar la impresión que nada se pude concluirse en el uso de la grid en web design, eso seria un error en especial en estos últimos años en que existen suficientes herramientas y articulos para poder realizar una buena aplicación, sino mas bien quisiera indicar que el correcto uso y aplicación de la grid en web design es algo que esta en proceso de ser mejorado, entendido y mejor explicado. Pero sin lugar a duda es una herramienta fundamental, especialmente al diseñar "fixed layouts".

Para aquellos que recien se interesan en este tema les aseguro que deben estar dispuestos a invertir tiempo en leer y colocar en practica y al final seras recompensado por el esfuezo, ademas encontraras un suporte actualizado ya que se seguiran escribiendo articulos, papers y libros acerca de este tema; de hecho estoy ansioso de leer el anunciado paper de Mark Boulton (Autumn 2009) "Designing Grid System for the Web" y ver si entrega mas claridad de como web designers podemos aplicar la grid and typography en forma efectiva, en especial a la hora de aplicar CSS con Vertical rhytm. Por el momento les tengo una secuencia historica de articulos para revisar y hacerse por si mismos una idea del tema.

He aquí una pequeña secuencia histórica de articulos referentes al tema


Guau! cuando revise la lista tuve la impresión que estaba enfrente del "web designers dream team".

Al final que debo considerar antes de usar la Grid

Algo practico para considerar a la hora de usar la grid, primeramente tener claro la audiencia o el publico objetivo a quien ira dirigido el sitio web, junto con ello ver si entre los objetivos comerciales del cliente esta el uso de Advertising, ya que dependiendo del tamaño del AD puede tener implicancia a la hora de definir el layout. Luego hay que tomar algunas decisiones tales como definir que tamaño de las fuentes a utilizar, y cuantas columnas tu quieres usar y no olvidar determinar para que resolución de pantalla vas a diseñar . Recuerda que el canvas size en web esta determinado por el tamaño de la ventana del browser usado, lo cual es determinado por la resolución de la pantalla que asigna el usuario. Por Ultimo, no olvidar que se puede usar mas de una grid en un layout, y recordar de no usar mas de 80 caracteres por linea, otro aspecto que puede ayudar a decidir el numero de columnas.

Con estas consideraciones preestablecidas estaríamos listos para definir la grid a utilizar.

Time to talk

Pregunta: Piensan que el uso de la grid en web design es algo importante de considerar a lo hora de diseñar y programar o piensan que es un freno a la creatividad?, please sientanse en libertad de aportar al tema, mira que muchas cabezas piensan mas que una.


Nota

He estado investigando durante agun tiempo , y en la columna derecha encontraras algunas herramientas que puedes considerar a la hora de aplicar la grid en tu siguiente web proyecto.

back to top

on the path

MORE RELATED ARTICLES 2009

Chris Coyier

Typographic-Grid – Jan, 07

Meyerweb

Wanted: Layout System – Feb, 17

vcarrer.com

The Golden Grid – Feb, 17

A List Apart

Fluid Grids – March,3

FUEL

Grid Based Design Toolbox – March,16

Sergio Santos

Grid based Webdesign... – April, 18

Webdesignerwall

Grid style in Modern Web design - May, 21

Web Design Ledger

Create a Resizable Image Grid – May, 22

Web Designer depot

The 960 Grid System – May, 27


RELATED BOOKS OR DVD

Kimberly Elam

Gryd System

Ambrose / Harris

Layout

Kimberly Elam

Geometry of Design

Hannah B Higgins

The Grid Book

Beth Tondreau

100 Design Principles for Using Grids

Ellen Lupton

Thinking with Type


VIDEO POST

Piro.tv - Stanford Univ.

Using a 12-Part Grid to Design a Web Page

UNIQLO-GRID

Web page