Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Segédlet

Gondolkozz struktúrákban – mi az a Design Token?

2021. május 27. | Bognár Péter

# # # # # #

Megtervezni egy designt nem kis kihívás, hiszen nem csak egy honlap külsejéről van szó, az arculatnak egységesnek kell lennie az adott cég minden megjelenési formájában, beszéljünk online vagy offline jelenlétről. Ugyanaz a logó, betűtípus, szín- és formavilág kell, hogy megjelenjen a weboldalakon, mint a nyomtatott anyagokon (névjegyek, prospektusok, irodaszerek, stb.), a valós térben előforduló helyszíneken, mint pl. irodák, üzemegységek, és természetesen arra is figyelni kell, hogy ugyanaz az egységes megjelenés terjedjen ki a weboldaltól részben vagy teljesen független online felületeken is, mint a hírlevelek vagy mobil alkalmazások. Persze, lehet erre legyinteni, hogy “ez egy pici cég, nem kell itt nagyzolni, lesz egy csini honlap meg egy logó, az bőven elég a boldogsághoz“, de az üzlet természete az, hogy a sikerrel egyre nagyobbra nő egy vállalkozás, a Te szuperül megtervezett honlapoddal pedig csak természetes, hogy minden vállalkozás baromi sikeres lesz – az elégedett és jól kereső ügyfél pedig fejlődik, és emiatt újabb és újabb ötletekkel, megbízásokkal fog megkeresni. 

A másik lehetőség persze, hogy nem a cég indulásánál vagy rebrandingjénél bábáskodsz, hanem egy már kész brandhez kell honlapot vagy bármi mást tervezned. Ebben az esetben a már meglevő design dokumentációt kell sűrűn és figyelmesen forgatnod, feltéve persze, hogy egyáltalán létezik. Ha nincs, akkor valószínűleg a korábbi anyagok kódjából kell kioperálnod a különböző designelemeket, mértékeket és a színek kódjait, hogy rendes munkát tudjál végezni. Ha esetleg mégis van, akkor reménykedhetsz benne, hogy megfelelő formátumban vannak-e lekódolva a különböző designelemek, vagy kezdhetsz konvertálgatni.

Ezt és az ehhez hasonló szcenáriókat hivatott egyszerűbbé és átláthatóbbá tenni az elmúlt években designer-berkekben nagyon népszerűvé vált téma, a design tokenek, avagy design zsetonok rendszere. 

A w3c design token csoportjának logója

A témával kiemelten foglalkozik a w3c, azaz a World Wide Web Consortium is: az internetes  szabványokat felügyelő és előállító közösség egy munkacsoportja két éve dolgozik már egy közös szabvány létrehozásán, de persze, mint minden közösségi erőfeszítés, ez is csak apránként halad. Most áprilisban értek el egy hatalmas mérföldkövet: elkészült a szabvány-javaslat szerkesztői első változata, azaz az a “végleges” változat, ami átfut az iparági nagy szereplőkön, majd az ő esetleges javaslataikat összegezve jön majd ki a nyilvános első változat. A szerkesztői vázlatot el is juttatták egy csapatnyi olyan kispályás játékosnak, mint az Adobe XD, a Figma, a Sketch, a Material Design, az InVision, az UXPin és a CSS Munkacsoport. Ebből a kis tablóból talán már sejthetjük, hogy érdemes a fejleményeket szem előtt tartani, a design tokenek hamarosan a webdesign és az arculattervezés folyamatának kikerülhetetlen elemeivé fognak válni.

De tulajdonképpen mit nevezünk design tokennek? 

Az ötlettel a Salesforce programpozói álltak elő a Lightning design rendszerben, általában Jina Anne nevéhez szokták kötni a koncepció megalkotását. Az ő definíciójuk szerint “a design zsetonok a design rendszer vizuális atomjai – konkrétabban olyan névvel ellátott entitások, amelyek vizuális design tulajdonságokat tárolnak. Ezeket használjuk a közvetlenül lekódolt értékek (mint például hexadecimális színértékek vagy a térközök pixeles értéke) helyett, hogy így egy skálázható és konzisztens vizuális rendszert tudjunk fenntartani az UI fejlesztés során.” 

A Mozilla is előállt egy saját definícióval, ők így fogalmaznak: “a design zseton egy vizuális tulajdonság, mint például szín, betűtípus, szélesség, animáció, stb. absztrakciója. Ezek a nyers értékek függetlenek a nyelvi alkalmazástól és átalakítás és formázás után bármilyen platformon alkalmazhatóak.” 

