Wat hebben atomen, organismen en moleculen met een website te maken?

Geen website is hetzelfde. Door de unieke strategische doelstellingen per opdrachtgever is elk traject weer volledig nieuw. Voor onze programmeurs is het steeds weer een uitdaging om je bijzondere ontwerpen van onze vormgevers om te zetten naar een werkzame website. Om dit proces zo goed mogelijk te laten verlopen werken we op basis van 'atomic design'. In dit blog lees je wat het is en hoe het werkt.

DRY: Don’t repeat yourself

Het schrijven van code is een tijdrovend proces, zeker wanneer de lat hoog ligt. We hebben echter ook te maken met een budget, een deadline en een klant die staat te popelen de nieuwe website in gebruik te nemen. Het is daarom belangrijk dat de geschreven code efficiënt wordt ingezet, en zo vaak mogelijk hergebruikt wordt. Developers noemen dit DRY werken: Don’t Repeat Yourself.

Dat klinkt simpel genoeg, toch is het in de praktijk vaak niet eenvoudig. Als een element in de code aangepast moet worden kan dit een lange zoektocht ontketenen naar de verschillende locaties waar deze code voorkomt. Projecten beginnen daarom overzichtelijk, maar eindigen een stuk minder gestructureerd. Om dit probleem te voorkomen, en code zo efficiënt mogelijk in te zetten, werken we bij B2 met het Atomic Design principe van Brad Frost.

De chemie tussen ontwerp en realisatie

Nog voor er een regel code geschreven wordt analyseren onze front-end developers het ontwerp. Tijdens dit proces gaan we op zoek naar elementen die vaak voorkomen en plaatsen deze in een zogeheten stylesheet. Er wordt hierbij onderscheid gemaakt tussen 3 niveaus in elementen:

• Atomen
• Moleculen
• Organismen

De kleinste onderdelen uit het ontwerp worden de atomen genoemd. Dit zijn onder andere de kleuren, titels, uitlijning van de teksten en knoppen.

Moleculen zijn onderdelen die een stap groter zijn dan atomen. Denk bijvoorbeeld aan een links met afbeeldingen, een contactformulier en afbeeldingen. Moleculen bestaan over het algemeen uit een verzameling van atomen.

De grootste onderdelen worden de organismen genoemd. Deze elementen worden op hun beurt weer opgebouwd uit een aantal verschillende moleculen. Voorbeelden hiervan zijn het menu, de footer en headers.

Door dit overzicht te creëren kan een programmeur op een gestructureerde manier werken met de verschillende elementen. Het wordt makkelijker om het overzicht te bewaren. De code voor ieder onderdeel hoeft maar één keer geschreven te worden, en kan makkelijk hergebruikt en teruggehaald worden.

Daarnaast worden verschillen in het ontwerp snel zichtbaar. Dit heeft als bijkomend voordeel dat ook de vertaling naar het online product constanter wordt. Wil je hier meer over weten? Brad Frost gaat een stuk uitgebreider in op de materie op zijn eigen site.

Webdevelopment is een gebied dat zich snel razendsnel ontwikkelt. Door tools als Atomic Design in te zetten blijven onze programmeurs zich constant verbeteren, wat uiteindelijk resulteert in mooiere, betere en snellere websites.