Co jsou design systémy?

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.

Není tak divu, že si dnes jen již těžko dovedeme představit tvořit produkty bez nich a je čím dál více firem, které do design systémů investují.

Proč mít design systém?

Design systém se soustředí na potřeby interních produktových týmů, převážně tedy na frontendové vývojáře a designery. Pokud je design systém správně implementovaný (a dokumentovaný), poskytuje mnohé výhody. Ty nejmarkantnější popisují následující odstavce.

Zrychlení návrhu a vývoje nových funkcí

Hlavním benefitem design systémů je urychlení designu a vývoje produktu. Design systém totiž (mimojiné) poskytuje sadu UI komponent, které mohou produktové týmy rychle a opakovaně použít. Díky tomu se šetří jejich čas nejen při implementaci nových funkcí, ale také při jejich prototypování.

Díky času, který se ušetří používáním design systému tak mají designéři více prostoru pro výzkum a obecně na lepší porozumnění uživatelským problémům. Vývojáři teno čas mohou využít na tvorbu robustnějšího technického řešení či kvalitnějšímu testování, což dlouhodobě vede k nižšímu počtu bugů v produktech.

Vyšší kvalita výstupů

Design systémy poskytují po všech stránkách vyladěné a přístupné komponenty a UX patterny – vysoká kvalita je zde jedním z primárním akceptačním kritérií pro uzavření každého tasku. Není to tak, že produktové týmy nutně doručují nižší kvalitu – jen se z technického pohledu prostě musí soustředit i na mnohé další aspekty jako je práce s daty, performance, bezpečnost, a mnohé další. A právě zmíněné aspekty jako opravdu vyladěné UI interakce nebo přístupnost často skončí na dně backlogu.

Design systémy některé z těchto technických aspektů řešit nemusí (a nikdo to od nich ani neočekává). Naopak všichni očekávají vysokou kvalitu komponent z design systému. Komponenta z design systému prostě musí fungovat.

Vizuální konzistence napříč produktem (či produkty)

Pokud se k designu nepřistupuje systematicky, přirozeně vznikají nekonzistence. Bez ohledu na velikost týmu. Udržet vizuální konzistenci je těžké, i když na produktu pracuje jediný designér. A s každým dalším člověkem se zvyšuje pravděpodobnost, že se budou nové návrhy lišit od toho, co už je v produktu implementované.

Design systémy jsou výchozím zdrojem pro vizuální styl, UI komponenty a UX patterny. Proto produkty, které využívají design systém a mají jeho vysokou adopci často působí po vizuální i funkční stránce mnohem jednotněji.

Lepší kontrola nad designovým a technickým dluhem

Opakované využívání existujících UI komponent efektivně snižuje rychlost vzniku technického a designového dluhu. UI komponenty, jejich implementace i dokumentace jsou centralizované v design systému. Díky tomu k nim mají všichni členové týmu přístup (a nemusí je vytvářet od píky), navíc však dostávají možnost iterativně vylepšovat existující komponenty.

Bonusem je, že bude mnohem snažší a rychlejší v budoucnu implementovat celkový redesign nebo významně změnit vizuální stylu produktu.

Co tvoří design systém?

I přesto, že každý design systém může mít nějaké unikátní části, existuje několik základních částí, které můžete najít pravděpodobně úplně ve všech.

Style guide

Style guide je základem každého design systému a definuje, jak daný produkt vypadá vizuálně. Běžně definuje barvy, typografii a další vizuální vlastnosti designového jazyka, například zaoblení rohů, stíny a práci s mezerami (spacingem).

Součástí style guide jsou také takzvané design tokeny, které hodnoty jednotlivých vizuálních vlastností centralizovaně ukládají. Pro vývojáře jsou design tokeny dostupné jako proměnné v kódu, pro designéry jako styly v jimi používaném designovém nástroji (např. jako barvy ve Figmě).

Knihovna komponent a UI kit

Knihovny komponent jsou klíčovou součástí design systémů a lidé je často s design systémy zaměňují. Knihovna komponent je však pouze jednou ze součástí design systému, netvoří jej stoprocentně

Knihovna komponent je sada nakódovaných, znovu využitelných komponent. Všechny zahrnuté komponenty by měly být snadno dostupné (např. pomocí náhledů ve Storybooku)  a m ít řádně zdokumentovanou API, což vývojářům výrazně usnadňuje jejich používání.

Po designové stránce knihovně komponent odpovídá právě UI kit, designová reprezentace všech komponent z design systému, kterou mohou designéři používat v jejich designovém nástroji (např. ve Figmě).

Klíčové je, aby jednotlivé komponenty v knihovně a UI kitu vypadaly stejně pro vývojáře i designéry. To většinou zajišťuje dedikovaný tým, který zodpovídá za kvalitu a implementaci design systému.

Právě zmíněná symbióza mezi knihovnou komponent a UI kitem urychluje vývoj nových funkcí v produktu a zajišťuje konzistenci. Díky tomu nemusí produktové týmy opakovaně navrhovat a vyvíjet často používané komponenty.

UX patterny

Design není však zdaleka jen o tom, jak věci vypadají. Součástí design systémů je i dokumentace komplexnějších interakcí a osvědčených postupů v aplikacích nebo produktech. Příkladem může být například popis toho, jak funguje přihlašovací formulář nebo jaké navigační prvky použít v kterých konkrétních situacích.

Zdokumentované UX patterny pomáhají designérům navrhovat funkční a prověřená řešení běžných interakcí a nabízejí uživatelům produktu konzistentní dojem z používání produktu či služby.

Obsahový style guide

Poslední klíčovou součástí vyspělého design systému je obsahový style guide. Jedná se o příručku pravidel pro psaní textů pro produkt či web. Často definuje formátování, připomíná gramatická pravidla, stanovuje zakzvaný voice & tone, ale zaznamenává i konkrétní příklady pro psaní krátkých textů v jednotlivých komponentách (například pro tlačítko nebo tooltip) a UX patternech (např. formulářové chybové hlášky). Není výjimkou, pokud součástí obsahového styleguide je slovník obsahující výrazy, které jsou typické pro danou aplikaci.

V design systémech mají běžně místo jako samostatná sekce v dokumentaci.

Závěrem

Design systémy nejsou pouze aktuální trend, který se všichni snaží následovat. Jejich přínosy jsou nezpochybnitelné, i když někdy není snadné je přesně měřit. Pro týmy, které vyvíjejí produkty dlouhodobě jsou naprostou nutností a pokud je design systém dobře nastavený, poskytuje týmům obrovskou konkurenční výhodu právě v rychlosti, kterou jsou schopné doručovat nové funkce produktu.