Wat is Atomic design - wat heb je eraan?

We zien het vaker: pagina's op een webshop die niet met elkaar stroken. De ene keer is een menu wel uitklapbaar en vanaf een andere pagina niet. Of de layout die elke keer anders is. Het is killing voor de gebruiksvriendelijkheid van je website. Je bezoekers hebben bepaalde verwachtingen over hoe iets zich zal gedragen en als die verwachting niet uitkomt, zorgt dat voor cognitieve belasting en frictie. Ook het merkgevoel en de look-and-feel van je website gaan hiermee verloren. De oplossing is simpel. In deze blog laten we zien wat Atomic design is en hoe je het kunt gebruiken.

Wellicht herinner je nog de scheikundelessen van de middelbare school. Alle stoffen die we kennen zijn te ontleden tot basiselementen die de bouwstenen van alles om ons heen bepalen. Deze elementen zijn gegroepeerd in gassen, metalen, enzovoort. Wanneer je een samenstelling van een aantal elementen maakt krijg je een bepaald resultaat: een nieuwe stof. En als je de samenstelling aanpast, kan er weer een hele andere stof ontstaan.

Website elementen zijn ook onder te verdelen in basiselementen. Een website is opgebouwd uit HTML-elementen. Net zoals de elementen uit het periodieke stelsel zijn HTML elementen ook gegroepeerd. Je hebt tekst-elementen welke bepaalde delen van een lopende tekst aanduiden - denk aan een bold tekst, een link of een citaat. Ook heb je Grouping-elementen die je gebruikt om andere elementen samen te voegen om een andere samenstelling/layout te bereiken. Dit zijn bijvoorbeeld div-tags of tabellen.

Kortom: het design van een website komt tot stand door het bepalen van de uiterlijke kenmerken van deze HTML-elementen. Door HTML-elementen te combineren kun je componenten definiëren. Deze componenten zijn te combineren tot een groter deel van een pagina, zoals een header of een footer. Traditioneel is de pagina het vertrekpunt bij het design van een website. Maar als je hierover nadenkt is dit niet logisch, omdat je veel meer combinaties van componenten kunt maken. De flexibiliteit en consistentie van je website gaat omhoog als je het idee van pagina’s loslaat en start met denken in elementen. Want elementen zijn oneindig te combineren in nieuwe onderdelen van je website.

Atomic design is een methodiek om de onderdelen van pagina’s onder te verdelen in elementen en groepen zodat je een solide basis hebt om een website mee te ontwerpen en te bouwen. De term Atomic design is bedacht door Brad Frost. Brad gebruikt het periodieke stelsel als metafoor voor een pagina binnen een website. Onderstaande voorbeelden komen uit zijn e-book Atomic design waar hij de opbouw van Atomic design uitlegt.

Atomen

Het basiselement van een Atomic design is een atoom. Atomen zijn de kleinst mogelijke elementen op een pagina, zoals een formulierveld, een veld label of een button.

Moleculen

Moleculen zijn groepen van atomen die samen een functie kunnen vervullen. Zo kunnen de drie atomen die we als voorbeeld aanhaalden gecombineerd worden tot een zoekveld. De context van het molecuul bepaalt hoe de atomen gaan functioneren.

Organismen

Organismen zijn groepen van moleculen die samen een onderdeel van een pagina vormen. Ons zoekveld molecuul kan samen met andere moleculen een onderdeel worden van een header organisme. Andere moleculen binnen dit organisme zijn bijvoorbeeld een navigatiebalk. Onder een organisme kan ook een atoom vallen, als deze op zichzelf functioneert. Denk hierbij aan een afbeelding van een logo. Het logo kan ook een molecuul zijn: een link naar de homepage zijn met daarbinnen de afbeelding van het logo.

Templates

Templates zijn groepen organismen die samen een blauwdruk voor een pagina vormen. Door organismen anders in te zetten kunnen templates verschillende functies vervullen. Hier zie je de kracht van Atomic design terug. Wanneer de basiscomponenten goed zijn ontworpen, kunnen deze in elke context op een pagina worden geplaatst.

Pagina’s

Pagina’s zijn niet meer dan templates met daadwerkelijke inhoud die gebruikt gaat worden in een productieomgeving. Pagina’s zijn de ultieme stresstest voor de losse atomen, moleculen en organismen: wanneer de content van de gebruiker in de pagina staat, blijft elk element functioneren zoals bedoeld was?

• In de opbouw en doorontwikkeling van je website is snelheid een mooi voordeel. Omdat een developer snel met de beschikbare bouwstenen de layouts voor nieuwe functies kan realiseren, kan er meer tijd besteed worden aan het finetunen van de layouts en de benodigde logica voor de website. De broncode is schoner omdat er minder uitzonderingen in het design zijn die vaak voor inefficiënte code zorgen.

