Nastavte svou firmu na tvorbu styleguide

O tom, proč si pro svůj zbrusu nový produkt tvořit styleguide, už bylo napsáno asi tak milion pět set tisíc řádků. Je vcelku snadné začít se styleguide v momentě, kdy od podlahy tvoříte nový produkt. Hodně s tím pomohou i nástroje, více či méně automatizované. Úplně jednoduché to už však není v momentě, kdy vám nějaký produkt několik let běží (a třeba vydělává).

Všemožné styleguide (jak jim souhrnně říkám) se v posledních letech vyrojily jako houby po dešti. Není až tak podstatné, jestli to jsou statické design manuály, živoucí knihovny komponent či patternů nebo pravidla pro používání brandu. Nebudu tu tedy psát o tom, co všechno ve styleguide má a nemá být. Cílem tohoto článku je spíš poradit všem, kteří cítí potřebu vytvořit styleguide pro svůj produkt, který už nějakou dobu je na trhu.

Podívejme se tedy spolu na příběh jednoho mladého designera.

“Musíme mít styleguide,” pronese jednoho dne mladý designer, chvíli po tom, co je unesen styleguidem Mailchimpu. Okamžitě sesmolí efektní prezentaci se všemi výhodami, které našel různě po internetu, a prezentuje celou tuto myšlenku managementu.
Management dá projektu zelenou. Marketing a HR oddělení si mnou ruce nad skvělou příležitostí propagace, díky které se do firmy pohrne dav nových rekrutů.
Vývojáři si udělají výzkum, otestují automatizované nástroje na generování styleguide přímo z kódu, případně objeví sílu Reactu a lead developer reaguje nekompromisním: “Ano, můžeme to udělat. Ale musíme to celé přepsat.”
Po několika debatách s (nyní už ne tak nakloněným) managementem se designer stáhne, a mumlaje něco o tom, že “firma velikosti Mailchimpu si to může dovolit”, se smíří s návratem k nestrukturovanému navrhování nových podstránek.

Nebuďte jako tento designer. Nevíte jak na to? Podívejte se na několik rad, které vám v celém procesu tvorby styleguide mohou pomoci.

1) Neodkládejte začátek

Opravdu je to tak jednoduché. Nečekejte na velký redesign. Nečekejte, až vám to schválí management. Navrhujete novou podstránku? Výborně! Udělejte si inventář všech elementů na podstránce, klidně zatím statický. Dejte si dohromady základní věci — použité fonty, vlastnosti písem, typy tlačítek, styly obrázků. Tento přístup můžete praktikovat v podstatě na veškeré nové věci, které designujete — může jít o nový boxík, novou hlavičku nebo třeba i pro vizuál, který potřebujete na firemní facebookovou stránku. Vše se skládá z nějakých prvků.

2) Nastavte správná očekávání

A to nejen ostatním, ale i sobě. Nepočítejte s tím, že během prvních týdnů vytvoříte tzv. zlatý grál — živoucí knihovnu komponent, kterou budou aktivně využívat designeři, produktoví manažeři i marketing. Nesnažte se vyřešit všechno najednou — postupujte krok za krokem. Podívejte se s odstupem na svůj proces, najděte místa, ve kterých vám styleguide pomůže nejvíce, a na ta se zaměřte.

3) Nehledejte ideální nástroj

V minulosti jsem hodně času trávil tím, že jsem se snažil najít ten nejvhodnější nástroj. Na cokoliv. Tím jsem často spálil nemalou porci času. Nedělejte stejnou chybu — fotografem se taky nestanete jen proto, že si pořídíte nový fancy foťák. Začněte s nástroji, které již máte k dispozici. Používáte Photoshop? Vytvořte samostatné PSD, plachtu všech elementů, se kterými pracujete. Používáte Sketch? Ten má vestavěnou knihovnu symbolů, využijte ji. Ze začátku to často stačí, pravděpodobně budete tento provizorní styleguide používat vy. Pokud potřebujete sdílet komponenty v týmu, může s tím pomoct Craft. Pokud potřebujete nějaké klikátko online, pomůže Frontify.

4) Komunikujte správně

