Design systém: sada pravidel a komponent pro web
Design systém je sada pravidel a hotových stavebních dílů – tlačítek, formulářových polí, karet, tabulek – ze kterých se skládají všechny obrazovky webu nebo aplikace. Každý díl je jednou navržený, jednou naprogramovaný a popsaný, kdy a jak se používá. Velkým projektům šetří čas a hlídá jednotnost, malému webu bývá zbytečný.
Aktualizováno
Z čeho se design systém skládá
- Základní hodnoty (tokeny) – paleta barev, stupnice velikostí písma, rozestupy, stíny, zaoblení. Všechno ostatní je z nich odvozené.
- Komponenty – tlačítko, vstupní pole, výběr data, upozornění, karta produktu, tabulka. Každá má popsané stavy: normální, po najetí, aktivní, vypnutá, chybová.
- Vzory – jak komponenty skládat do celků: přihlášení, vyhledávání s filtry, krokový formulář, prázdný seznam.
- Dokumentace – kdy komponentu použít a kdy ne, jak psát popisky, chybové hlášky a texty tlačítek.
- Kód – stejné komponenty připravené pro vývojáře, aby se návrh nemusel pokaždé znovu programovat.
Poslední bod odlišuje skutečný design systém od hezkého souboru v návrhovém nástroji. Pokud komponenty existují jen jako obrázky, vývojář je při každé nové obrazovce kreslí znovu a postupně se od návrhu odchýlí.
Design systém, brand manuál a UI kit
| Brand manuál | UI kit | Design systém | |
|---|---|---|---|
| Co popisuje | Značku: logo, barvy, písma, tón | Sadu prvků rozhraní v návrhovém nástroji | Prvky rozhraní včetně pravidel, kódu a dokumentace |
| Pro koho | Kdokoli, kdo za firmu něco tvoří | Grafiky a designéry | Designéry, vývojáře i lidi, kteří píšou texty |
| Kde se používá | Web, tisk, reklama, polepy | Při kreslení obrazovek | V návrhu i v běžící aplikaci |
| Jak se mění | Zřídka, při změně značky | S každým projektem | Průběžně, podle pravidel a s vlastníkem |
Pořadí bývá právě takové: nejdřív značka, popsaná v brand manuálu, z ní se odvodí vzhled rozhraní a teprve u většího produktu se z něj stane systém s pravidly a kódem. Rozdíl mezi tím, jak rozhraní vypadá a jak se používá, vysvětluje heslo UX a UI.
Kdy se vyplatí
Design systém je investice, která se vrací opakováním. Dává smysl, když:
- stavíte webovou aplikaci s desítkami obrazovek, formulářů a tabulek,
- na produktu pracuje víc designérů nebo vývojářů najednou,
- máte několik webů nebo aplikací, které mají působit jako jedna rodina,
- plánujete systém dlouho rozvíjet a nové funkce mají vznikat rychle a bez nového kreslení.
Typicky jde o klientské zóny, interní systémy, rezervační nebo objednávkové aplikace. U projektů, jako je aplikace na míru, se aspoň základní sada komponent vyplatí od začátku.
Kdy je zbytečný
Vizitkový nebo firemní web s několika stránkami design systém nepotřebuje. Stačí mu pár pravidel zapsaných přímo v kódu: barvy a písma jako proměnné, jeden styl tlačítka, jeden styl formuláře. Psát k tomu dokumentaci, kterou nikdo nebude číst, je zbytečný náklad.
Pozor i na opačný extrém: design systém zkopírovaný z velké firmy na malý web. Desítky komponent a pravidel, které web nevyužije, práci spíš zpomalí, protože každá drobná změna musí projít „systémem“.
Jak začít malým krokem
- Projděte existující obrazovky a vypište, kolik máte druhů tlačítek, odstínů šedé a velikostí nadpisů. Obvykle jich je víc, než je potřeba.
- Sjednoťte je na pár hodnot a zapište je jako tokeny.
- Vytvořte komponenty, které se opakují nejčastěji – tlačítko, pole formuláře, upozornění.
- Rovnou v nich vyřešte přístupnost podle WCAG: kontrast, popisky, ovládání klávesnicí, viditelný fokus.
- Teprve když se komponenty osvědčí, sepište k nim pravidla použití.
U nás a cena
Samostatný design systém jako položku v ceníku nemáme. U prezentačních webů pravidla vzhledu vznikají během návrhu, který je v ceně Firemního webu (20 000 Kč), a pro pár stránek víc nepotřebují. U aplikací a systémů na míru se sada komponent plánuje jako součást zakázky; naceníme ji předem podle rozsahu, práce mimo dohodnutý rozsah se účtuje sazbou 1 000 Kč za hodinu.
Časté otázky
Co jsou design tokeny?
Pojmenované hodnoty, ze kterých se skládá vzhled: barvy, velikosti písma, rozestupy, zaoblení rohů. Místo konkrétního odstínu se v kódu i v návrhu používá jméno, třeba „barva-hlavni“. Když se hodnota změní, změní se všude, kde se token používá.
Můžu převzít hotový veřejný design systém?
Některé jsou zveřejněné i s komponentami a dají se použít jako základ, podmínky ale ověřte v licenci konkrétního systému. Počítejte s tím, že web pak bude vypadat podobně jako ostatní, kdo ho použili. Pro aplikaci nebo interní systém to bývá rozumná zkratka, pro prezentační web spíš ne.
Kdo design systém udržuje?
Musí mít vlastníka – člověka nebo tým, který rozhoduje o nových komponentách a hlídá, aby se návrh a kód nerozešly. Bez vlastníka se z design systému za rok stane složka zastaralých souborů, kterou nikdo nedodržuje.
Pomůže design systém přístupnosti?
Ano, pokud se přístupnost řeší přímo v komponentách. Když má tlačítko jednou správný kontrast, popisek a ovládání klávesnicí, zdědí to každá obrazovka, která ho použije. Chyba v komponentě se ale stejně snadno rozšíří všude.