Wireframe: Jednostavna skica organizacije i dizajna vašeg sajta
Često je teško razumeti se sa dizajnerima, i kreativcima. Nekada je njihov zadatak da osmisle sve na osnovu vaših inputa, ali često je cilj samo da prenesu konkretnu vašu ideju u vizuelnu ravan. Ponekad reči nisu dovoljne da im predstavite šta tačno želite da postignete. Vi niste dizajner i ne umete to da nacrtate, ali postoji korak između koji mnogi preskaču – wireframing.
Wireframe predstavlja „shematski prikaz“ sajta ili onoga što je potrebno dizajnirati. Njegova glavna svrha je da pobroji i prikaže sve najvažnije elemente, kao i da ih organizuje na način na koji vi želite. Cilj wireframe-a nije da ide previše u detalje, ali je i to moguće, naročito ako se koristi za potrebe dokumentovanja kompleksnih dizajna koji se rade.
Postoji mnogo alata koji se mogu koristiti za wireframing. Od papira i olovke, i crtanja uproštenih elemenata, preko standardnih grafičkih alata kao što su Adobe Photoshop, Illustrator, Sketch, a nisu retki slučajevi i da se priručno koriste alati koji nisu predviđeni za tako nešto, kao PowerPoint ili Word.
Postoji mnogo kolekcija gotovih elemenata za grafičke program koji mogu drastično da ubrzaju proces, a postoje i specijalizovani i alati i sajtovi za crtanje wireframe-ova. Nekoliko besplatnih možete pronaći na sledećim adresama: framebox.org, wireframe.cc, mockplus.com (download), cacoo.com, mockflow.com, iplotz.com, invisionapp.com.
Mnogi od ovih alata imaju besplatne test verzije, a za naprednije stvari zahtevaju mesečnu pretplatu.
Za šta god da se odlučite, evo nekih osnovnih koraka kako krenuti:
- Predstavite osnovne celine sajta u razmeri: zaglavlje – telo – podnožje (header – body – footer)
- Popunite redom najvažnije elemente u zaglavlju – ucrtajte uprošćeno logo, glavnu navigaciju i ostale elemente koji postoje i zelite da ih imate
- Skicirajte podnožje sajta (osim ukoliko ne nosi neke izuzetno bitne informacije, što je retko slučaj)
- Telo sajta podelite u bitne celine. One zavise od onoga što planirate da predstavite. Ukoliko niste sigurni, popišite ih negde sa strane, čisto da nešto ne zaboravite. Zatim pokušajte da ih rasporedite u logične celine.
Za kraj, preporuka ako se odlučite da u ovo ipak krenete olovkom – preuzmite paperbrowser ili sneakpeekit, i koristite ga za skiciranje. Imaćete ucrtan grid, odnosno shemu po kojoj developeri kasnije pozicioniraju elemente i kodiraju, pa će vam biti lakše.