Svět design systémů má spoustu výrazů, které mohou být trochu matoucí, obzvlášť pokud jsou pro vás design systémy pořád nové.
Dali jsme tedy dohromady slovník běžně používaných pojmů, který by měl pomoct se ve světě design systémů zorientovat. Některé výrazy by jsou již zaběhnuté termíny, proto je nepřekládáme ani nepřechylujeme a uvádíme je tak v jejich anglické verzi.
Z anglického „Design systems adoption“.
Adopce design systému je způsob, jak měřit užitečnost design systému. Vyjadřuje se jako poměr UI tvořeného komponentami z design systému vs. UI, které je definované lokálně (a není tak napojeno na komponenty z design systému).
Z anglického „Component API“, někdy také „Component API Design“.
API (Application Programming Interface) komponenty je rozhraní, pomocí kterého se daná komponenta používá, např. v Reactu jsou to props dané komponenty. Obecné pravidlo je, že se snažíme udržet API co nejvíc konzistentní a srozumitelné napříč celým design systémem.
Z anglického „Atomic Design“.
Atomický design je metodologie design systémů definovaná Bradem Frostem. Popisuje možnou strukturu design systému od nejmenších možných UI komponent (Atomy) přes kombinace komponent (Molekuly a Organismy) až po celé šablony a stránky.
Proces ve vývoji produktu, kdy vývojáři implementují připravený design. Pro úspěšnou implementaci vytvořeného designu je nezbytná pravidelná spolupráce designérů a vývojářů.
Často však design handoff neprobíhá tak hladce, jak by měl – implementované designy se liší v menších nebo větších detailech, spousta informace se ztrácí a podobně. Jednou z hlavních výhod dobře nastavených design systémů je právě ušetření času při imlementaci designu.
Z anglického „Design system(s)“.
Design systém je knihovna vizuálního stylu, UI komponent a dalších elementů, které společně pomáhají týmům navrhovat a vyvíjet jeden nebo více produktů.
Součástí design systému je i jeho dokumentace, která popisuje vše, co design systém nabízí.
Design tokeny jsou nejnižší úrovní každého design systému. Pomáhají definovat a udržovat vizuální styl aplikace z jednoho centrálního místa. Tokeny by měly být definovány nezávisle na konkrétních platformách a poté exportovány jako např. CSS nebo javascriptové proměnné.
Příklady vlastností, které lze uložit jako tokeny: paleta barev, velikosti písma, mezery (spacing), definované stíny, a mnohé další.
Sada pravidel a doporučení dokumentovaných v design systému. Často jsou „Do's/Don'ts“ zobrazeny vedle sebe, popisující k čemu se daná komponenta nebo UX pattern může hodit skvěle (Do), a k čemu se komponenta používat nemá (Don't).
Z anglického „Reference site“, někdy také „Documentation site“.
Dokumentace design systému. Dokumentační stránka je chybně často vnímána jako samotný „design systém“, i když je pouze referencí k použití stylů, komponent a funkcí design systému.
Dokumentace někdy bývá přístupná veřejnosti. Populárními příklady jsou dokumentační stránky Material Designu od Google nebo Orbitu od Kiwi.com. Dalším z českých příkladů je i Design systém GOV.cz.
Z anglického „Component library“ nebo také „Pattern library“.
Knihovna komponent je sada znovupoužitelných komponent. Jsou pravděpodobně nejvýraznější a nejčastěji používanou částí design systémů, proto si je lidé občas pletou právě s design systémy. Je však pouze jednou částí celku.
Z anglického „Content Style Guide“.
Příručka pravidel pro psaní různých textů pro aplikaci nebo web. Často obsahuje nejen praktická pravidla pro gramatiku, formátování nebo voice & tone, ale i konkrétní příklady pro psaní mikro textů pro komponenty (např. tlačítko nebo tooltip) či UX patterny (např. formulářové chybové hlášky).
V design systémech mají běžně místo jako samostatná sekce v dokumentaci.
Storybook je populární nástroj pro vývoj a testování komponent. Velmi často se Storybook také používá na vývojářskou dokumentaci.
V angličtině často uváděný jako „Foundation“ nebo „Visual style guide“.
„Style guide“ je sekce design systémů, která popisuje základní vizuální atributy design systému. Běžně v nich můžeme najít palety barev, typografii nebo hodnoty odsazení – většinou vše, co je dostupné jako design tokeny.
Ideálně jsou jednotlivé style guide atributy doplněné alespoň krátkým vysvětlením, jak s nimi pracovat (např. k čemu se hodí která barva z palety barev).
Zkratka z anglického „User Interface Kit“ nebo „UI library“.
Protějšek knihovny komponent dostupný v grafickém nástroji, např. ve Figmě nebo ve Sketchi. Většinou s UI kitem pracují designéři, často je však ale otevřený i dalším rolím v týmu (např. produktovým manažerům nebo vývojářům).
Jeho hlavním cílem je urychlit prototypování a design handoff.
Z anglického „UI component“.
Modulární část UI rozhraní, která se dá opakovaně použít při designu či vývoji aplikace. Aby byly UI komponenty co nejvíce univerzální, měly by být nezávislé na datové či „business“ vrstvě aplikace. Data by do komponent měly být předávány pouze pomocí jejich API.
Běžnými příklady komponent jsou tlačítka, tooltipy, ikonky, karty a další.
Z anglického „UX pattern“.
UX patterny pomáhají designérům navrhovat funkční a otestovaná řešení běžných interakcí. Jsou to osvědčené postupy v aplikacích nebo produktech např. způsob, jak má fungovat přihlašovací formulář nebo navigace. Klíčové UX patterny bývají dokumentovány jako součást design systémů, často v samostatných sekcích dokumentační stránky.
Z anglického „Visual regression tests“.
Oblíbená testovací technika pro UI komponenty design systémů. Vizuální testy pomáhají odchytit neočekávané změny designu, obzvlášť pokud se změnil např. design token nebo atomičtější, široce používaná komponenta.
