Design systém a jeho využití Ministerstvem vnitra
Co je to design systém?
Aby Ministerstvo vnitra mělo všechny svoje weby napříč veřejnou správou konzistentní, využívá k tomu design systém. (1) Ten lze využít i při tvorbě jakýchkoli jiných webů a digitálních produktů. Jedná se totiž o soubor dokumentovaných komponent a UI a UX standardů (patternů a postupů), které slouží k tomu, aby práce byla jednodušší a přehlednější. (2)
Výhodou používání design systému je šetření času — když nemusíte začínat od základů, jde vám práce rychleji, tudíž šetříte i peníze. Také vám to umožňuje se pustit rovnou do složitějších úkolů. Mezi vašimi weby a produkty udržuje konzistenci — všechny vypadají stejně, což usnadňuje orientaci, používání a soudržnost uživatelského rozhraní. Vybrané komponenty a styly by měly splňovat požadavky ohledně přístupnosti webů. (3) Nápomocné může být, že standardizované postupy vytvoří jednotný jazyk mezi týmy vývojářů, designérů a projektových manažerů. (4)
Design systém má samozřejmě i své limity. Jelikož se systém neustále vyvíjí, je potřeba ho udržovat i v jednotlivých webech a aplikacích. Také je potřeba se s ním nejprve naučit pracovat, abyste ho byli schopni správně použít. (5)
Design systém slouží designérům, vývojářům, manažerům, klientům i externím pracovníkům. (6)
Co design systém obsahuje?
Jednotlivé části design systému se mohou lišit na základě toho, kdo ho vytvářel. Je ale velmi pravděpodobné, že v nich narazíte na style guide, UI komponenty, UX patterny a obsahový style guide.
Style guide určuje, jak bude výsledný web nebo aplikace vypadat. “Součástí style guide jsou tzv. 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.” (7)
UI komponenty se nacházejí v knihovně komponent a UI kitu. Knihovna komponent obsahuje dostupné komponenty a jejich API, aby je vývojáři mohli jednoduše použít. UI kit těmto komponentům odpovídá po designové stránce. Právě to, že knihovna komponentů a UI kit si odpovídají, zajišťuje konzistenci produktů.
UX patterny rozhodují o funkčnosti webů a produktů — ovlivňují interakce a postupy, např. funkci přihlašovacích formulářů. “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.” (8)
Style guide je v podstatě příručka pravidel pro psaní textů pro web či aplikaci. Obsahuje nastavení formátování, gramatická pravidla, příklady krátkých textů nebo slovník s výrazy typickými pro daný web/aplikaci. (9)
Nejznámější design systémy
Mezi nejznámější design systémy patří Material Design od Google, Human Interface Guidlines od Apple nebo Fluent od Microsoftu. (10)
Material Design je open-source design systém od Google, který se zaměřuje na frontend — tedy to, co vidí uživatel, když web nebo aplikaci spustí. Soubor obsahuje 28 UI komponent, 1 984 variant a 429 stylů. Lze v něm najít bannery, checkboxy, oddělovače, ikony, tlačítka, ukazatele progresu, vyhledávání, záložky, …). (11)(12)
Firma Apple vytváří design Human Interface Guidlines, který využívá pro své mobilní telefony, TV, počítače, iPady i chytré hodinky. V souboru můžeme najít i např. dotyková gesta, upozornění nebo hodnocení pomocí hvězdiček. Kromě konkrétních komponent, nabízí také videa, která mohou pomoci s designováním. (13)
Třetím design systémem je Fluent od Microsoftu, který je open-source a vhodný pro všechny platformy. Momentálně ho využívají např. Windows 10 a 11. Tento soubor pracuje hlavně s 5 komponenty: světlem, hloubkou, pohybem, materiálem a měřítkem. Nabízí klasicky rozložení, styly, ovladače, zařízení, použitelnost apod. (14)
Design systém Ministerstva vnitra
V Česku se můžeme s Design systémem setkat u Ministerstva vnitra. Jeho systém gov.cz je povinný pro všechny weby a aplikace, které spadají pod eGovernment — ministerstva, ústřední orgány státní správy, organizační složky státu apod. (15) Konkrétně byl tento design využit u https://portal.gov.cz, https://chcidatovku.gov.cz/identita-obcana, https://covid.gov.cz nebo aplikace čTečka. (16)
Systém má nastavená pravidla, která určují, co smí a co nesmí ten, kdo soubor používá, upravovat. Možnost změny je u rozložení stránky (layoutu), výběru primární barvy (ale musí být dodržen kontrast z důvodu přístupnosti), velikost písma, … Na druhou stranu se nesmí upravovat vzhled a funkce již existujících komponent, větší změny v barvách nebo typ fontu. (17)
Když se podíváte do některé z kategorií, můžete najít např. všechny barvy, které lze využít. Jsou rozděleny podle toho kde — barvy pro pozadí stránky, text, upozornění, chyby apod. Vždycky se zde nachází obdélníček, ve kterém je barvu vidět, a k němu příslušný hexa kód a CSS proměnná. (18)
Dále se zde nachází soubor ikon — od základních jako šipky, hodiny, koš, až po komplexní ikony zobrazující např. formát dokumentu. (19)
Typografie ukazuje řez písma, jeho velikost a řádkování. Mezi komponentami se dá najít všechno do meny, lišty se souhlasem (cookies), dialogová okna, nápověda, odkazy, vyhledávání, záložky atd. (20)
Závěrem
Design systémů existuje velké množství. K těm, která zde již byla zmíněna, jde dodat např. Atlassian, Polaris, Carbon Design System, Audi nebo Lightning Design System. Usnadňují vytváření webů a aplikací pomocí souborů komponent, které lze pro web využít, a zajišťují konzistenci. Pokud tedy budete designovat web a nebudete vědět, kde začít, design systém může být jednou z možností.
Seznam zdrojů
(7)(8)(9) Co jsou design systémy? DesignSystémy.cz [online]. Praha, 2022 [cit. 2023–01–03]. Dostupné z: https://designsystemy.cz/co-jsou-design-systemy/
(1)(3)(15–20) Design systém [online]. Praha: Ministerstvo vnitra, 2022 [cit. 2023–01–03]. Dostupné z: https://designsystem.gov.cz/#/
(13) Developer [online]. USA: Apple, 2020 [cit. 2023–01–03]. Dostupné z: https://developer.apple.com
(5) FESSENDEN, Therese. Design Systems 101. 11. 4. 2021. [cit. 2023–01–03]. Dostupné z: https://www.nngroup.com/articles/design-systems-101/
(14) Fluent Design System [online]. USA: Microsoft, 2017 [cit. 2023–01–03]. Dostupné z: https://www.microsoft.com/design/fluent/#/
(2)(4) HUDÁK, Filip. Jak na efektivní design systémy? 20. 10. 2021 [cit. 2023–01–03]. Dostupné z: https://www.ackee.cz/blog/jak-na-efektivni-design-systemy
(11) Material Design [online]. Dublin: Google, 2014 [cit. 2023–01–03]. Dostupné z: https://m3.material.io
(12) SPRADLIN, Liam. Material Design at Android Developer Summit 2022. 24. 10. 2022 [cit. 2023–01–03]. Dostupné z : https://material.io/blog/material-ads-2022
(6)(10) STRAKA, Ondřej. Design systémy: efektivnější vývoj vašich digitálních produktů. 14. 9. 2021. [cit. 2023–01–03]. Dostupné z: https://www.eman.cz/blog/design-systemy-all-in-1-vaseho-brandu/
