Slovník pojmů

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.


Adopce design systému

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).


API komponenty

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.


Atomický design

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.


Design handoff

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.


Design systém

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 token

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ší.


Do's/Don'ts

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).


Dokumentační stránka

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.


Knihovna komponent

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.


Obsahový style guide

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

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.


Style guide

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).


UI kit

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.


UI komponenta

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ší.


UX pattern

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.


Vizuální testy

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.

You've successfully subscribed to DesignSystémy.cz
Vítejte zpět! Přihlášení proběhlo úspěšně.
Výborně, Váš email byl potvrzen.