Atomic design – theorie header image

Atomic design – theorie

woensdag 5 juni 2019 ·Leestijd: 2 minuten
contacteer auteur:

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

visual-design-specification-sheet.jpg


Andere blogartikelen

B2B E-commerce… Wakker worden!
Geschreven door
op dinsdag 28 juni 2022
Veel B2B-bedrijven in blijven hangen in; nauwelijks vindbare, verouderde B2B e-commerce websites met minimale conversiemogelijkheden en een betreurenswaardige gebruikerservaring. Zonde!
B2B Leadgeneratie: Alles wat je altijd al wilde weten!
Geschreven door
op maandag 27 juni 2022
B2B online leadgeneratie is het proces van het identificeren van de ideale klanten voor uw product of dienst, en hen vervolgens overhalen tot aankoop. Het is een essentiële activiteit voor B2B sales- en marketingteams.
Wat maakt een B2B webshop succesvol?
Geschreven door
op zondag 26 juni 2022
De opmars van de B2B webshop neemt toe. Regelmatig krijgen wij de vraag of er een groot verschil is tussen een consumentgerichte webshop en een puur B2B gedreven webshop. In deze blog leggen wij u uit hoe een B2B webshop succesvol kan zijn en worden.
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€º