Honza Toman pracuje jako Design System Lead v Productboardu, předtím stavěl design systémy v Kiwi.com nebo v Czech News Center. Výhradně design systémům se věnuje již více než pět let.
Novinky
Config od Figmy je jedna z nejočekávanějších událostí designérského roku – hlavně proto, že Figma na Configu ohlašuje nová vylepšení a funkce nejpopulárnějšího designového nástroje na trhu.
Design systémy 101
Design systém je kolekce dokumentovaných komponent a standardů, které pomáhají efektivně tvořit digitální produkty. Design systémy pomáhají škálovat design a procesy zaměřující se převážně na spolupráci mezi designéry a vývojáři.
Názory
Jak se lépe ohlédnout za rokem design systémy v roce 2021 než nad již pravidelným dotazníkem Design Systems Survey od Sparkboxu.
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ů
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ů
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.
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 „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ů
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 „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ů
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ů
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ů
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ů
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 „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ů
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