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í.

Internet je plný zajímavých zdrojů. Představte si, že jste začínající frontend designer, nebo že jste člověk zkoumající nové možnosti pro sebevzdělávání. Pokud tyto informace pravidelně nevyhledáváte, bude složité se v současném světě frontendu zorientovat. Rozhodl jsem se proto pro malý experiment. Chtěl bych postupně vybudovat seznam zajímavých zdrojů, který by měl být užitečným rozcestníkem právě při podobném hledání.

Seznam má být určený pro všechny frontend designery, kteří se ptají, kde je možné sledovat nejnovější trendy a informace týkající se webových technologií. Chtěl bych v něm postupně popsat nejzajímavější internetové a knižní zdroje. Zmínku si určitě zaslouží i pravidelné srazy a zajímavé konference. Původně jsem se inspiroval dvěma zahraničními projekty podobného zaměření: GitHub: frontend-dev-resources a GitHub: frontend-resources. Nechci však tyto seznamy kopírovat. Část prostoru bych proto rád vyhradil i českým zdrojům. Myslím si totiž, že i v této malé zemi máme řadu zajímavých webů a publikací, ze kterých lze čerpat znalosti. V textu rize české zdroje zvýrazňuji českou vlaječkou.

Jako médium jsem vybral GitHub, protože návštěvníkům umožňuje přidávat vlastní návrhy na změny. Díky tomu mám možnost oslovit českou komunitu frontend designerů a společně se můžeme pokusit rozšířit seznam do obsáhlejší podoby.

Pokud budete hledat knihu zabývající se implementací a návrhem webů, brzo zjistíte, že nemáte pomalu z čeho vybírat. Podobných publikací je jako šafránu. Není se ale čemu divit. Věci spjaté s tvorbou moderních webů se rychle mění. Psát knihu o tématech, které mohou být za dva roky zastaralé, není vůbec snadné. Toto léto však vyšla nová kniha, která se do tohoto tématu pouští rovnou po hlavě. Dámy a pánové, chtěl bych vám představit Vzhůru do (responzivního) webdesignu.

Autorem knihy je Martin Michálek, významná osobnost české frontendové scény. Martin je specialista na CSS a responzivní design. Aktivně píše na svém blogu Vzhůru dolů, spoluzaložil a vede spolek Frontendisti.cz. Je také autorem e-booku Vzhůru do CSS3.

Cílová skupina

Martin hned v úvodu přiznává, že jeho původním záměrem bylo vytvořit technickou příručku pro kodéry. Záhy ale zjistil, že psát o technologiích a zamlčet jejich vazbu na design je v případě responzivního designu nemožné. Vypůjčím si jeho slova: HTML, CSS a design jsou zrátka spojené nádoby. Jsou to odvětví, která spolu úzce souvisí a musí se doplňovat.

Vznikla tak publikace, která na 272 stránkách nabízí množství praktických ukázek a rad. Oslovit by měla širokou škálu čtenářů. Primárně je psaná pro kodéry, kteří využíjí největší část knihy. Získají zde přehled o postupech a technologiích používaných pro tvorbu dnešních responzivních webů. Čerpat z knihy mohou však i designeři, grafici a marketéři. Pro ně jsou naopak určeny texty týkající se statistik, návrhu rozhraní a responzivních navigací.

Pokud občas čtete Martinův blog, jistě poznáte jeho rukopis. Martin si moc nepotrpí na košatá souvětí. Má rád jednoduché věty a přímá sdělení. Texty sem tam doplní svým osobitým humorem. To je přesně jeho styl. V podobném duchu je i celá tato kniha. Díky tomu, že jsou texty značně zjednodušené, měla by být kniha snadno stravitelná i pro začátečníky, kteří se k tvorbě webů dostali teprve nedávno. Pokročilejší čtenář může být zklamaný, když zjistí, že složitější techniky a nástroje nejsou v textu příliš rozebírány. Je to tak trochu daň za veliké zjednodušování. Na podrobnější zdroje je ale vždy odkazováno. Je ponecháno na čtenáři, zda si sám bude chtít nastudovat podrobnosti. Podle mého názoru to ničemu nevadí, ba naopak. Kniha se o to snadněji čte, lépe se v ní orientuje a každý čtenář si tak přijde na své.

Oblasti, kterým se kniha věnuje

Kniha se postupně dotýká celé řady témat, se kterými by měl přijít do styku každý dnešní web v průběhu svého vývoje. Obsah je rozdělen do následujících kapitol:

