Design Tokens: het geheim achter consistent design op alle platforms

8 min read

Digitale platformen zijn steeds essentiëlere assets binnen een moderne IT-omgeving. Ze vormen een stevig fundament onder je digitale strategie, bieden volop innovatiemogelijkheden, vormen krachtige datahubs en tillen klantervaringen naar een hoger niveau. Met een goed platform maak je echt het verschil.

Bij het ontwikkelen van een digitaal platform komt vaak heel wat kijken. Het UX-design, de UI en de look-and-feel van het platform: het zijn allemaal zaken die op orde moeten zijn als je gebruikers een fijne ervaring wilt voorschotelen. Wil je het jezelf een stukje makkelijker maken zonder afbreuk te doen aan de kwaliteit? Dan kan het werken met design tokens uitkomst bieden.

Maar wat zijn design tokens precies? Wat is hun toegevoegde waarde binnen platformen? En hoe verhouden ze zich tot design systems? In dit artikel vertellen we je alles wat je moet weten over design tokens en bekijken we welke mogelijkheden en potentiële voordelen ze bieden.

Wat zijn design tokens?

Wellicht heb je het begrip design tokens wel al voorbij zien komen, maar weet je niet precies wat het zijn. We kunnen dit verduidelijken door te kijken naar een ding dat vrijwel alle organisaties gemeen hebben: een merkidentiteit die ze via alle communicatie- en promotiekanalen op een consistente manier proberen uit te dragen. Dit unieke eigen karakter van een organisatie is de ruggengraat van haar communicatie en interactie met de doelgroep.

Bij een sterke merkidentiteit horen duidelijke designkeuzes die terugkomen op je websites en platformen. Denk hierbij aan kleurkeuzes, fonts, logo’s en de plaatsing, vorm en kleur van CTA-knoppen. Uniforme designkeuzes en -elementen zorgen ervoor dat de website en mobiele applicatie van je bank of vertrouwde webwinkel dezelfde stijl, look-and-feel hebben. En die uniformiteit kweekt herkenning en vertrouwen.

Heb je veel digitale kanalen, zoals een platform, commerciële website en een iOS- en Android-applicatie? En wil je zaken aanpassen zonder stevig aan de stijlkeuze, look-and-feel, functionaliteit en gebruikerservaring te tornen? Dan kost je dat in de klassieke situatie vaak veel tijd en geld, omdat je voor elke versie een apart ontwikkelteam nodig hebt.

Hier komen design tokens om de hoek kijken. Design tokens zijn namelijk designkeuzes die je op één platformonafhankelijke plek (bijvoorbeeld een JSON-bestand) vastlegt en vervolgens vertaalt naar de verschillende platformen. Ze vormen feitelijk de variabelen waarin de waarden zijn vastgelegd die het ontwerp voor je platform of website bepalen.

Hoe werken design tokens?

Maar hoe gebruik je design tokens nu in de praktijk? Belangrijke stijlelementen als de achtergrondkleur, fontgrootte of border-radius leg je als waarden (properties) vast in design tokens. De tokens zetten deze waarden automatisch door naar bijvoorbeeld het web, iOS of Android. Door bijvoorbeeld kleurwaarden te definiëren als tokens, koppel je de kleurwaarde direct aan een betekenis. Op die manier wordt het duidelijker wat het idee achter de vormgeving is.

Design tokens zijn platform-agnostisch. Dit wil zeggen dat je ze op elk type platform kunt gebruiken en designers en developers die in diverse talen programmeren zeker weten dat ze het altijd over dezelfde waarden hebben. Ben je bezig met een rebranding van je platformen, websites en mobiele apps? Als je werkt met design tokens hoef je alleen maar de waarde in een token aan te passen om het gewenste element in elke versie te veranderen.

Hoe verhouden design tokens zich tot een design system?

Een design system is een centrale plek waar herbruikbare design- en UX-elementen (fonts, kleuren, elementen, componenten, animaties en meer) zijn samengebracht. Het is een verzameling gestandaardiseerde en herbruikbare componenten en patronen die ontwikkelaars gebruiken voor het bouwen van applicaties en platformen.

Binnen het design system zijn design tokens kerncomponenten op microniveau. Ze vormen de kleinste stukjes UI-informatie die je bij het ontwerpen van diverse digitale producten inzet. Met andere woorden, tokens zijn kleine, over meerdere platformen en apps toepasbare beslissingen die de visuele stijl van een design system bepalen.

Binnen de hiërarchie van het design system vormen de design tokens niveau 1. Ze komen net onder de componenten en elementen (niveau 2). De tokens zijn de kern van de atomen, de fundamentele componenten op detailniveau van een design system. Je kunt de tokens dus zien als de onderste laag en een belangrijk fundament van het totale systeem.

Schema

Wat is de belangrijkste meerwaarde van design tokens in platformen?