• Bij toekomstige ontwikkelingen heeft het developmentteam vaak genoeg aan een wireframe of een beschrijving van de nieuwe features omdat ze weten welke elementen er beschikbaar zijn om deze functionaliteit te creëren. Doorontwikkeling is eenvoudiger omdat de broncode over het algemeen cleaner en efficiënter is. Het designteam heeft meer tijd om te doen waar ze goed in zijn: mooie dingen bedenken. Atomic design bespaart dus tijd wanneer je veel doorontwikkeling doet aan je webshop.

• Tot slot: de consistentie van de atomen, moleculen en organisme heel hoog. Je look-and-feel van je website blijft consistent waardoor je herkenbaar blijft voor je doelgroep. Je website-bezoekers zijn er ook blij mee. Voor bezoekers met cognitieve beperkingen kan dit voordelig zijn omdat ze bij de hand genomen worden in het gebruik van de website.

​Lees meer over digitale toegankelijkheid van je webshop op onze blog.

Voor onze klant Holmatro hebben we in 2019 een replatforming gerealiseerd. Daarvoor hebben we de omgeving gemigreerd naar Drupal 8, nieuwe functionaliteiten toegevoegd en een redesign gedaan op de Atomic design werkwijze. Van de elementen die we konden definiëren in de ontworpen templates, hebben we een design system opgezet waarmee de nieuwe versie van de website is opgezet. Omdat onze developers gebruik konden maken van flexibele componenten, was het tijdens de doorontwikkeling van nieuwe features eenvoudig om snel sterke layouts neer te zetten. De website van Holmatro is een goed voorbeeld van de consistentie die een Atomic design biedt.

Voorbeelden vanuit het design system

Organisme Product List:

Molecuul Breadcrumbs:

Atoom Button:

In actie op een website

Basis tekststijlen in actie:

Een molecuul in verschillende formaten:

Stel je voor: je start met het bouwen van een nieuwe webshop - dit kan een nieuwe versie van je oude webshop zijn of een volledig nieuwe shop. Wat dan vaak gebeurt is dat een designer aan de slag gaat met het volledige design van enkele pagina’s. Enkele jaren geleden was het heel normaal om zo’n ontwerpbestand pixel-perfect te vertalen naar een HTML-layout.

Tegenwoordig hebben we te maken met talloze devices en verschillende browsers en versies van browsers. Daarnaast meten we alle aspecten van de conversie van onze websites. Om deze reden moet je snel wijzigingen kunnen maken in de layout van je website. Pixel-perfect kun je vergeten; deze werkwijze is niet flexibel en verouderd. Daarom is het geen goed idee om een pagina te ontwerpen alsof je een geprinte folder ontwerpt. Een Atomic werkwijze biedt dan uitkomst.

Atomic werkwijze

Een frontend developer - de persoon die verantwoordelijk is voor het bouwen van de interface - ziet liever alle elementen op de pagina als losse, herbruikbare componenten. Maar dit betekent niet dat je niet eerst templates kunt laten ontwerpen. Graag zelfs! Zo heb jij als klant en de developers een beeld van de stijl van de website. Onze developers starten daarna met het ontleden van het design naar losse bouwstenen.

We starten met het identificeren en opmaken van de atomen. Wanneer deze in alle ondersteunde browsers en beeldschermformaten op de juiste manier werken gaan we de moleculen opmaken. Hierbij houden we nog geen rekening met de context waarin deze gebruikt gaan worden. Dit doen we zodat ook de moleculen op alle devices en in alle browsers blijven werken.

Wanneer je gaat starten aan de organismen begin je al wat context te zien wat betreft de inzet van de componenten. Nu is je pakket van bouwstenen afgerond. Deze bouwstenen noemen we een: design system. Met dit design system is het makkelijk om van de eerder gecreëerde bouwstenen templates te maken. Als er een tweede template nodig is waarin we nét andere moleculen of organismen inzetten, kost dit veel minder tijd dan wanneer er hele pagina’s moeten worden omgezet van design naar code.

Atomic design biedt veel voordelen. Het zorgt voor een consistente UI van je applicatie, het biedt zekerheid omdat de componenten tijdens de bouw zijn getest op verschillende schermbreedtes en browsers, de doorontwikkeling is eenvoudiger omdat bestaande elementen eenvoudiger opnieuw ingezet kunnen worden en het is ook kostenefficiënter omdat er geen uitgebreid design gemaakt hoeft te worden voor een nieuwe feature.

Besef wel dat Atomic design geen vertrekpunt is. Het is een werkwijze die wordt gehanteerd om het initiële design te verbeteren en consistent en flexibel te maken. Ingrijpende wijzigingen zijn mogelijk, maar bedenk dat een kleine wijziging aan een atoom grote gevolgen kan hebben.

Wanneer je vaak van look of design wisselt of meerdere verschillende microsites draait, is Atomic design niet de werkwijze voor jou. Maar wil je een platform met een consistente, uniforme look-and-feel en wil je bijven optimaliseren en doorontwikkelen, dan ontkom je bijna niet meer aan de Atomic werkwijze!