Composición y retículas: cómo organizar cualquier diseño | Curso de diseño gráfico gratis: de básico a avanzado

Lo que lograrás en esta lección

Organizar una pieza con márgenes, columnas y medianiles.
Calcular una retícula para impresión y para web.
Crear puntos focales y dirigir la mirada con la composición.
Mantener un sistema de espaciado consistente.

📥 Herramientas para diseñadores

La calculadora de retícula hace por ti los cálculos de esta lección.

calculadoras-y-checklists-diseno.xlsx · calculadora de retícula, píxeles, sangrado y tarifa, y listas de control

Ya conoces los principios (lección 2), el color (3) y la tipografía (4). La composición es el arte de colocar todo eso en el espacio. La herramienta que usan los profesionales para hacerlo con orden y rapidez es la retícula: una estructura invisible de líneas guía que decide dónde va cada elemento. Esta lección abre el nivel intermedio.

Por qué usar una retícula

Orden: todo se alinea con algo; la pieza transmite profesionalidad.
Rapidez: no decides la posición de cada elemento desde cero.
Coherencia: varias páginas o piezas comparten la misma estructura.
Flexibilidad: dentro de la retícula caben muchas composiciones distintas.

La retícula no es una cárcel: una vez la dominas, puedes romperla a propósito (una imagen que sangra fuera de las columnas, un título que cruza dos módulos) para crear tensión e interés.

Las partes de una retícula

Parte	Qué es
Formato	El tamaño total: A4, 1080×1350 px, una pantalla de 1440 px de ancho…
Márgenes	El espacio entre el borde y el contenido. Dan aire y protegen de cortes de impresión.
Columnas	Divisiones verticales donde se colocan textos e imágenes.
Medianil (gutter)	El espacio entre columnas.
Módulos	Celdas que se forman al dividir también en filas.
Línea base	Una cuadrícula horizontal fina para que las líneas de texto se alineen entre columnas (sobre todo en diseño editorial).

Tipos de retícula

Tipo	Estructura	Ideal para
De manuscrito	Una sola columna	Libros, artículos, cartas
De columnas	2 a 6 columnas (12 en web)	Revistas, folletos, webs
Modular	Columnas y filas que forman módulos	Catálogos, periódicos, paneles, publicaciones con muchas imágenes
Jerárquica	Zonas de distinto tamaño según su importancia	Páginas de inicio, afiches

Calcula tu retícula

Impresión: folleto A4

Ancho A4: 210 mm. Márgenes laterales de 15 mm y 3 columnas con medianiles de 5 mm:

Ancho útil       = 210 − 15 − 15       = 180 mm
Espacio de medianiles = 2 × 5         = 10 mm
Ancho de columna = (180 − 10) ÷ 3      ≈ 56,7 mm

En InDesign, Affinity o Illustrator lo configuras al crear el documento (márgenes y columnas) o con guías.

Web: retícula de 12 columnas

La web usa mucho la retícula de 12 columnas porque 12 se divide entre 2, 3, 4 y 6: puedes hacer bloques de media página, tercios o cuartos. Con un contenedor de 1.200 px y medianiles de 24 px:

Medianiles      = 11 × 24 = 264 px
Ancho columna   = (1.200 − 264) ÷ 12 = 78 px
Comprobación    = 12 × 78 + 264 = 1.200 px

Un bloque de texto que ocupe 8 columnas mide 8 × 78 + 7 × 24 = 792 px; una barra lateral de 4 columnas, 4 × 78 + 3 × 24 = 384 px; y entre ambos queda un medianil de 24 px (792 + 24 + 384 = 1.200). En celular, la retícula se reduce a 4 columnas y los bloques se apilan (lección 11).

1. Un afiche de 400 mm de ancho tiene márgenes de 20 mm a cada lado y 4 columnas con medianiles de 8 mm. ¿Cuánto mide cada columna?

90 mm
84 mm
100 mm

Ancho útil 400 − 40 = 360 mm; medianiles 3 × 8 = 24 mm; (360 − 24) ÷ 4 = 84 mm.

Punto focal y recorrido visual

