Atomic Design: atoms, molecules en organisms
Categoriseer componenten als atoms, molecules, organisms, templates en pages om een gedeelde woordenschat tussen design en engineering te creëren.
Atomic Design: atoms, molecules en organisms is een gratis Frontend Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat is Atomic Design?
Atomic Design (Brad Frost, 2013) is een mentaal model om UI-componenten te organiseren in vijf niveaus van complexiteit: Atomen, Moleculen, Organismen, Sjablonen en Pagina's. Het geeft ontwerpers en engineers een gedeelde terminologie.
Atomen — de kleinste bouwstenen
Componenten voor één doel die niet verder kunnen worden opgesplitst. Knoppen, invoervelden, pictogrammen, labels en kleurstalen. Ze zijn abstract en in elke context herbruikbaar.
// Atoms (examples)
<Button variant="primary">Save</Button>
<Input type="email" name="email" />
<Icon name="chevron-right" />
<Label htmlFor="email">Email</Label>Moleculen — eenvoudige componentgroepen
Combineer atomen om iets nuttigs te doen. Een SearchBar is een Input + Button + Icon. Een FormField is een Label + Input + ErrorMessage. Ze zijn nog steeds algemeen inzetbaar.
function SearchBar({ onSearch }) {
return (
<div className="search-bar">
<Input placeholder="Search..." />
<Button onClick={onSearch}>
<Icon name="search" />
</Button>
</div>
);
}Organismen — complexe secties
Grotere composities die afzonderlijke secties van een gebruikersinterface vormen: een Header (logo + navigatie + zoekbalk + gebruikersmenu), een ProductCard (afbeelding + titel + prijs + knop) en een SignupForm. Ze zijn meer contextbewust.
function Header({ user }) {
return (
<header>
<Logo />
<Navigation links={navLinks} />
<SearchBar onSearch={handleSearch} />
<UserMenu user={user} />
</header>
);
}Sjablonen — paginaskeletten
Indelingen op wireframeniveau die organismen rangschikken zonder echte inhoud. Een BlogTemplate heeft een Header, een Main met Article-slots en een Sidebar.
function BlogTemplate({ header, article, sidebar, footer }) {
return (
<div className="blog-layout">
{header}
<div className="main">
<main>{article}</main>
<aside>{sidebar}</aside>
</div>
{footer}
</div>
);
}Pagina's — echte inhoud
Sjablonen met echte inhoud. De pagina /blog/[slug] rendert BlogTemplate met het daadwerkelijke bericht, widgets in de zijbalk en interface-elementen.
Mapstructuur
Veel teams organiseren componenten per niveau.
src/components/
atoms/
Button.tsx
Input.tsx
Icon.tsx
molecules/
SearchBar.tsx
FormField.tsx
organisms/
Header.tsx
ProductCard.tsx
templates/
BlogTemplate.tsx
pages/
BlogPage.tsxVoordelen
Gedeelde terminologie tussen ontwerpers en ontwikkelaars. Stimuleert compositie boven duplicatie. Maakt het eenvoudiger om ontwerpsystemen te bouwen. Stimuleert het denken vanuit de kleinste herbruikbare eenheid.
Kritiek: strikte categorisering is lastig
In de praktijk is de grens tussen een molecuul en een organisme vaag. Veel teams eindigen met discussies over waar iets thuishoort — waardoor het doel van duidelijkheid verloren gaat.
Modern alternatief: op functies gebaseerd
Veel grote React/Vue-codebases organiseren zich liever per functie (auth/, checkout/, dashboard/) dan volgens strikte atoomniveaus. Atomic werkt nog steeds goed voor de gedeelde laag van het ontwerpsysteem.
Atomic in Storybook
Storybook past goed bij Atomic Design — de hoofdcategorieën Atoms, Molecules en Organisms maken de componentbibliotheek gemakkelijk te doorzoeken.
Wanneer gebruik je Atomic Design?
Het meest geschikt voor: bibliotheken van ontwerpsystemen die door meerdere apps worden gedeeld, grote teams die een gedeeld mentaal model nodig hebben en projecten met actieve betrokkenheid van ontwerpers. Overslaan bij: kleine apps, prototypes en functiegerichte SPA's waarin colocatie belangrijker is.
Korte controle
Wat voor soort component is in Atomic Design een SearchBar die is opgebouwd uit een Input + Button + Icon?
Samenvatting: Atomic Design
Vijf niveaus: Atoms (Button, Input, Icon), Molecules (SearchBar, FormField), Organisms (Header, ProductCard), Templates (indelingen) en Pages (echte inhoud). Gedeelde terminologie en compositie als uitgangspunt. De mapstructuur weerspiegelt de lagen. Het meest geschikt voor gedeelde ontwerpsystemen; functiegebaseerde mappen werken voor appcode vaak beter dan Atomic.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Atomic Design: atoms, molecules en organisms” gratis?
Ja — de volledige tekst van “Atomic Design: atoms, molecules en organisms” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “Atomic Design: atoms, molecules en organisms”?
Categoriseer componenten als atoms, molecules, organisms, templates en pages om een gedeelde woordenschat tussen design en engineering te creëren. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Atomic Design: atoms, molecules en organisms”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?
Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Atomic Design: atoms, molecules en organisms
- Monorepo instellen met Turborepo
- Micro-frontends: Module Federation
- Mappenstructuur op basis van features