Dnevnik eklektika - Piše Dragan Babić

Mocking-up, najomrženija faza procesa web dizajna.

Barem meni.

Mockup/skica/prototip izrađena u nekom grafičkom programu (vektor ili raster) je proces kojim se započinje izrada UI-ja web lokacije. Kao što se da videti iz naslova—ja ga baš i ne ljubim. :)

Na stranu moje lične preferencije, mockup je definitivno najbolji način za klijenta da vidi šta ćete mu dostaviti. Nema boljeg. Jednostavno klijenti vole da imaju preview onoga vašeg rada, a dostavljanju “skice” tu nema premca.

Vrste mockupa iliti skica

Najverovatnije ste se susreli, ili ćete se susresti sa svakakvim klijentima, od onih: “Matori, radi šta hoćeš, samo da bude dobro.” (šta god to značilo) do slučajeva kadaćete morati da pravite mockupe, do poslednjih detalja.

Svojim klijentima skice i predloge u vidu mockupa možete po mojoj preporuci dostaviti u sledećim formatima:

1. Raster mockup Urađen često u fotošopu ili nekom drugom raster programu, omogućavaju najviše slobode pri kreaciji, pogotovo ljudima koji su vični baratanju ovim alatima. Raster mockupi su moj preferiran metod.
   
   Jedino što vidim da ne valja sa njima je to što ume da vas stavi u nezgodnu situaciju, tj. da se nešto učini veoma lako dok skicirate, a ispostavi se da i nije baš tako jednostavno kada ga treba prebaciti u HTML. Pogotovo u pitanju redizajna, još kada ste ograničeni elementima, to zna da bude čupavo. Generalno jako je teško uraditi radikalno drugačiju verziju jednog UIja (tzv. skinovanje) samo CSSom bez promena u markupu. Definitivno imamo divne primere poput Zen Gardena, ali u stvarnosti je stvar malo drugačija, čitaj: sve je relativno.
   
   Dakle oprezno sa ovim načinom ukoliko projekat sadrži dosta nepoznatih i promenljivih. Predlažem konzervativnije rešenje, koje se uvek da našminkati i razraditi kasnije.
2. Vektor mockup Mockupi rađeni u vektor programima poput CorelDRAW ili Adobeovog Illustratora su dosta krući od ovih rađenih u raster programima, zbog same prirode ovih alata, barem po mojoj proceni. Možda Sigurno ja nisam dovoljno vešt u njima, ali kada pogledate da i oni na kraju završe kao ekport u raster format, dođe mu na isto. Mislim da mockupovanje u vektor programima iziskuje više vremena i krajnjim eksportom gubi smisao svog formata—ne možete se osloniti na to da klijent ima instaliran baš taj program u kom ste radili mockup. (.SVG anyone?) :)
3. HTML mockup HTML mockupi su po meni najbolji, mada iziskuju najviše vremena i najgori je osećaj kada su odbijeni od strane klijenta. To je verovatno zato što se vežeš za njih, uložiš truda i onda ti neko kaže: “Pazi, ovo ne ide.” To mora da pokvari dan.
   
   Sa druge strane, HTML mockupi imaju jednu ogromnu prednost nad svim ostalim—*pružaju mogućnost velike ekspeditivnosti u radu sa klijentima*.
   
   Recimo da smo u situaciji da prikazujemo skicu web lokacije klijentu i uradili smo je u HTMLu, na pravilan način naravno, stilizovali je uz pomoć CSSa. Takve skice su obično dosta uprošćene, služe da se dobije neki generalni osećaj rasporeda elemenata i eventualno kolorita. Klijent kaže da mu se ne sviđa meni koji ste vi stavili sa desne strane, on bi hteo da je meni sa leve strane. Bez problema možete na licu mesta napraviti par izmena u CSSu i rezultat je odmah vidljiv. Sada klijent bolje zna da li mu se više sviđa vaša prvobitna verzija ili sa njegovom ispravkom.
   
   I ova rutina ima svoj fallback, a to su nedoslednosti u browserima, faktor od kog zavisite ukoliko na primer nemate svoj notebook računar pa zavisite od toga šta klijent ima instalirano. Veoma oprezno sa ovim, zna da bude gadno.

   
   Sada kada smo predstavili tri glavna načina mockupovanja, mogli bi malo da prodiskutujemo o njima. Kao što vidimo svaki ima svoje dobre i loše strane. (accent)Bitno je da radite na onaj način koji će vam uštedeti najviše vremena.

   Već sam pomenuo da mi mockupi nikad nisu bili jača strana. Jednostavno ne razmišljam na taj način i veoma mi je čudno da pravim dizajn stranice u grafičkom programu. To je zato što razmišljam u HTMLu, škrt sam na elementima i nerado dozvoljavam sebi luksuz wrappera u wrapperima, pregršt ilustracije i sl. Ne znam, valjda je to moj stil, ako se tako može reći.

   Ono što je veoma dobro kada pre kretanja u novi dizajn izradite mockup jeste to da sam dizajn mnogo brže bude gotov. Moram priznati, teško je ali moram. Dakle te proklete stvari stvarno imaju svrhu. :)

   Enivej, neke od stvari kojih se ja pridržavam kod mockupa su:

   • Nikad ne uradim komplet dizajn u mockup fazi, to mi se još nikada nije desilo. Uvek se najveće promene i najfiniji, najbolji detalji kod mene dodaju u poslednji trenutak u samom HTMLu. Tada dizajn dobija svoj konačan izgled i oblik.
   • Srećan sam kada je klijentu dovoljan wireframe. Nekada jednostavno imate tu sreću da klijenti razumeju šta i kako i gde bez ultra slikovitog i banalnog primera. Ovakvih je malo.
   • Ne obraćam veliku pažnju na detalje u fazi mockupa.
   • Koristim sve moguće načine da uštedim vreme. Ne brinem da li će neki grafički elementi u toj fazi izgledati isuviše generički alatu u kom je rađen, koristim placeholdere za ilustracije, itd.

