Atomic design: de route naar overtuigende online branding

Denk je als organisatie na over het ontwikkelen van een nieuwe website, app, webshop of klantportaal, dan sta je voor een inspirerend traject. Atomic design helpt om op een gestructureerde, efficiënte manier te bouwen aan een optimale user experience en een overtuigende online identiteit, waar je direct de vruchten van plukt. Wat is atomic design precies en welke voordelen brengt het met zich mee?

Atomic design is een methodiek om online toepassingen zo efficiënt mogelijk te kunnen ontwerpen en bouwen. Het concept is geïntroduceerd door Brad Frost en geïnspireerd op de chemie. Het idee: ook (online) designs in elementaire deeltjes opdelen en zo toewerken naar een groter, consistent geheel.

Atomic design gaat uit van de volgende designonderdelen (bouwstenen): atomen - moleculen - organismes - templates - pagina’s.

De atomen vormen de kleinste ‘legoblokjes’. Voorbeeld van een atoom is bijvoorbeeld een button of een formulierveld. Atomen kunnen worden gedefinieerd met zogenaamde tokens: lettertypes, lettergroottes, kleuren, etc. Met een atoom afzonderlijk kun je niet zoveel. Atomen krijgen een functie als ze samenhangen binnen een molecuul: een zoekveld bijvoorbeeld, waar een button en een invulveld zijn gecombineerd. Moleculen worden vervolgens samengevoegd tot een complexer organisme, zoals een header, een footer of een inlogblok.

Door op deze manier een design op te bouwen, kom je tot een template (blauwdruk, sjabloon) voor een pagina, die is opgebouwd uit verschillende organismen. Het template gevuld met relevante content vormt uiteindelijk de pagina.

De stappen van atomic design doorlopen we bij TRES in de buildfase, die start zodra de thinkfase is afgerond en het eerste ontwerp is gepresenteerd en goedgekeurd. Als opdrachtgever heb je dan al een beeld van de stijl van de website (of andere toepassing): het perfecte startpunt voor atomic design.

Onze ontwikkelaars gaan vanaf dat moment aan de slag met het ontleden van het design in de verschillende basisblokjes. Door het opsplitsten van het ontwerp in atomen, elementen en organismen, creëren we een levende ‘design library’. Zie dit als een bibliotheek met de losse componenten. Het is een efficiënt online-designhandboek, met een collectie van alle herbruikbare elementen (buttons, formulieren, formuliervelden etc.) op een pagina. Op basis van deze library zien onze ontwikkelaars – én jij als opdrachtgever – snel hoe we alle componenten op diverse manieren met elkaar kunnen combineren, en kunnen we relatief eenvoudig en op een consistente manier nieuwe templates ontwerpen. 

Bij het ontwikkelen van een design library houden wij rekening met de regels en handvatten van de WCAG en A11Y om digitale toegankelijkheid te garanderen. Een standaard waar we mee werken is Block Element Modifier (BEM). BEM bevordert de consistentie en de kwaliteit van de code. Ook maken we gebruik van TailwindCSS. Dit is een stylesheet framework waarbij vooraf gedefinieerde stijlen en hulpmiddelen helpen consistenter te bouwen.  

Bij TRES hanteren we 7 TRES-normen gebaseerd op de WCAG:

Als we ergens een component aanpassen, wordt het automatisch overal in het design aangepast. Voor de ontwikkelaars betekent dit bovendien een kleinere, schonere programmeercode. Je kunt de design library bovendien toepassen voor al je marketingmiddelen, wat zorgt voor consistentie in je branding als geheel.

Door alles op te splitsen in kleine, herbruikbare bouwstenen, kunnen we onderdelen heel eenvoudig verfijnen, verwijderen of (op verschillende plaatsen) toevoegen.

Door te werken met een design library, is het niet nodig voor elke nieuwe toepassing een compleet nieuw design te maken; je kunt eindeloos doorbouwen met de blokjes die er al zijn. Dat scheelt enorm in tijd en geld.

Omdat de bouwblokjes herbruikbaar zijn, is een library snel en eenvoudig door te ontwikkelen. Daarbij laten nieuwe technieken en inzichten zich makkelijk integreren binnen atomic design.

Met atomic design ontwikkel je gericht componenten die je overal kunt hergebruiken. Ontstaat er ergens een foutje, dan repareren we dat op één plaats en wordt het vervolgens overal in het design gefixt.

De eigen design library blijft voor jou als opdrachtgever altijd inzichtelijk en beschikbaar. Zo kun je zelf eenvoudig meedenken als het gaat om nieuw te ontwikkelen componenten in het design.

Bij TRES werken we al jaren met atomic design, altijd gecombineerd met het streven naar een optimale user experience. Dat betekent dat we ons niet alleen richten op het visuele gedeelte van een design, maar ook nadrukkelijk op functionaliteiten en techniek. Doordat we werken met een basis-library, kunnen we nieuwe inzichten en eventuele bugs snel overal integreren en fixen en de designs dus voortdurend proactief doorontwikkelen.