Design systems voorbij design

In de meeste uitgeklede vorm is een designsysteem een set standaarden en richtlijnen over hoe je dingen maakt en ontwerpt. Als je ooit een brand- of styleguide hebt opengeslagen, heb je al ervaring met designsystemen. Zo’n guide vertelt waar je rekening mee moet houden als je met een merk aan de slag gaat, welke kleuren en lettertypes je dient te gebruiken, op welke afstanden je moet bewaren ga zo maar door.

Atomic design

Als we zo’n guide doortrekken naar de wereld van digitaal productontwerp, zullen veel designsysteemafficionado’s praten over verschillende onderdelen in een design system: atomen, moleculen, organismes en meer van dat soort termen. Het idee is dat een designer allerlei atomen ontwerpt, en dat alles uiteindelijk wordt opgebouwd uit die kleinst deelbare onderdelen. Net als in de natuur maken de juiste atomen met elkaar een molecuul, en met genoeg moleculen maak je vervolgens een organisme.

Om te snappen hoe dit werkt kun je kijken naar de volgende componenten (atomen): een label, een invoerveld en een knop. Samen maken deze atomen een inschrijfformulier voor een nieuwsbrief (een molecuul). Met een hoop verschillende moleculen kun je weer grotere onderdelen bouwen, tot je uitkomt bij complete pagina’s.

Deze Atomic Design-principes zijn een belangrijke ontwikkeling geweest de afgelopen jaren. Als we de producten die we maken opbouwen uit dezelfde onderdelen met vaste standaarden, blijft je product automatisch consistent, wat bijdraagt aan een prettige gebruikerservaring. Ook is (moderne) ontwerpsoftware zoals Sketch en Figma er helemaal op ingericht om componenten te recyclen volgens deze principes, zodat we sneller een idee kunnen uitwerken en testen.

Helaas stopt het voor veel ontwerpers hier: er wordt vaak gedacht dat een designsysteem af is zodra herbruikbare elementen als in een bibliotheek (library) bij elkaar gegroepeerd staan.

Het zorgt weliswaar voor een consistent uiterlijk van je product, maar uiteindelijk levert het niets meer op dan een statisch plaatje. Een digitaal design gaat verder dan dat, het is interactief, heeft animaties en moet geprogrammeerd worden. Het werk begint hier dus pas nog maar net.

Nu we duidelijk hebben wat een design system in de basis is, moeten we breder kijken dan alleen het nut voor designers.

Een goed systeem scheelt namelijk ook een grote brok werk voor je developers, en het kan de samenwerking in een productteam verbeteren. Want net als designers, werken ontwikkelaars tegenwoordig óók vaak met component-based systemen. Als beide partijen met componenten werken, is het logisch dat je die twee werelden combineert.

Vandaar dat designsystemen tegenwoordig vaak worden beschreven als one source of truth. Dit houdt in dat een ‘knop’ die een designer bedacht en ontworpen heeft, niet alleen maar een boel pixels is, maar óók terugkomt als een werkende, interactieve ‘knop’ in de blokkendoos van elementen die developers gebruiken om het product te bouwen.

Een systeem dat goed is opgezet zorgt er daarom voor dat zowel designers als developers sámen vanuit dezelfde plek werken. Hier vinden ze informatie over elkaars werkveld, wat voor meer begrip zorgt. Afspraken over componenten nemen aannames in latere discussies weg. De kennis van hoe een knop eruitziet, wat de maten en afstanden zijn, hoe deze zich gedraagt en hoe deze geprogrammeerd wordt, bevindt zich allang niet meer in de hoofden van designers en developers of in losse stukken documentatie die overal en nergens te vinden is. Deze kennis wordt in het systeem gezet, en iedereen kan daarbij. Het systeem wordt zo de enige bron van waarheid.

Design tokens als ultieme samenwerking tussen design & development

Bij het ontwikkelen van een designsysteem kwam men erachter dat we atomen — blijkbaar — kunnen opdelen in nóg kleinere onderdelen. Om bij het voorbeeld van een knop als component te blijven, wordt deze heel abstract gezien namelijk opgebouwd uit kleinere onderdelen: onder andere een lettertype met een bepaalde grootte, een kleur, en misschien zelfs hoe rond de hoekjes zijn.

Deze eigenschappen van de knop zijn te vatten in bepaalde eigenschappen, die bovendien vaak in het hele product terug te vinden zijn; kleuren en lettertypen zijn onderdeel van je merk, en komen dus vaker terug. Dit betekent dat de kleur die we gebruiken voor een grote dikke knop, óók terugkomt in de kleur van bijvoorbeeld formulieren, linkjes en iconen.

Programmeurs en designers hebben dit samengebracht door niet meer te zeggen ‘een knop moet blauw zijn’ maar eerder ‘een knop moet <merkkleur> zijn’, en die merkkleur op een andere plek te definiëren. Op dezelfde manier kun je ook zeggen dat een icoontje en een link de merkkleur moet krijgen.