SUMA SUMARUM

Svestan sam da su mockupi neophodni. To mi ne uskraćuje pravo da negodujem. :)

Kao što vidite, ja preferiram da mockupe radim rukom, nekim tankim flomasterom ili olovkom i to je meni dovoljna referenca. Smatram da mockup ne mora da bude ekstremno autentičan, samo je bitno da je i klijent toga svestan, tj. predočite mu da to što mu pokazujete je upravo to—%(accent)skica%.

• « Premešten Dnevnik Eklektika
• Struktura HTMLa i njegova semantika »

Komentari na ovaj unos 13

1. Zero-Cool kaže 22/12/05 09:00 PM

   Mockup? Stvarno gubljenje vremena raditi ga na kompu, ja ga radim uvek, jer mi mnogo olakšava posao, jednostavno ne moram sve da držim u glavi, ali dobri stari flomaster i par komada papira i jedan dobar koš za taj isti papir (ali u zgužvanom stanju :-)) i izrada mockupa može da počne.

   Probao sam par puta da ga radim u photoshopu pa sam se samo iznervirao, nije da ne znam da radim u njemu, ali mi jako sporo ide :-)

2. Nemanja Nenadic kaže 23/12/05 09:32 AM

   Uvek je korisno imati svoju “ideju” na papiru. Prvenstveno skiciram layout da mi klijent ne bi posle par dana rada u photoshopu ne bi rekao: “To mi se ne svidja, ajde neshto novo”. Opet, ako se pravi jednostavan layout, radim ga odmah u Photoshopu jer nema potrebe skicirati na papiru neshto shto u Photoshopu mogu da nacrtam za 10-ak minuta.

3. Dragan Babić kaže 23/12/05 09:47 AM

   

   Znači slažemo se da se bez vernog mockupa ne može?

   Takođe jedna od metoda koje sam rabio i koje su dobre po meni je greyboxing mada je previše “time consuming” za moj ukus, ali ima slučajeva kada je potrebna i najprimerenija.

4. Aleksandar kaže 23/12/05 10:19 AM

   Ah…sapatnik. :)

   Kad bi postojao neki telepatski način da se bladi mokap prezentira klijentu sreći ne bi bilo kraja. Ovako se uvek maltretiram nekim skicama na papiru iz čega oni slabo šta mogu da zaključe (“a koje će to biti boje” ugh). Onda mi ostaje da se nešto akam u Photoshopu, što mi oduzme toliko vremena da se posle zapitam što nisam odmah pravio HTML.

   I tako sad najnoviji posao radim direktno u HTML-u. I uvek izmenim barem 30% od onoga što sam u startu zamislio.

