Ako ste čuli termin “wireframe” ali ste pomalo zbunjeni šta je to ustvari, za šta služi ili zašto je korisno, ovaj članak bi trebalo da razreši Vaše nedoumice.
Šta je to wireframe?
Wireframe (u bukvalnom prevodu “žičani okvir”) je nešto poput crteža arhitekte. To je nacrt vizuelnog prikaza korisničkog interfejsa Vašeg sajta ili aplikacije. Wireframe možete koristiti da iskomunicirate četiri stvari:
- Strukturu – navigaciju i informacionu arhitekturu
- Raspored – npr. hijerarhiju stranica, kao i pozicioniranje elemenata na ekranu
- Sadržaj – ideju kako sadržaj uklopiti sa dizajnom
- Funkcionalnost – opis kako će proizvod raditi i kako će ga ljudi koristiti
Ovo je nezamenljiv alat svakog UX dizajnera, a od koristi je u mnogim različitim situacijama. Wireframe možete kreirati na različitim nivoima verodostojnosti (eng. fidelity) i baš zato su oni toliko moćno sredstvo.
Low-fidelity (niži nivo verodostojnosti) podrazumeva ručno nacrtane skice, što je sjajno da biste uobličili početne ideje, bilo sami za sebe ili kako biste ih predstavili svom timu. To je brz način da kreirate, vršite izmene i dorađujete svoje zamisli, a potpune je nebitno koliko ste vešti u skiciranju. Svako ko ume da nacrta običan krug, kvadrat i trougao je savršeno sposoban da napravi skicu ove vrste.
Sad prelazimo na ono na šta većina stručnjaka prvo pomisli kada kažemo “wireframe”. Postoje stotine različitih alata koje možete koristiti kako biste ih kreirali. Figma, Balsamic, OmniGraffle, Illustrator i UXPin su samo neki od njih. Wireframe-ovi ovog tipa su način da iskomunicirate svoju ideju svom timu, klijentima ili naručiocima. To je odličan način da objasnite svoj proizvod i tačno ono što pravite.
Na high-fidelity (visoka verodostojnost) delu spektra, klikabilan prototip omogućava da dizajnirate interakcije i njihov tok. Klikabilni prototipi su dobar izbor kada testirate upotrebljivost. Možete koristiti aplikacije Axure, Keynote ili čak kreirati wireframe direktno u internet pretraživaču upotrebom HTML-a.
Ponekad je brza skica nagrubo sve što Vam treba, a ponekad je prikladniji wireframe sa detaljnim beleškama šta gde treba da bude, kako da izgleda i čemu da služi. To zaista zavisi od projekta i faze u kojoj se nalazite.
Photo by Federica Galli on Unsplash
Vaš wireframe treba da prikaže nivo detalja koji je baš taman, ne više od toga. Zato, evo nekoliko praktičnih saveta:
- Neka bude jednostavno – za wireframing su ključni brzina i jednostavnost. U najvećem broju slučajeva ćemo wireframe baciti ili izbrisati na kraju, odmah čim posluži svojoj svrsi. Zato on ne mora biti savršeno ulickan, niti svaki element postavljen precizno u piksel.
- Koristite koordinatnu mrežu (eng. grid) – Grid pomaže da kreirate strukturu i jednostavnost rasporeda. Svaki pristojan sajt je danas izrađen prema ovom principu, tako da i Vama preporučujem da to iskoristite.
- Koristite kratke i precizne beleške – Članovi tima će čitati Vaš wireframe, tako da ne propustite da im ostavite adekvatne beleške, koje jasno i precizno iskazuju poentu onoga što ste skicirali. Nemojte preterivati, već iznesite samo suštinu.
- Podstičite fidbek – Pokažite wireframe svojim kolegama i pitajte ih za mišljenje. To je siguran način da ga poboljšate. Slobodno ga okačite na najbiliži zid i podstaknite ceo tim na davanje fidbeka.
Kao što vidite, kreiranje wireframe-a može biti relativno lako, mada je, naravno, potrebno određeno iskustvo da razumete kako da ih maksimalno iskoristite za svoje ciljeve.
Ukoliko ste zainteresovani za stručnu pomoć u oblasti UX dizajna ili oko drugih IT usluga, pročitajte više o nama.
Izvor: youtube.com/uxmastery
