De wereld van digitaal ontwerp evolueert voortdurend en om concurrerend te blijven is het essentieel om de visuele consistentie op alle platforms en apparaten te behouden. Dit is waar designtokens in beeld komen. Deze kleine ontwerpeenheden spelen, hoewel vaak over het hoofd gezien, een essentiële rol bij het creëren van harmonieuze en effectieve gebruikerservaringen.

Wat is een ontwerptoken?

Ontwerptokens zijn dat wel gestandaardiseerde waarden die de basiselementen van een ontwerpsysteem vertegenwoordigen.
Ter herinnering, a ontwerp systeem is een repository die alle componenten van een digitaal project samenbrengt. Deze maken het mogelijk om gedurende de hele productie een coherente logica te ontwerpen en begeleiden alle teams die betrokken zijn bij het ontwerp van een interface.
Ontwerptokens kunnen worden gebruikt om kleuren, lettertypen, formaten, marges, witruimte en andere ontwerpelementen te definiëren. Dit zijn krachtige hulpmiddelen die kunnen helpen bij het verbeteren van de consistentie en qualite ontwerp, evenals de samenwerking tussen ontwerpers en ontwikkelaars.
In plaats van een waarde te gebruiken, gebruiken we het token. Hierdoor kunt u slechts één pagina hebben met alle ingevoerde tokens en kunt u vertrouwen op een enkele bron.

Voorbeeld voor een fiche van één kleur:

Op dit niveau lijkt een tokenontwerp een beetje op de stijlen erop Figma ou Schets (kleuren, lettertypen, schaduwen, etc.) maar met veel meer mogelijkheden en veel meer flexibiliteit. Een ontwerptoken wordt meestal gebruikt voor kleuren, grootte, marges, dekking, randen, enz.

Dus in plaats van:

We zouden hebben:

Het tokenontwerp maakt dat mogelijk verander waarde indien nodig direct vanuit “{primary}”, zonder terug te hoeven keren naar de verschillende lijnen.
Bovendien, in het geval van Ontwerpsysteem voor meerdere merken, maakt dit het ook mogelijk om er maar één te hebben één echte pagina om te bewerken om de stijl te veranderen.
Het ideaal is om dezelfde naam in de stijlen in onze ontwerpsoftware te hebben, voor meer consistentie en eenvoud afgeven tussen ontwerpers en ontwikkelaars.
Het gebruik van designtokens als integraal onderdeel van een ontwerpsysteem is echter veel meer dan dat. Ze laten ook een verhoogde schaalbaarheid, betere communicatie tussen teams en dus betere besluitvorming.

De twee soorten Design Tokens

• Token-primitieven
  De token-primitieven zijn dat wel fundamentele waarden ontwerp systeem. Ze omvatten kleuren, lettertypen, lettergroottes, marges, witruimte en andere ontwerpelementen. Tokenprimitieven worden meestal opgeslagen in een gestandaardiseerd gegevensformaat, zoals JSON, CSS ou Yamla. Dit maakt het voor ontwerpers en ontwikkelaars gemakkelijk om ze te delen en te gebruiken.
• Semantische tokens
  Semantische tokens zijn combinaties van primitieve tokens die een specifieke betekenis hebben in het ontwerpsysteem. Een semantiektoken kan bijvoorbeeld een specifieke kleur zijn die wordt gebruikt voor een opdrachtknop, of een specifiek lettertype dat wordt gebruikt voor een paginatitel. Met semantische tokens kunt u een coherent en homogeen ontwerpen vereenvoudig de samenwerking tussen ontwerpers en ontwikkelaars.

Primitieven en semantiek zijn twee essentiële elementen van een ontwerpsysteem. Zij staan ​​toe de basiselementen definiëren ontwerp en organiseer ze zodat ze gemakkelijk te vinden en te gebruiken zijn. Door tokens te gebruiken kunnen ontwerpers en ontwikkelaars sneller en eenvoudiger consistente, hoogwaardige interfaces creëren.

De voordelen van Design Tokens

• consistentie
  Designtokens reageren onder meer op a zakelijk probleem : hoe de grafische identiteit van het merk garanderen met een minimum aan frictie?
  Bij een verandering in de fundamenten (een rebranding bijvoorbeeld) maken design tokens het mogelijk om deze aanpassingen snel door te voeren.
  Stijlen zijn uniform voor alle producten en platforms.
