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

  • Overeenkomsten tussen Growth Hacking en UX design

    Geschreven door: op zondag 13 september 2020

    Laten we beginnen met wat Growth hacking is, Growth hacking zijn experimenten voor oplossingen die groeiproblemen moeten oplossen. Dit is een nieuwe marketing aanpak die met name wordt gedreven door d ...

    Bekijk het artikel »
  • B2B SEO en Geoptimaliseerde Afbeeldingen

    Geschreven door: op woensdag 12 augustus 2020

    In een tijd waarin 27% van het koopproces van B2B kopers met eigen online research wordt doorgebracht is het essentieel om een goed vindbare website te hebben. Afbeeldingen kunnen, indien geoptimalise ...

    Bekijk het artikel »
  • Prospects zoeken B2B

    Geschreven door: op woensdag 12 augustus 2020

    Het zoeken van B2B prospects is een uitdaging voor elk bedrijf. Met name kwalitatieve B2B prospects.Door vooraf onderzoek te doen naar bedrijven die voldoen aan je criteria en je marketing hierop aan ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
AOC is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
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