1. Úvod do tvorby webu
2. Dokument jako základ
3. Viewport na mobilech
4. Rychlost načítání
5. Obrázky a další média
6. Návrh rozhraní v éře mobilů
7. Design komponent rozhraní
8. Media queries a layout
9. Responzivní navigace
10. Testování responzivních webů

Kniha s vlastním dějem

Do knihy se podařilo dostat zajímavou dějovou linku. Martin zde popisuje, jak by budoval pomyslný eshop s outdoorovým vybavením ForestKid.cz. Jednotlivé kroky začíná návrhem uživatelského rozhraní. Čtenáři radí, jak se neunáhlit a neskočit rovnou na kódování jednotlivých částí. Společně tak procházíme jakousi výzkumnou fází projektu. V dalších kapitolách směřujeme k tvorbě samotného dokumentu a po částech budujeme produktovou stránku eshopu. Výzkumnou fázi tak postupně nahrazují praktické části. Texty jsou navíc doplněny o příklady umístěnými na CodePen. Ukázky je tak možné si vyzkoušet přímo v prohlížeči.

Designování v prohlížeči

V knize vás může překvapit, že při budování ukázkového eshopu nedochází k přípravě grafických souborů designerem a k jejich následnému oživení v prohlížeči. Postup, který je zde použit, se nazývá designování v prohlížeči. Vytváříme nejprve hrubou kostru aplikace, kterou v několika iteracích zpřesňujeme a vylaďujeme do finální podoby. Cílem je, dostat obsah co nejdříve do prohlížeče a odhalit včas případné problémy při návrhu. Martin je velkým propagátorem tohoto přístupu a hovořil o tom např. na WebExpo 2015. Jak však sám v knize uvádí: „Není dobrého nebo špatného pracovního postupu. Důležitý je vždy výsledek.“ Je zde ale zřejmé, že při designování přímo v prohlížeči se dobře vysvětlují principy responzivního designu.

Celkové dojmy

Ze Vzhůru do (responzivního) webdesignu jsem opravdu nadšený. Na řadě knih o webdesignu mi vadilo, že buď postrádají dostatek praktických ukázek nebo ukázky nepřináší nic nového. Opakují věci, které jsou zkušenějším kodérům známé. Martin jde o trochu dál. Jako bonus nabízí čtenářům vlastní know-how. Abyste pochopili, co tím myslím, zde je jeden příklad:

V knize je odkaz na žátěžový test typografie. Jedná se o připravený dokument obsahující všechny myslitelné i nemyslitelné HTML elementy, které mají různou délku a jsou do sebe různě zanořené. Jako kodér si ho můžete stáhnout, přidat k němu vlastní CSS a snadno tak otestovat, zda při tvorbě stylů na nic nezapomněl. Je to děsně jednoduché a ušetří to práci. I já jsem připravený dokument ve svém projektu už použil.

Ze začátku čtení jsem měl trochu obavu, aby celá kniha nepůsobila jako referenční příručka. V první půlce knihy je v textech často odkazováno na témata, která se teprve budou probírat v následujících kapitolách. Navíc zde nacházíme množství odkazů na články umístěné na blogu. Musím ale uznat, že jak jsem pokračoval ve čtení, přestal jsem toto naprosto vnímat. Jakmile jsem měl pocit, že bych si potřeboval víc nastudovat, použil jsem odkaz a přešel na blog Vzhůru dolů. Zde je krásně vidět, jak se Martinovi zúročuje jeho intenzivní psaní článků z posledních let, kterými pokrývá různá témata z oblasti webdesignu.

Přeci jen musím zmínit jednu oblast, která by podle mého názoru zasloužila větší pozornost. Jedná se o přístupnost při psaní dokumentu webu. V knize sice najdete zmínky o použití HTML5 tagů a WAI-ARIA atributů. Dočtete se, že dodávají sémantickou informace a můžou pomoci např. zrakově hendikepovaným v lepší orientaci na webu. Tím zde popis končí a čtenář je pro bližší informace odkázán na blogový článek. Nějaká drobná kapitola na toto téma by se hodila. Kdo ví, třeba se v budoucnu dočkáme dalšího pokračování.

Pár slov závěrem

Kniha se podle mě opravdu povedla. Snadno se čte a jedná se o cenný zdroj informací nejen pro kodéry, ale i další lidi figurující v procesu budování webu. Místo v mé knihovně zatím ještě nezabere. Ale jen z toho důvodu, že by se tam na ní zbytečně prášilo a tak jí nosím při sobě a v případě potřeby do ní nahlédnu. Pokud uvažujete o nějaké formě sebevzdělávání v oblasti webdesignu, mohu vám ji vřele doporučit.