Bouwstenen die je maar één keer hoeft te beslissen

Zonder afspraken vooraf krijgt elke nieuwe pagina zijn eigen oplossing. Vier soorten knoppen die bijna hetzelfde doen, drie tinten grijs die niemand kan uitleggen, en CSS die alleen maar groeit omdat niemand durft weg te halen wat er al staat.

Een design system zorgt ervoor dat dit niet gebeurt. Daarin leg je vast wat de regels van het ontwerp zijn en hoe je daarmee omgaat.

Wat er dan precies wordt vastgelegd

Eerst de waarden: kleuren, typografie, en de ruimtematen waaruit alle afstanden worden opgebouwd. Dat is het saaie deel en het scheelt het meest, want zodra er een vaste reeks is verdwijnt de discussie over of er nu 18 of 20 pixels tussen moet.

Daarna de toestanden: hoe een veld eruitziet met focus, met een fout, terwijl het bezig is en wanneer het uit staat. Die worden zelden ontworpen en dagelijks gezien. Wat er dan gebeurt staat in wat er met je ontwerp gebeurt in de browser.

Daarna de componenten: een knop, een invoerveld, een card, een melding. Met hun variaties erbij, en met de regel wanneer je welke gebruikt, anders staan er over een jaar alsnog vier varianten.

Hieronder staat een deel uit het systeem van deze site zelf. Niet als afbeelding: de balken zijn zo breed als de maat die ze noemen, en de vlakken halen hun kleur uit dezelfde plek als de rest van de pagina. Zet je hem in de donkere modus, dan verandert dit mee.

Waarom dit geld scheelt en niet alleen tijd

De eerste pagina wordt er niet goedkoper van, de dertigste wel. Wat er al staat hoeft niet opnieuw bedacht, gebouwd en getest te worden, en dat is precies waar de uren weglopen bij een site die blijft groeien.

Er zit nog een tweede besparing in die minder opvalt. Een component die één keer goed staat, staat overal goed: de contrastverhouding, het label bij het invoerveld, de volgorde voor wie met het toetsenbord werkt. Zo wordt toegankelijkheid iets dat je één keer oplost in plaats van op elke pagina opnieuw.

Wanneer ik het je afraad

Bij een site van een pagina of tien die niet gaat groeien, en waar één persoon aan werkt. Dan kost het opzetten meer dan het oplevert en heb je vooral een map met regels waar niemand naar kijkt. Een handvol goede afspraken in een stylesheet is dan genoeg.