Atomic design – theorie

Geschreven door: op woensdag 5 juni 2019

Leestijd:

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

  • Het gebruik van een Photoslider

    Geschreven door: op maandag 7 oktober 2019

    Ze zijn er in alle soorten en maten en staan meestal bovenaan een websitepagina. Dan heb ik het natuurlijk over photosliders. Zo bent u vast bekend met de traditionele foto die langzaam vervaagd en wa ...

    Bekijk het artikel »
  • De Controversie van AMP (Accelerated Mobile Pages)

    Geschreven door: op maandag 30 september 2019

    Er heerst al controversie rondom AMP (Accelerated Mobile Pages) sinds Google dit onderwerp heeft ingevoerd! In deze blog duiken we verder in deze controversie en ontdekken we of deze controversie tere ...

    Bekijk het artikel »
  • CSS attribuut font-display

    Geschreven door: op maandag 30 september 2019

    De snelheid van je website is belangrijk. Niet alleen omdat Google je website hierdoor hoger rankt maar ook omdat het gebruiksvriendelijker is voor de bezoekers. Als een website traag laadt, ben je ee ...

    Bekijk het artikel »
Bel 072 5345 888
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten