▼ Seguramente, los lectores que tienen co-nocimientos de diseño editorial han oído ha-blar de ellas. De hecho, son fundamentales pa-ra diseñar publicaciones como la revista quetienen en sus manos. Sin embargo, para los di-señadores web, las grillas no son muy cono-cidas, tal vez debido a la poca difusión que tu-vieron hasta hace muy poco tiempo.Durante los años '50 las grillas fueron una par-

88

te fundamental de una corriente de diseño co-nocida como el Estilo Tipográfico Internacionalo Estilo Suizo. La premisa de este estilo está enla búsqueda de la mera función a través de lalegibilidad, la objetividad y la simpleza para ca-da pieza visual, mediante el uso de grillas, ex-perimentando con tipografía y reduciendo loselementos visuales decorativos al máximo po-sible. Un trabajo inspirado en el estilo suizo es

fácilmente reconocible por el uso de tipografí-as sans-serif como Helvetica o DIN, una buenautilización del espacio en blanco y, en general,por una sensación de racionalidad y objetividadque se experimenta al ver el diseño.Hoy, este estilo continúa influenciando el tra-bajo de muchos diseñadores web modernos. Enlos Estados Unidos, el mejor ejemplo lo pode-mos encontrar en el blog de Khoi Vinh, direc-

Rodrigo Galíndezrodrigogalindez@gmail.com

DISEÑADOR WEB, APASIONADO

POR TODO LO QUE VAYA DESPUÉS

DE HTTP://

WEBMASTERSPrincipios básicos del diseño gráfico en la Web

DISEÑO CON GRILLASDESDE HACE UN PAR DE MESES, LA WEB HA VISTO EL RENACER DE UNATÉCNICA DE DISEÑO TAN ANTIGUA COMO FUNDAMENTAL: EL USO DE GRILLAS TIPOGRÁFICAS O, SIMPLEMENTE, GRILLAS. VEAMOS DE QUÉ SE TRATA ESTA HERRAMIENTA FUNDAMENTAL EN EL KIT DECUALQUIER DISEÑADOR WEB Y CÓMO SACARLE EL MÁXIMO PROVECHO.

Tapa del libro Grid Systems in Graphic Design, de Josef Müller-Brockmann(se puede apreciar la grilla utilizada para diseñar toda la publicación).

Aunque una buena grilla ofrece un excelen-te punto de partida para diseñar un sitio,siempre es bueno tener en mente el trabajode otros diseñadores y estudiar cómo ellosresolvieron los mismos problemas de comu-nicación. A continuación, una lista de sitiosrecomendados para visitar en esos momen-tos en que la inspiración se hace rogar.

