Anatomía de una retícula

y por qué deberías usar una

Por Andrew Coyle
Traducción:
Fernando Valverde

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 los desarrolladores ya no pueden crear para una única pantalla. El paisaje 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 los desarrolladores deberían 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 cerca de 300 desde la Revolución Industrial. La retícula ha pasado por muchos movimientos de diseño, acercamientos y mejoras. A pesar de esta historia, la retícula todavía está en su infancia en el diseño de interacción.

A continuación están los diferentes elementos que componen una retícula. Algunos términos han sido adaptados para 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 ser incorporados al diseño de interacción, pero éstos deberían ser considerados conforme construimos nuestro nuevo vernacular interactivo.


Columnas

Columnas

Las columnas son las secciones verticales de una retícula. A mayor columnas en la retícula, mayor flexibilidad.


Filas

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

Módulos

Los módulos son unidades de espacio creadas por la intersección de filas y columnas.


Zonas espaciales

Zonas espaciales

Las zonas espaciales son agrupaciones de columnas, filas o módulos que forman un elemento de composición.


Medianiles

Medianiles

Las columnas y las filas se dividen por medianiles. Cuánto más estrecho es el medianil, mayor tensión visual se crea. Las retículas con medianiles más anchos producen plantillas tranquilizadoras porque los elementos de la composición tienen menos tensión entre ellos.


Márgenes

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

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

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

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

Retícula de 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

Retícula de 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

Retícula 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. Debería ser usada cuando el espacio vertical y horizontal es igual de importante. Este tipo de retícula se está volviendo más popular en los medios digitales por el arranque de los dispositivos ponibles [wearables], que dependen de «tarjetas» para comunicar.


Si te gusta lo que acabas de leer, por favor, haz clic en el botón «Recomendar» a continuación y sigue la Publicación Designed Thought.

Descubre el trabajo de Andrew en su web, Twitter, Dribbble, y Behance.