Traducción de «The Anatomy of a Grid» de Andrew Coyle
Anatomía de una retícula
Y por qué deberías usar una.
Aplicaciones y sitios web de toda clase han mejorado dramáticamente gracias a sistemas que incorporan fuertes principios de reticulado, como Bootstrap, Foundation, Skeleton, etc.
El diseño web responsive proporciona un nuevo reconocimiento al papel de la retícula en las experiencias digitales. Los diseñadores y desarrolladores ya no pueden crear para una única pantalla. El panorama multidispositivo obliga al creador a pensar en términos de sistemas de retículas dinámicas en lugar de sistemas de anchos fijos.
El diseño digital todavía se encuentra en su adolescencia y el uso de la retícula es aún joven. Los diseñadores y desarrolladores deben mirar al pasado para llevar el diseño digital al futuro. Han pasado cerca de 500 años desde que la imprenta fue inventada y casi 300 desde la Revolución Industrial. La retícula ha pasado por muchos movimientos de diseño, enfoques y perfeccionamientos. A pesar de esta historia, la retícula todavía está en su infancia en el diseño de interacción.
A continuación se describen los distintos elementos que componen una retícula. Algunos términos han sido adoptados por la comunidad del diseño digital y otros no. Hay razones obvias por las que algunos términos de los medios impresos no deberían incorporarse al diseño de interacción, pero éstos deberían ser considerados conforme construimos nuestra nueva lengua vernácula interactiva.
Columnas
Las columnas son las secciones verticales de una retícula. A mayores columnas en la retícula, mayor flexibilidad.
Filas
Las filas son las secciones horizontales de una cuadrícula. A menudo se omiten en el diseño web. Las retículas con filas y columnas se llaman retículas modulares.
Módulos
Los módulos son unidades de espacio creadas por la intersección de filas y columnas.
Zonas espaciales
Las zonas espaciales son agrupaciones de columnas, filas o módulos que forman un elemento de composición.
Medianiles
Las columnas y las filas están divididas por medianiles. Cuánto más estrecho es el medianil, mayor tensión visual se crea. Las retículas con medianiles anchos producen composiciones más tranquilas porque los elementos tienen menos tensión entre sí.
Márgenes
Los márgenes son el espacio exterior de las columnas y las filas de la retícula. No hay que confundirlo con el padding [el relleno], que es el espacio dentro de las filas y las columnas.
Línea de flujo
Las líneas de flujo se usan normalmente para separar las secciones de una composición. Éstas crean paradas y comienzos naturales en el diseño.
Marcador
Un marcador es el área en la que se coloca el contenido secundario. Los libros los usan comúnmente para los títulos de capítulos, el numerado, etc.
Tipos de retícula
Jerárquica
La retícula jerárquica es una retícula construida intuitivamente que se centra en las proporciones de los elementos en el diseño. Este tipo de retícula se usa normalmente cuando el contenido no está estandarizado ni se repite.
Manuscrito
La retícula de manuscrito es la más antigua usada en los medios impresos. Se presenta normalmente como un rectángulo estandarizado que recoge el contenido de una página o pantalla.
Columna
La retícula de columna es por mucho la más usada en el diseño web porque el ancho de una pantalla es limitado, al contrario que la altura, que puede continuar hasta el infinito mientras el usuario tenga la opción de desplazarse. La mayoría de las retículas de columnas en la web tienen 12 columnas, pero esto no debería impedir a los diseñadores y a los desarrolladores explorar alternativas.
Modular
La retícula modular se obtiene al superponer filas y columnas que forman módulos. La retícula modular es la forma más compleja de reticulado. Debe utilizarse cuando el espacio vertical y el horizontal interesan por igual. Este tipo de retícula se está popularizando en los medios digitales con la aparición de dispositivos portátiles que se comunican mediante «tarjetas».
