Espaciado y layout

¿Qué son el espaciado y el layout?

El espaciado y el layout son la forma en que una interfaz organiza los elementos en el espacio para que las personas puedan leerla y usarla sin esfuerzo. El espaciado son los huecos: los márgenes alrededor de un bloque, el relleno dentro de un botón, el aire entre un título y el texto que va debajo. El layout es la disposición más amplia, la rejilla y la estructura que deciden dónde se sitúa cada cosa en la página. Juntos dan forma a cómo se siente una interfaz mucho antes de que alguien lea una sola palabra.

El espacio en blanco, la zona vacía entre y alrededor de los elementos, hace gran parte del trabajo silencioso. Agrupa lo relacionado, separa lo que no lo está y le da al ojo un lugar donde descansar. El principio de proximidad es sencillo: las cosas colocadas juntas se leen como conectadas, las que están separadas se leen como independientes. Una página de precios donde el importe está pegado al nombre de su plan y lejos del siguiente plan se entiende al instante mejor que una con huecos iguales por todas partes. Las rejillas mantienen todo esto coherente entre pantallas, alineando el contenido a una estructura compartida para que un layout parezca deliberado y no improvisado.

La coherencia es lo que convierte el espaciado de una adivinanza en un sistema. Los equipos definen una escala de espaciado, un conjunto fijo de valores como 4, 8, 16 y 24 píxeles, y usan solo esos. La restricción produce ritmo visual y frena la deriva lenta hacia decenas de huecos ligeramente distintos que hace que un producto parezca descuidado sin que nadie sepa explicar por qué.

Espaciado y layout en Dallonses

Fijamos una escala de espaciado y una rejilla desde el principio, y luego las hacemos cumplir a través del design system. Suena árido. Es la diferencia entre un producto que se siente coherente en la pantalla número cien y uno que se desmorona en silencio. Cuando el espaciado viene de tokens y no del ojo de alguien en el momento, un equipo puede entregar rápido sin que el layout se degrade.

Esto es el núcleo de nuestro trabajo de diseño de interfaces de usuario y design systems. Usamos el espacio para construir jerarquía y agrupación, de modo que la estructura de una página le diga al usuario qué va junto antes de leer nada. Probamos los layouts en breakpoints reales, porque una rejilla que respira en un escritorio puede ahogarse en un móvil. Acierta con el espaciado y la interfaz se siente tranquila, que suele ser el mayor cumplido que puede ganarse un layout.

¿La interfaz se siente apretada o caótica? Pongámosle algo de orden.

Hablemos de UI