5. Dragan Babić kaže 23/12/05 03:29 PM

   

   I tako sad najnoviji posao radim direktno u HTML-u. I uvek izmenim barem 30% od onoga što sam u startu zamislio.

   Ista priča, uvek najviše promena napravim u samom procesu rada, to je po meni i prirodno jbga, dizajn evoluira i odrasta sve vreme dok radiš s njim. Jako je teško reći: “Sada je ovaj dizajn gotov”, pošto zbilja, nijedan dizajn nikada nije gotov.

6. Zero-Cool kaže 23/12/05 04:37 PM

   To je nešto tipa, prvi dan odradim dizajn bez mockupa nego odma počnem da radim, zatim ostavim malo da se slegne, sledeći dan ispravim par stvari pa opet ostavim da se malo slegne i na kraju kada i sam postanem zadovoljan onim što sam uradio e onda kažem da je gotovo.

   Ovo je jednostavno moj način rada,a pored toga volim da žvrljam po papirima i da crtam skice, ali se na kraju nikad njih ne pridržavam, premda mislim da kada bi svi mi istomišljenici počeli da radimo ozbiljne mockupe bez puno ispravki, jako puno vremena bi sebi uštedeli pri samoj izradi dizajna, ovako puno vremena se gubi na izradu prve verzije, zatim na razne ispravke,dorade…barem je u mom slučaju tako :-)

7. Oliver Petković kaže 23/12/05 06:20 PM

   Moj najveći problem je što ja nisam dizajner, ali sam primoran da radim i taj deo posla. Tako da mi je problem da radim sa olovkom i papirom. Zato poređam blokove u html-u, onako kako sam otprilike zamislio i onda se igram sa istim lejautom. Manjam boje, uklapam,... Što oduzima jako puno vremena. Nikako da dođem do onog dela (programiranje) što mi je omiljenije. Zato je najbolje da to uradi dizajner pa ondak implementacija, programiranje itd.
   
   Pozdrav

8. Marko Bijelić kaže 25/12/05 10:42 PM

   Dosta pažnje posvećujem informacionoj arhitekturi, i nema šanse, pogotovo što sam u zadnjih godinu dana gotovo isključivo radio interfejse za Web aplikacije, da sve držim u glavi, odnosno čim u glavi razradim osnove ideje prelazim na papir, a proces mi je dosta jednostavan:

   1. volim da crtam ove skice na papiru, tako da mi je to standardna faza

   2. kad na papiru adekvatno oblikujem šta želim, prelazim u Ilustrator, gdje vizuelno vidim koliko mi je ideja valjana i razrađujem dodatno

   3. sa upotrebljivim rezultatom iz Ilustratora prelazim u fast-forward XHTML (što će reći ne obraćam nešto mnogo pažnju na čistotu koda, čisto da dobijeno prebacim u browser i vidim mane)

   4. tri scenarija:

   – vraćam se na korak 1. ne valja ništa, ispočetka – vraćam se na korak 2. radi dorade (najčešće) – uz eventualne dodatne izmjene, kodiram finalnu verziju

9. Dragan Babić kaže 26/12/05 10:26 AM

   

   Uffff Marko, pa ti si sam sebi najbolji klijent koliko ga izreviziraš? :)

   Šalim se naravno, treba biti temeljan svakako. Daleko je lakše ispraviti nešto na mockupu nego u HTMLu kada se radovi privode kraju. To su najgore situacije. Mada mislim da ti je greška to što u početku pišeš “prljav” XHTML. Mislim da ti je taj korak višak i da možeš slobodno da ga eliminišeš uz malo discipline, tj. da nateraš sebe da odmah napraviš kao da je za final verziju.

   Iz komentara se vidi da nas ima iz sve tri kategorije (raster, vektor i HTML) :)

10. Marko Bijelić kaže 26/12/05 05:30 PM

    Pa jeste, pokušavam temeljno da pristupam profesionalnom poslu. Sada, ovo je pojednostavljen proces i nekome se može učiniti dug, no u praksi kad ti art director da zadatak: 15min crtkanja na papiru, 60min Ilustratora i 45min za fast-XHTML, znači jedan standardniji prototip layouta može biti završen kroz dva sata. Sada kom će se scenariju iz koraka četiri pristupiti, zavisno od načina rada i mog mjesta u hijarhiji varira i odluka :)

    Što se tiče fast-XHTML, opet dosta zavisi u kakvom okruženju radiš: kad imaš nekog iznad ladno može da odbije postojeće, kad radiš sam često nisi zadovoljan i vraćaš se na dorađivanje, u uslovima pet-do-dvanaest sve dolazi u obzir, i sl. Ponovo moj fast-XHTML je možda bolje struktuiran od nečijeg finalnog, ali opet pretjerano posvećivanje XHTML u ranoj fazi po meni je gubitak vremena i često živaca. Uglavnom neki moj prosjek jeste da je finalna CSS verzija pored bolje struktuiranosti i do 30% linijski kraća.

