náhled|Ukázka vybraných komponent design systému Material Design 3 Design systém je ucelená kolekce opakovaně použitelných komponent a standardů, která umožňuje efektivní vývoj digitálních produktů (např. webové nebo mobilní aplikace). Hlavním přínosem design systémů je sjednocení vizuálního stylu a urychlení návrhu a vývoje, protože týmy nemusí opakovaně vytvářet již existující prvky. To vede ke snížení nákladů. Design systém slouží jako tzv. „jediný zdroj pravdy“ (single source of truth) a usnadňuje spolupráci mezi designéry a vývojáři. Přispívá také k vizuální konzistenci napříč produktem a dodržování principů přístupnosti.
Mezi nejznámější veřejně dostupné design systémy patří Material Design od společnosti Google, Carbon Design System od IBM či Fluent Design System od Microsoftu. V českém prostředí je významným příkladem Design systém gov.cz, který spravuje Digitální a informační agentura pro potřeby státní správy.
Historie a vývoj Koncept systematického designu není nový, jeho kořeny sahají do éry tištěných médií a korporátních identit. Významným milníkem byl grafický manuál NASA z roku 1976, který definoval přísná pravidla pro vizuální komunikaci. S nástupem digitálních technologií se tyto principy přenesly na obrazovky. V raných dobách webu se objevily první sady nástrojů kaskádových stylů pro tvorbu webu (např. Bootstrap), které standardizovaly kód. Zásadní posun přinesl v roce 2013 Brad Frost s metodologií Atomic Design, která změnila přístup k navrhování rozhraní na hierarchický systém skládající se z atomů, molekul a organismů.
Části design systému Design systém se skládá z několika vzájemně propojených částí, které společně tvoří funkční celek:
Stylový manuál: Dokumentuje jednotný vizuální styl značky, včetně barev, typografie, ikonografie a rozložení. Knihovna komponent: Sada implementovaných prvků (tlačítka, formuláře, modální okna) v kódu. Pro jejich dokumentaci a testování se často využívají nástroje, jako je např. Storybook, který poskytuje interaktivní náhledy jednotlivých komponent. Sada prvků UI: Vizuální reprezentace komponent určená pro designérské nástroje, jako je Figma. Umožňuje designérům navrhovat rozhraní s využitím stejných prvků, jaké mají k dispozici vývojáři. UX vzory: Popisuje komplexnější funkční celky a logiku skládání komponent, např. strukturu přihlašovacího formuláře. Obsahový stylový manuál: Definuje pravidla pro psaní textů, tón komunikace a terminologii používanou v uživatelském rozhraní.
Design tokeny Základním stavebním prvkem moderních design systémů jsou design tokeny. Jedná se o sémanticky pojmenované proměnné, např. md.ref.palette.secondary90 namísto statické hodnoty #E8DEF8, které uchovávají vizuální rozhodnutí nezávisle na platformě. Tokeny slouží jako sdílené proměnné, které sjednocují vizuální hodnoty mezi designem a vývojem. Díky tokenům je tak možné efektivně provádět globální změny vizuálního stylu (například při rebrandingu) úpravou hodnot na jediném místě, bez nutnosti opakovaných zásahů do jednotlivých komponent.
Odkazy
Reference
Externí odkazy
DesignSystémy.cz – český magazín o design systémech Design systém gov.cz Material Design 3
Kategorie:Design Kategorie:Uživatelské rozhraní Kategorie:Webdesign