diseños con grillas

Seguramente, los lectores que tienen co-nocimientos de diseo editorial han odo ha-blar de ellas. De hecho, son fundamentales pa-ra disear publicaciones como la revista quetienen en sus manos. Sin embargo, para los di-seadores web, las grillas no son muy cono-cidas, tal vez debido a la poca difusin que tu-vieron hasta hace muy poco tiempo.Durante los aos '50 las grillas fueron una par-

88

te fundamental de una corriente de diseo co-nocida como el Estilo Tipogrfico Internacionalo Estilo Suizo. La premisa de este estilo est enla bsqueda de la mera funcin a travs de lalegibilidad, la objetividad y la simpleza para ca-da pieza visual, mediante el uso de grillas, ex-perimentando con tipografa y reduciendo loselementos visuales decorativos al mximo po-sible. Un trabajo inspirado en el estilo suizo es

fcilmente reconocible por el uso de tipograf-as sans-serif como Helvetica o DIN, una buenautilizacin del espacio en blanco y, en general,por una sensacin de racionalidad y objetividadque se experimenta al ver el diseo.Hoy, este estilo contina influenciando el tra-bajo de muchos diseadores web modernos. Enlos Estados Unidos, el mejor ejemplo lo pode-mos encontrar en el blog de Khoi Vinh, direc-

Rodrigo [email protected]

DISEADOR WEB, APASIONADOPOR TODO LO QUE VAYA DESPUS

DE HTTP://

WEBMASTERSPrincipios bsicos del diseo grfico en la Web

DISEO CON GRILLASDESDE HACE UN PAR DE MESES, LA WEB HA VISTO EL RENACER DE UNATCNICA DE DISEO TAN ANTIGUA COMO FUNDAMENTAL: EL USO DE GRILLAS TIPOGRFICAS O, SIMPLEMENTE, GRILLAS. VEAMOS DE QU SE TRATA ESTA HERRAMIENTA FUNDAMENTAL EN EL KIT DECUALQUIER DISEADOR WEB Y CMO SACARLE EL MXIMO PROVECHO.

Tapa del libro Grid Systems in Graphic Design, de Josef Mller-Brockmann(se puede apreciar la grilla utilizada para disear toda la publicacin).

Aunque una buena grilla ofrece un excelen-te punto de partida para disear un sitio,siempre es bueno tener en mente el trabajode otros diseadores y estudiar cmo ellosresolvieron los mismos problemas de comu-nicacin. A continuacin, una lista de sitiosrecomendados para visitar en esos momen-tos en que la inspiracin se hace rogar.

SUBTRACTION (www.subtraction.com). En la Web,Khoi Vinh es el Wim Crouwel del diseo congrillas. Su sitio es una muestra clara de queel diseo con grillas es indispensable, tam-bin en la Web.SIMPLEBITS (www.simplebits.com). Recientementerediseado, Simplebits es un ejemplo de sim-plicidad, buena tipografa y, claro, grid design.A LIST APART (www.alistapart.com). Tal vez elmejor ejemplo de tipografa bien aplicada yuna grilla slida respaldando todo. Diseadopor Jason Santa Mara(www.jasonsantamaria.com).

THE NEW YORK TIMES (www.nytimes.com). Si tie-nen que justificar el trabajo con grillas anteun cliente, el sitio de la Gray Lady es el me-jor ejemplo para mostrar.INTERNATIONAL TYPOGRAPHIC STYLE(www.flickr.com/groups/intertypostyle). En este gru-po de Flickr, los miembros postean imge-nes de psters, sitios y otras piezas de dise-o influenciadas por el estilo suizo, que,como vimos, se basa en el uso de grillas.

En busca de inspiracin

088-091 -Diseno web Usr 204.qxp 3/14/08 2:46 PM Page 88

