Atomic Design is een manier om gebruikersinterfaces op te bouwen door klein te beginnen en steeds een laag hoger te gaan. De term komt van Brad Frost en leent uit de scheikunde: de kleinste bouwstenen zijn atoms, die samen molecules vormen, daarna organisms en uiteindelijk hele templates en pagina’s.
Zie het als LEGO. Eén steentje (een atom, bijvoorbeeld een knop) doet op zichzelf weinig. Klik er een paar aan elkaar en je hebt een zoekbalk (een molecule). Voeg die samen tot een navigatiebalk (een organism) en ineens heb je een echt, herbruikbaar deel van je scherm. De laatste twee lagen tellen net zo zwaar: een template legt het skelet van een pagina vast, en een page is dat skelet gevuld met echte content, waar het ontwerp eindelijk de realiteit raakt.
De winst zit in consistentie en snelheid. Omdat elk scherm uit dezelfde geteste onderdelen wordt samengesteld, oogt je product samenhangend en werkt een aanpassing aan één component meteen overal door. Het sluit mooi aan op een headless CMS, waar content deze componenten vult, en op een degelijke CI/CD-pijplijn die visuele afwijkingen opvangt voordat ze live gaan.
De bekende valkuil is te ver opsplitsen. Hak je alles te fijn op, dan krijg je een doolhof van piepkleine onderdelen die niemand terugvindt, en dat remt het team juist af. De niveaus zijn een richtlijn, geen wet, dus ‘molecule’ overslaan mag prima als een component dat niet nodig heeft. Voor een groeiend SaaS-product wint een bibliotheek die makkelijk doorzoekbaar is het van een die technisch zuiver is.
Bij TopDevs gebruiken we atomic design om componentbibliotheken te bouwen waar klanten mee kunnen meegroeien. Een nieuwe pagina maken wordt zo een kwestie van bestaande blokken stapelen, niet opnieuw beginnen.
