Composición
Proximidad
Lo cercano se lee junto.
La proximidad en diseño es usar la distancia para agrupar: lo que está cerca se lee como un grupo y lo que está lejos, como cosas distintas.
3 demos interactivas
Guía gratis por DM
Composición
Mira el reel · 1 min
01
Qué es
Tu cerebro ve como un grupo lo que está cerca, y como cosas distintas lo que está lejos. Es una de las leyes de la Gestalt, que estudia cómo percibimos. La proximidad en diseño aprovecha eso.
Por eso el espacio también comunica. Acerca lo que va junto y separa lo que no: tu diseño se ordena sin agregar ni una línea ni una caja.
02
Pruébalo
Los mismos 12 puntos y la misma tarjeta: solo cambian las distancias. Usa los botones para comparar.
Todo a la misma distanciaLo cercano se lee junto
La regla de oro
Entre grupos, por lo menos el doble de espacio que dentro de cada grupo.
03
Así no / así sí
Todo igual.
Foto, nombre, descripción, precio y botón a 40 px cada uno. Todo flota a la misma distancia y no sabes qué va con qué.
Agrupado.
16 px dentro de cada grupo y 64 px entre grupos. Foto con nombre, precio con botón: se entiende sin leer.
04
Cuánto espacio dejar
Usa siempre los mismos saltos: una escala de múltiplos de 8 es fácil de recordar. Y pega cada titular a su texto.
- 8 pxEntre un ícono y su texto.
- 16 pxDentro de un grupo: título y texto, precio y botón.
- 32 pxEntre grupos que se relacionan.
- 64 pxEntre secciones o ideas distintas.
Ojo con los titulares
05
Cómo aplicarlo hoy
1
Arma los grupos
Antes de mover nada, pregúntate qué va con qué. Por ejemplo: foto con nombre, precio con botón.
2
Junta lo de adentro
Dentro de cada grupo deja poco espacio, entre 8 y 16 px.
3
Separa los grupos
Entre un grupo y otro, por lo menos el doble. Si dudas, deja más.
4
Quita lo que sobra
Si el espacio ya agrupa, no necesitas líneas, cajas ni separadores.
06
Antes de publicar
- ¿Se entiende qué va con qué sin leer?
- ¿Hay más espacio entre grupos que dentro?
- ¿Cada titular está más cerca de su texto?
- ¿Sobra alguna línea o caja?
COMENTA
“GRUPOS”
y te envío
la guía
por DM
La guía de proximidad en PDF: seis páginas con ejemplos, reglas y la lista para revisar antes de publicar. Comenta la palabra en el reel de Instagram y te llega por mensaje directo.
Preguntas
frecuentes
¿Qué es la ley de proximidad de la Gestalt?
Es el principio según el cual percibimos como un grupo los elementos que están cerca entre sí. Cuanto más cerca, más relacionados parecen.
¿Cuánto espacio dejar entre elementos de un diseño?
Usa una escala fija, como múltiplos de 8: 8, 16, 32 y 64 px. Poco espacio dentro de cada grupo y por lo menos el doble entre grupos.
¿Cómo agrupar elementos sin usar líneas ni cajas?
Con la distancia. Acerca los elementos que van juntos y aleja los que no; el espacio en blanco hace el trabajo de los separadores.
Sigue aprendiendo