tor de diseo del New York Times Online. EnLatinoamrica, diarios en la Web como Clarnde Argentina, recientemente rediseado, de-muestran claramente una inclinacin al uso degrillas tipogrficas para su armado.Las ventajas de disear con una grilla de ba-se son evidentes. El armazn de columnas y fi-las resultante, contrariamente a lo que sepiensa, no limita la creatividad, sino que la ani-ma. La grilla permite una disposicin natural ysegura de los elementos; como diseadores,no tenemos que perder mucho tiempo pen-sando en dnde debemos colocar esa barra denavegacin o qu ancho debe tener, ya que lagrilla, al darnos una visin global de los espa-cios disponibles, nos lo sugiere. Por otro lado,adems de facilitar y sugerir la disposicin yjerarqua de los elementos, la grilla garantizala consistencia visual en todo el sitio.

COMPOSICIN DE UNA GRILLAComo su nombre lo indica, la grilla es una ma-lla de columnas y filas separadas por espa-cios. Este espacio entre columnas, conocidocomo gutter, es muy til para sugerir la ideade que el diseo respira y de que sus ele-mentos no estn pegados unos con otros.En cada columna y/o fila, ubicaremos el con-tenido disponible, ya sea texto o imgenes. Si,por ejemplo, tenemos una grilla con doce co-lumnas, podemos unir tres columnas en el la-do izquierdo para formar una barra de nave-gacin y dejar las nueve restantes para elcontenido. Tambin podemos dejar celdas ho-rizontales para aplicar ms espacios en blan-co, ya que esto contribuye a la ilusin de undiseo balanceado y con buen uso de la grilla.Aunque en el diseo impreso el texto y las im-genes pueden ubicarse en cualquier lugar dela grilla sin muchas complicaciones ya que elcontenido es esttico, en la Web esto no esposible. Debido a que generalmente el conte-nido de los sitios es dinmico y cambia con eltiempo (pensemos, por ejemplo, en textos queel cliente puede editar a gusto, o en una listade enlaces en la barra izquierda que puedenser agregados o eliminados con el tiempo), eluso de las filas de la grilla para disponer ele-mentos no es muy comn. En otras palabras,el contenido puede crecer verticalmente con eltiempo; por lo tanto, en la Web, como disea-dores controlaremos slo el eje vertical de lagrilla, el de las columnas y su espaciado.

89

Este blog usa una grilla de ocho columnas de 95 pxeles cada una, con10 pxeles de de gutter entre ellas. Como vemos, el autor agrupa las ochocolumnas en cuatro supercolumnas para distribuir mejor el contenido delsitio (www.subtraction.com).

FOROSwww.redusers.com/foros/webmasters


0011 Dividir el espacio 0022 Una alternativa

Una manera de plantear el diseo de un sitio es con unagrilla de doce columnas con cuatro supercolumnas. As,tendremos todo bien ordenado.

Tambin podemos basarnos en una grilla de docecolumnas con tres supercolumnas. Esta alternativa nospermite columnas ms amplias para textos e imgenes.

CONSTRUYENDO NUESTRAPRIMERA GRILLAPara construir una grilla, primero debemos co-nocer los elementos que vamos a colocar enla pgina; por ejemplo, una imagen de 406 x232 pxeles o un banner de 160 x 600 pxeles.Si estamos diseando un muestrario de pro-ductos, tal vez el cliente nos solicite ubicar losartculos con una vista previa de unos 180 x80 pxeles cada uno. Conocer de antemano eltamao de los elementos es muy importante,ya que a partir de esto empezaremos a jugarcon el ancho de las columnas de nuestra gri-lla para acomodarlos.Otro requisito es definir el ancho del sitio. Po-demos tener en mente disear para pantallascon resoluciones de 1024 x 768 pxeles, por loque un canvas o lienzo de trabajo de unos 900pxeles de ancho es suficiente. Abramos un pa-rntesis sobre este punto: para los lectoresacostumbrados a disear sitios elsticos, te-nemos una buena noticia; la grilla tambinpuede usarse perfectamente en estos casos.Aunque la matemtica, claro, se hace un po-co ms compleja que reemplazar PX por EMen las unidades del archivo CSS.Entonces, hagamos una lista de los requisitos:

