La retícula es la base visual para organizar la información en una página web. Una retícula divide el espacio en columnas y filas según el contenido. Existen dos enfoques para el diseño de la retícula: temático, donde se divide el espacio según la proporción áurea, y orgánico, donde primero se coloca el contenido y luego se sistematiza la retícula. Una buena retícula debe dividir el espacio en suficientes pero no demasiadas columnas para alojar y gestionar todo el contenido de forma legible.

1. Reticulas de pantalla

2. UN BUEN INICIO La retícula es la base visual para organizar la información de una página web. Una base rígida o fluida? Dos, tres o cuatro columnas? Horizontal o vertical? Las respuestas a estas preguntas vienen dadas por el contenido que tengamos que manejar.

3. ¿Qué es una retícula? Cualquier documento que tenga que ser maquetado tendrá que estar compuesto en base a una retícula. 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.

4. Ejemplo

5. Formas del diseño de la reticula

6. 1. temático Se supone que uno puede directamente tomar el ancho del documento, calcular la proporción aurea y sacar una retícula. En este caso, las líneas azules nos marcan la proporción aúrea del documento y de ahi podemos sacar una retícula.

7. 2. 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.

8. Fundamental a la hora del diseño 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.

9. Ejemplo de lo anterior

10. 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.

11. El diseñador debe liberarse de posibles trabas técnicas que le impidan expresar con libertar el concepto a plasmar. 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. Ancho de parrafo: 350 px Ancho de columna 1: 150 px Ancho de columna 2: 150 px