Design systems
co, proč, jak?
Co?
Tento článek se zabývá problematikou designových systémů (anglicky design systems) a vysvětluje jejich výhody a použití. Abychom lépe pochopili, o co se jedná, musíme nejdříve pojem vysvětlit. Existuje více definic pro designové systémy, pro účely tohoto článku jsem vybrala tyto dvě.
- Design systems jsou kolekce opakovaně použitelných komponent, které jsou vedeny jasnými standardy, které lze sestavit dohromady a vytvořit tak libovolný počet aplikací.
Další definice také zní:
- Design systems jsou sada vzájemně propojených vzorů a sdílených postupů, které jsou jednotně organizovány, aby napomáhaly při návrhu digitálních produktů a vývoji produktů, jako jsou aplikace nebo webové stránky.
Z těchto definic bychom mohli pochopit, že se jedná o stejný nástroj jako jsou např. “style guide” nebo “pattern library”, není tomu ale tak. “Style guide” se zaměřuje hlavně na grafickou stránku, “pattern library” zase integruje funkční komponenty a jejich použití. Většina design systémů obsahuje obojí. Jednoduše řečeno, rozdíl je v normách a dokumentaci, která je přiložena k aktivům. S průvodcem, proč a jak je používat, jsou designové komponenty snáze použivatelné a jsou lépe rozeznatelné. Designový systém je jediným zdrojem pravdy, který seskupuje všechny prvky, které týmům umožní navrhnout, realizovat a vyvinout produkt. Design systems tedy nejsou výstupem, ale souborem výstupů. Neustále se vyvíjí s produktem, nástroji a novými technologiemi.
Proč?
Trend designových systémů není nový. Touha po faktorizaci designu a komponent tu už je dlouho. V posledních letech se ale tento trend zrychlil. Stále více společností je založena na digitálních podporách a nemá dokonce ani grafické pokyny pro tisk. Po velmi dlouhou dobu byla digitalizace považována za “vedlejší projekt”. Digitalizovaly se hlavně tištěné dokumenty. Jen málo společností mělo všechny své dokumenty a průvodce pouze digitálně. Design systems se snaží překonat tuto mezeru mezi tištěným a digitálním. Vzhledem k tomu, že počet zařízení, prohlížečů a prostředí neustále roste ohromujícím tempem, je potřeba vytvořit promyšlené a záměrné systémy návrhu rozhraní jasnější, než kdy dříve. Design systems jsou přímým potomkem grafických pokynů, ale jsou vyspělejší a integrovanější do pracovního toku týmů. Nyní také máme nástroje, které nám umožňují vytvářet a sdílet systémy komponent.
Design systems tedy slouží jako reference nebo zdroj pravdy, který pomáhá různým zúčastněným týmům (například návrhářům, vývojářům, copywriterům a projektovým manažerům) navrhovat a vyrábět digitální produkty. Mezi výhody design systems patří např.:
- Rychlejší sestavení prostřednictvím opakovaně použitelných komponent a sdíleného zdůvodnění.
- Lepší produkty díky soudržnějším uživatelským zkušenostem a konzistentnímu designu.
- Vylepšená údržba a škálovatelnost snížením konstrukčního a technického zadlužení.
- Silnější zaměření na produktové týmy prostřednictvím řešení běžných problémů, aby se týmy mohly soustředit na řešení potřeb uživatelů.
Designové systémy jsou pro společnost velkou investicí. Video níže popisuje, kdy jsou design systémy třeba, u jak velkých společností se vyplatí do nich investovat a jak je udržovat za pomocí co nejmenší vložené energie.
Jak?
Základním účelem, k čemu design systems slouží, je usnadnění práce týmů. Když tvoříme design systems neptáme se: “Co bychom měli dát do našeho design systému?”, ale ptáme se: “Kdo systém bude používat a jak?” Jakmile je náš cíl už definován a máme bližší představu o tom, jak společnost funguje a co přesně potřebuje, je mnohem jednodušší začít.
Co tedy potřebujeme znát a vložit do design systému, aby správně fungoval? Jsou to tyto věci:
- Účel a sdílené hodnoty
Před začátkem jakéhokoli projektu je dobré si ujasnit cíle. Musíme týmy sladit kolem jasných sdílených cílů. Toto pomůže vybudovat společnou vizi. Tyto cíle a vize se určitě budou s časem vyvíjet, což je normální. Musíme se ale ujistit, že tyto změny jsou prodiskutovány.
2. Principy designu
Principy designu jsou “vodítka”, která pomáhají týmu pomocí designu dosáhnout finalizace produktu.
3. Identita a jazyk značky nebo společnosti
Identita by měla být definována v souladu se strategiemi a cíli značky. Hovoří se o tzv. “vjemových vzorcích”, mezi které patří např. tyto vlastnosti: barvy, fonty, ikony, tvary, fotografie, animace, atd. Tyto vlastnosti tvoří “abecedu” značky. Abychom mohli vytvořit jazyk, je potřeba vytvořit pravidla, podle kterých se týmy musí řídit.
4. Komponenty a vzory
Komponenty a vzory jsou srdcem celého design systému. Všechny předešlé elementy pomáhají vytvořit právě komponenty a vzory. Rozdíl mezi komponenty a vzory dobře popisuje tento obrázek:
Na závěr tohoto příspěvku bych ráda ukázala některé příklady design systémů. Patří zde např. Material Design, Atlassian, Polaris (od Shopify) nebo IBM.
Použité zdroje:
FANGUY, Will. A comprehensive guide to design systems. Invision [online]. 2019 [cit. 6.1.2021]. Dostupné z: https://www.invisionapp.com/inside-design/guide-to-design-systems/
HACQ, Audrey. Everything you need to know about Design Systems. UX Collective [online]. 2018 [cit. 6.1.2021]. Dostupné z: https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969
KHOLMATOVA, Alla. Design systems : a practical guide to creating design languages for digital products. Smashing Media AG: 2017. ISBN 978–3–945749–58–6.
