¿Qué es una retÃcula
Cualquier documento que tenga que ser maquetado tendrá que estar compuesto en base a una retÃcula.
!["reticula]("http://www.alzado.org/imgconts/autor_id2/reticulas/reticula01.jpg")
La retÃcula son una serie de guias que nos darán los tamaños de las columnas para el texto, gráficos e imágenes que tengamos que componer.
De dentro a fuera
En este artÃculo vamos a explorar el diseño de la retÃcula de dentro a fuera. Vamos a componer primer una retÃcula para los contenidos y luego veremos como componer la retÃcula para el resto de los elementos de navegación (botoneras, etc…).
La hoja en blanco
La primera aproximación que debemos hacer para poder plantear una retÃcula es conocer el contenido, jerarquias y objetivos del documento.
Debemos conocer con claridad que debe comunicar el documento, la temática del mismo (si es opinión, si es una receta, si es un informe técnico…).
Si nuestro sitio web puede albergar diferentes tipos de documentos deberemos diseñar tantas retÃculas como tipos de documentos. No hay otra vÃa. No se puede pensar en un diseño "para todo" ya que perderemos legibilidad y comprensión 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 diseño de la retÃcula.
El matemático.
Se supone que uno puede directamente tomar el ancho del documento, calcular la proporción aurea y sacar una retÃcula.
!["reticula]("http://www.alzado.org/imgconts/autor_id2/reticulas/reticula02.jpg")
En este caso, las lÃneas azules nos marcan la proporción aúrea del documento y de ahi podemos sacar una retÃcula.
A mi este método no me suele gustar porque da por entendidos muchos aspectos de ancho de párrafo, etc.. que son necesarios cuidar.
El orgánico
La aproximación más natural es la orgánica donde el contenido nos dara las proporciones que luego podremos sistematizar en forma de retÃcula. Por ello el primer paso para establecer la retÃcula 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.
!["reticula]("http://www.alzado.org/imgconts/autor_id2/reticulas/reticula03.jpg")
En pantalla la lectura es mas dura que en papel y por tanto debemos cuidar el ancho de lÃnea. Por lo general algo superior a los 350 pixeles con tipografÃas de tamaño 10 / 11 / 12 suele ser correcto.
Aun asÃ, debemos cuidar mucho estos aspectos de tamaño y ancho de lÃnea 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 documentación, si se consigue hacer los documentos legibles en pantalla, el ahorro de impresiones, etc… puede ser mayúsculo.
Este ancho de columna base es el punto de partida para la retÃcula.
!["reticula]("http://www.alzado.org/imgconts/autor_id2/reticulas/reticula04.jpg")
Ahora tenemos que ver como pondremos las fotos, llamadas de texto, anotaciones, etc…
!["reticula]("http://www.alzado.org/imgconts/autor_id2/reticulas/reticula05.jpg")
Sistematizando la retÃcula
Dentro de nuesto ancho general, debemos de ser capaces de dividir la retÃcual en un número 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 orgánica al principio creando el layout de forma libre. Photoshop suele ser la herramienta más cómoda.
Debemos componer las fotografÃas, posibles gráficas de forma natural y luego ver como sistematizar los elementos.
Es decir, debemos separar los procesos de diseño y de producción.
Y es bueno que sean personas diferentes. El diseñador debe liberarse de posibles trabas técnicas que le impidan expresar con libertar el concepto a plasmar.
Si los aspectos técnicos son los que imperan, al final todas las web acaban pareciendo lo mismo.
La retÃcula es la única vÃa para un diseño escalable
El diseño basado en la retÃcula es la única vÃa que te garantiza que tu proyecto, a nivel de diseño, sea escalable.
Por otro lado, a pesar de optar por un diseño órganico como método de aproximación al diseño, lo mejor a nivel operativo es que ese diseño se traduzca a términos lo más 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 ampliación, revisión, edición se podrá realizar desde una base sólida.