You are on page 1of 7

1

CREANDO LA RETCULA. Cmo organizar la informacin


La retcula es la base visual para organizar la informacin de una pgina web. Una base rgida o fluida? Dos, tres o cuatro columnas? Horizontal o vertical? Las respuestas a estas preguntas vienen dadas por el contenido que tengamos que manejar. Por Csar Martn Licencia Copyleft. Puedes reproducirlo citando al autor y enlazando con DesarrolloWeb.com. Qu es una retcula? Cualquier documento que tenga que ser maquetado tendr que estar compuesto en base a una retcula.

La retcula son una serie de guas que nos darn los tamaos de las columnas para el texto, grficos e imgenes que tengamos que componer.

De dentro a fuera En este artculo vamos a explorar el diseo de la retcula de dentro a fuera. Vamos a componer primer una retcula para los contenidos y luego veremos cmo componer la retcula para el resto de los elementos de navegacin (botoneras, etc.). La hoja en blanco La primera aproximacin que debemos hacer para poder plantear una retcula es conocer el contenido, jerarquas y objetivos del documento. Debemos conocer con claridad que debe comunicar el documento, la temtica del mismo (si es opinin, si es una receta, si es un informe tcnico...). Si nuestro sitio web puede albergar diferentes tipos de documentos deberemos disear tantas retculas como tipos de documentos. No hay otra va. No se puede pensar en un diseo "para todo" ya que perderemos legibilidad y comprensin por parte de los usuarios. Si el usuario se ve expuesto a diferentes tipos de contenido bajo el mismo esquema, se puede perder. Es clave que una diferencia visual marque una diferencia editorial.

Ya conoces el contenido... ponlo sobre el papel. Hay dos formas de aproximarse al diseo de la retcula: El matemtico. Se supone que uno puede directamente tomar el ancho del documento, calcular la proporcin aurea y sacar una retcula.

En este caso, las lneas azules nos marcan la proporcin urea del documento y de ah podemos sacar una retcula. A m este mtodo no me suele gustar porque da por entendidos muchos aspectos de ancho de prrafo, etc. que son necesarios cuidar.

El orgnico La aproximacin ms natural es la orgnica donde el contenido nos dar las proporciones que luego podremos sistematizar en forma de retcula. Por ello el primer paso para establecer la retcula es poner nuestro contenido sobre el papel... o en este caso, sobre el navegador. Debemos ser capaces de crear un ancho de texto donde veamos que nuestro contenido fluye de forma natural.

En pantalla la lectura es ms dura que en papel y por tanto debemos cuidar el ancho de lnea. Por lo general algo superior a los 350 pixeles con tipografas de tamao 10 / 11 / 12 suele ser correcto. Aun as, debemos cuidar mucho estos aspectos de tamao y ancho de lnea ya que un documento que puede leerse con comodidad en pantalla ahorra mucho tiempo a los usuarios.

En especial en mbitos como intranets, universidades o centros de documentacin, si se consigue hacer los documentos legibles en pantalla, el ahorro de impresiones, etc. puede ser maysculo. Este ancho de columna base es el punto de partida para la retcula.

Ahora tenemos que ver como pondremos las fotos, llamadas de texto, anotaciones, etc.

Sistematizando la retcula Dentro de nuestro ancho general, debemos de ser capaces de dividir la retcula en un nmero suficiente de columnas y filas como para poder alojar todo tipo de elementos pero sin que sean demasiados como para que parezca arbitrario o demasiado complejo de gestionar. Aqu igualmente debemos trabajar de forma orgnica al principio creando el layout de forma libre. Photoshop suele ser la herramienta ms cmoda. Debemos componer las fotografas, posibles grficas de forma natural y luego ver como sistematizar los elementos. Es decir, debemos separar los procesos de diseo y de produccin. Y es bueno que sean personas diferentes. El diseador debe liberarse de posibles trabas tcnicas que le impidan expresar con libertar el concepto a plasmar. Si los aspectos tcnicos son los que imperan, al final todas las web acaban pareciendo lo mismo. La retcula es la nica va para un diseo escalable.

El diseo basado en la retcula es la nica va que te garantiza que tu proyecto, a nivel de diseo, sea escalable. Por otro lado, a pesar de optar por un diseo orgnico como mtodo de aproximacin al diseo, lo mejor a nivel operativo es que ese diseo se traduzca a trminos lo ms redondos posibles. Es decir, que al acabar el proyecto tengamos un lenguaje del estilo:

Ancho de parrafo: 350 px Ancho de columna 1: 150 px Ancho de columna 2: 150 px

De esta forma a nivel operativo cualquier ampliacin, revisin, edicin se podr realizar desde una base slida.

You might also like