Atomic Design
Onze designers werken gedisciplineerd, gestructureerd én met veel plezier aan de look & feel van jouw website, app of andere online applicatie. Maar hoe pakken ze dat aan? Er zijn verschillende methoden om tot de perfect fit te komen. Eén van die methodes is Atomic Design. De methode is simpel, helder en ondertussen niet meer weg te denken als tool voor UX-/UI-ontwerpers. Voor de gebruiker van een app of de bezoeker van een website zorgt het voor een interface met een heldere en consistente beeldtaal. Voor ontwikkelaars en designers is het een prettige richtlijn voor het ontwerpen en ontwikkelen van die beeldtaal. We nemen je graag mee in de basisprincipes van Atomic Design.
De gedachte achter Atomic Design
Weet je nog, vroeger op school: de scheikundelessen en het leren over moleculen en atomen? En het mooiste van alles: in het Periodiek Systeem van Elementen komen álle bouwstenen voor die de basis vormen van onze wereld. Op die gedachte is Atomic Design ook gebaseerd.
Hoe zit dat? In scheikunde hebben elementen vaste kenmerken: de atomen voor zuurstof en waterstof hebben bijvoorbeeld hun eigen, unieke eigenschappen. Maar door ze te combineren, ontstaan moleculen met nieuwe karakteristieken. Zoals bijvoorbeeld water. Het idee dat je vanuit kleine elementen combinaties kunt maken die leiden tot grotere structuren, heeft een duidelijke parallel met design.
Klinkt nog wat abstract? Laten we eens verder inzoomen op de methode:
De 5 niveaus van Atomic Design
In de Atomic Design methode kennen we 5 niveaus, waarbij de eerste 3 zijn gebaseerd op vergelijkbare principes uit de scheikunde. Elk niveau is samengesteld uit elementen uit het onderliggende niveau, met als laagste het niveau van “atomen”:
Atomen
Moleculen
Organismen
Templates
Pagina’s
Atomen
Net zoals in de scheikunde, zijn atomen de kleinste bouwstenen in het systeem. In plaats van zuurstof of waterstof, maken we met Atomic Design gebruik van elementen zoals buttons, formuliervelden, icons, typografie en kleur. Allemaal bouwstenen die samenkomen in het volgende niveau: Moleculen.
Moleculen
Op moleculair niveau combineren we deze bouwstenen, met elk hun unieke eigenschappen, om nieuwe sets te maken. Bijvoorbeeld: door een avatar element te combineren met tekstlabels voor naam en functie, ontstaat een profiel molecule. Elke bouwsteen draagt daarbij zijn eigenschappen over naar een set met nieuwe eigenschappen.
Op die manier kunnen we dezelfde bouwstenen telkens op andere manieren inzetten om te komen tot sets met een eigen karakter. Op het niveau van moleculen zijn het natuurlijk nog relatief simpele combinaties: een profiel element, een formulier, een lijst element.
Organismen
Op het niveau van organismen wordt het al wat complexer. Neem ons voorbeeld van een profiel molecule dat uit 3 atomen bestaat: als we dat combineren met andere moleculen en elementen, zoals navigatie en een coverfoto, ontstaat er een header voor een profielpagina. En als je datzelfde profiel molecule gebruikt in een lijst, en paginerings elementen toevoegt, kan er een overzicht van gebruikers ontstaan.
Het organisme is nog geen compleet design, maar een component dat telkens opnieuw ingezet kan worden in het ontwerp.
Wat zijn dit? Misschien beter een ander woord gebruiken?
Templates
In een template beginnen we met het sorteren van moleculen en andere elementen om te komen tot een samenhangend geheel.
Op organisme niveau zagen we dat elementen bruikbare blokken werden. Deze blokken komen in een template samen tot iets wat op een pagina begint te lijken.
Als we verder gaan met het organisme voor een profielheader en daar andere organismen aan toevoegen, zoals contactinformatie, skill level etc., ontstaat een template voor een profielpagina.
Pagina’s
Pagina’s zijn het laatste niveau van de Atomic Design methode. Hier maken we verschillende varianten van templates. In ons voorbeeld zouden dat verschillende afzonderlijke profielen kunnen zijn. In het uiteindelijke ontwerp zul je waarschijnlijk niet alle varianten uitwerken, maar het helpt om er een paar te maken. Bijvoorbeeld om te testen of je design nog steeds werkt met hele lange en hele korte namen.
Of, als verschillende organismen uiteindelijk optioneel zijn, om te kijken hoe dat uitpakt in het ontwerp. Als er aanpassingen nodig zijn, kun je telkens teruggaan naar een specifiek onderliggend organisme. De wijzigingen die je daarin aanbrengt, gelden dan automatisch voor alle templates en pagina’s waarin dat organisme voorkomt.
Pagina’s zijn ook het niveau waar de meeste klanten en stakeholders het design op zullen beoordelen, omdat daar natuurlijk alles bij elkaar komt. In sommige gevallen kun je klanten meenemen in het reviewen van templates om te kijken hoe bepaalde elementen samenwerken, of te testen op volledigheid van informatie.
Atomic Design toepassen
Eigenlijk is Atomic Design vrij rechttoe rechtaan. Ontwerpers passen de methode vaak zelfs al impliciet toe. UX/UI design gaat namelijk in de basis om het opstellen van regels voor hoe de interactie zou moeten werken. Zaken als consistentie en herkenbaarheid zijn daar een belangrijk onderdeel van. De Atomic Design methode zorgt voor een praktisch framework om dat voor elkaar te krijgen.
Zeker bij heel complexe of omvangrijke ontwerpprojecten, is deze methode een uitkomst. Alle componenten en pagina’s bouw je immers op uit kleine bouwstenen: de look & feel blijft dus overal hetzelfde.
Daarnaast helpt het bij het overdragen van een ontwerp (met bijbehorende rationale aan klanten en ontwikkelaars, of zelfs een ander designteam.