Design tokens hebben een belangrijke meerwaarde voor platformen. Die strekt zich uit van de ontwikkelaars tot de eindgebruikers van een platform. Tijd om nader in te zoomen op de belangrijkste voordelen.

De meerwaarde voor je business

Vanuit het perspectief van de business is consistentie een van de belangrijkste winstpunten die het gebruik van design tokens oplevert. Waarden zijn niet alleen makkelijk te definiëren en gelijk cross-mediaal (op verschillende platformen, websites en iOS- en Android-apps) te gebruiken, maar zijn ook snel aanpasbaar.

Wil je overal de achtergrondkleur veranderen van paars in oranje? Met design tokens hoef je de waarde maar op één plek aan te passen, waarna de wijziging overal automatisch wordt doorgevoerd. Het wordt dus een stuk eenvoudiger om een sterke merkidentiteit te creëren en bewaren. Omdat je met design tokens ook na de initiële release van een platform makkelijk en efficiënt doorontwikkelt op basis van eerder gemaakte keuzes, creëer je tevens een toekomstbestendige set-up.

Ook vanuit kostenoogpunt brengt het kiezen voor design systems en tokens voordelen met zich mee. Er gaan minder uren zitten in het aanpassen van kleine, maar vanuit visueel oogpunt belangrijke stijlelementen als achtergrondkleuren, fonts, de vorm en kleur van actieknoppen en de hoekjes van banners, buttons en tekstblokken. Bovendien hoef je voor kleine stijlwijzigingen die je als waarde vastlegt in design tokens niet steeds een beroep te doen op aparte ontwikkelteams voor het web, Android en iOS.

De meerwaarde voor developers en designers

Design tokens maken het leven van developers en designers makkelijker. Bij het ontwikkelen op de traditionele manier moeten designers eerst een ontwerp maken en dit als een pakket versturen naar de developer. Die neemt de waarden vervolgens mee met het coderen en bouwen. Het is een werkwijze die betrekkelijk veel handelingen omvat en ruimte schept voor fouten.

Dankzij designer tokens werk je met een standaard die overal dezelfde waardes vertegenwoordigt. Je hoeft dus geen vertaalslag meer te maken en waardes opnieuw op te slaan of te schrijven. Op die manier werken designers en developers consequent vanuit een single source of truth en neemt de kans op fouten flink af.

Dankzij design tokens wordt het mogelijk om waardes zoals een branding- of actiekleur over te nemen. Het resultaat? Er ontstaat een natuurlijke manier om veranderingen in meerdere platformen, apps en websites door te voeren. Je kunt op grote schaal tokens maken, maar je bijvoorbeeld ook focussen op een heel specifieke waarde zoals een bepaalde actieknop.

De meerwaarde voor gebruikers

De gebruiker profiteert vooral van een verenigd design. Hij krijgt overal, ongeacht of hij nu een platform, app of website van jouw organisatie gebruikt, dezelfde ervaring en look-and-feel voorgeschoteld. Al je digitale kanalen en platformen werken intuïtief en staan garant voor een optimale gebruikservaring. Zo speel je probleemloos in op de omnichannel ervaring die zo belangrijk is voor de moderne klant en internetgebruiker.

De toekomst van design tokens

De technologie rondom design tokens staat niet stil. Steeds meer organisaties ontdekken dan ook de toegevoegde waarde van deze designelementen. Zo is de W3C momenteel druk bezig met het ontwikkelen en vastleggen van standaarden waarop designers en developers kunnen vertrouwen bij het selecteren van stijlelementen voor hun design system. Style Dictionary is een ander initiatief dat stijlen zo definieert dat je ze op elk platform en met iedere programmeertaal kunt gebruiken. We verwachten dat design tokens door deze initiatieven nog bekender en populairder gaan worden.

Oberon en design tokens

Bij Oberon kennen we de waarde van design systems en design tokens en werken we er graag mee. Vrijwel alles wat we op een pagina zetten, komt in een design system. Design tokens gebruiken we om op microniveau stijlelementen nog sneller en makkelijker te definiëren en veranderen. Ook veel van onze klanten raken overtuigd van de toegevoegde waarde van design tokens als ze de technologie in actie zien.

Design tokens zijn vrijwel altijd in te zetten, maar er zijn wel situaties denkbaar waarin ze minder waarde hebben. Denk bijvoorbeeld aan een simpele website gericht op marketing. Het is niet bij elk project nodig om in te zoomen op het detailniveau dat design tokens biedt.

Wil je nog meer weten over design tokens? En denk je dat ze meerwaarde kunnen hebben bij het (door)ontwikkelen of rebranden van jouw platformen? Dan helpt Oberon je graag verder. Neem gerust vrijblijvend contact met ons op om samen de mogelijkheden te verkennen!

Meer weten over het gebruik van design tokens binnen platformontwikkeling?