Insights /
Design
Designsystemen in de praktijk: hoe Atomic Design je UI-workflow kan verbeteren.
)
)
Sinds 2013 pleit Brad Frost – webdesigner, spreker, auteur en bedenker van Atomic Design – voor deze methode. Zijn uitspraak? “Maak geen pagina’s, bouw systemen.”
Bij Born Digital is ons designteam constant op zoek naar systemen die onze workflow kunnen versnellen, verbeteren en vereenvoudigen. Sinds enkele jaren zijn wij dan ook op de Atomic Design-trein gestapt. Zo gebruiken wij het.
Wat is Atomic Design?
Allereerst is het belangrijk te begrijpen wat Atomic Design inhoudt. Atomic Design is een methode om digitale interfaces op te bouwen uit kleine, herbruikbare componenten. Deze noemen we Atoms, Molecules en Organisms. Samen vormen ze grotere structuren, die uiteindelijk Templates of Pages worden. Het model bestaat uit vijf niveaus:
Atoms → Basiselementen zoals knoppen, kleuren, schaduwen, velden of tags. Dit niveau combineert de foundation/branding van het product met kleine bouwstenen die later in grotere componenten (Molecules) worden gebruikt.
Molecules → Kleine combinaties van atoms, zoals navigatie-items, zoekvelden met knoppen, of cards met afbeelding, titel en knop. Deze vormen de bouwstenen van nog grotere componenten: Organisms.
Organisms → Grotere componenten, bijvoorbeeld headers, navigatiebalken of zoekfuncties.
De laatste twee niveaus zijn Templates en Pages. Bij Born Digital combineren we deze vaak afhankelijk van de wensen van de klant. Deze fase vormt meestal het volledige design, opgebouwd uit alle noodzakelijke bouwstenen.
Valkuilen van Atomic Design
Wanneer kan Atomic Design een valkuil zijn? Allereerst is het belangrijk te bepalen of een volledig Atomic System nodig is. Kleinere projecten vereisen niet altijd een compleet systeem, en het opzetten ervan kost tijd. Stel dus altijd eerst de vraag: is een Atomic Design System nodig?
Omdat wij voornamelijk aan grotere projecten werken, is het systeem voor ons vaak zeer nuttig. Toch is het cruciaal om het systeem goed te documenteren en af te stemmen met developers. Het gebruik van herbruikbare componenten vraagt discipline, omdat deze op veel plekken in een product terugkomen. Zonder documentatie weet het team bijvoorbeeld niet welke componenten al bestaan of hoe ze gebruikt moeten worden. Zonder documentatie en overleg kan het systeem al snel rommelig worden.
Samenwerking tussen design en development
Atomic Design verbetert de samenwerking tussen design- en developmentteams, omdat beide teams werken met dezelfde herbruikbare bouwstenen. Het creëert een gedeelde taal (bijvoorbeeld: Primary Button, USP Block).
Wanneer je werkt met Figma, fungeert dit systeem als een bibliotheek die developers direct in code kunnen gebruiken. Kort gezegd: Atomic Design slaat een brug tussen design en code.
Nog niet overtuigd?
Als een ordelijk, consistent en efficiënt designsystem nog niet genoeg is, denk dan aan schaalbaarheid. Naarmate een digitaal product groeit – met meer features, pagina’s en variaties – blijft alles beheersbaar dankzij herbruikbare componenten. Het team hoeft niet steeds nieuwe elementen te maken; een component dat eenmaal is ontworpen kan hergebruikt worden in verschillende contexten.
Hierdoor ontstaat ook een ander voordeel: snelheid. Nieuwe pagina’s of functionaliteiten kunnen veel sneller worden gebouwd omdat de bouwstenen al klaarstaan. Onderhoud wordt eveneens eenvoudiger: een component dat wordt aangepast, wordt overal automatisch bijgewerkt.
Hulp nodig met het opzetten van jouw Atomic Design System?
Bij Born Digital helpen we jouw bedrijf graag met het opzetten van een Atomic Design System. Neem gerust contact met ons op!