• Herbruikbaarheid
  Designtokens kunnen worden hergebruikt voor een of meer producten, wat dit mogelijk maakttijd en middelen besparen in ontwikkeling. Ontwikkelaars halen tokens rechtstreeks op in plaats van elke keer nieuwe stijlen te moeten maken.
  Ontwerptokens vermijden harde schrijfwaarden in de code.
• onderhoudbaarheid
  Ontwerptokens vergemakkelijken projectonderhoud omdat ze dit mogelijk maken snelle stijlupdate. Hoe ? Tokens zijn gegevens die een naam en een waarde bevatten en die gecentraliseerd zijn.
  Door simpelweg de waarde van een token te wijzigen, zoals die van de kleur van een hoofdknop, heeft dit in één enkele interventie invloed op alle knoppen van de applicatie/site! Ontwikkelaars kunnen dus gemakkelijker projectstijlen behouden, zelfs wanneer ontwerpkeuzes evolueren.

De grenzen van ontwerptokens

• De instrumenten zijn niet gereed
  Omdat het formaat van designtokens nog niet vastligt, is er nog niemand het eens geworden over het gebruik ervan. Elk team en bedrijf heeft dat een eigen functioneren en een eigen taal. momenteel de W3C werkt momenteel aan een format dat dit probleem zou oplossen. Maar op dit moment is het passend om genoegen te nemen met de beschikbare hulpmiddelen en hun beperkingen. Figma heeft aangegeven met dit onderwerp bezig te zijn, maar deze feature zal waarschijnlijk pas eind dit jaar verschijnen.
• Een vertraging in de workflow
  Vind een nomenclatuur dat door iedereen begrepen wordt, is een ware zoektocht naar de Heilige Graal. Bovendien zal het, zoals elk systeem, moeten evolueren volgens een groot aantal parameters. Hieraan wordt toegevoegd de complexiteit van documentatie en tijd die nodig is om het te schrijven. Teams gespecialiseerd in Design System zijn nog steeds niet wijdverspreid, en dit geldt des te meer voor mensen die zich toeleggen op het schrijven van documentatie.
  De kleinste wijziging van een van deze primitieven kan talloze updates genereren waarmee rekening moet worden gehouden.
  Het hebben van een overzicht van het systeem is essentieel bij het implementeren van design tokens.
  deimplementatie is complex en vergt aanzienlijke inspanningen van de basis, maar ik ben ervan overtuigd dat een dergelijke aanpak ruimschoots wordt gecompenseerd door de exponentiële voordelen die deze kan opleveren.

Conclusie

Design Tokens zijn entiteiten met een specifieke naam en nomenclatuur die worden opgeslagen ondeelbare gegevens (zoals spatiëring of kleur bijvoorbeeld). Het zijn allemaal waarden die nodig zijn voor systeembouw en onderhoud. We gebruiken deze waarden in plaats van ze ‘hard te coderen’ in de code om het maximale te garanderen flexibiliteit, homogeniteit en schaalbaarheid voor verschillende producten en ervaringen… Ze zijn ook agnostisch en zouden op elk platform moeten werken.
Maar bovenal vertegenwoordigen ze een methodologie en niet alleen maar ‘variabelen’. Ze zorgen ervoor dat elk ontwerpsysteem kan groeien op alle platforms, apparaten en producten die een merk kan hebben. Het variabele deel is slechts een druppel op de gloeiende plaat.

Afhaal

• Ontwerptokens slaan niet alleen informatie op, maar ook informatie doorgeven.
• Ze worden gebruikt om de primitieve waarden, maar hun ware potentieel wordt onthuld wanneer ze worden gebruikt Documentatie van UI-componenten.
• Ze zijn vergelijkbaar met een methodologie en een manier om een ​​complex systeem te bouwen.

Middelen om verder te gaan

• Tokens in ontwerpsystemen: 10 tips voor het ontwerpen en implementeren van ontwerpbeslissingen voor iedereen: Lees hier 
• Ontwerptokens die verder gaan dan kleuren, typografie en spatiëring: Lees hier

 

 

 

Alexandre Caillé, UI & Design System Lead bij UX-Republic