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. Mooie voorbeelden hiervan zijn het design system van de gemeente Den Haag, van Atlassian en van de Britse overheid. Maar als we praten over design systems is die van Airbnb toch wel het bekendst.
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? Daar is onderstaand stappenplan voor!
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.
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? Neem dan contact op met ons team via info@gxsoftware.com!
