Co je design system
Design system není jen paleta barev nebo grafický manuál. Je to živý systém propojující vizuální styl, znovupoužitelné komponenty a pravidla jejich používání. Definuje nejen jak věci vypadají, ale i kdy a jak se mají používat. Tvůrci – designéři i vývojáři – z něj skládají obrazovky jako z hotových dílků, místo aby pokaždé vymýšleli všechno znovu.
Přirovnat se dá ke stavebnici s návodem. Máte připravené díly (komponenty) a pravidla, jak je spojovat. Výsledek je pak konzistentní bez ohledu na to, kdo zrovna staví – a staví se mnohem rychleji.
Co design system obsahuje
- Designové základy – barvy, typografie, mřížka, odsazení, ikony. Tzv. tokeny, které tvoří vizuální jazyk značky.
- Komponenty – znovupoužitelné prvky jako tlačítka, formuláře, karty, navigace, hotové a připravené k použití.
- Vzory a pravidla – jak komponenty skládat a v jakých situacích je používat.
- Dokumentace – návod, který drží vše pohromadě a umožňuje systém správně používat.
Kombinací těchto prvků vzniká jednotný jazyk, kterým firma mluví napříč všemi svými digitálními produkty.
Proč design system šetří čas i peníze
Bez design systému se každá nová stránka nebo funkce často tvoří od nuly. Designér znovu vymýšlí tlačítka, vývojář znovu píše stejný kód a časem vzniká chaos – různá tlačítka na různých místech, nekonzistentní barvy, roztříštěný vzhled. To zpomaluje práci, zdražuje údržbu a kazí dojem ze značky.
Design system tenhle problém řeší. Připravené komponenty se používají opakovaně, takže vývoj i design jdou rychleji. Změna se udělá na jednom místě a promítne se všude. A výsledek je konzistentní bez ohledu na to, kolik lidí na produktu pracuje. Čím větší je firma a čím víc má digitálních produktů, tím výraznější tato úspora je.
Design system versus UI kit a brand manuál
Tyto pojmy se snadno pletou, ale liší se rozsahem:
- Brand manuál definuje vizuální identitu značky obecně – logo, barvy, styl. Neřeší ale konkrétní digitální komponenty a jejich chování.
- UI kit je sada grafických prvků pro design, ale bez propojení s kódem a pravidly použití.
- Design system jde nejdál – propojuje vizuální styl, funkční komponenty (i v kódu), pravidla použití a dokumentaci do jednoho živého celku.
Design system je tedy komplexnější a praktičtější – neslouží jen k tomu „jak to má vypadat“, ale i k tomu „jak to postavit“.
Jak design system vzniká a jak se udržuje
Design system nevznikne přes noc a hlavně není nikdy úplně „hotový“. Obvykle se začíná auditem stávajících prvků a sjednocením základů – barev, typografie, klíčových komponent. Postupně se přidávají další komponenty a vzory a vše se dokumentuje. Zásadní je, že design system je živý – jak se produkt a značka vyvíjejí, systém se aktualizuje a rozšiřuje. Aby fungoval, potřebuje péči a jasné vlastnictví: někdo musí hlídat, že se používá, udržuje a rozvíjí. Bez toho časem zastará a lidé se od něj začnou odklánět.
Přínosy design systému
- Konzistence. Jednotný vzhled a chování napříč všemi produkty posiluje značku a důvěru.
- Rychlejší vývoj. Znovupoužitelné komponenty zrychlují design i tvorbu webů a aplikací.
- Snadnější údržba. Změna na jednom místě se promítne všude, což šetří čas i náklady.
- Lepší spolupráce. Designéři a vývojáři mluví společným jazykem a lépe se domlouvají.
- Kvalita a přístupnost. Dobře navržené komponenty mohou rovnou počítat s přístupností podle WCAG, takže se řeší jednou a platí všude.
Pro koho má design system smysl
Design system se vyplatí zejména firmám, které spravují více digitálních produktů nebo rozsáhlejší web, kde na obsahu a vývoji pracuje víc lidí. Čím větší je tým a čím víc se produkt rozrůstá, tím větší přínos. U malého jednoduchého webu s pár stránkami může být plný design system zbytečně velký – tam stačí základní sada pravidel. Rozhoduje tedy rozsah a míra, do jaké firma potřebuje konzistenci a rychlost napříč více produkty a lidmi.
Nejčastější dotazy
Je design system jen pro velké firmy?
Největší přínos má u větších firem a více produktů, ale i menší firma může těžit z jeho zjednodušené podoby – sjednocených základů a pár klíčových komponent. Rozsah se přizpůsobuje potřebě.
Je design system totéž co grafický manuál?
Ne. Grafický manuál definuje vizuální identitu obecně, design system jde dál – zahrnuje i funkční komponenty, pravidla použití a dokumentaci propojenou s vývojem. Je komplexnější a praktičtější.
Je design system jednorázová práce?
Ne, je to živý systém. Vzniká postupně a průběžně se udržuje a rozšiřuje, jak se produkt a značka vyvíjejí. Bez péče a jasného vlastnictví časem zastará.
Pomůže design system s přístupností?
Ano. Když se komponenty navrhnou rovnou s ohledem na přístupnost, řeší se tato otázka jednou a platí všude, kde se komponenta použije. To výrazně usnadňuje soulad s pravidly přístupnosti.
Chcete konzistentní a rychle rozvíjitelný web?
V AITOM vám pomůžeme navrhnout design system, který sjednotí vzhled vašich digitálních produktů, zrychlí vývoj a usnadní údržbu. Podívejte se na naši tvorbu webů a aplikací nebo nám napište. Domluvte si nezávaznou konzultaci →