Dizajn párovanie (frontend)
Ako zrýchliť vývoj prototypu vďaka frontend párovaniu
V príspevku o párovej spolupráci som spomínal párovanie dizajnér vývojár. Tu budem popisovať metódu párovania a využitia frontend frameworkov (FFW) pre rapid prototyping (RP) webových aplikácií.
Cieľ rapid prototypingu
Keďže sa chceme čo najrýchlejšie niečo dozvedieť o našom produkte, chceme čo najrýchlejšie vytvoriť testovateľný prototyp, ktorý na základe spätnej väzby od užívateľov inkrementálne zlepšujeme. Mojím najväčším problémom, bolo oprostenie sa od estetickej nedokonalosti, takže som často sklzával do prílišného detailizmu, čo zároveň spomaľovalo prototypovanie. Musel som si uvedomiť, že nie je možné vytvoriť dokonalé dielo bez pokusov a omylov.
Frontend párovanie stručne povedané
Pomocou intenzívnej kolaboratívnej spolupráce sa snažíme sa v čo najkratšom čase vypustiť testovateľný prototyp. Dosiahneme to eliminovaním všetkých krokov z procesu, než sa návrh od dizajnéra dostane k vývojarovi. Čo môže viesť k tomu, že dizajnér a vývojár si sadnú za jeden stôl a vytvárajú testovateľný prototyp. Samozrejme intenzívna diskusia patrí k tomu. Takto môžme v konečnom dôsledku ušetreniť až niekoľko týždňov oproti waterfallu.
Na každé kopanie si zobrať správnu lopatu
Aby sme predišli definovaním obecných štýlov a komponent — vynaliezaniu kolesa používame FFW určené na RP. Tie majú všetko potrebné už preddefinované a umožňujú nás oprostiť od zbytočného detailizmu, no zároveň ich môžme neskôr prispôsobovať podľa požadovaného vizuálneho štýlu. Rýchlosť postupu potom závisí od znalosti vybraného FFW oboch členov týmu. Dizajnér sa znoznamuje s workflow vývoja vo FFW. A vývojár sa snaží používať FF, tak ako je myslené, aby bol používaný a nevytvára zbytočne vlastné hacky. Vždy ma bavilo sledovať ako veci fungujú, takže som po čase bol schopný sledovať a upozorňovať na rýchle nesystémové riešenia sám, alebo ma rovno napadlo, ako by sa to dalo spraviť systémovo. Inou motiváciou sú potom jednoduché zmeny, ktoré sú pre RP dôležité. Je preto dobré nebáť sa pomalejšieho procesu na začiatku a radšej spoločne objavovať možnosti nástroja.
Skôr než sa dostaneme k počítaču
Ak sa začína od nuly, skôr než sa napíše akýkoľvek riadok kódu, je dobre mať pripravené podľa čoho sa bude pracovať. Technická špecifikácia, user story, mapu projektu, storyboard a podobne. Mám rád jednoduchšie a otvorenejšie zadania. Počas celej doby je dobré mať po ruke pero a papier, alebo iný nástroj, ktorý slúži pre vyjasnenie tam, kde slovné vyjadrovanie stojí čas. Častokrát sa celý RP môže odohrávať len na papieri. Pri párovaní on line sa mi pre veľmi rýchle náčrtky osvedčil nástroj Wireframe.cc alebo Concepts, alebo nástroj pre vzialenú kolaboráciu Screenhero. Je dobré mať možnosť ukladať verzie, aby bolo možné porovnávať a posudzovať — napríklad pomocou git repozitárov. Podľa dohodnutých kritérií a výsledkov z testovania si tak vyberieme najvhodnejšie riešenie do ďalšiej iterácie.
Zurb Foundation
Prehlasuje že začať s ňou pracovať je ľahké. Tak teda ako na to pri párovaní?
Ak ste si ešte Foundation nenainštalovali ako na to nájdete tu.
Foundation je definovaný ako mobile first FFW, preto je vhodné začínať prácu práve pre malé zariadenia. A ak je nevyhnutné upravujeme pre väčšie obrazovky.
Layout
Keďže vačšinou sa začína s rozložením elementov, Foundation ako väčšina frameworkov začína 12 stlpcovím gridom. Takže ak sa bavíme o rozložení prvkov, je nám jasné v ktorom stĺpci bude ich horizontálne rozloženie ukotvené a koľko ich zaberie. Začíname vložením riadku. Ten vytvorí horizontálny blok obsahujúci 12 stĺpcov. Do tochto bloku vkladáme ďalšie bloky ktoré nám tvoria stĺpce.
Štýlovanie — Kuchynský dres
V dokumentácii Foundation sa nachádza stránka Kitchen Sink, ku ktorej sa počas procesu neustále vraciam. Je to prehľad všetkých komponentov vo FFW. Je taký rozsiahly, že vačšinou nie je potreba vytvárať kompletne vlastné elementy. Globálne nastavenia nakoniec umožňujú štýly upraviť, podľa vlastných potrieb. Vďaka premmeným v SASS je možné vytvoriť štýly tak, ako keby sme budovali dizajnkit. Najväčšou výhodou FF Zurb Foundation je jeho podpora a záruka spoločnosti, ktorá ho vytvorila a udržuje. Dnes je vďaka svojej jednoduchosti jeden z najpoužívanejších FF.
Bootsrap
Najrozšírenejší FF aspoň to o sebe tvrdí. Vyvíjaný open source komunitou. Pre mna hlavne zaujímavý možnosťami už vytvorených tém. Ak sa rozhodnete vytvárať vlastnú tému Bootstrap odporúča ponechať zdroj, na ktorý sa nadviaže vlastná nadstavba. To umožňuje bezbolestivy prechod na novú verziu. A jeho posledná verzia je od základu prekonaná na mobil first framework.
Komponovanie
Budujeme pomocou grid systému, ktorý je možné rozšíriť na 12 stĺpcov. Ako prvý sa definuje hlavný kontajner, do neho container ako riadok a nakoniec samotné bloky ktorých šírku určujú stĺpce. Zaujímavá je aj práca so šablónami, ktorá môže ušetriť čas pri vyskladavaní nového layoutu.
Komponenty
Bootstrap má plnú skriňu komponentov, vrátane vlastných piktogramov, čím ponúka pre mňa neobmedzené možnosti.
Bootstrap je najrozšírenejší FFW, aký poznám práve vďaka tomu, že bol pôvodne vivinutý ako UI kit pre Twitter.
Zhrnutie
Ak už sa rozhodnete pre, ktorýkoľvek framework všade platí pravidlo nehackovať, ale využívať postupy tak, ako sú odporúčané. Každý hack nakoniec vždy vyústi ku problémom a nutným opravám. Tie stoja hlavne stratený čas, ktorý sme sa snažili pri RP získať. Máte už skúsenosti s párovaním dizajnér vývojár? Aké prekážky to obnašalo a aké benefity prinieslo?
