Design system

Příklady z praxe

1. 01

   Změna barvy bez přepisování obrazovek

   Fintech tým sjednotí tlačítka napříč webem a mobilním webview pomocí design tokenů. Změna primární barvy se provede v jednom místě a nové tlačítko se propíše do přihlašování, plateb i nastavení účtu bez ručních zásahů v každé obrazovce.

   :root {
     --color-action-primary: #0057ff;
     --space-md: 16px;
   }
   
   .button-primary {
     background: var(--color-action-primary);
     padding: var(--space-md);
   }

2. 02

   Jedno destruktivní tlačítko pro více týmů

   E-commerce tým přidá do komponenty Button stav loading a variantu danger. Vývojáři přestanou vytvářet vlastní mazací tlačítka v košíku, administraci i zákaznickém účtu, takže destruktivní akce vypadají stejně a testují se na jednom místě.

   <Button variant="danger" loading>
     Smazat účet
   </Button>

Časté omyly

MýtusDesign systém je jen knihovna komponent ve Figmě.

Ve skutečnostiDesign system může obsahovat knihovnu ve Figmě, ale tím nekončí. Funkční systém propojuje návrh, kód, dokumentaci, pravidla použití, přístupnost a proces změn.

MýtusKdyž máme design system, produkt bude automaticky konzistentní.

Ve skutečnostiDesign system konzistenci usnadňuje, ale nezaručuje ji sám. Tým musí komponenty opravdu používat, udržovat jejich verze a řešit výjimky řízeně.

MýtusDesign system zabíjí kreativitu designérů.

Ve skutečnostiDesign system omezuje opakované rozhodování u základních prvků, ne produktové přemýšlení. Kreativita se přesouvá od ladění každého tlačítka k řešení toků, hierarchie informací a hodnoty pro uživatele.

Časté dotazy

Kdy má smysl zavést design system v malém týmu?

Design system má smysl v malém týmu ve chvíli, kdy se stejné prvky začnou opakovat a jejich ruční úpravy brzdí práci. Malý design system nemusí být velká interní platforma. Stačí pojmenované tokeny, několik ověřených komponent a stručná pravidla použití. Předčasné zavedení desítek komponent bez reálné potřeby naopak vytvoří údržbu navíc.

Kdo má design system vlastnit?

Design system by měl mít společné vlastnictví mezi designem a vývojem, protože samotný vizuální návrh nestačí. Designéři obvykle hlídají pravidla, varianty a použitelnost, vývojáři kvalitu implementace, verzování a integraci do produktů. U větší organizace pomáhá malý core tým, který spravuje základ a přijímá příspěvky od produktových týmů.

Je design system totéž co UI kit?

Design system není totéž co UI kit, i když UI kit může být jeho součástí. UI kit obvykle obsahuje vizuální prvky pro návrhový nástroj, například tlačítka, formuláře a karty. Design system navíc řeší tokeny, komponenty v kódu, přístupnost, obsahová pravidla, proces změn, verzování a dokumentaci chování v reálném produktu.

Jak se design system udržuje při rebrandingu?

Design system při rebrandingu pomáhá oddělit význam od konkrétní podoby. Komponenty používají tokeny a pravidla, takže tým mění například hodnotu primární barvy, typografickou škálu nebo rádius rohů na centrálním místě. Rebranding přesto vyžaduje kontrolu kontrastu, stavů komponent, ikon, dokumentace a míst, kde staré hodnoty vznikly mimo systém.

Zdroje

1. Design Tokens Community Group(otevře se v novém okně)W3C
2. Web Content Accessibility Guidelines (WCAG) 2.2(otevře se v novém okně)W3C, 2023
3. CSS custom properties for cascading variables(otevře se v novém okně)MDN Web Docs
4. Describing the UI(otevře se v novém okně)React

Související pojmy

• Design tokenyDesign tokeny jsou pojmenované hodnoty vizuálních rozhodnutí, jako jsou barvy, odsazení, poloměry rohů nebo velikosti písma, uložené odděleně od kódu i od návrhu. Místo konkrétního zápisu #0B5FFF se v designu i v aplikaci odkazuje název color.action.primary, takže jedna změna hodnoty se promítne do webu, mobilní aplikace i dokumentace současně.
• WireframeWireframe je hrubý návrh obrazovky, stránky nebo toku, který ukazuje rozmístění obsahu, ovládacích prvků a priorit bez finální grafiky. Slouží k rychlé debatě o struktuře, navigaci a interakci, aby tým odhalil chyby v zadání dřív, než vznikne vizuální design nebo kód.
• MikrointerakceMikrointerakce je malá, cílená reakce digitálního rozhraní na konkrétní akci uživatele nebo změnu systému. Typicky potvrzuje kliknutí, ukládání, přetažení, chybu či dokončení úkolu. V UX pomáhá lidem pochopit stav aplikace, snižuje nejistotu a dodává produktu pocit plynulosti bez zbytečné složitosti.
• Kontrast textuKontrast textu je měřitelný rozdíl jasu mezi barvou písma a barvou pozadí, vyjádřený kontrastním poměrem od 1:1 do 21:1. Metodika WCAG požaduje pro běžný text alespoň 4,5:1 a pro velký text 3:1 na úrovni AA. Nízký kontrast znesnadňuje čtení lidem se slabším zrakem i uživatelům na slunci.
• Vizuální hierarchieVizuální hierarchie je uspořádání prvků rozhraní tak, aby oko čtenáře vnímalo jejich důležitost ve zvoleném pořadí. Designér ji vytváří velikostí, kontrastem, barvou, tučností, prázdným místem a umístěním na stránce. Cílem je, aby uživatel bez čtení celého obsahu poznal, co je nadpis, co hlavní akce a co doplněk.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• A/B testováníA/B testování je řízený experiment, který porovnává dvě varianty stránky, funkce, ceny nebo sdělení na podobných skupinách uživatelů. Měří předem zvolenou metriku, například konverzi nebo retenci, a pomáhá rozhodnout, zda změna skutečně zlepšuje výsledek, nebo zda pozorovaný rozdíl mohl vzniknout náhodou.
• ACIDACID je sada čtyř vlastností databázové transakce: atomicity, consistency, isolation a durability. Zaručuje, že skupina zápisů proběhne jako jeden celek, neporuší definovaná pravidla databáze, nebude se nebezpečně míchat s jinými transakcemi a po potvrzení přežije pád systému, například při převodu peněz.