Design system
Om technische redenen besloot het team bij Zelfstroom na grondig onderzoek om alle digitale producten te gaan migreren naar een nieuw framework. Dit bood mij een mooie kans om het concept van een design system te introduceren. Nu, een jaar later is het design system een standaard onderdeel geworden van het ontwikkelproces.
Wat is een design system?
A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.
Audrey Hacq
Praktisch gezien is een design systeem een verzameling componenten en guidelines die zijn vastgelegd in zowel code als design-documentatie. De input voor het design system zijn de brand identity (kleuren, font, tone of voice, values, etc) samen met best practices op het gebied van UX en front-end development. Om een design system te kunnen maken heb ik dus intensief samengewerkt met marketing voor de branding en met onze front-end developer voor de implementatie.
Wat is het voordeel van een design system?
De reden voor het gebruik van een design system is consistentie. Consistentie heeft 2 grote voordelen:
- Usability; de gebruiker hoeft maar één keer iets te leren en hoeft er daarna niet meer overna te denken. Daarnaast helpt een consistentie met de herkenbaarheid van het brand.
- Efficiency; componenten hoeven maar één keer gemaakt te worden en kunnen daarna telkens hergebruikt worden in verschillende interfaces.
Atomic design
Het design system heb ik opgebouwd volgens de Atomic design methodology, waar ik bij TOPdesk al ervaring mee heb opgedaan. De atomic design methodology maakt een vergelijking tussen de componenten in je design system en de elementen in de biologie. Net als in de biologie begin je met de kleinste componenten, zoals knopjes. Deze kleine componenten worden de atomen genoemd. Deze atomen vormen samen met andere componenten weer iets grotere componenten; de moleculen. Deze moleculen vormen samen weer organismen, etc.
Voorbeeld
Hieronder een voorbeeldje dat ik ook gebruikt heb om de methodogy aan mijn team uit te leggen.
Bij Zelfstroom maken we op verschillende plaatsen gebruik van deze ‘klanten vertellen sectie’
Atomen
De kleinste elementen hierin zijn componenten zoals de knopjes, sterren, avatar, etc
Moleculen
Samen vormen deze atomen een soort ‘review-kaartje’ en het ‘klanten vertellen’ logo, met 2 varianten één voor mobile en één voor desktop.
Organismen
Deze moleculen vormen de ‘klanten vertellen’ sectie.
templates
Deze sectie kan gebruikt worden op de website. Hieronder zie je een template voor een flow. Deze kan gevuld worden met verschillende soorten secties.
Pagina’s
Uiteindelijk wordt dit een pagina met content.
Implementatie
Het eerste product dat we met behulp van ons design system hebben geïmplementeerd was de bespaarcheck flow (zie Aanbieding à la minute)
We zijn begonnen met het implementeren van de fonts en kleuren. Daarna kwamen de kleine componenten zoals knoppen.
Vervolgens keken we per story welke componenten daarvoor nodig waren. Als er nog componenten misten, dan maakten we hier een nieuwe story voor aan. Deze pakten we dan eerst op. Zo werd ons design system steeds completer en konden we het ook voor andere projecten gaan gebruiken.