Archief

Consistentie met atomic design

In de discipline webdesign wint atomic design stevig aan terrein. Deze modulaire ontwerpmethode heeft impact op de manier waarop (corporate) websites worden ontwikkeld. Het is belangrijk deze webdesigntrend in het juiste perspectief te plaatsen, want een integrale aanpak blijft noodzakelijk.

Van atoom naar website

Al in 2013 introduceerde Brad Frost deze modulaire ontwerpmethode, die inmiddels een hoge vlucht neemt. Atomic design is in feite geen daadwerkelijk design, in tegenstelling tot bijvoorbeeld flat design en material design. De ontwerpmethode is geïnspireerd op de modulaire opbouw zoals die bekend is van chemie en scheikunde. Volgens atomic design vormen de basiselementen waaruit een webpagina is opgebouwd, het startpunt. Dat zijn de zogenoemde ‘atomen’, zoals een tekstveld, icoon en knop. Deze atomen vormen samen een molecuul, bijvoorbeeld een zoekbalk. Dat molecuul is op zijn beurt weer onderdeel van een complexer geheel: het organisme. Een header is daarvan een voorbeeld. Een website is volgens dit principe dus opgebouwd uit verschillende organismen, die weer bestaan uit afzonderlijke moleculen en atomen.

 

De modulaire opbouw zorgt bovendien voor een efficiënt ontwerpproces en consistente code bij de technische realisatie van een site.

Guido Slager (BOOM Communicatie)

 

“Een webpagina is volgens atomic design dus een samenstelling van allemaal kleinere designelementen,” legt Guido Slager uit, ontwerper bij BOOM Communicatie. “De samenhang in die elementen waarborgt de consistentie in het design. De gebruiker ziet namelijk steeds dezelfde elementen terugkomen. Dat zorgt voor herkenbaarheid.”

Atomic design kent, naast die herkenbaarheid, nog enkele voordelen. De verschillende designelementen zijn eenvoudig te hergebruiken. Is er sprake van een aanpassing of uitbreiding, dan vormen de al bestaande ‘atomen’ de basis voor een oplossing die aansluit op het bestaande design. “De losse designelementen zijn ook duidelijke uitgangspunten in een stijlgids. Meerdere personen kunnen dan op een eenduidige manier met designtaken aan de slag”, vult Slager aan. “De modulaire opbouw zorgt bovendien voor een efficiënt ontwerpproces en consistente code bij de technische realisatie van een website, intranet of extranet.”

 

 

De rol van wireframes

De opkomst van atomic design is in de praktijk zichtbaar: het vormt steeds vaker het vertrekpunt bij een ontwerpproces. Zo worden ook de wireframes in atomic design opgebouwd vanuit de losse designatomen. “Toch is het verstandiger om atomic design en wireframing gescheiden te houden”, adviseert Slager. “Een wireframe is de bouwtekening van een webpagina. Het komt een website ten goede als de informatiestructuur, de navigatie en benodigde functionaliteiten los van visuele elementen in een interactieontwerp worden geplaatst. Met atomic design kan dat ontwerp vervolgens sterk en consistent worden vormgegeven.”