Wat is een Design System?
Op de website van de Nielsen Norman group wordt de volgende definitie gegeven:
“A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.”
Deze interpreteer ik op de volgende manier: Een Design system is een plek waar design keuzes zijn vastgelegd die door de gehele organisatie hetzelfde geïnterpreteerd worden.
Beginnen met ontwerpprincipes
Om deze designkeuzes te maken moet er binnen de organisatie eerst helder zijn vanuit welke principes er gehandeld wordt. Elk onderdeel van het Design System wordt getoetst aan deze principes. Denk aan:
- De gebruiker moet centraal staan. Alle designkeuzes worden gemaakt om de gebruiker zo goed mogelijk te helpen
- Wees inclusief. Zorg dat iedereen de designs kan gebruiken ongeacht eventuele handicap
- Deel kennis. Maak het mogelijk voor andere om te profiteren van de designkeuzes
Meer voorbeelden van ontwerpprincipes zijn te zien op de website van Gebruiker Centraal.
Waaraan moet een Design System voldoen?
Een Design System heeft:
- Heeft ontwerpprincipes, zie hierboven.
- Bevat een huisstijl gedeelte (Brand Identity) waar onder andere de kleuren en het lettertype van de huisstijl in zijn opgenomen
- Heeft componenten die door zowel designers als developers gebruikt kunnen worden
- Geeft duidelijke uitleg geven over de componenten. Met onder andere instructies hoe een component te gebruiken en verantwoording waarom het component er op deze manier uitziet. Deze verantwoording kan getoetst worden aan de ontwerpprincipes
- Is flexibel. Een Design System is een levend document en nooit klaar. Nieuwe ontwikkelingen zorgen ervoor dat componenten opnieuw tegen het licht gehouden moeten worden. Denk bijvoorbeeld aan resultaten van gebruikersonderzoeken. Deze kunnen invloed hebben hoe een component er uit hoort te zien. Daarom is het belangrijk dat iedereen binnen de organisatie input kan leveren op het Design System. Het Design System is van de gehele organisatie en niet van een select groepje designers
- Heeft ondersteuning van Design Tokens (hierover later meer)
Voordelen van een Design System
Omdat deze designkeuzes voor iedereen binnen de organisatie duidelijk zijn heeft dit de volgende voordelen:
- Er ontstaat uniformiteit tussen verschillende platformen (websites of apps) binnen dezelfde organisatie
- Designers en developers kunnen sneller met elkaar schakelen omdat ze over hetzelfde praten
- Het is schaalbaar omdat het gemakkelijk is om onderdelen te hergebruiken
De techniek achter een een Design System
Een Design System is niet gebonden aan een bepaalde techniek. Er zijn verschillende tools beschikbaar om een Design System mee op te zetten. Meestal is er wel een scheiding te zien in de tools die de designers gebruiken en de tools die de developers gebruiken. Een voorbeeld van tools die gebruikt kunnen worden op een Design System op te zetten:
- Figma voor designers. Met Figma kunnen verschillende mensen samenwerken via een GUI (Graphic User Interface). Designers kunnen gemakkelijk verschillende componenten hergebruiken vanuit de ingebouwde bibliotheek
- Storybook voor developers. Storybook maakt het mogelijk om code voorbeelden te maken van componenten. Deze componenten zijn in sommige gevallen direct te gebruiken in een applicatie of website
- Publiekelijke website voor andere stakeholders. Hier zijn alle onderdelen van het Design System voor iedereen te bekijken op een gebruiksvriendelijke manier
Design tokens zorgen voor synchronisatie
Eigenlijk is elke website of (web)applicatie, hoe complex deze ook lijkt, grafisch gezien te distilleren tot een select aantal eigenschappen zoals onder andere kleur, lettertype, afstanden (tussen de verschillende elementen) en schaduwen. Deze eigenschappen kun je opnemen in zogenaamde design tokens. Door deze design tokens te delen tussen de grafische (bijvoorbeeld Figma) en technische (bijvoorbeeld Storybook) kant zorg je ervoor dat de componenten er in beide omgevingen er hetzelfde uitzien.
Daarnaast kunnen deze design tokens gebruikt worden om tussen verschillende Design Systems componenten uit te wisselen wanneer twee (of meer) organisaties dezelfde afspraak maken over hoe de design tokens gebruikt worden.
Voorbeelden van design tokens
Er wordt onderscheid tussen drie verschillende soorten design tokens, namelijk:
- Brand of huisstijl tokens. Dit zijn tokens die specifiek voor de huisstijl van een organisatie gelden en daarom niet relevant zijn voor eventuele andere organisaties. Denk aan kleur, lettertype en spacing. Een voorbeeld van een brand token is: rijkshuisstijl-color-hemelblauw. Deze specificeert de specifieke blauwe kleur van de Rijkshuisstijl
- Common of algemene tokens. Deze tokens vormen een tussenlaag waarbij organisaties de afspraak hebben gemaakt om dezelfde naamgeving te hanteren. Bijvoorbeeld primary-color. De primaire kleur van de Rijkshuisstijl kan dan blauw zijn terwijl die van de Gemeente Utrecht rood is. Zo kun je bepalen dat een link component er in het Design System van de Rijkshuisstijl blauw is terwijl die in het Design System van de Gemeente Utrecht rood zal zijn
- Component tokens. Dit zijn tokens waarmee een component opgebouwd wordt. Hiermee is het mogelijk om de look en feel van een component verder te configureren
Bekijk ook deze terugblik van Gebruiker Centraal met een workshop over Design Tokens.
Voorbeelden van Design Systems
Zoals hierboven aangegeven kunnen Design Systems in drie verschillende omgevingen bestaan (bijvoorbeeld Figma, Storybook of een publiekelijke website). Hieronder voorbeelden van Design Systems in deze drie omgevingen.
Voorbeelden van Design Systems in Figma
Voorbeelden van Design Systems in Storybook
Voorbeelden van publieke websites van Design Systems
Wanneer een Design System?
Een Design System is de moeite waard wanneer je meerdere websites of applicaties moet voorzien van dezelfde look en feel.
Het opzetten en onderhouden van een Design System vergt veel tijd. Organisaties met succesvolle Design Systems hebben daar meestal minsten vijf mensen full time op zitten.
Als jouw organisatie niet aan beide voorwaarden voldoet is het over het algemeen verspilde tijd en moeite om een Design System te ontwikkelen.
Heb je vragen over Design Systems?
Of heb je een opmerking over het bovenstaande? Laat het mij weten door hieronder een reactie achter te laten!