Scheikunde voor designers: Atomic Design

Door Lieve Sonke, art director
26 juni 2017 - 2171 x bekeken - Categorieën: Design, Kennis

De wereld van design en vooral front-end staat nooit stil. Elke maand en soms zelfs wekelijks ontdekken we nieuwe technieken en frameworks om ons werk te stroomlijnen. Ongeveer een jaar geleden zijn we vanuit ons design team begonnen met het onderzoeken en implementeren van Atomic Design.

Wat is Atomic Design?

Atomic design is een design methodiek ontwikkeld door Brad Frost en hij voorkomt hiermee het zogenaamde “over designen”. Door Atomic Design komen Design en Front-end namelijk sneller samen. Dus niet meer 35 pagina’s uitwerken in Sketch of Photoshop, maar een concept designen en vervolgens op basis van schetsen en wireframes een design systeem opbouwen. De methode is in basis vrij simpel. Onderstaande illustratie maakt meteen een hoop duidelijk:

Elk design systeem is dus opgebouwd uit atomen. Deze atomen bestaan bijvoorbeeld uit: huisstijlkleuren, iconen en fonts. Met de atomen vormen we moleculen. Hier komen atomen samen. Dit is bijvoorbeeld een call-to-action button of een zoekveld. Met moleculen kunnen we organismes gaan vormen. Organismes zijn bouwstenen die we op meerdere plekken in het project terug kunnen laten komen. Denk bijvoorbeeld aan headers, footers, uitklapmenu’s, hero visuals of formulieren. Onderstaand een aantal snippets van design systemen ontwikkeld voor onze klanten. 

We hebben inmiddels een concept (vaak een homepage of belangrijke pagina) en schetsen en/of wireframes van de pagina’s die we nodig hebben. En we hebben alle elementen om schermen op te gaan zetten. Vervolgens vindt het grootste kantelpunt plaats ten opzichte van bestaande design methodieken. We gaan niet alle pagina’s 1 voor 1 uitwerken in visual design. Nee, we gaan ze samen met front-end meteen in code templates opzetten. Dit zorgt ervoor dat front-end meteen op de hoogte is van alle elementen die het design systeem vormen en er ontstaan meteen inzichten vanuit techniek om bepaalde issues te tackelen.

Lekker kort - en wat zijn de voordelen?

We hebben deze methode uiteraard niet zomaar omarmd. Inmiddels hebben we flink wat projecten op basis van Atomic design opgezet en succesvol uitgerold. Maar wat zijn nou voor ons en klanten de grootste voordelen? 

Sneller schakelen

Ik gaf het al eerder aan; door korte iteraties kan front-end meteen gaan bouwen. Dit zorgt ervoor dat het projectverloop aanzienlijk wordt versneld.

Alles staat in verbinding met elkaar

Omdat we alles definiëren in atomen kunnen we ook heel gemakkelijk en snel aanpassingen doorvoeren. Stel dat we de hoofdkleur voor alle call-to-action buttons van groen naar blauw willen veranderen dan hoeven we alleen de kleuratoom $groen aan te passen naar $blauw en overal waar de groene button terugkomt, verschijnt nu een blauwe button. Super easy dus. Dit geldt ook voor bijvoorbeeld lettertypes en iconen.

Alles centraal in code

Zodra front-end aan de slag gaat met het design systeem wordt alles in een Pattern Lab opgezet. Dit is een centraal framework waar alle atomen, moleculen, organismes en templates worden beheerd. Dit systeem vormt ook meteen een online styleguide. Deze bewaakt je online identiteit. Een styleguide is eigenlijk een huisstijlhandleiding 2.0. Dus geen boekwerken aan regels voor typografie, kleurgebruik en lay-outs maar een levendig, eenvoudig systeem dat voor iedereen herkenbaar is.

Makkelijk uit te breiden

Omdat alle elementen worden gevoed vanuit een levend systeem, kan het ook heel gemakkelijk uitgebreid worden. Dit is voor MVP’s ook erg interessant. We beginnen met een basis design systeem. In de fases erna vullen we het design systeem verder aan met nieuwe organismes, zodat we nieuwe templates of uitbreidingen op bestaande templates kunnen implementeren.

Snel, sneller, snelst

Door steeds kortere deadlines en implementatiefasen is het van belang dat wij snel en efficiënt kunnen inspelen op trends in de markt. Atomic design is hier de ideale methode voor. We verkorten ons werkproces, kunnen hierdoor sneller met onze klanten schakelen en de technische implementatie vindt veel eerder plaats. Win, win, win, dus :)

Wil je sparren met ons design team? Laat het ons weten! 

 

 

 

 

 

 

 

WebVR, de toekomst van webdevelopment

Door Danny van den Munckhof

Virtual Reality is niet voor iedereen dichtbij. Maar de ontwikkeling van WebVR maakt het mogelijk om vanuit je browser Virtual Reality te ervaren… - Lees meer

Lees verder