Onze website is niet geoptimaliseerd voor Internet Explorer omdat deze browser niet meer ondersteund wordt. Wij raden aan om over te stappen op Microsoft Edge.

Digitale oplossingen die verbinden

kennis

Atomic Design; waarom wij het gebruiken

Designen aan de hand van atomen, moleculen en organismen. Wij doen dat graag. Lees meer over waarom wij werken aan de hand van het Atomic Design principe.

Atomic Design voor de ontwikkeling van snelle, veilige websites, online platformen en digitale portalen

Voor onze online producten hechten wij grote waarde aan de schaalbaarheid. Door 'future-proof' te ontwikkelen, bouwen wij platforms en websites die niet alleen nu goed werken, maar ook over vijf jaar. Aan de basis van ieder project staat het visuele design. Hoe zorgen wij dat het design staat als een huis voor de doorontwikkeling van onze projecten? That's where Atomic design comes in!

Wat is Atomic Design?

Atomic Design is een werkwijze voor het opbouwen van designs, ontwikkeld in 2013 door Brad Frost. In 2016 legde hij zijn filosofie vast in zijn boek 'Atomic Design', wat tot op heden een van de bestverkochte design boeken is en voor veel teams geldt als de 'gouden standaard' in (web)design.

Een design met atomen, moleculen en organismen

Zoals de naam al doet vermoeden, is het concept gebaseerd op verschillende elementen uit de chemie. In dit geval wordt het design opgebouwd uit atomen, moleculen en organismen die gezamenlijk het gehele design vormen.

Onder atomen vallen alle fundamentele onderdelen van het design, zoals de typografie en kleuren, maar ook invoervelden, knoppen en iconen. Afzonderlijk zijn deze atomen niet bruikbaar. Samengevoegd tot moleculen wel.

De moleculen vormen de bouwstenen van het design en bestaan uit verschillende atomen. Een icoon, invoerveld en knop vormen zo bijvoorbeeld samen een zoekveld. Meerdere moleculen samen vormen organismen.

Organismen zijn 'complexe' designelementen en kunnen op meerdere plekken in het design hergebruikt worden. Denk hiervoor bijvoorbeeld aan menu-items, dropdowns en zoekvelden die samen de navigatie vormen.

Verschillende organismen samen vormen de templates. Dit noemen wij ook wel 'wireframes'. Deze templates bepalen samen de structuur van het uiteindelijke product en vormen de basis voor de pagina's.

De pagina's bestaan uit de templates met de gevulde representatieve content. In deze fase kan het designsysteem worden getest en de feedback worden verzameld. Wat gebeurt er bijvoorbeeld met het design als de echte content twee keer zo lang is als verwacht?

"We’re not designing pages, we’re designing systems of components."
Design system voor hoogwaardig webdesign Avocado Media
Atomic Design presentatie Avocado Media

Waarom Atomic Design?

Het gebruik van de richtlijnen van Atomic Design biedt ons de volgende voordelen:

  • Een gebruiksvriendelijk resultaat door consistentie en herkenbaarheid in het design
  • Wij kunnen efficiënter ontwikkelen, testen en documenteren door standaardisering in het design
  • Soepel samenwerken tussen verschillende designers door de duidelijke structuur en richtlijnen

Het gebruik van Atomic Design staat aan de basis van het ontwikkelen van een design system. Benieuwd wat wij voor jou op design gebied kunnen betekenen? Laat van je horen!

Benieuwd hoe wij jou kunnen helpen ?

We adviseren je graag tijdens een vrijblijvende kennismaking.

Plan een kennismaking
Geschreven door

Marvin Zuiderhoek

Deel dit verhaal

Meld je aan voor onze nieuwsbrief!

Wij zijn bereikbaar

020 737 12 65

info@avocado-media.nl

Op werkdagen van 09:00 tot 17:00

Plan een kennismakingsgesprek

2016 - 2021 | Avocado Media

Scroll down

Back to top