La retícula en diseño web. Características y funciones.
¿Qué es la retícula en diseño web?
Hoy vamos a hablar de un instrumento fundamental en el diseño de páginas web: la retícula. La retícula es una herramienta compositiva que tiene como finalidad ajustar la posición de los diferentes elementos que componen la página que estás diseñando. Gracias a su uso, dotarás a tus diseños de una estructura interna armónica y visualmente agradable.
Sin embargo, el uso de la retícula tiene otra propiedad aun más importante que mejorar la estética. Es un medio de comunicación con el desarrollador que tendrá que ocuparse de programar la web que estás diseñando. Gracias a ella, el encargado de desarrollo web podrá plasmar una versión interactiva y navegable lo más fiel posible desde un punto de vista visual a la maqueta que has diseñado.
Características de la retícula web
Normalmente la retícula suele ser una plantilla distribuida en columnas contenida dentro de una capa de un archivo de Photoshop. Existen distintos formatos de retícula: las variables entre unos archivos y otros son básicamente el número de columnas, el padding y el gutter.
Columnas
Habitualmente, el número de columnas suele ser de doce. Esto es debido a que otorga una gran versatilidad compositiva al archivo. Con doce columnas, podemos dividir la información en un bloque de doce, en dos bloques iguales de seis columnas, en tres de cuatro columnas, en cuatro bloques de tres columnas o seis de dos columnas. Esto nos da pie a generar diferentes estructuras modulares a partir de una misma retícula. Por supuesto, podemos diseñar retículas específicas para cada web con el número de columnas que deseemos.
Padding
El Padding (relleno) es una propiedad que establece un espacio entre el borde de la columna y el contenido englobado dentro de esta. Su grosor es editable.
Gutter Width
El Gutter Width es el espacio que dejamos entre las columnas.
Esta web, llamada Gridpak, permite diseñar y personalizar retículas, ajustando el número de columnas y los grosores de padding y gutter, y descargar la retícula de manera totalmente gratuita.
La retícula responsive
Los actuales estándares de buscadores así como las costumbres de navegación del usuario exigen que las webs que diseñemos sean necesariamente responsive. Cuando visualizamos el contenido en un dispositivo móvil, el tamaño de la pantalla exige un cambio en el diseño estructural de la web. A este cambio se le conoce como break point (punto de ruptura).
Si abrimos una web responsive en un explorador de nuestro ordenador, podemos contabilizar y observar como funcionan dichos puntos de ruptura pinchando en la esquina de la ventana del explorador en uso y arrastrando lentamente para ir reduciendo su tamaño poco a poco. Cada vez que cambie el diseño de la web (lo notaremos en que ciertos elementos se simplifican o directamente desaparecen, o en la reducción del número de columnas) se contabiliza como un punto de ruptura.
Por tanto, debemos tener preparadas varias retículas distintas (una por cada punto de ruptura) para diseñar nuestra web adaptada a dispositivos móviles.
En la web de Unsemantic podemos observar en acción real el funcionamiento de distintas retículas responsive.
Es muy recomendable adjuntar la capa de la retícula con el psd que enviemos al encargado de desarrollar nuestra web, pues podrá tomarla como referencia a la hora de programar.