Atomic design – theorie

Geschreven door: op woensdag 5 juni 2019

Leestijd: 2 minuten

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

  • Relationele data importeren in SQL vanuit Excel

    Geschreven door: op maandag 29 maart 2021

    In SQL Server kan je snel data importeren vanuit Excel-bestanden met behulp van OPENROWSET. Deze functie impoteert een werkblad in het Excel-bestand en plaatst de inhoud in een query, die je kan SEL ...

    Bekijk het artikel »
  • Google Page Experience

    Geschreven door: op vrijdag 26 maart 2021

    Wat is Google Page Experience?Voor de nieuwe update van Google die de algoritme gaat bepalen staat de Page Experience centraal, dit staat voor het centraal stellen van de gebruikerservaring.Zoals de ...

    Bekijk het artikel »
  • Verbeter je technische seo met behulp van SEMrush

    Geschreven door: op vrijdag 26 maart 2021

    Sigma Solutions gebruikt SEMrush om te monitoren wat de SEO staat van de website is van onze klanten. Dit systeem geeft meldingen wanneer er verbeteringen gevonden worden om beter te ranken in de zoek ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Bekijk al onze tevreden klanten ›
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 »

E-book

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

Download het E-book ›