A w3c feljebb emlegetett Design Token Közösségi Csoportja így határozza meg a design tokenek mibenlétét: “ a design zsetonok a design rendszerek olyan oszthatatlan elemei, mint a színek, térközök, a tipográfia aránya.”

Röviden (és magyarán) tehát, a design tokenek rendszere lehetővé teszi a gyorsabb, különböző platformokon és csapatokon is átívelő, az egységes designt eredményező munkát. A zsetonok lényegéhez tartozik, hogy tökéletesen platformfüggetlenek (platform agnosztikusak), és valamilyen csodás eszközzel átkonvertálhatóak olyan formátumokra, amik minden egyes felhasználás igényeinek a legmesszemenőbbekig megfelelnek. Bár ahogy fent írtam, a végleges szabvány még nem készült el, de egy ilyen jellegű, már létező eszközt a cikk végén be is fogok mutatni.

Gyakori kérdés, hogy a design token lényegében nem-e csak a css változók egy újabb neve: bár valóban a legegyszerűbb a css kódunkban változókkal bevezetni a zsetonokat, a lényeg persze az, hogy a design token gondolkodásmódja egy nagyobb keretbe foglalja a projektet, és a tervezés legelejétől kezdve a metodológia részévé kell, hogy váljon. A design zsetonok alkalmazása lényegében a tervezési folyamat és a szoftvertervezés egészére kihatással lehet a jövőben. Ennek megfelelően, ha végre elkészül a tervezett, pontosabban fejlesztés alatt álló szabvány, annak hatásaként 

  • egyszerűsödne a projektek és különböző szoftveres eszközök közötti átjárhatóság,
  • elvárássá válna a design token szabvány szoftveres integrációja minden alkalmazásban
  • a figyelem középpontjába kerülne maga a metodológia, ami a módszertan hatékonysága további fejlődéséhez is vezet.

Szoftveres integráció

Ha iparági szinten elfogadottá válik a módszer használata, a széles körben használt design és fejlesztői alkalmazások készítői sem hagyhatják figyelmen kívül – ha egy nagy játékos felveszi a program képességei közé, hamarosan a többiek is követni fogják. Sketch, Figma, XD, Framer – a design tokenek propagátorai szerint lényegében csak idő kérdése, hogy mindenki integrálja a design eszközébe.

További előnyök, avagy miért érdemes belevágni?

Ahogy az már elhangzott, ez a módszer rengeteget tesz a branding és a formanyelv egységességéért, hiszen egyértelművé válik, hogy mikor “megy le egy designer a térképről,” és kezd a style guide-tól eltérő elemeket alkalmazni a designban vagy kódban. 

A tokenekkel nem csak, hogy átláthatóbbá, olvashatóbbá válik a kód, hanem egyben meg is erősíti a design komponenseiben és rendszerében gondolkodást. 

Kép: UXdesign

Utolsósorban pedig, ahogy azt már a cikk elején is említettem, komplex, akár több, párhuzamosan készülő projekteket is rugalmasan módosíthatóvá tesz, hiszen lényegében elég a központi design token dokumentációba bevinni a frissítéseket, majd ezt egy-egy művelettel átvezetni az egyes projektekbe.

Hogyan illesztheted be a design tokeneket a mostani fejlesztési vagy design folyamatodba?

Kezdd a központi, alapvető elemekkel

Ha már eleve egy style guidera alapozod a munkát vagy valamilyen design rendszert használsz, lényegében már most is valamilyen fajta design zseton rendszer van a kezedben. Ebben is megtalálhatod azokat az alapértékeket, alapvető stíluselemeket, amik az arculat atomjait képezik, mint pl. színek, a fontok arányai, méretezések, stb. Ahhoz, hogy ezt valóban design tokennek tekinthessük, érdemes az alábbi további lépéseket még megtenni:

  • Gondold alaposan végig a stíluselemek elnevezési stratégiáját, a nevek kövessenek egy világos, követhető logikát
  • A listát egy technológiától független, azaz minden fejlesztői, tervezői környezetben felhasználható formátumban tárold (a legelterjedtebb a json formátum használata)
  • Tedd ezt a fájlt elérhetővé a mostani vagy leendő csapattagok számára (pl. egy github repóban)

Nézd át a már meglévő termékeket és designokat 

A hivatalos szakkifejezés a design token audit: ahhoz, hogy a legtöbbet kihozhasd a zsetonrendszerből, érdemes alaposan górcső alá helyezni az elkészült rész vagy egész produktumokat és zsetonosítani a bennük szereplő értékeket. Ennek eredményeképpen új referenciákat találhatsz a már meglevő tokenekhez, vagy tokent rendelhetsz a még árván hagyott designelemekhez. Az általános szabály az, hogy ha egy design motívum már harmadszor kerül elő, érdemes zsetonná alakítani.

