Atomic wat?
Voor consistentie in identiteit wordt al jaren een huisstijlgids gebruikt. Tegenwoordig voegen we daar nog een belangrijk element aan toe: consistentie in je user experience (UX). Dit is tegenwoordig namelijk minstens zo belangrijk. Helaas zien we in veel gevallen dat design/identiteit nog altijd de overhand heeft, terwijl er dan bijvoorbeeld een concessie gedaan wordt op gebruiksvriendelijkheid. Digitale producten dienen echter op alle apparaten hetzelfde gebruiksgemak te leveren, evenals er hetzelfde uit te zien om herkenbaarheid te behouden. Atomic Design van Brad Frost speelt hierop in.
We merken namelijk dat het nog altijd gebruikelijk is om een huisstijlgids als uitgangspunt te nemen bij het ontwikkelen van bijv. een nieuwe website. Vanuit de identiteit die bepaald is in de huisstijlgids worden vervolgens verschillende pagina’s uitgewerkt, waarbij iedere pagina weer een project apart is. De valkuil in dit verhaal is dat iedere pagina separaat wordt ontwikkeld, waarbij de kans op inconsistentie enorm toeneemt. Niet alleen per pagina, maar ook nog eens per device. Een consistente UX bestaat tegenwoordig namelijk uit veel verschillende elementen en niet alleen typografie, layout en kleurstelling. Wat dacht je bijvoorbeeld van interacties of animaties?
Maar wat is Atomic Design nou eigenlijk?
Atomic Design is geïntroduceerd door Brad Frost in 2013. Het concept is gebaseerd op chemie waarbij een design opgedeeld wordt in atomen. Atomen vormen gezamenlijk moleculen, die vervolgens weer vertalen naar complexere organismen en uiteindelijk templates en dus pagina’s vormen. In essentie komt zijn idee dus op het volgende neer: deel designs op in deeltjes en werk vanuit dat punt naar een groter geheel.
Bron: bradfrost.com
Pascal Cartigny
Accountmanager
Dat klinkt leuk, maar zegt je waarschijnlijk nog niets.
Snap ik. Daarom gaan we de onderdelen gezamenlijk even af, zodat het concept je al gauw duidelijk wordt.
- Atomen: de atomen zijn eigenlijk fundamentele onderdelen van een design. Opgesplitst tot op de kleinste details. Denk hierbij aan standaard onderdelen uit een huisstijlgids (bijv. kleur, typografie) maar aangevuld met elementen zoals knoppen, labels, invoervelden, selectievakjes of paragrafen. Los van elkaar zijn ze niet te gebruiken, maar gecombineerd (als molecule) juist wel. Door elementen op dit niveau op te knippen wordt in één bibliotheek van elementen al heel snel duidelijk of de atomen überhaupt wel op elkaar aansluiten.
Onderstaande ‘Periodic Table of HTML Elements’ van Josh Duck laat duidelijk zien hoe ver je daarin kan gaan. Dit staat even los van het feit dat je natuurlijk bij lange na niet altijd zo in-depth hoeft te gaan.
Bron: atomicdesign.bradfrost.com
- Moleculen: zoals reeds besproken zijn atomen op zichzelf niet heel veel waard. Echter, combineer je een label, invoerveld én een knop, dan heb je ineens een zoekveld.
- Organismen: de moleculen zijn simpelweg bouwstenen. Combineer je deze bouwstenen, dan heb je een sectie van een design welke we een organismen noemen. Een organismen ‘header’ kan bijvoorbeeld bestaan uit de volgende componenten: logo, navigatie, zoekformulier en header image. Dit organisme valt vervolgens weer op meerdere plaatsen te hergebruiken en waarborgt zowel identiteit als UX.
- Templates: een template wordt uiteindelijk gevormd uit een groep organismen die gecombineerd een pagina beginnen te vormen. In veel gevallen worden dit ook de wireframes genoemd, oftewel de blauwdruk.
- Pagina’s: het allerlaatste niveau is de uiteindelijke pagina. Ofwel, een template gevuld met content.
Nog te vaag? I got you covered. Onderstaande afbeelding weergeeft een perfect voorbeeld hoe Atomic Design is toegepast op een app als Instagram. Het concept mag van origine dan wel bedacht zijn voor webdesign (bedacht door een webdesigner), het is vrij eenvoudig toe te passen op alle digitale aspecten die een gebruikersinterface behoeven.
De voordelen van Atomic Design
Laten we vooropstellen dat het allergrootste voordeel dat je hiermee bereikt consistentie is. Consistentie in identiteit én user experience. Door het gebruik van Atomic Design creëer je een feilloze merkbeleving over diverse kanalen.
Door de consistentie vergroot je de herkenbaarheid wat op zijn beurt weer de gebruiksvriendelijkheid bevorderd. Zodra de gebruiker bepaalde patronen in het gebruik ervaart zal deze eenvoudiger gebruik maken van bijvoorbeeld de website, maar ook bijbehorende apps. Mits hier natuurlijk dezelfde patronen zijn gehanteerd. De persoon in kwestie is dan ook sneller geneigd om een nieuw product zoals een app als prettig te ervaren.
Als ontwikkelaar levert standaardisering op dit niveau ook een hoop efficiëntie op in ontwikkelen, testen en documenteren. Er zijn ook productietools (bijv. Sketch) die al gebruik maken van de efficiëntie mogelijkheden die dit biedt, zo stellen ze je in staat om een molecule centraal op een plek aan te passen, zodat deze vervolgens in ieder template netjes wordt bijgewerkt.
En dan nog het meest voor de hand liggende voordeel: het is net als een huisstijlgids een richtlijn. Ideaal dus als je met meerdere designers samenwerkt.
Modulaire blokkendoos
Uiteindelijk is het resultaat een website die opgebouwd is als modulaire blokkendoos. Het brengt je in de gelegenheid om middels verschillende organismen een herkenbaar en gebruiksvriendelijk template te creëren voor praktisch ieder scenario. Bouw middels deze modulaire blokkendoos je pagina’s doordacht op (vertel bijvoorbeeld het gehele verhaal op een pagina en voorkom pingpong gedrag onder je bezoekers om tot een compleet plaatje te komen) en je creëert een gebruiksvriendelijk product (bijv. website) welke een conversie in de hedendaagse digitale wereld sterk bevorderd.
