Designový systém pro weby: kdy se vyplatí
Designový systém je sdílená sada vizuálních rozhodnutí a znovupoužitelných komponent. Dobře udělaný urychlí veškerou další práci. Špatně dimenzovaný se stane paralelním projektem, který spotřebovává čas a zastarává.
Tento průvodce ukazuje, co zahrnout, kdy se to vyplatí, a jak začít, aniž byste postavili knihovnu, kterou nikdo nepoužije.
Co obsahuje, od podstatného po doplňky#
Začněte odshora seznamu. První položky řeší většinu problému.
| Vrstva | Obsah | Priorita |
|---|---|---|
| Základy | Barvy, typografie, škála odstupů | Podstatné |
| Prvky | Tlačítka, pole, odkazy, štítky | Podstatné |
| Vzory | Formuláře, karty, navigace, tabulky | Vysoká |
| Šablony | Kompletní rozvržení stránek | Střední |
| Pokyny pro psaní | Tón, popisky, chybové hlášky | Vysoká a často opomíjená |
| Pravidla použití | Kdy použít kterou komponentu | Střední |
| Živá dokumentace | Ukázky běžící na skutečném kódu | Podle rozsahu |
Pokyny pro psaní jsou nejvíc podceňovaná vrstva. Nekonzistentní popisky a hlášky poškozují zážitek stejně jako nekonzistentní komponenty.
Kdy se to vyplatí#
Designový systém má náklady na vytvoření i na údržbu. Vyplatí se, když je dost opakování, aby se umořily.
- Několik produktů nebo webů, které mají vypadat jako jedna značka.
- Tým, kde více než jeden člověk navrhuje nebo staví rozhraní.
- Velký web s mnoha šablonami a očekávaným růstem.
- Střídání dodavatelů, kde konzistence závisí na dokumentaci.
- Nevyplatí se: firemní web o deseti stránkách s jednou odpovědnou osobou.
- Nevyplatí se: když se web stejně bude do roka přestavovat.
- V těchto případech soubor stylů s barvami, písmy a tlačítky zcela postačí.
Začít v malém#
Nejspolehlivější způsob, jak mít designový systém, je vytáhnout ho z toho, co už existuje, místo navrhování v abstrakci.
- Udělejte inventuru: zachyťte všechna tlačítka, pole a karty ze současného webu.
- Najdete příliš mnoho variant. Vyberte jednu od každé a zbytek odstraňte.
- Definujte tokeny: barvy, písma, odstupy, poloměry, stíny — jako pojmenované proměnné.
- Postavte pět až deset komponent, které se vyskytují všude.
- Zdokumentujte každou se stavy a poznámkou, kdy ji použít.
- Aplikujte na skutečnou šablonu, než půjdete dál; aplikace odhalí, co chybí.
- Teprve poté rozšiřujte, a jen když je komponenta potřeba víc než dvakrát.
Systém vytažený ze skutečného webu se používá; systém navržený v abstrakci vypadá pěkně v dokumentaci a v praxi se ignoruje.
Jak designové systémy umírají#
Způsoby selhání jsou předvídatelné a téměř všechny organizační.
| Způsob selhání | Příznak | Prevence |
|---|---|---|
| Nikdo není odpovědný | Přestane se aktualizovat | Vlastník s vyhrazeným časem |
| Rozchází se s kódem | Dokumentace lže | Generovat ze skutečného kódu |
| Příliš rigidní | Týmy ho obcházejí | Umožnit zdokumentované výjimky |
| Příliš velký | Nikdo nic nenajde | Začít s deseti komponentami |
| Chybí přijetí | Duplicitní komponenty mimo systém | Zapojit uživatele od začátku |
| Jen návrh, žádný kód | Vývojáři implementují ručně | Skutečné komponenty, ne jen obrazovky |
Časté dotazy
Potřebuji designový systém pro malý web?
Ne. U firemního webu s jednou odpovědnou osobou stačí soubor stylů s barvami, typografií, odstupy a několika komponentami a plní stejnou funkci. Formální systém se vyplatí až tehdy, když má konzistenci držet víc lidí nebo víc produktů.
Jak dlouho trvá ho vytvořit?
Použitelná první verze — tokeny plus deset komponent — trvá dva až čtyři týdny. Kompletní systém s dokumentací, kódem a pokyny trvá měsíce a nikdy není opravdu hotový, protože doprovází produkt. Začněte v malém a aplikujte brzy místo snahy dosáhnout kompletnosti před použitím.
Mám použít hotovou knihovnu?
Často ano, zejména u interních aplikací, kde vizuální identita znamená míň než tempo. Zralá knihovna vám hned dá přístupné a otestované komponenty. Přizpůsobte ji vlastními tokeny místo stavění všeho od nuly — stavět přístupné komponenty od základu je víc práce, než se zdá.
Kdo má být za designový systém odpovědný?
Určená osoba se skutečně vyhrazeným časem. Bez vlastníka systém do měsíců zastará a stane se překážkou místo pomoci, protože dokumentace přestane odpovídat produktu. Tohle je nejčastější způsob selhání a je organizační, ne technický.
designový systémknihovna komponentdesignové tokenymanuál styluvizuální konzistenceznovupoužitelné komponenty
