Slovník pojmů
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).
Slovník pojmů
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.
Slovník pojmů
Z anglického „Atomic Design [https://atomicdesign.bradfrost.com/chapter-2/]“. 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.
Slovník pojmů
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
Slovník pojmů
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í.
Slovník pojmů
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)
Slovník pojmů
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).
Slovník pojmů
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 [http://material.io/] od
Slovník pojmů
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.
Slovník pojmů
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
Slovník pojmů
Storybook [https://storybook.js.org/] je populární nástroj pro vývoj a testování komponent. Velmi často se Storybook také používá na vývojářskou dokumentaci.
Slovník pojmů
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ň
Slovník pojmů
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
Slovník pojmů
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
Slovník pojmů
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.
Slovník pojmů
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.