Het voordeel zit hem vervolgens in het maken van de aanpassingen. In plaats van het aanpassen van het component van de knop, het linkje en het icoon, passen we nu simpelweg de design token aan, en de rest verandert automatisch mee. We experimenteren nu met manieren waarop we dit volledig automatiseren; een aanpassing aan tokens die door een ontwerper gedaan wordt in software, kan zo direct worden doorgevoerd in alle aspecten van je product zonder tussenkomst van een developer.

Dit kan bijvoorbeeld handig zijn bij een rebrand, of als eenzelfde productteam meerdere apps onderhoudt voor andere merken (of white-label oplossingen). Zo worden design tokens de basisingrediënten voor je systeem. Ook is het een geweldig voorbeeld van hoe design systems de werelden van ontwikkelaars en ontwerpers dichter bij elkaar brengen.

Als we bij Soda aan digitale producten werken, dan werken we niet alleen met developers, maar ook met copywriters, researchers, marketeers, en zo kennen we er nog wel een paar.

Iedereen heeft hetzelfde gezamenlijke doel: met z’n allen aan hetzelfde, geweldige product te werken om waarde toe te voegen voor je klanten en het bedrijf. Dat gaat verder dan alleen het stukje waar je zélf dagelijks verantwoordelijk voor bent, dat doe je door elkaar te begrijpen en vanuit dezelfde basis te beginnen om sámen iets te bouwen, in plaats van beginnen op verschillende plekken en vervolgens touwtrekken om wie gelijk heeft.

Een solide design system vormt die basis voor iedereen. Het is, net als je digitale product, nooit écht af. Iedereen kan eraan bijdragen en er waarde uit halen.

Hoe werkt dat dan, praktisch gezien?

Om bij het voorbeeld van de knop te blijven; naast een bepaald design en een stuk code, is de inhoud van een knop veelbepalend voor de duidelijkheid en daarmee het succes van je call-to-action.

• Een copywriter zal snel een mening klaar hebben over een knop waar een marketeer ‘Klik Alsjeblieft Hier Om te Beginnen!’ in heeft gezet, en zit niet te wachten om ieder detail aan te passen in elke uiting die er gemaakt wordt. In plaats daarvan schrijft de copywriter vaak ook algemenere richtlijnen, zoals een brand voice. De tone of voice of specifiek woordgebruik zijn voor iedereen terug te vinden. Het designsystem kan de plek zijn waar een developer leest welke teksten hij kan gebruiken in een knop, en hoe deze knop gestijld moet worden, misschien zelfs zonder dat er een designer aan te pas komt.
• Een researcher heeft tijdens een aantal usabilitytests ontdekt dat knoppen met enkel iconen (en geen tekst) onduidelijk zijn voor een groot deel van je doelgroep. Maar de researcher is zelf niet direct verantwoordelijk voor de uitwerking, aanpassing en implementatie van een design. In plaats van het testen en nakijken van elke update, kunnen researchers hun bevindingen algemeen kenbaar maken in een design system. Op deze manier weet iedere designer dat alleen icons níet genoeg zijn, zonder het steeds te hoeven checken met een researcher, of het specifieke onderzoek op te zoeken waaruit dat bleek.

En hoe nu verder?

Een goed design system is nooit af, maar is een levend document. Het zal zich blijven ontwikkelen aan de hand van nieuwe inzichten en ontwikkelingen en blijft altijd een sterke basis geven aan je organisatie en teams.

Ik gaf hierboven twee praktische voorbeelden voor de toepassing van een design systeem voor disciplines waar je misschien niet direct aan zou denken. In deel 2 pak ik die draad weer op, en begin ik met wat abstractere disciplines binnen een productteam, en hoe een design systeem hun leven makkelijker kan maken. Aan de hand daarvan leg ik verder uit hoe je een design systeem inzet om grotere onderwerpen aan te snijden, zoals productvisie en strategie.

Een goed design systeem laat de veelzijdigheid van een digitaal product terugkomen in een uitgebreide documentatie voor en door de personen die er aan werken. Dit zorgt voor meer begrip tussen teamleden voor bepaalde keuzes en afwegingen, en er zullen zelden nog inconsistenties ontstaan. Grote aanpassingen kunnen makkelijker in het hele product worden aangepakt, en kleine aanpassingen kunnen makkelijker worden overgenomen door teamleden. Een hoop voordelen dus.

Maar waarom heet het dan een design system?

Wij zijn van mening dat het veel breder kan — en moet — gaan dan alleen design, en dat we er met z’n allen aan werken. Misschien is het omdat wij, als ontwerpers, als geen ander goed structuur en overzicht kunnen aanbrengen in complexe processen, structuren en systemen. Het is altijd al ons werk geweest om onze creatieve energie in te zetten door abstracte waarden te koppelen aan concrete uitingen zoals de kleur en vorm van een knop, en om businessdoelen van een bedrijf te kunnen koppelen aan gebruiksvriendelijke interfaces.

Wat doet Soda?

Bij Soda hebben we een team dat zich bezighoudt met de laatste (technische) ontwikkelingen op het gebied van design systemen, en nauw samenwerkt met developers om te zorgen dat onze concepten ook werkelijkheid kunnen worden. We geven workshops en begeleiding aan teams, organisaties en bedrijven om deze ideeën in de praktijk te brengen, en waar nodig zetten we onze ontwerpskills in om het daadwerkelijke systeem op te zetten.