Espaiat i layout

Què són l'espaiat i el layout?

L'espaiat i el layout són la manera com una interfície organitza els elements en l'espai perquè les persones puguin llegir-la i fer-la servir sense esforç. L'espaiat són els buits: els marges al voltant d'un bloc, el farciment dins d'un botó, l'aire entre un títol i el text que va a sota. El layout és la disposició més àmplia, la graella i l'estructura que decideixen on se situa cada cosa a la pàgina. Junts donen forma a com se sent una interfície molt abans que algú llegeixi una sola paraula.

L'espai en blanc, la zona buida entre i al voltant dels elements, fa gran part de la feina silenciosa. Agrupa allò relacionat, separa allò que no ho està i li dóna a l'ull un lloc on descansar. El principi de proximitat és senzill: les coses col·locades juntes es llegeixen com a connectades, les que estan separades es llegeixen com a independents. Una pàgina de preus on l'import està enganxat al nom del seu pla i lluny del següent pla s'entén a l'instant millor que una amb buits iguals per tot arreu. Les graelles mantenen tot això coherent entre pantalles, alineant el contingut a una estructura compartida perquè un layout sembli deliberat i no improvisat.

La coherència és el que converteix l'espaiat d'una endevinalla en un sistema. Els equips defineixen una escala d'espaiat, un conjunt fix de valors com 4, 8, 16 i 24 píxels, i fan servir només aquests. La restricció produeix ritme visual i frena la deriva lenta cap a desenes de buits lleugerament diferents que fa que un producte sembli descurat sense que ningú sàpiga explicar per què.

Espaiat i layout a Dallonses

Fixem una escala d'espaiat i una graella des del principi, i després les fem complir a través del design system. Sona àrid. És la diferència entre un producte que se sent coherent a la pantalla número cent i un que es desfà en silenci. Quan l'espaiat ve de tokens i no de l'ull d'algú en el moment, un equip pot entregar ràpid sense que el layout es degradi.

Això és el nucli de la nostra feina de disseny d'interfícies d'usuari i design systems. Fem servir l'espai per construir jerarquia i agrupació, de manera que l'estructura d'una pàgina li digui a l'usuari què va junt abans de llegir res. Provem els layouts en breakpoints reals, perquè una graella que respira en un escriptori es pot ofegar en un mòbil. Encerta amb l'espaiat i la interfície se sent tranquil·la, que sol ser el millor compliment que es pot guanyar un layout.

La interfície se sent atapeïda o caòtica? Posem-hi una mica d'ordre.

Parlem d'UI