Evo odlucio sam da napisem nesto onako opušteno o procesu nastanka dizajna jedne strane, tačnije prototipa tj. mockupa. Dragan je u par navrata pisao na ovu temu, tako da možete pogledati i to. Iako je za neke ovo najdosadniji (pokušavam da ublazim najomrzeniji) deo web dizajna, po meni je on najinteresantniji, najzahtevniji i najkreativniji. Moj omiljeni. Zastupam stav ljudi koje mockupe prvo nacrtaju pa zatim kodiraju (!).
Iako smo Marko i ja, jedini izjavili da uključujemo grafičke programe u izradu istih, on je više za vektorsku varijantu a ja za raster mockup kako ih je Dragan podelio.
Proces je sledeći:
- Korak jedan: Prvo se usaglasi sadrzaj/namena/itd buduće web prezentacije, tačnije kreira se neka struktura prezentacije, posle par razgovora sa klijentom, pri tom se koristi papir i olovka (uzasno prakticno (citaj: ql) bi bilo kad bi se i ovo moglo uraditi, uz pomoc notebook-a i olovke. Naravno ovo je ponekad veoma kompleksan zadatak!
- Korak dva: Sa tehnicke strane poznajemo strukturu glavne strane, iliti glavnog sablona kako ja volim da nazivam glavni mockup, od koga kasnije kreiramo glavni HTML sablon, znaci ovde vec pocinjemo da razmisljamo o mockupu kao o grafickoj ideji, o samom dizajnu. Prvi korak po meni ovde je da uoblicimo strukturu sam raspored elementa na stranici, meni, footer, header, glavni prostor za sadrzaj (i kombinujemo ove elemente (!), veoma uobicajeno je da se meni i logo kao jedna celina postave preko levog ili desnog dela header-a, iako po meni logo nema sta da trazi na levoj strani), da se odlucimo o tome dali cemo da radimo fiksni mockup ili ne.
- Korak tri: Razdvajamo dva procesa: wire i sam mockup. Kreiranje mockupa pocinje, pokrecemo nas graficki program, a ako postoji potreba kreirase html wire, cisto ada bi klijent vec u tom momentu video strukturu i tok kretanja kroz isti. Jednom sam imao priliku da radim sa tako zainteresovanim klijentom da je on pokazao svim radnicima wire i pustio ih da komentarisu, u pitanju je bila ista struktura (pol manje vise, starosna grupa savrsena, kao i njihovo poznavanje interneta) populacije kao i kod njegovih potencijalnih musterija. Fenomenalan izvor informacija, posmatrate ljude i slusate njihove predloge (ne potcenjujmo ih, ali filtrirajmo) i posmatrate ih kako pokusavaju da odrade ono sto ce klijent (potencijalni klijent) morati kad doce na sajt. I jednostavno mockup nastaje u glavi, rasporedjujete elemente, naravno uz veliku dozu sopstvenog iskusta i kao dizajner i kao korisnika interneta, ovde bih mogao napomenuti da danasnji dizajner mora da bude i interfejst dizajner, makar malo.
- Korak četiri: ovde ste već uveliko u kreativnom zanosu (bla, bla) i pokušavate da sve prikupljene informacije, zelje klijenta (moraju biti npr korporativne boje, itd…), vase iskustvo pretocite u dizajn, a pritom ostavite mesta za eventualne potrebne modifikacije za strane nizih nivoa. Mockup je gotov!
Ovako bi generalno trebao da izgleda proces nastanka (makar moj tako izgleda) raster ili vektor mockupa. Naravno ponekad nije moguce odraditi sve korake (ponekad ih ima i vise), ponekad informacije dobijete na tacni (outsorcing), dobro ih proucite, postedece Vas 2 i 3 mockupa!
Zašto je grafički mockup zakon ?
Kao prvo da slažem se tanka je linija izmedju mockupa i finalnog dizajna, ipak ona nije 30 – 40 % ona je 10 %, ako svari radimo kako treba od pocetka. Svrha mockupa je da na najbolji nacin objedini gornje korake, da bude prihvacen, i da proda. Da svrha je da on odradi posao! Meni, Vama, nasim klijentima i njihovim musterijama!
Jedini problem je da svi budu zadovoljni, ja nisam imao priliku da radim sa mnogo tvrdoglavim klijentima, ako im je logo loš, ja im to kažem, ne zato što necu da ga stavim na moj svemocni mockup (daleko od toga) i da se kasnije tu potpišem, već jednostavno taj logo im nece zaraditi pare, ili ce zaraditi manje para (ok mozda i nema veze sa direktnom zaradom u nekim ekstremnim slucajevima,ali mislim da se razumemo).
Uostalom u čemu je problem da se kreira novi logo ? Ne mora da bude ništa posebno, skoro uvek ga mozemo ugurati u postojeci budzet (naravno zna se koliko se onda vremena posveti istom) ali opet je bolje nego neko clip art resenje.
I grafičkom mockupu možemo promeniti boju, cak lakse nego u css/hmtl varijanti, samo izabereto boju (tačno tako css drugari i vi morate da pokrenete program izaberete boju (ili uzmete ponuđene, što je trulo) kopirate #HEX kod i vratite se u Vaš html mockup) i kliknete na sloj.
Žele da vide kako izgleda meni sa desne strane (iskreno ovo je moralo da bude usaglašeno kod koraka 1 ili makar 2, ali klijent je moj bog, želi da vidi tako ok, nije problem, sviđa mu se tamo ok, super, ako pomeri nešto što NE sme da se dira, ja pomerim, i kasnije pokusam da mu objasnim zašto je ipak bolje da ga vratimo, ali da i ovako ima svog smeka i da je on donekle u pravi) ? Uzmete folder (grupisani slojevi) sa menijem i pomerite desno. Zatim neki drugi folder levo, ako imate neke elemente na tim folderima, samo ih linkujte i oni ce da idu jedni za drugim.
Klijent zeli da vidi 2 boje da uporedi ? Nije problem snimimo 2 png24 fajla i prikazemo ih.
Ej sto da ne pustimo klijenta da izabere boji i nek klikne dodjavola! Naravno zna se ko koga placa i ko zna najbolje. Eto da ne duzem dalje.
Tu je jos i organizacija grafickom fajla, verzije istih, (sve u jednoj datoteci), desilo Vam se da Vas odbiju, nije greda, sacuvajmo i to, promenite drasticno koncept nije greda jos jedan psd ili sta vec u debeli masni folder koji Vam kasnije ustedi par sati.
Krajnji cilj je dizajn strane zar ne ? Cemu dizajniranje u html-u ? Taj proces se zove kodiranje. Sačuvajmo PNG fajl, u više verzija, sa tekstom, bez njega, sa nekim elementima i bez njih. Seckajte po potrebi, kupite boje po potrebi i da tačno tako nemojte dizajnirati nego počnite kodirati. Ne možete da osetite zadovoljstvo u tome da pravite kod koji je isti slika, a pritom se takmičite sa svojom sopstvenom inteligencijom (nadam se da ne zvući glupo) da ima što manje slika a što više koda!
Ipak je ovo kodiranje!