Wireframe i prototip: zašto skicirati sajt pre izrade

Wireframe i prototip su koraci u izradi sajta koje mnogi klijenti preskoče ili i ne znaju da postoje. Umesto toga, razgovor ide direktno sa „hoćemo nešto moderno“ na gotov dizajn u bojama – i tek tada se otkrije da na početnoj stranici nedostaje cenovnik, da je meni previše složen ili da kontakt forma traži podatke koje niko ne želi da upiše. Ispravke u toj fazi su skupe i spore. U ovom tekstu objašnjavamo šta su wireframe i prototip, zašto se isplati raditi ih pre izrade sajta, kojim alatima se prave i kako klijent treba da ih pregleda.

Šta je wireframe, a šta prototip

Wireframe je skica rasporeda stranice: gde stoji naslov, gde dugme, koliko ima sekcija, šta je u meniju i kojim redosledom se prikazuju informacije. Obično je crno-beo ili siv, bez pravih fotografija i fontova, jer je namerno „ružan“ – pažnja treba da ostane na sadržaju i strukturi, a ne na bojama.

Prototip je korak dalje: stranice su povezane, pa se može kliknuti na meni, otvoriti podstranica ili proći kroz formu. Prototip može biti jednostavan (wireframe sa klikabilnim linkovima) ili detaljan (gotov vizuelni dizajn koji se ponaša skoro kao pravi sajt, ali bez programiranja).

Zašto se isplati pre izrade sajta

• Greške se hvataju rano. Pomeriti sekciju u wireframeu traje nekoliko minuta; promeniti strukturu gotovog sajta može značiti ponovno programiranje dela stranica.
• Razgovor je konkretniji. Umesto opštih utisaka („nešto mi ne leži“) klijent i dizajner gledaju isti raspored i razgovaraju o konkretnim elementima.
• Otkriva se koji sadržaj nedostaje. Kada se vidi prazno mesto za cene, reference ili fotografije tima, postaje jasno šta klijent treba da pripremi.
• Procena posla je tačnija. Kada su stranice i funkcionalnosti nacrtane, lakše je proceniti obim i rok izrade.
• Manje nesporazuma na kraju. Odobren wireframe je zajednička referenca kada se kasnije postavi pitanje „zar ovo nije trebalo da bude drugačije“.

Za mali sajt od nekoliko stranica wireframe može biti vrlo jednostavan – ponekad je dovoljna skica početne i jedne unutrašnje stranice. Za web shop, portal ili sajt sa rezervacijama detaljniji prototip se češće isplati. Kako izgleda ceo tok izrade i koliko koja faza traje, pročitajte u tekstu koliko traje izrada sajta.

Alati za wireframe i prototip

Alat je manje važan od toga šta se crta, ali evo šta se najčešće koristi:

• papir i olovka – za prve ideje i razgovor na sastanku, sasvim legitimno;
• Figma – danas verovatno najrašireniji alat za wireframe, dizajn i klikabilne prototipove; klijent može da ga pregleda u pregledaču i ostavi komentare bez instaliranja programa;
• Penpot – alat otvorenog koda sličan Figmi;
• Balsamiq – namenski alat za jednostavne wireframe skice koje namerno izgledaju kao crtež;
• alati za „whiteboard“ poput Mira ili FigJama – korisni za mapu sajta i tok korisnika pre samog crtanja stranica.

Nekada se prototip radi i direktno u kodu ili u sistemu za upravljanje sadržajem, kao jednostavna radna verzija na test adresi. To ima smisla kada je važno isprobati funkcionalnost na pravim uređajima. O radu na test verziji sajta više u tekstu staging sajt: testiranje izmena.

Kako klijent treba da pregleda wireframe

Najčešća greška pri pregledu wireframea je komentarisanje stvari koje u toj fazi nisu bitne – „ova siva je dosadna“ ili „font mi se ne dopada“. Boje i fontovi dolaze kasnije. U ovoj fazi korisno je postaviti sledeća pitanja:

1. Da li je odmah jasno šta firma radi i za koga? Pogledajte samo prvi ekran.
2. Da li su tu informacije koje klijenti najčešće traže? Cene ili okvir cena, lokacija, rokovi, primeri radova, kontakt.
3. Da li je redosled logičan? Da li bi vaš tipičan klijent tražio ove informacije ovim redom?
4. Da li je glavni poziv na akciju jasan i ponavlja li se na pravim mestima?
5. Šta nedostaje, a šta je višak? Sekcije koje ne pomažu odluci bolje je izbaciti.
6. Kako izgleda na telefonu? Tražite i mobilnu verziju wireframea, ne samo prikaz za računar.

Komentare ostavljajte na samom wireframeu ili u jednoj zajedničkoj listi, a ne raštrkane po mejlovima, porukama i telefonskim razgovorima. Ako u pregledu učestvuje više ljudi iz firme, neka jedna osoba objedini komentare i donese konačnu odluku – inače dizajner dobija kontradiktorne zahteve.

Šta pripremiti da wireframe bude koristan

Wireframe je onoliko dobar koliko je dobar sadržaj koji se u njega unosi. Pre početka korisno je da klijent pripremi spisak usluga ili proizvoda, najčešća pitanja kupaca, primere sajtova koji mu se dopadaju (i zašto) i bar okvirne tekstove za najvažnije stranice. Kada se u wireframe stave pravi naslovi umesto „Lorem ipsum“ teksta, mnogo lakše se vidi da li stranica funkcioniše. Detaljan spisak nalazi se u tekstu šta pripremiti pre izrade sajta, a o tome kako strukturirati početnu stranicu u vodiču početna stranica sajta: struktura sekcija.

Kada wireframe nije neophodan

Iskreno: za vrlo jednostavan sajt, na primer stranicu sa osnovnim informacijama o maloj radnji, ili kada se radi na proverenom šablonu uz male izmene, poseban wireframe može biti preteran. Tada je dovoljno da se dogovori struktura stranica i spisak sekcija u pisanom obliku. Ali čim sajt ima više tipova stranica, forme sa više koraka, filtere, rezervacije ili korisnički nalog, preskakanje ove faze gotovo uvek se kasnije plati kroz izmene.

Wireframe i prototip nisu birokratski korak, već način da se o sajtu razgovara konkretno dok su izmene još jeftine. Ako planirate novi sajt ili redizajn i želite da krenemo od jasne strukture, pošaljite nam upit za besplatnu analizu i ponudu.