SUBTRACTION (www.subtraction.com). En la Web,Khoi Vinh es el Wim Crouwel del diseño congrillas. Su sitio es una muestra clara de queel diseño con grillas es indispensable, tam-bién en la Web.SIMPLEBITS (www.simplebits.com). Recientementerediseñado, Simplebits es un ejemplo de sim-plicidad, buena tipografía y, claro, grid design.A LIST APART (www.alistapart.com). Tal vez elmejor ejemplo de tipografía bien aplicada yuna grilla sólida respaldando todo. Diseñadopor Jason Santa María(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 imáge-nes de pósters, 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 inspiración

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

tor de diseño del New York Times Online. EnLatinoamérica, diarios en la Web como Clarínde Argentina, recientemente rediseñado, de-muestran claramente una inclinación al uso degrillas tipográficas para su armado.Las ventajas de diseñar con una grilla de ba-se son evidentes. El armazón de columnas y fi-las resultante, contrariamente a lo que sepiensa, no limita la creatividad, sino que la ani-ma. La grilla permite una disposición natural ysegura de los elementos; como diseñadores,no tenemos que perder mucho tiempo pen-sando en dónde debemos colocar esa barra denavegación o qué ancho debe tener, ya que lagrilla, al darnos una visión global de los espa-cios disponibles, nos lo sugiere. Por otro lado,además de facilitar y sugerir la disposición yjerarquía de los elementos, la grilla garantizala consistencia visual en todo el sitio.

COMPOSICIÓN 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 diseño respira y de que sus ele-mentos no están pegados unos con otros.En cada columna y/o fila, ubicaremos el con-tenido disponible, ya sea texto o imágenes. 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-gación y dejar las nueve restantes para elcontenido. También podemos dejar celdas ho-rizontales para aplicar más espacios en blan-co, ya que esto contribuye a la ilusión de undiseño balanceado y con buen uso de la grilla.Aunque en el diseño impreso el texto y las imá-genes pueden ubicarse en cualquier lugar dela grilla sin muchas complicaciones –ya que elcontenido es estático–, en la Web esto no esposible. Debido a que generalmente el conte-nido de los sitios es dinámico 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 común. En otras palabras,el contenido puede crecer verticalmente con eltiempo; por lo tanto, en la Web, como diseña-dores controlaremos sólo el eje vertical de lagrilla, el de las columnas y su espaciado.

89

Este blog usa una grilla de ocho columnas de 95 píxeles cada una, con10 píxeles 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

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

0011 Dividir el espacio 0022 Una alternativa

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

También podemos basarnos en una grilla de docecolumnas con tres supercolumnas. Esta alternativa nospermite columnas más amplias para textos e imágenes.

CONSTRUYENDO NUESTRAPRIMERA GRILLAPara construir una grilla, primero debemos co-nocer los elementos que vamos a colocar enla página; por ejemplo, una imagen de 406 x232 píxeles o un banner de 160 x 600 píxeles.Si estamos diseñando un muestrario de pro-ductos, tal vez el cliente nos solicite ubicar losartículos con una vista previa de unos 180 x80 píxeles cada uno. Conocer de antemano eltamaño 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 diseñar para pantallascon resoluciones de 1024 x 768 píxeles, por loque un canvas o lienzo de trabajo de unos 900píxeles de ancho es suficiente. Abramos un pa-réntesis sobre este punto: para los lectoresacostumbrados a diseñar sitios elásticos, te-nemos una buena noticia; la grilla tambiénpuede usarse perfectamente en estos casos.Aunque la matemática, claro, se hace un po-co más compleja que reemplazar PX por EMen las unidades del archivo CSS.Entonces, hagamos una lista de los requisitos:

Canvas de 900 píxeles. Al reducir un par depíxeles más el ancho del sitio, ganamos unbuen margen izquierdo y derecho, lo que le

90

dará más aire al diseño de la web. Como diji-mos, nuestro target son los usuarios que na-vegan con resoluciones de 1024 x 768 píxeles.

Imagen de 406 x 232 píxeles. El cliente nospide que usemos una imagen de archivo quevenda y describa brevemente lo que la empre-sa hace. Es fundamental atraer la atención delvisitante con esta imagen, por lo que le dare-mos una ubicación especial en nuestra grilla.

Diez productos de 180 x 80 píxeles cadauno. Al hacer clic en la vista previa, se abriráuna nueva página con una descripción del pro-ducto y una fotografía ampliada.

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

Logo de la empresa, barra de navegaciónlateral y barra de navegación superior. Labarra de navegación lateral aparece en sec-ciones con mucha densidad de información; 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 píxeles, incluidos los espacios entreellas. Podríamos, por lo tanto, tener una gri-lla de doce columnas de 64 píxeles cada una,

WEBMASTERSPrincipios básicos del diseño gráfico en la Web

Mucho se discute sobre si el diseño con gri-llas – el estilo suizo de diseño, hablando entérminos generales– es simplemente unamoda pasajera o si, en realidad, es un estilode diseño con fundamentos válidos que vanmucho más allá de las modas.El modernismo –del cual se desprende elestilo suizo–, como ideología, en realidad esuna actitud, una corriente de pensamientohacia la vida, y no un estilo. En nuestro ca-so, es la actitud que tomamos al diseñar si-tios web, pero también 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 opinión personal, los reflejos innece-sarios en todas partes, los degradados sinfunción, el uso de tipografías en cuerpos ex-cesivos… en fin, el diseño que no comunica–la Web 2.0– es tan frágil como la burbujaque hace unos años dejó a miles de punto-com en la quiebra de la noche a la mañana.

El modernismo como actitud

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

0033 Subvidir el espacio 0044 Ubicar los bloques de contenido

Así luce nuestra grilla de doce columnas, con unaaproximación 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 podría permutar fácilmente.

con un gutter de 12 píxeles (12 x 64 + 11 x12 = 900 píxeles).. Doce columnas es unbuen número, 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 216píxeles (64 + 12 + 64 + 12 + 64 = 216 píxeles). Empecemos: en la primera supercolumna–siempre de izquierda a derecha– ubicare-

mos la barra de navegación lateral –la cualpresumiblemente será una lista desordena-da, UL en HTML, en donde cada opción se-rá un ítem LI de la lista–, y en la última su-percolumna colocaremos el banner de 160 x600. No se preocupen, los píxeles que que-dan sobrantes en esta supercolumna (216 -160 = 56 píxeles) nos servirán para centrarel banner, darle un buen padding y un bordede un píxel para destacarlo.Nos quedan las dos supercolumnas centrales,en las cuales, por tener una buena ubicación,colocaremos primero la imagen de 406 x 232píxeles e inmediatamente abajo, los diez pro-ductos de 180 x 80 píxeles (para hacer más

atractivo el diseño, 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 navegación superior movemos los ele-mentos antes alineados unos 100 píxeles ha-cia abajo, y listo: tenemos un armazón per-fectamente alineado para empezar a diseñar.

CONCLUSIÓNComo vimos, las grillas en diseño web llega-ron o, mejor dicho, se redescubrieron, paraquedarse. Hoy en día es imposible pensar encomenzar un diseño sin tener como base unagrilla que respalde nuestra creación.

91

En la Web podemos encontrar todo tipo deherramientas para comenzar a diseñar congrillas. Desde tutoriales básicos hastascripts que nos ahorran la tarea de calcularel ancho total del canvas y las columnas amano. Éstas son las más interesantes:

Grid LayoutsBasado en una idea de Jon Hicks –diseña-dor del icono de Firefox–, este sitio nosofrece un script que muestra y oculta unagrilla al presionar <Ctrl+Shift+G> en el na-vegador. Simplemente ingresamos los valo-res que componen nuestra grilla y pegamos

el código resultante en nuestra página 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 página nos devuelva unpreview de la grilla y su ancho total.www.29digital.net/grid/

Design by GridContiene artículos, tutoriales y otros recur-

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

Designing with Grid-Based ApproachPost de Smashing Magazine con unainmensa colección 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 diseñode sitios con grillas. http://code.google.com/p/blueprintcss

++online

MÁS DISEÑO WEB

En próximos artículos veremos la parte técnica de las grillas: cómo crearlas usando un poco de HTML y mucho CSS. Como siempre, el forode USERS siempre está abierto para sus dudas y consultas. ¡Hasta la próxima!

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