Toda composición necesita un punto focal: el elemento que se ve primero. Se crea con contraste de tamaño, color, aislamiento (espacio alrededor) o una imagen fuerte (especialmente rostros y miradas: miramos hacia donde mira una persona en la foto). Desde ahí, la composición guía la mirada por el resto de la información (lección 2: recorrido en Z y en F).

La regla de los tercios

Divide el formato en tres partes iguales en horizontal y en vertical. Los cuatro puntos donde se cruzan las líneas son posiciones naturales para el punto focal; colocar el elemento principal en uno de ellos suele dar composiciones más dinámicas que centrarlo. Es muy útil en fotografía y en piezas con una imagen dominante. La proporción áurea se cita a menudo con el mismo fin, pero no es una fórmula mágica: los tercios y una buena retícula resuelven la gran mayoría de los casos.

Escala y tensión

Los contrastes de escala fuertes (un título enorme frente a un texto pequeño, una imagen que ocupa dos tercios) dan energía. Las composiciones donde todo tiene un tamaño parecido resultan planas.

2. ¿Por qué la retícula de 12 columnas es tan común en diseño web?

Porque las pantallas tienen 12 partes.
Porque 12 se divide entre 2, 3, 4 y 6, lo que permite muchas combinaciones de bloques.
Porque es obligatorio en HTML.

Su flexibilidad permite mitades, tercios y cuartos con la misma estructura.

Un sistema de espaciado

Igual que con los tamaños de letra, define una escala de espacios y úsala siempre. En diseño digital es muy común el sistema de 8 px: todos los márgenes, rellenos y separaciones son múltiplos de 8 (8, 16, 24, 32, 48, 64…), con 4 px para ajustes finos. Beneficios: coherencia, decisiones más rápidas y una relación sencilla con los desarrolladores.

Espacio pequeño entre elementos relacionados (título y su texto: 8-16 px).
Espacio mediano entre grupos (24-32 px).
Espacio grande entre secciones (48-96 px).

Esto aplica el principio de proximidad (lección 2) de forma sistemática.

Composición paso a paso: una publicación de 1080×1350

Márgenes de 80 px (todo el texto importante dentro, para que no lo tapen los elementos de la interfaz de la red social).
Retícula de 6 columnas en el área útil.
Punto focal: la foto del producto en los dos tercios superiores, con el producto en un punto de los tercios.
Titular grande que ocupa 4 columnas, alineado a la izquierda.
Bloque de precio y llamada a la acción en el tercio inferior derecho (final del recorrido en Z).
Logo pequeño abajo a la izquierda.
Espacios con la escala de 8 px.

3. En una retícula, ¿cuándo está bien romperla?

Nunca.
De forma intencionada, para destacar un elemento o crear tensión, cuando el resto respeta la estructura.
Siempre que un elemento no quepa.

La ruptura funciona por contraste con el orden general; si todo rompe la retícula, no hay orden que romper.

Ejercicio práctico: tres composiciones con la misma retícula

Crea un documento de 1080×1350 px con márgenes de 80 px y una retícula de 6 columnas.
Con el mismo contenido (una foto, un titular, un texto corto, un precio y un logo), crea tres composiciones distintas que respeten la retícula.
En una de ellas, rompe la retícula a propósito con un solo elemento.
Pregunta a tres personas qué ven primero en cada versión.

Ver tres esquemas posibles

A · Imagen dominante: foto en 6 columnas, 2/3 superiores; titular
    y precio abajo en 4 columnas a la izquierda; logo a la derecha.
B · Dividida: foto en las 3 columnas de la derecha a toda altura;
    titular, texto y precio en las 3 de la izquierda, centrados en
    vertical.
C · Tipográfica con ruptura: titular enorme en 6 columnas arriba;
    foto recortada del producto que invade el titular (rompe la
    retícula); precio en un círculo de color en un punto de los tercios.

Resumen

La retícula organiza la pieza con formato, márgenes, columnas, medianiles y módulos.
Calcula la columna: (ancho útil − medianiles) ÷ número de columnas.
La retícula de 12 columnas es estándar en web; en impresión se usan de 2 a 6.
Crea un punto focal y usa la regla de los tercios y los contrastes de escala.
Un sistema de espaciado (como múltiplos de 8 px) aplica la proximidad con coherencia.

En la próxima lección aprenderás todo sobre imágenes: vectores y mapas de bits, resolución, formatos de archivo y licencias.