Canvas de 900 pxeles. Al reducir un par depxeles ms el ancho del sitio, ganamos unbuen margen izquierdo y derecho, lo que le

90

dar ms aire al diseo de la web. Como diji-mos, nuestro target son los usuarios que na-vegan con resoluciones de 1024 x 768 pxeles.

Imagen de 406 x 232 pxeles. El cliente nospide que usemos una imagen de archivo quevenda y describa brevemente lo que la empre-sa hace. Es fundamental atraer la atencin delvisitante con esta imagen, por lo que le dare-mos una ubicacin especial en nuestra grilla.

Diez productos de 180 x 80 pxeles cadauno. Al hacer clic en la vista previa, se abriruna nueva pgina con una descripcin del pro-ducto y una fotografa ampliada.

Un banner de 160 x 600 pxeles. El clientedesea vender espacios de publicidad para aus-piciantes interesados en su mercado.

Logo de la empresa, barra de navegacinlateral y barra de navegacin superior. Labarra de navegacin lateral aparece en sec-ciones con mucha densidad de informacin; labarra superior contendr las secciones princi-pales del sitio y nunca debe omitirse.Ahora bien, como sabemos, el total de anchode todas las columnas no debe superar los900 pxeles, incluidos los espacios entreellas. Podramos, por lo tanto, tener una gri-lla de doce columnas de 64 pxeles cada una,

WEBMASTERSPrincipios bsicos del diseo grfico en la Web

Mucho se discute sobre si el diseo con gri-llas el estilo suizo de diseo, hablando entrminos generales es simplemente unamoda pasajera o si, en realidad, es un estilode diseo con fundamentos vlidos que vanmucho ms all de las modas.El modernismo del cual se desprende elestilo suizo, como ideologa, en realidad esuna actitud, una corriente de pensamientohacia la vida, y no un estilo. En nuestro ca-so, es la actitud que tomamos al disear si-tios web, pero tambin se trata de nuestraactitud general hacia todo lo que componenuestras vidas: desde las cosas que com-pramos hasta nuestras conductas sociales.Este argumento ya es lo suficientementefuerte como para desacreditar a aquellosque piensan que el modernismo en la Webes una moda de ndole fugaz que ha aflora-do recientemente.En mi opinin personal, los reflejos innece-sarios en todas partes, los degradados sinfuncin, el uso de tipografas en cuerpos ex-cesivos en fin, el diseo que no comunicala Web 2.0 es tan frgil como la burbujaque hace unos aos dej a miles de punto-com en la quiebra de la noche a la maana.

El modernismo como actitud


0033 Subvidir el espacio 0044 Ubicar los bloques de contenido

As luce nuestra grilla de doce columnas, con unaaproximacin de los espacios que debemos prepararpara ubicar el contenido.

En negro y sobre la grilla, perfectamente alineados,los elementos que requiere el cliente. Como se ve,todo se podra permutar fcilmente.

con un gutter de 12 pxeles (12 x 64 + 11 x12 = 900 pxeles).. Doce columnas es unbuen nmero, ya que es divisible por tres ypor cuatro. Por lo tanto, podemos tener va-rias combinaciones de layouts para el sitio;formando tres supercolumnas de cuatro co-lumnas cada una, o cuatro supercolumnasde tres columnas cada una.Para nuestro ejemplo, optaremos por agruparcuatro supercolumnas de tres columnas cadauna. Entonces, nuestra grilla estar compues-ta por cuatro supercolumnas, cada una de 216pxeles (64 + 12 + 64 + 12 + 64 = 216 pxeles). Empecemos: en la primera supercolumnasiempre de izquierda a derecha ubicare-

