Zo maak je een blauwdruk voor een design system

Hoe ‘maak’ je een design system? Een dergelijk systeem is de basis voor alle ontwikkeling van producten en marketingcommunicatiemiddelen. Onmisbaar voor een succesvol groeiende organisatie, dus. Het begin van een design system bestaat uit een blauwdruk met drie stappen.

Definitie van het design system

Het design system staat garant voor de uitwerking van goed ontwerp. Binnen de organisatie wordt centraal vastgelegd wat de geldende principes, uitgangspunten, toepassingen en uitwerkingen zijn. In deze centrale omgeving vinden de ‘bouwers’ van de organisatie alle bouwstenen en kaders voor hun producten. Webdevelopers, webredactie, app-ontwikkelaars maar ook de afdelingen communicatie en marketing putten uit deze centrale bibliotheek.

Gevolg: iedereen gebruikt dezelfde basiselementen. Daarmee is het dwingend, want het geeft kaders voor de productie van nieuwe middelen. Daardoor ontstaat verregaande consistentie in producten en communicatie. Naar de buitenwereld toe is er dus een duidelijk ‘gezicht’ en een consistente gebruikerservaring. Deze centrale omgeving, bibliotheek of dit centrale systeem noemen we het design system.

Anderzijds geeft een goed design system de vrijheid die nodig is om door te ontwikkelen. Neem LEGO. Hun ‘design system’ laat heel duidelijk zien dat je met verschillende uitgangspunten, blokjes en kleuren de mooiste bouwwerken maakt. Maar hoe divers de bouwwerken ook zijn; je ziet altijd gelijk dat het met LEGO is gemaakt.

Samenwerken

Sommige organisaties noemen een stijldocument en een front-end bibliotheek al een design system. Zeker zijn dit onmisbare tools, maar een volwaardig design system gaat verder dan alleen dat. Alle designers, front-enders en developers, zouden van het design system moeten kunnen profiteren. Een compleet design system bestaat dus uit basisontwerpen en design principles, html/css/java-code van web- of app-onderdelen aangevuld met technische gebruiksdocumentatie. Plus richtlijnen en handleidingen voor fotografie, video, illustraties en tekst.

Het design system is veelomvattend. En dit betekent dus ook dat verschillende disciplines binnen de organisatie bij de opzet van het design system betrokken zouden moeten zijn. Tenslotte zijn het de medewerkers die werk aan elkaar overdragen en doorzetten. Sluit het product van de een niet aan op de uitwerking van een ander, dan gaat dat ten koste van de consistentie en de gebruiksgemakken voor de verschillende disciplines. Het design system brengt dan niet de consistentie, het gemak en de tijdsbesparing voort die het in potentie wel in zich heeft.

Design system blauwdruk in drie stappen

Dit zijn de noodzakelijke stappen om tot een blauwdruk van het design system voor jouw organisatie te komen: begrijpen, ontdekken en beslissen.

1. Begrijpen

Hoe werkt de organisatie nu eigenlijk samen? Een kernteam van de organisatie waarin alle disciplines vertegenwoordigd zijn, zou die vraag moeten kunnen beantwoorden. Ieder legt op tafel: de technieken, systemen, knelpunten. Samen kunnen ze ieders aandeel vertalen naar technische bouwblokken, duidelijke benamingen (ook erg belangrijk: consistentie in woord en betekenis) en een logische architectuur. Door dit samen te doen worden kansen, beperkingen en flexibiliteit optimaal in beeld gebracht.

Dit alles komt samen in een problem statement: Het design system biedt onderdelen als…. gepubliceerd als …. geproduceerd door …. om zo bij te dragen aan … (naar voorbeeld van Nathan Curtis)

2. Ontdekken

Het team kan nu op een praktischer niveau de bouwstenen bepalen. Denk aan kleurpaletten, grid-definities, iconen, typografie en andere grafische elementen. Volgens het principe van atomic design ontstaan zo elementen, componenten, modules, templates en zelfs pagina’s. Maak daarnaast enkele richtlijnen ten aanzien van design principes, implementaties en toepassingen. Het is erg waardevol om good practices en voorbeeldcases te verzamelen.

Let op: het multidisciplinaire team zal ook opmerken dat samenwerking een item is. Afspraken over samenwerken en verantwoordelijkheid, maar ook wat daarvoor nodig is van het hogere management om het te laten slagen, leg je vast in deze stap.

3. Beslissen

Er ligt nu een goede basis om gefundeerde keuzes te maken. Leg alle samenwerkingsafspraken tussen de disciplines vast. Bepaal de techniek, frameworks en tooling en een eenduidige naamgeving voor alle componenten. Benoem de teamleden die het design system gaan ontwikkelen (en doorontwikkelen).

Het eindresultaat is een concrete blauwdruk voor het design system. Omdat het een nieuwe manier van werken is voor veel organisaties, vergt dit ‘begin’ vaak redelijk wat tijd. Ook is het belangrijk dat het kernteam ruimte krijgt binnen de organisatie. In veel gevallen loont het om het proces (gedeeltelijk) te laten begeleiden door een design system expert.

De uiteindelijke blauwdruk voor het design system ziet er voor elke organisatie anders uit. En dat is goed. Het is een proces dat de gehele organisatie aangaat, iedereen draagt  er actief aan bij. Belangrijk is dan ook om medewerkers buiten het kernteam ook mee te nemen in het traject. Vertel actief over de nut en noodzaak van een design system voor de organisatie en communiceer ook de uitkomsten. Niet alleen creëer je zo draagvlak: het is ook een test om te checken of er niet bepaalde zaken over het hoofd zijn gezien. Luister dus goed naar de rest van de medewerkers in de organisatie.

Het design system vervangt nooit het gehele proces van ontwerpen. In de ontwerpfase wil je dat er vrij onderzocht en gedacht wordt, nieuwe schetsen en innovatieve ideeën geopperd worden. De uitkomsten hiervan leg je weer vast in het design system.