Wireframe

Pregled sadržaja

Dogovorili smo s klijentom početak izrade projekta, klijent nam je prenio zamisli, želje i planove i na nama je da poduzmemo korake za dalje i krenemo s radom. Nećemo odmah početi kodirati stranicu ali trebamo nešto prezentirati klijentu kako bi se usuglasili oko osnovnih stvari. Potrebna nam je odokativna vizualna zamisao a da ne potrošimo sate i sate na njegovo dizajniranje. Pravi posao za izradu wireframea.

Što je wireframe

Wireframe je minimalan dizajn web stranice, korisničkog sučelja ili drugog grafičkog predmeta koji ugrubo pokazuje osnovnu strukturu elemenata, njihov položaj u prostoru, funkcionalnost i interakciju ponašanja. Služi za početnu prezentaciju ideja i ne prezentira finalni izgled. Radi se o seriji skica kojima je cilj klijentu predstaviti funkcionalnost kako bi se usuglasile želje klijenta i vizije dizajnera prije nego što se krene u polirani dizajn. U njegov proces izrade mogu biti uključeni svi sudionici – dizajner, programer, voditelj projekta i naravno klijent.

Koji je cilj wireframe izrade

Česta je situacija da klijent nakon izrade dizajna voli mijenjati određene elemente što nije baš moguće brzo napraviti. Zbog toga se wireframe radi u samom startu i tek kada je osnovno sučelje postavljeno i usuglašeno, spremni smo ići na iduću fazu. Klijent je time više uključen u cjelokupan proces rada i suradnja pomaže da se postavi smjer kretanja projekta. A mi smo izbjegli nepotrebno gubljenje vremena (novaca) te izbjegli frustracije koje dovode do toga. Na klijentov zahtjev moguća su naknadna premještanja i jednostavne korekcije koje neće oduzeti puno vremena.

Wireframe prezentira arhitekturu informacija i kada je dobro definiran olakša proces izrade. Pokazuje kako su informacije organizirane, kakvo je ponašanje elemenata i koja je moguća interakcija s korisnikom. Wireframe ne koriste nužno samo dizajneri, mogu ga koristiti i programeri koji si žele brzo zacrtati strukturu, funkcionalnosti i ponašanje radi lakše vizije kodiranja u backendu.

Prednosti izrade wireframea je da su usmjereni na korisnika i vrlo brzo se izrađuju. Kako se rade testiranja korisničkog sučelja u ranoj fazi, moguće su iskrene povratne informacije i prepoznavanje ključnih točaka za daljnji razvoj. Kada je proizvod u finalnoj fazi teško je biti iskren i kritizirati jer je mala šansa da će se krenuti raditi novo iz temelja. Ovako rano moguće je iskristalizirati ono bitno bez ulaženja u detalje.

Kada je klijent suglasan sa wireframom i blagoslovi ga, kreće se u daljnju fazu dizajna.

Wireframe je prva stepenica kod izrade a iza nje slijede druge faze. Da pojasnimo, faze dizajniranja možemo postaviti u redoslijed:

  • wireframe je ultra jednostavan, koristi nisku razinu detalja samo da prikaže poziciju elemenata u prostoru pomoću blokova i linija.
  • mockup karakterizira visoka razina detalja i dizajn je vizualno bogat i poliran. Koriste se fotografije, boje, tipografija…
  • prototip prikazuje punu interakciju elemenata baš kao što bi funkcioniralo na stvarnoj web stranici, gumbi su klikabilni. Radi se samo prema potrebi ali cilj mu je da se uoče eventualni nedostaci prije same izrade, čime se izbjegava gubljene vremena i dodatni financijski troškovi.

Kako se wireframe radi

Wireframe možemo raditi na dva načina.

Jedan način je brza skica rukom, nacrtana olovkom (ili markerom, kredom…) na papir (ili u bilježnicu, na ploču…). Radi se obično kada je klijent prisutan ili kada se radi unutar tima te drugi odmah mogu davati komentare, ideje i prijedloge.

Drugi dio izrade je digitalni koji daje konzinstentan izgled.

Ako govorimo o vrstama skica tada možemo razlikovati dvije vrste: skice niske vjernosti prikaza (eng. low fidelity wireframe) i skice visoke vjernosti (eng. high fidelity wireframe).

Skice niske vjernosti prikaza možemo jako brzo napraviti, grublje su i izgledaju kao da su rađene rukom, dok su skice visoke vjernosti finije polirane.

Wireframe definira najosnovniji raspored elemenata na stranici u strukturi i njihov međusobni omjer. Ovdje ne koristimo boje, ne obraćamo pažnju na tipografiju, ne ubacujemo fotografije premda ih imamo na umu. Umjesto fotografija postavljamo obične blokove s dvije prekrižene linije ili se koristi ikonica u sredini koja prezentira fotografiju.

Wireframe ne koristi ni pravi tekst već se koriste prazni elementi, blokovi ili omeđene “kućice” da ga odokativno predstave. Boja se ne podešava, sve je crno-bijelo ili je sve u jednoj boji, najčešće u plavkastoj nijansi.

Svi važni elementi u dizajnu su posebno istaknuti. Pozicija i stavke glavne i sporedne navigacije, polje za pretraživanje, pozicije call to action gumba, elementi za kontakt obrasce (polja za upis, gumbi…), kakva je moguća interaktivnost elemenata kao npr. gumba za dijeljenje na društvenim mrežama. Taj dio nam je posebno važan.

Wireframe alati

Velik je broj programa i online alata koji nam omogućuju izradu wireframe. Mogu se slobodno koristiti klasični alati za grafičku obradu kao Photoshop ili Illustrator, a mogu se koristiti više specijalizirani alati. Spomenimo neke:

i još razni drugi. Neki alati su besplatni na ograničeno vrijeme ili s ograničenim mogućnostima, dok se neki (većina) plaćaju.

Alati imaju određene prednosti u odnosu na skicu, primjerice suradnici mogu ostavljati komentare, međusobno više suradnika istovremeno raditi online, cijeli proces možemo sačuvati i vraćati se na njega u koracima i drugo.

Sažetak

S obzirom na to da izrada web stranica može potrajati, jako je bitno dobro postaviti temelje dizajna i usuglasiti želje s klijentom. Izradom uvodnih skica olakšavamo sebi rad i međusobnu suradnju sa drugim članovima tima uključenima u projekt. Svaka daljnja faza je jasnija jer znamo da su temelji kvalitetno postavljeni i da je dobro testirano korisničko sučelje.