Atomic design – theorie
In dit blog ga ik in op het ontwerpen van een website door middel van modulaire ontwerpen. Namelijk; Atomic Design, dit is een theorie bedacht door webdesigner Brad Frost. Atomic design staat voor het opdelen van designs in atomen, meerdere atomen vormen samen moleculen, die moleculen vormen zich tot organismen en deze organismen tot een materie. In dit geval is de materie hier het template en meerdere templates vormen een webpagina.
Waar kun je aan denken bij de verschillende lagen?
Atomen: Bij atomen heb je het met name over kleuren, typografie, buttons, invoervelden en titel- en broodteksten.
Moleculen: Een button, een afbeelding, een titel en een tekst kunnen samengesmolten worden als een product-tegel. Zo combineer je atomen tot een molecuul.
Organismen: Door meerdere product-tegels naast elkaar te brengen in een lijst doet het zich al voor als een catalogus. Hierin is de catalogus het organisme.
Templates: Templates kun je zien als wireframes van een site, meerdere organismen georganiseerd tot een template.
Pagina: Een template is pas een webpagina voor een gebruiker wanneer er representatieve content instaat.
Waarom zou ik gebruik maken van Atomic design?
Er zijn een aantal voordelen aan het gebruik van Atomic design binnen een team.
- Tijd is een belangrijk voordeel, doordat je als designer atomen heb gedefinieerd kom je veel sneller tot een molecuul
- Kwaliteit in consistentie op een website, bij het definiëren van atomen zorg je ervoor dat de atomen visueel en interactief in elkaar kunnen worden geschoven als bouwstenen. Gebruiker zal deze consistentie en patronen herkennen waardoor de gebruiksvriendelijkheid omhoog gaat.
- Atomic design is flexibel bij aanpassingen, zo kun je door één of meerdere atomen aan te passen, complete modules snel updaten. Doordat de definitie centraal zijn opgebouwd vanuit atomen.
- Door het maken van een goede documentatie van atomen, houdt je overzicht in het team en bij de klant.
Hoe ziet zo’n documentatie er dan uit?
Een atomic design documentatie is eigenlijk een inventaris van alle atomen en patterns in een beeld. Hierin verzamel je en categoriseer je alle onderdelen in een overzichtelijk document. Zo is er snel controle of alle atomen consistent zijn vormgegeven en een groot voordeel van dit document is dat je visueel gelijk kan zien of de atomen aantrekkelijk zijn in combinatie met elkaar. Zie hieronder hoe wij bij Sigma solutions een atomic design documentatie ontwikkelen in Adobe XD.
> Lees hier het vervolg over het wireframen met atomic design