Je potřeba si uvědomit, že cílem styleguide není nastavit omezení budoucí kreativitě. Vyvarujte se toho, aby tým došel k nějakému takovému závěru. Vaše role jako designera není říkat týmu, že něco nelze udělat, protože je nějak nastavený styleguide. Naslouchejte potřebám produktového manažera. Pochopte, co je cílem jeho snažení. Pochopte, jaký problém potřebuje vyřešit. Vysvětlete mu, že díky styleguide můžete vyřešit instantně 8 z 10 věcí, které je potřeba udělat. A řekněte si o větší zapojení při vyřešení zbylých 2 věcí. Dejte najevo, že tento postup je ten správný postup. Že díky němu můžete dlouhodobě “uklidit” celý produkt. Zmiňte, že čím dříve vyřešíte základní prvky designu, tím dříve se budete moci více soustředit na řešení opravdových problémů. A netvořit znovu nová a nová tlačítka.

5) Buďte strukturovaní

Tento krok se často podceňuje. Nedělejte tu chybu, že nebudete znát cíl své cesty nebo že ho nastavíte příliš vágně. Sedněte si a sepište, kam se chcete dostat. Vyjmenujte všechny části, které by měl obsahovat váš styleguide. Potom se na ně s odstupem podívejte a ke každé části napište, proč ji potřebujete. Nenajdete dostatečně dobrý důvod? Škrtněte ji a věnujte svůj čas tomu, co vám opravdu pomůže. Zjistěte, které části zvládnete udělat sami a na které potřebujete pomoc někoho jiného v týmu. Ke kompletní inventarizaci a přiřazení rolí může pomoci dobrý manuál od Nathana Curtise.

6) Najděte si spojence ve vývoji

Tomuhle se prostě úplně nevyhnete. Ve více lidech se to ostatně táhne lépe! Cestou ke zlatému grálu nemůžete kráčet sami. Vyberte si ale velmi pečlivě, s kým do toho půjdete. Hledáte někoho, kdo je díky svým znalostem a vhledem do celého redakčního systému respektovaný svými kolegy. A jelikož jsou styleguide jen z malé části o designu, bez vývoje se pohnete z místa jen velmi složitě.

7) Nastavte zrcadlo týmu

Podařilo se vám přesvědčit okolí, že o styleguide už něco víte. Týmu jste poslali několik článků a případovek. A pořád to není dost, pokud to vůbec někdo četl. Pořád zaznívají názory, že “ten náš produkt je v pohodě”, že je to stále udržitelné a od původního designového směru se to nijak neodchýlilo. Vy to však svým designerským okem vidíte jinak. Nastavte tedy týmu zrcadlo. Naplánujte workshop, vytiskněte všechny možné podstránky vašeho produktu (i odvozených produktů, pokud máte), vezměte nůžky a nechte tým, ať to všechno rozstříhají. V následném kroku je nechte seskupit věci, o kterých si myslí, že řeší stejný problém a jsou řešeny několika způsoby.

Pozn.: Udělejte si ale inventář nejdříve sami! Opravdu byste až při workshopu neměli zjistit, že vaši kolegové měli pravdu. A že opravdu na webu nemáte 14 různých tlačítek, 4 odlišné podoby textových políček, ani 12 různě vypadajících nadpisů boxíků. To asi snad ale není potřeba dodávat. :-)

8) Nepolevujte

Z toho, co jsem už napsal, to pravděpodobně dost vyplynulo. Styleguide nevytvoříte za týden. Ani dva. Pokud chcete něčeho dosáhnout a někam posunout, musíte tomu věnovat víc času než ostatní okolo vás. Uvědomte si také, že management nevidí, kolik úsilí je potřeba vynaložit. Dost pravděpodobně máte své úkoly ve sprintu, které vám nedávají příliš prostoru na tvorbu strukturovaného styleguide v pracovní době. Nevadí, má to řešení. I když trochu kontroverzní. Věnujte tomu třeba i několik přesčasů, sedněte si na to večer či o víkendu. Pokud vám tyto přesčasy zaplatí, skvělé. Pokud ne, nezoufejte. Možná právě díky tomu času, který jste tomu věnovali navíc, se vám povede nastartovat něco, na co vám v budoucnu dají prostor i v pracovní době.

Držím vám palce.

Like what you read? Give Jan Toman a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.