Wireframe: Jednostavna skica organizacije i dizajna vašeg sajta

јануар 10, 2017
Ivan Minić

Č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.orgwireframe.ccmockplus.com (download), cacoo.commockflow.comiplotz.cominvisionapp.com.

Mnogi od ovih alata imaju besplatne test verzije, a za naprednije stvari zahtevaju mesečnu pretplatu.

Primer finalnog izgleda stranica i wireframe-a

Primer finalnog izgleda stranica i wireframe-a

Za šta god da se odlučite, evo nekih osnovnih koraka kako krenuti:

  1. Predstavite osnovne celine sajta u razmeri: zaglavlje – telo – podnožje (header – body – footer)
  2. Popunite redom najvažnije elemente u zaglavlju – ucrtajte uprošćeno logo, glavnu navigaciju i ostale elemente koji postoje i zelite da ih imate
  3. Skicirajte podnožje sajta (osim ukoliko ne nosi neke izuzetno bitne informacije, što je retko slučaj)
  4. 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.

Tags:

Bez komentara

Оставите одговор

Ваша адреса е-поште неће бити објављена. Неопходна поља су означена *

mCloud mailing lista
Da li želiš da se prijaviš na mCloud mailing listu i svake nedelje dobijaš informacije o našim tekstovima na blogu i novostima iz mCloud-a?
Nemoj više prikazivati