In Silicon Valley zijn design systems al een paar jaar de norm. Nu traditionele organisaties op digitaal terrein steeds verder professionaliseren doen ze ook daar hun intrede. Wat heb je aan een design system en waar loop je tegenaan als je er een implementeert?

Een design system is een collectie van richtlijnen en UI-componenten, die worden gebruikt als bron voor alle productontwikkelingen binnen een organisatie. In zo’n systeem verzamel je de code van de verschillende componenten waaruit jouw applicaties zijn opgebouwd. De ingebruikname van een design system zorgt voor meer consistentie én een flinke werkbesparing voor bijvoorbeeld designers en frontend developers. Het voorkomt dat dezelfde componenten meerdere keren worden uitgedacht en ontwikkeld.

Dat design systems aan een opmars bezig zijn komt vooral doordat nu ook meer traditionele organisaties het nut ervan inzien. Ikzelf heb bijvoorbeeld geholpen met het opzetten van het design system van de gemeente Den Haag. Ook het design system van Atlassian vind ik een tof voorbeeld, evenals dat van de Britse overheid. Het meest bekende voorbeeld is het design system van Airbnb.

Hoe diverser je IT-landschap, hoe meer het loont om de achterliggende ontwerpen en code op een centrale plaats te verzamelen en te delen. Zeker wanneer er parallel wordt ontwikkeld op meerdere kanalen met een veelvoud aan ontwikkelteams. Een design system is een ideaal hulpmiddel om de uniformiteit van je digitale uitingen te waarborgen. 

Maar hoe begin je dan? Ik heb dit stappenplan voor je bedacht.

Stap 1: Zorg voor support in de organisatie

Technisch is het opzetten van een design system niet zo ingewikkeld. Organisatorisch is het echter wel een uitdaging. Om van de voordelen te profiteren moeten alle ontwikkelteams er gebruik van gaan maken. Het heeft dus niet zoveel zin om er als developer alleen, of als team alleen mee te beginnen.  

Daarom is het belangrijkste onderdeel van deze exercitie: zorg voor heldere afspraken en support in de organisatie. Dan is het makkelijker om iedereen mee te krijgen in zowel het vullen van het systeem als het gebruiken ervan.

Stap 2: Kies je framework

Er zijn verschillende geschikte (en gratis!) frameworks voor design systems. Ik heb zelf prettige ervaringen met Fractal, een ander bekend framework waarin je code op een slimme manier kunt managen is Storybook. Beide frameworks zijn open source.

Zo giet je bestaande content in nieuwe formats

Stap 3: Zorg voor een styleguide

Aan de basis van het design system ligt de styleguide van je organisatie. Daarin hebben de UX’ers van verschillende teams uiteengezet hoe logo, kleur en andere huisstijleigenschappen eruit moeten zien in de verschillende digitale uitingen.  

Die styleguide is een essentieel toetsmiddel voor de code die je vervolgens opneemt in je design system. Voldoet code hier niet aan, dan neem je die ook niet op. In een design system zijn verder ook duidelijke richtlijnen gedefinieerd voor toegankelijkheid.  

Stap 4: Vul je design system met componenten

Naast de styleguide zijn de UI-componenten een belangrijk onderdeel van je design system. Waarschijnlijk kun je veel bestaande componenten met enkele aanpassingen gebruiken. Waar nodig ontwikkel je nieuwe code voor bepaalde componenten. Zorg er wel voor dat alles wat je opneemt voldoet aan de eisen die je vooraf hebt geformuleerd.

Stap 5: Maak er gebruik van

Een manier van werken verander je niet zomaar. Besteed dus bij alle teams aandacht aan de ingebruikname van het design system en laat duidelijk zien wat de meerwaarde ervan is.

Is je interesse gewekt en heb je vragen over wat de beste aanpak is om een design system op te zetten? Schroom dan niet om contact op te nemen (info@gxsoftware.com). Wij voorzien je graag van advies!

 

<< Back

Posts containing: