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

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.

Pokud se zabýváte novinkami kolem vývoje frontendu, nemohlo vám uniknout, že Smashing Magazine vydává každým rokem několik svých publikací. Letos v září byla výdána nová kniha s názvem Inclusive Design Patterns. Knihu jsem si objednal a musím říct, že se četla doslova sama. Rozhodl jsem se proto sepsat hlavní postřehy pro ty z vás, kteří možná ještě přemýšlí nad koupí nebo hledají možnost pro nové sebevzdělávání.

Autorem knihy je Heydon Pickering, známý jako UI designer, řečník a odborník na přístupnost na webu. Na Smashing Magazine je autorem několika zajímavých článků. Dále provozuje svůj blog HeydonWorks.

Zaměření knihy

Hlavním tématem knihy je tvorba snadno přístupných webů a webových rozhraní. Autor říká, že si možná ani tento problém neuvědomujeme, ale jako vývojáři vytváříme špatně přístupné webové stránky odjakživa. Problémem není nedostatek talentu nebo vědomostí. Problémem je způsob, jakým řešíme konkrétní úkoly.

Heydon si dal za cíl čtenářům ukázat, jak lze vytvořit přístupná rozhraní bez velkého úsilí. Chce všem sdělit, že je nutné nad návrhem komponent přemýšlet jiným způsobem. Je třeba navrhovat web inkluzivně.

Inkluzivní design – co to spojení znamená?

Inkluzivní návrh webu hovoří o tom, že je třeba při vývoji frontendu nahlížet na problém z různých perspektiv. Váš web si budou pravděpodobně prohlížet velice různí uživatelé. Musíme brát v potaz už jen to, že někteří z nich budou web prohlížet na svém notebooku a jiní na mobilu. Někteří můžou mít velice špatné internetové připojení. Jiní zas trpí zrakovou vadou a jsou odkázaní na své čtečky obrazovky s hlasovým výstupem. A to je jen drobný výčet možných situací. Inkluzivní návrh je takový návrh, který počítá s možnými problémy.

Vypůjčil jsem si jednoduchou ukázku z knihy.

HTML:

<div class="button"></div>

CSS:

.button {
  width: 200px;
  height: 70px;
  background: url('../images/button.png');
}

JavaScript:

button.addEventListener('click', function() {
  // the event fired on click
});

Takto navržené tlačítko nepočítá s rozdílným chováním uživatelů. Možných problémů je hned několik. Například:

• Tlačítko obsahuje PNG obrázek. Uživatel, který bude zoomovat na svém mobilu nebo uživatel s Retina obrazovkou, bude tlačítko vidět rozmazané.
• Pokud zakážeme načítání obrázků úplně, stane se takto navržené tlačítko neviditelné.
• Protože je použitý <div> element namísto <button>, nebude možné udělat na tlačítko focus pomocí TAB klávesy.
• Protože textový popisek tlačítka je umístěný přímo v obrázku, zrakově postižení lidé nemají možnost jak zjistit, který popisek tlačítko obsahuje. Jejich čtečky danou informaci v HTML kódu nenajdou. Navíc takové tlačítko nelze přeložit do jiných jazyků. Tudíž ani uživatelé ze zahraničí, kteří neznají náš jazyk, nebudou schopni daný web používat.

Na tvorbu tlačítka a možné problémy je třeba nahlížet z různých perspektiv. V knize je potřeba podobného uvažování neustále opakována. Vždy je vše vysvětleno na konkrétních praktických ukázkách.

Ať jsi začátečník nebo pokročilý kodér, určitě se dozvíš něco nového

Když jsem zvažoval, zda tuto knihu vůbec objednat, tak jsem prvně trochu váhal. Říkal jsem si: „Tvorbou webů se zabývám již deset let a za tu dobu člověk posbírá veliké množství zkušeností. Přinese mně tato kniha něco nového?“ Navíc se snažím pečlivěji vybírat, do čeho investuji svůj volný čas. Co jsem rozhodně něchtěl, je dokola pročítat základní teorii. To považuji za problém i u spousty článků nebo přednášek, na které na internetu narážím – málo konkrétních ukázek, spousta teorie a konceptů. Naopak zbožňuji a vyhledávám připadové studie – jdou přímo k věci a na konkrétních ukázkách se toho nejvíce naučím.

Potěšilo mě, když jsem zjistil, že kniha je doslova napěchována praktickými ukázkami. Obsahuje spoustu komponent a připravených ukázek kódu, které můžete rovnou použít v konkrétních situacích.

Nemusíte mít obavu, že se budete učit vytvářet pouze základní věci, jako tlačítka nebo odkazy. Na své si přijde jak začátečník, tak i pokročilý kodér. Kniha z kraje zmiňuje, jak zapisovat správně např. HTML dokument nebo titulek stránky. Důraz se klade opět na přístupnost. Pokročilý čtenář může tento text jen prolétnout a zpytovat své svědomí, zda skutečně daná doporučení dodržuje.

Po několika základních kapitolách přicházejí na řadu pokročilejší techniky. Dozvíte se tak například:

• jak správně vytvářet přístupné navigace
• jak vytvářet SVG ikonky, které nesou sémantickou informaci
• jak vytvářet správně formuláře
• jak vytvářet jejich validační hlášky způsobem, abychom správně informovali i uživatele se zrakovým postižením použivající čtečku

Podobných oblastí, kterým se kniha věnuje, je monohem více.

Oblasti, kterým se kniha věnuje

Obsah knihy lze rozdělit do následujících kapitol:

1. Dokument
2. Odstavec
3. Jak tvořit blogové články?
4. Navigace
5. Menu tlačítko
6. Inkluzivní prototypování
7. Jak tvořit seznamy produktů?
8. Jak vytvářet přístupné filtry?
9. Registrační formuláře
10. Test-Driven-Development při tvorbě frontendu

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

Nejvíce mě překvapilo, jak jsou jednotlivé příklady v knize dávány do spojitosti s použitelností pro zrakově postižené uživatele. Až díky jejich čtečkám obrazovky si dokážeme uvědomit, zda poskytujeme správné sémantické informace. Základní principy jsem znal. Nikdy mně ale nenapadlo, že je třeba použít speciálního přístupu např. při zobrazení validačních hlášek nebo v případě, že používáme „preloadery“. V této oblasti jsem získal řadu cenných informací.

V čase, kdy píšu tento článek, patří Inclusive Design Patterns mezi nejzajímavější knihy z oblasti frontendu, které jsou na trhu. K dispozici je na webu Smashing Magazine, kde je možné pořídit tištěnou nebo jen elektronickou verzi.