Az auditálás járulékos haszna, hogy kivasalhatja a designban maradt esetleges következetlenségeket, azaz egységesebbé teheti a teljes brandet.  

Miből lehet design token?

A lenti lista (Lukas Opperman nyomán) sorra veszi a jellemző kategóriákat, amiket egy design token dokumentációban érdemes zsetonosítani. A lista persze csak arra való, hogy megmutassa, mi a bevett gyakorlat és ezzel megmozgassa a fantáziádat, ha találsz valamit, amit jól jönne belevenni, csak tessék!

Színek

  • Háttérszínek
  • Elemek / előterek színei
  • Szöveg, feliratszínek
  • Színátmenetek (gradientek)

Képekre helyezendő színszűrők (pl. hover esetében, stb)

Tipográfia

  • Betűtípusok, fontcsaládok
  • Betűméretek arányai
  • Fonthasználat (kisbetű, nagybetű, dőlt, egyéb)
  • Sormagasság

Méretezés

  • Térközök
  • Padding, behúzás 
  • Ikonok, egyéb elemek jellemző méretei.

Keretek stílusai

Rádiusz méretek (pl. lekerekített sarkokhoz)

Megemelés, árnyékok

Átlátszóság

Mozgás, animációk

  • Időzítés, késleltetés
  • Görbék

Rácsok

Ikonok

Az elnevezések

Minden cikkíró kiemeli, hogy a tokenek elnevezésében nagyon fontos a következetes, logikus felépítés, hogy első pillantásra követhető legyen mind a fejlesztő, mind a designer számára, miről is van pontosan szó. 

Kép: UXDesign

Az UX Design blog példájában a fenti zseton, bár eléggé összetett, mégis nagyon beszédes. Nem kell sem a dokumentációt, sem a zsetonhoz rendelt értéket megnézni, hogy tudjuk, hogy színről van szó, és a containerek (pl kártyák, szövegdobozok) hátteréhez használjuk. Azt is közli, hogy az elemtípus egy hierarchiában foglal helyet (a legfelső pozíciót) és hogy többfajta állapota is lehetséges.

Theo és barátai, a már elérhető megoldások

A W3C csoportja ugyan szorgalmasan dolgozik az általánosan elfogadott design token szabvány létrehozásán és propagálásán, de ahogy láttuk, még évekbe telhet, amíg ez megszületik és valóban bekerül az általános gyakorlatba. Elérhető viszont már most is több olyan program vagy rendszer, amivel elkezdhetjük behozni a módszert akár már futó projektjeinkbe is. 

Theo

Először is ott van az egész ötletet elindító Jina Anne és Salesforce-os csapatának műve, a Theo névre hallgató program. A Theo bárki számára ingyenesen elérhető eszköz, a GitHubon a Salesforce fiókjában könnyen fellelhető. A Theo maga nagyon egyszerűen működik, a megfelelő specifikációk szerint megírt JSON fájlban eltárolt design tokeneket egy egyszerű művelettel képes átkonvertálni a különböző értékeket a megadott formátumokba.

Dragoman

Ez a dragomán nem regényeket ír, hanem design tokeneket kezel. Itt a zsetonokat gulp és yaml formátumban kell bevinni, az eredmény pedig Less, Sass, Scss, Stylus, Android XML és iOS Swift nyelveken, illetve platformokon használható.

Style Dictionary

Az Amazon Web Services (AWS) csapata is előállt a maga megoldásával, náluk egy (ahogy a név is mutatja) egy json fájlokból és az asseteket tartalmazó könyvtárakból álló stílusszótárat kell létrehozni, ebből dolgozva formázza meg programjuk a különböző tulajdonságokat. Az AWS csapata egy rövid videóban is bemutatja a Style Dictionaryt működés közben.

Iratkozz fel YouTube csatornákra!

blog

Díjazottak lettünk az Év honlapja versenyen E-learning kategóriában!

Díjazottak lettünk az Év honlapja versenyen E-learning kategóriában!

2021. december 27.

2021 nagyon sűrű év volt. Nem csak azért, mert idén voltunk 10 évesek, hanem mert az év elején kívül-belül megújultunk, egy igazán naprakész és interaktív tanfolyam várja a tanulni vágyókat. A vírushelyzet okán hétköznapivá vált online kapcsolattartási eszközök beépültek a tanmenetbe, így a tanfolyami anyagot idén sok-sok Facebook és Zoom Live óra keretezte, amelyek kiegészítő […]

Tovább a cikkre
Secured By miniOrange