Kniha: Design Systems

Pokud pracujete déle na webovém projektu, dostanete se možná do situace, kdy začnete přemýšlet nad jeho lepší organizaci. Nemyslím tím organizaci na úrovni kódu, ale organizaci při návrhu jednotlivých stránek. Projekt by měl navenek působit konzistentně a jednotně. Pokud toho chcete docílit, je třeba nalézt společný komunikační kanál mezi designery, UX specialisty a frontend vývojáři. Tento společný „jazyk“ lze vyjádřit tzv. systémem designu (v angličtině pod názvem design system). Smashing Magazine vydal v září 2017 knihu Design Systems, která se tímto tématem zabývá. V následujícím textu bych chtěl přiblížit, co v knize najdete a proč se jí vyplatí přečíst.

Autorkou knihy je Alla Kholmatova, UX a interakční designerka s mnohaletou zkušeností v oblasti designu webů. Pravidelně přispívá do designových publikací (např. A List Apart), publikuje články na blogu, přednáší na konferencích a pořádá řadu workshopů.

Cílová skupina

Kniha cílí na malé a středně velké týmy, kteří se snaží integrovat systém designu do svého každodeního života. V podstatě kdokoliv, kdo se podílí na tvorbě daného produktu, může z této knihy profitovat. Na běžných projektech bych knihu doporučil přečíst převážně designerům, UX specialistům a frontend vývojářům.

Oblasti, kterým se kniha věnuje

Autorka má bohaté zkušenosti v oblasti interakčního designu. Nenajdete zde proto žádné ukázky kódu ani analýzy vhodných nástrojů. Postupně ale získáte přehled o tom, jaké jsou základní stavební bloky systému designu a jaké procesy by ho měly provázet. Vše, o čem se v knize dočtete, je vysvětleno na reálných ukázkách. Kniha se díky tomu snadno čte a texty by měly být snadno „stravitelné“ i pro méně zkušené čtenáře. Podíváte se pod pokličku službám jako Airbnb, Atlassian, Spotify, Smashing Magazine, Slack, TED a celé řadě dalších. A právě tyto pohledy na procesy skutečných produktů dávají knize velkou přidanou hodnotu.

Část I. Základy

První polovina knihy je zaměřena na popis návrhových vzorů. Dozvíte se, že se jedná o znovupoužitelné, opakující se části rozhraní a také proč je důležité tyto vzory co nejdříve rozpoznat. V knize je pak podrobněji rozebíráno rozdělení návrhových vzorů na funkční a pocitové. Funkční vzory si lze představit jako konkrétní komponenty (např. tlačítko, textové pole). Pocitové vzory reprezentují celkový styl produktu (ovlivněny např. používanými barvami, styly ikonek apod.).

V závěru první části se čtenář dozví o důležitosti správného pojmenovávání návrhových vzorů. Dobré názvy nesmějí být moc technické a členové v týmu by měli mít možnost do pojmenovávání promlouvat. Jedině tak budou mít všichni pocit, že přispívají ke společnému dílu a začnou systému desingu důvěřovat. V knize jsou pak ukázány konkrétní cesty, jak toho docílit.

Kapitoly první části se věnují následujícím tématům:

• Kapitola 1: Systémy designu
• Kapitola 2: Principy
• Kapitola 3: Funkční vzory
• Kapitola 4: Pocitové vzory
• Kapitola 5: Společný jazyk

Část II. Postupy

Systém designu se nedá vybudovat jen tak přes noc. Jeho vznik ovlivňuje mnoho faktorů: struktura vaší organizace, týmová kultura, typ samotného produktu a řada dalších věcí. Jedná se o složitý proces a Alla Kholmatova si toho byla při psaní vědoma. Hned první kapitola této části se snaží na příkladech (Airbnb vs. TED) ukázat, že systém designu nemusí být pokaždé provázený přísnými pravidly. Přišlo mně zajímavé tuto část knihy zde v recenzi vypíchnout. Mám totiž pocit, že systém designu bývá částo odmítán právě kvůli obavám z jeho náročnosti nebo případné ztráty kreativity. Tato kapitola se snaží podobné obavy vyvrátit.

Zbývající kapitoly se pak zaměřují na praktické kroky a techniky, pomocí kterých se dá vystavět a udržovat systém designu. Dozvíte se tak, jaké techniky pomáhají při jeho zavádění do organizace. Nemalá část textu je pak věnována ukázkám postupů při tvorbě návrhových vzorů – jak je správně najít, pojmenovat a určit jejich význam. V samotném závěru knihy najdete sekci věnovanou tvorbě knihovny návrhových vzorů (pattern library).

Kapitoly druhé části se věnují následujícím tématům:

• Kapitola 6: Parametry systému designu
• Kapitola 7: Plánování a praktické kroky
• Kapitola 8: Tvorba funkčních vzorů
• Kapitola 9: Tvorba pocitových vzorů
• Kapitola 10: Knihovny návrhových vzorů

Co nového vás kniha může naučit?

1. Jak získat podporu pro systém designu u vedení firmy.
2. Jak provést audit vašeho rozhraní.
3. Jak vybudovat sdílený jazyk designu uvnitř vašeho týmu.
4. Jak posunout myšlení celého týmu od designování jednotlivých stránek po designování produktu jako celku.
5. Jak co nejdříve rozpoznat jednotlivé vzory při návrhu produktu.
6. Jak nalézt rovnováhu mezi znovupoužitelností, konsistencí a přitom zachovat kreativitu.
7. Jak zamezit duplikování a nekonzistencím v návrhu.
8. Jak vybudovat knihovnu návrhových vzorů.
9. Jak efektivně vyvíjet a přidávat nové návrhové vzory.

Ukázková kapitola

Na webu Smashing Magazine je k dispozici ukázková kapitola v PDF (0.7MB). Autorka zde rozebírá výhody dobře navrženého systému designu. Můžete si tak udělat představu o tom, jakým stylem je kniha napsaná.

Co bylo pro mě největším přínosem?

Nové knihy od Smashing Magazine se snaží sledovat poslední trendy kolem vývoje webů. Když jsem se začal o systém designu zajímat já, neměl jsem po ruce žádný ucelený zdroj informací, ze kterého bych mohl čerpat. Jedinou možností bylo získávat informace z různých článků na internetu. Vydání této knihy mně osobně udělalo velkou radost a přišlo v pravý čas.

Pro mě byla kniha Design Systems hlavně zdrojem nových informací. I když jsem měl s designem systému už nějaké zkušenosti, lhal bych, kdybych tvrdil, že jsme měli na projektu vše ideálně nastavené. Proto jsem velice ocenil množství ukázek z jiných reálných produktů, kterými je kniha doslova nabitá. Díky nim se nám podařilo do projektu zanést řadu nových postupů.

Pár slov závěrem

Systém designu po mě znamenal velkou změnu. Než jsme ho s kolegy začlenili do našeho projektu, byl návrh designu a vývoj frontendu jako dva rozdílné světy. Byl jsem zvyklý, že spolupracují jen výjimečně. Nyní vzájemně kooperují a mám pocit, že je naše aplikace díky tomu snáze udržitelná. Znovupoužitelné části systému se snažíme tvořit společně a zároveň využíváme toho, co už je vytvořené. Pokud jste v podobné situaci a hledáte cestu, jak zlepšit spolupráci mezi designery a frontend vývojáři, mohu vám knihu jen doporučit. Design Systems je skvělý startovací bod plný kvalitních informací.