mos la barra de navegacin lateral la cualpresumiblemente ser una lista desordena-da, UL en HTML, en donde cada opcin se-r un tem LI de la lista, y en la ltima su-percolumna colocaremos el banner de 160 x600. No se preocupen, los pxeles que que-dan sobrantes en esta supercolumna (216 -160 = 56 pxeles) nos servirn para centrarel banner, darle un buen padding y un bordede un pxel para destacarlo.Nos quedan las dos supercolumnas centrales,en las cuales, por tener una buena ubicacin,colocaremos primero la imagen de 406 x 232pxeles e inmediatamente abajo, los diez pro-ductos de 180 x 80 pxeles (para hacer ms

atractivo el diseo, colocaremos cinco pro-ductos en la segunda supercolumna y los cin-co restantes en la tercera).Para aplicar el logo de la empresa y la barrade navegacin superior movemos los ele-mentos antes alineados unos 100 pxeles ha-cia abajo, y listo: tenemos un armazn per-fectamente alineado para empezar a disear.

CONCLUSINComo vimos, las grillas en diseo web llega-ron o, mejor dicho, se redescubrieron, paraquedarse. Hoy en da es imposible pensar encomenzar un diseo sin tener como base unagrilla que respalde nuestra creacin.

91

En la Web podemos encontrar todo tipo deherramientas para comenzar a disear congrillas. Desde tutoriales bsicos hastascripts que nos ahorran la tarea de calcularel ancho total del canvas y las columnas amano. stas son las ms interesantes:

Grid LayoutsBasado en una idea de Jon Hicks disea-dor del icono de Firefox, este sitio nosofrece un script que muestra y oculta unagrilla al presionar en el na-vegador. Simplemente ingresamos los valo-res que componen nuestra grilla y pegamos

el cdigo resultante en nuestra pgina parahacerlo funcionar. www.gridlayouts.com

Grid CalculatorMuy til para calcular las dimensiones deuna grilla: ingresamos el ancho de las co-lumnas, su cantidad y el espaciado entreellas para que la pgina nos devuelva unpreview de la grilla y su ancho total.www.29digital.net/grid/

Design by GridContiene artculos, tutoriales y otros recur-

sos para empezar a trabajar con grillas.www.designbygrid.com

Designing with Grid-Based ApproachPost de Smashing Magazine con unainmensa coleccin de recursos tiles sobre grid design.www.rubyurl.com/vKtM

Blueprint CSS Framework(). Un framework de CSS que se hizo popu-lar por estar enfocado totalmente al diseode sitios con grillas. http://code.google.com/p/blueprintcss

++online

MS DISEO WEB

En prximos artculos veremos la parte tcnica de las grillas: cmo crearlas usando un poco de HTML y mucho CSS. Como siempre, el forode USERS siempre est abierto para sus dudas y consultas. Hasta la prxima!


/ColorImageDict > /JPEG2000ColorACSImageDict > /JPEG2000ColorImageDict > /AntiAliasGrayImages false /DownsampleGrayImages true /GrayImageDownsampleType /Bicubic /GrayImageResolution 300 /GrayImageDepth -1 /GrayImageDownsampleThreshold 1.50000 /EncodeGrayImages true /GrayImageFilter /DCTEncode /AutoFilterGrayImages true /GrayImageAutoFilterStrategy /JPEG /GrayACSImageDict > /GrayImageDict > /JPEG2000GrayACSImageDict > /JPEG2000GrayImageDict > /AntiAliasMonoImages false /DownsampleMonoImages true /MonoImageDownsampleType /Bicubic /MonoImageResolution 1200 /MonoImageDepth -1 /MonoImageDownsampleThreshold 1.50000 /EncodeMonoImages true /MonoImageFilter /CCITTFaxEncode /MonoImageDict > /AllowPSXObjects false /PDFX1aCheck false /PDFX3Check false /PDFXCompliantPDFOnly false /PDFXNoTrimBoxError true /PDFXTrimBoxToMediaBoxOffset [ 0.00000 0.00000 0.00000 0.00000 ] /PDFXSetBleedBoxToMediaBox true /PDFXBleedBoxToTrimBoxOffset [ 0.00000 0.00000 0.00000 0.00000 ] /PDFXOutputIntentProfile (None) /PDFXOutputCondition () /PDFXRegistryName /PDFXTrapped /False

/Description >>> setdistillerparams> setpagedevice

diseños con grillas

Documents