Atomic design de volgende stap in efficiënt website-onderhoud

Websites bestaan in de regel uit templates die interactief reageren op het gedrag van de bezoeker. Mede om die reden is het template-denken, als het aankomt op het ontwerpen van een website, steeds verder ingeburgerd binnen de branche. Logisch, maar voor sommige klanten is die top-downaanpak, waarbij eerst naar het grote plaatje wordt gekeken en vervolgens pas aan de details wordt gewerkt, niet de juiste aanpak. Bij een website van formaat is de retailer vaak beter uit bij Atomic Design.

Bij een Atomic Design-werkwijze werk je volgens het zogeheten bottom-upprincipe. In plaats van een totaalplaatje uit te werken naar details, begin je bij Atomic Design juist andersom. Eerst inventariseer je de onderdelen, ook wel atomen genoemd, tot op het kleinste niveau. Zo zijn bij een simpel zoekveld het invulveld, de tekst in dat veld en de zoekbutton elk een losstaand atoom. Deze worden dus los van elkaar geïnventariseerd, gerangschikt en ontworpen. Dat is de basis.

Van atomen, naar moleculen en organismen

Gezamenlijk vormen deze atomen een molecuul die, als je die weer samenvoegt met andere moleculen van een site, een organisme, zoals een zoekformulier, kan vormen. Maar als je ze dan toch samenvoegt, lijkt het los designen in eerste instantie omslachtig. Helemaal voor retailers die op het voortraject willen bezuinigen, niet erg betrokken zijn bij het designproject of die moeite hebben om het totaalplaatje te zien als ze losse onderdelen krijgen voorgeschoteld. Zo iemand kan er dan voor kiezen later aan te schuiven zolang hij maar beseft dat het later bij onderhoud, enorm veel werk scheelt als er vooraf tot in atomen is nagedacht over de site.

Voor kleinere retailers bestaat een site uit verschillende templates en die zijn samen goed te overzien maar pagina’s van de grootste bedrijven van Nederland kun je bijna niet meer zelfstandig zien. Regelmatig zijn er updates. Zeker bij bedrijven die meerdere merken hanteren, meerdere kanalen inzetten en daarbij verschillende proposities hanteren, kan het overzicht van online materiaal lastig worden. Eén website heeft na vele jaren opeens tientallen verschillende type buttons, afbeeldingen, formaten en lettertypes die over een groot aantal templates verspreid raken en waarvan het overzicht zoekraakt.

Iets simpels aanpassen moet sneller kunnen

Dat klinkt misschien als het werk van een rommelige designer, maar in de praktijk gebeurt het toch nog vaak. Sites bestaan uit vele duizenden pagina’s die worden opgebouwd uit een enorm aantal elementen. Een groot deel daarvan is steeds interactiever en dus eigenlijk niet meer in een wireframe vast te leggen. En nu sites ook resolutie-afhankelijk worden opgebouwd, is het werk voor een frontend-designer er niet minder complex op geworden. Om maar een voorbeeld te noemen: als de grafische afdeling besluit dat iets simpels als een schaduwrandje niet meer van deze tijd is kan dat bij puur template-design een aardige klus betekenen om te zorgen dat dit ook echt overal verwerkt wordt.

Bij Atomic Design staan vergelijkbare atomen bij elkaar. Je hebt dus direct een overzicht van alle atomen die vergelijkbare effecten bezitten, zoals dat schaduwrandje. Die zit niet alleen om de submit-button van het zoekveld, ook de button van het contactformulier, de nieuwsbrief-aanmeldpagina, de bestelbutton op een productpagina en de koopknop op de bestelpagina bevatten er één. Door deze bij elkaar te zetten en gezamenlijk één huisstijl mee te geven, is het gemakkelijker een consistente aanpak te hanteren. Verander je bijvoorbeeld de submit-button, dan kun je alle vergelijkbare atomen in één keer bijwerken, zodat alle vergelijkbare buttons op alle pagina’s er hetzelfde uitzien. Door te werken vanuit de atomen zelf, hoef je niet vervolgens alle templates na op zoek naar elementen met schaduwrandjes. Op die manier hou je de consistentie en dus de huisstijl van je website intact en is onderhoud in de toekomst stukken efficiënter uit te voeren.