Atomic Design; waarom wij het gebruiken

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?

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?