11. Nemanja Sreckovic kaže 17/01/06 01:11 AM

    eh, ne bih da dizem komentare iz mrtvih. Ali ste ces.
    
    Izgleda da sam ja jedini koji radi mockup u photoshopu.

    Iskreno, PS najbolje znam i nisam ni probao da ga radim u AI ili nekom drugom programu za vektore, nisam dovoljno dobar valjda ili jednostavno volim da mrljam, senke, prelivi, transparencije itd.

    Od samog pocetka (ok nisam davno poceo, skoro) ali moram priznati da mi se ovo cinilo veoma logickim da mock up radim u ps.

    Proces je sledeci:
    
    1. cekaj bre i nema tu nekog “procesa” krenem da crtam i polako draftove saljem klijentu, koji mi ih vraca sa komentarima, ja modifikujem i kraj price.

    Na kraju zavrsim, sa detaljnim PSD fajlom, prvi draft mi je uglavnom oko 80 % gotov.
    
    Ostalo su samo sitnice koje prilagodim klijentu.

    OK, ponekad se desi da mi odboju mock up, ne cesto ali desi se (mrzim to, jer se meni uvek svidja onaj prvi najvise) ali ovako ga imam u psd – u i kad naleti zgodna prilika ja ga uvaljam. Nista se ne baca :)

    A i u psd-u vremenom se nagomilalo gomila sablona, od kojih sad krecem, retko od nule.

    Moje misljenje da je ovakav proces koristam iz vise razloga:
    
    1. Vremenom nastaje ustaljen proces, koji je veoma brz, i za veoma kratko vreme se dobija finalni dizajn prihvacen od strane klijenta.

    2. Uvek na raspolaganju imate materijal za start, ne krecete od nule

    3. Stvori se struktura PSD fajla, folderi za pozadinu, povrsinu sajta, menu (tekst i grafika), header, sadrzaj itd. Sto omogucava da se elementi sa lakocom ukljucuju/iskljucuju i premestaju.

    4. itd.

    Da ne davim dalje.

    pozdrav,
    
    Nemanja

12. Dragan Babić kaže 17/01/06 09:34 AM

    

    Vidš Nemanja, to je veoma zgodno. Napraviti nekakvu biblioteku mockup elemenata koju bi kasnije mogao da koristis na raznim projektima.

    Kako na primer hendluješ layere? Da li gledaš da ih imaš što više ili da ti svaka mala sitnica bude na posebnom? Koliko detaljno praviš mockup?

13. Nemanja Sreckovic kaže 17/01/06 02:11 PM

    Zaista imam velik broj slojeva, koje kao sto sam nagovestio u stavci 3 “pakujem” u foldere, ovo u pocetku nisam radio ali posto slojeva ponekad ume da bude i preko 100 (dobar deo otpada na text) sada je to obavezno.

    Na kraju to uzgleda veoma organizovano.

    Ne gledam da mi svaka sitnica bude na posebnom sloju.
    
    Osim ako moraju da se preklapaju pa bi ih “unistio” stavljajuci na isti. Ako su u pitanj dva ili vise odvojenih grafickih elemenata, koji logicno pripadaju istom sloju, naravno da su na istom.
    
    No ako se takvi elementi moraju preklopiti, onda su na posebnim slojevima grupisani u isti folder.

    Sto se oraganizacije slojeva tice, jos uvek koristim ps 7, siguran sam da cs2 nudi jos mnogo vise opcija, sto bi ovaj nacin izrade mockup tacnije samog dizajna ucionio jos efikasnijim i boljim.

    mock up je kod mene u stvari, posle par draftova ( da formulisem sta mislim kad kazem draft: posle odredjenog vremena provedenog sa mockupom, stignem do trenutka kad vec imam sta da pokazem klijentu, pa isto i pokazem i odmah tu unesem date izmene ako ih ima, kasnije samo nastavim da crtam i ako ima potrebe posaljem jos koji put na reviziju), u stvari gotov dizajn sa svim pojedinostima.

    Bas umem da se raspisem. :) Poz