Proč jsme v CNC začali s pattern library

V minulosti jsme v CNC až tak neřešili, jestli jsou věci na webu konzistentní — zadat grafikovi tvorbu nového formuláře bylo vždycky rychlejší než zkoumat, jak formuláře na současném webu fungují. Pak honem do vývoje, a publikovat. “Na nic jiného teď nemáme čas.”, říkali jsme si. Že už jste to někde slyšeli?

Jenže v mediálním prostředí nikdy není více času — termín olympiády nebo mistrovství světa prostě neposunume, v showbusinessu je to taky pořád nějaký večírek a party. A my nechceme usnout na vavřínech, konkurence nás jinak rozdrtí. Tak releasujeme a releasujeme, ono se to v budoucnu vyřeší lépe (přece, že jo). Po několika letech tohoto překotného tempa už stále narůstající tým nedělá z poloviny času nic jiného, než že se snaží zuby nehty udržet běžící projekty. A k tomu samozřejmě releasovat další nové funkce.

Nicméně nás čekal redesign iSport.cz, jednoho z největších sportovních portálů na českém internetu. A tehdy jsme si řekli, že to chceme udělat jinat.

Rad na tvorbu pattern library je plný internet, velmi rychle se ale dostanete k Pattern Lab a Atomic Design od Brada Frosta. Pokud ji neznáte, podívejte se na ni. Obzvlášť pokud s pattern library začínáte. Brad Frost je ostatně v patternech takový guru, jeho přednášky a články k tomuto tématu stojí za ten věnovaný čas.

Prošel jsem si opravdu dost různých přístupů a existujících knihoven. Některé byly v podstatě online manuál pro logo identitu, jiné byly čistokrevné style guides pro vývojáře. Našlo se mnoho pěkných použití a daly mi hodně inspirace. Naše očekávání byla ale trochu jinde — nechtěli jsme statickou stránku, ze které budeme v budoucnu kopírovat kusy kódu a vkládat je do našich stránek. Nechtěli jsme ani pouhý manuál, ve kterém si najdete logo a jeho použití.

Naším cílem je vybudovat nástroj, který v budoucnu pomůže všem členům týmu a ušetří jejich čas. Je jedno, jestli jste vývojář, produktový manažer nebo designer.

To je ve zkratce naše motto, se kterým naši knihovnu komponent primárně stavíme.

Začátky jsou vždy těžké. My jsme nakonec první knihovnu komponent začali souběžně na dvou projektech — již zmíněný iSport.cz a menší Reflex.cz, na kterém jsme si otestovali celou myšlenku knihovny komponent a jejího fungování. Zpětně jsem rád, že jsme si velmi brzo uvědomili následujících několik poznatků:

  • Celý koncept vytvořte společně s vývojovým týmem. Zkušenosti vývojářů z praxe myšlenku zformovaly do smysluplné podoby a díky nim se podařilo napojit všechny obsahové komponenty nad funkční šablonovací systém našeho CMS. To dnes vnímám jako absolutní “game changer” ve vývoji našich webů.
  • Testujte komponenty nad reálnými daty. Mnohem rychleji si uvědomíte, proč některé návrhy nemusí fungovat tak, jak byly původně navrženy. Vyzkoušeno za vás. Pomůže to odladit délky titulků nebo interakce jako hover stavy, apod.
  • Buďte důslední a pečliví — neusnadňujte si komponenty různými výjimkami ve vývoji a udržujte konzistentní dokumentaci. V budoucnu se vám to vrátí.
  • Nepodceňte vizuální podobu knihovny. Může to znít jako drobnost, ale uvědomte si, že celý tým má s knihovnou pracovat na denní bázi. A s koukatelným UI se nám všem pracuje lépe.

Rok 2015 pro mě byl rokem vzestupu různých style guides či pattern library. Na počátku všeho byl kdysi MailChimp, často je uváděn jako jeden z inspirativních přístupů. Postupně ale vznikaly parádní kousky jako třeba U.S. Web Design Standards, Yahoo DPL nebo BBC GEL. I v českém prostředí ale máme zajímavé případy — můžeme se inspirovat Viktorem od Jobs.cz nebo Českou televizí, která dle slov autorů úspěšně zavedla Atomic Design na redesignovaném portálu ČT24.cz a chystá se s nasazením na další jejich portály (ukázka není k dispozici). Podle zvyšující se popularity pattern library očekávám, že v roce 2016 se s podobným přístupem budeme potkávat čím dál častěji.

Znáte zajímavou knihovnou komponent? Sami ji tvoříte? Pochlubte se, podělte se o své přístupy a důvody, proč jste na to šli zrovna tím daným způsobem. Co se vám osvědčilo a co byly naopak slepé uličky?

Zajímavé zdroje v angličtině:

Show your support

Clapping shows how much you appreciated Jan Toman’s story.