Web razvoj

Klijente sada možete zadiviti brzim prototipima bez kucanja trunkice koda

Na internetu možete da nađete veliki izbor alata za pravljenje wireframe i mockup varijanti vaših projekata. Prošlo je vreme kada ste klijentu morali da prezentujete strukturu i hijerarhiju sajta i stranica uz pomoć šarenih papirića na velikoj tabli ili da uz pomoć Adobovih alata Photoshop i Fireworks pravite skice. Rapid prototyping alati za izradu sajtova i aplikacija su vrlo česta pojava i znatno olakšavaju posao dizajnera i programera. O ovakvim alatima smo dosta pisali, ali preskočili smo wireframing, a skica sajta ili aplikacije je najvažnija na startu svakog projekta.

Ova faza se često preskače jer se smatra gubljenjem vremena. Najčešće se odradi u sklopu dizajn faze, na neki način. Ali preskakanje ovog koraka može i zaista dovodi do velikih problema u kasnijim fazama izrade. Veliki broj klijenata želi da vidi, ako može, krajnji proizvod odmah. „Ja kad to vidim znaću da li mi se sviđa”, vrlo česta je rečenica. Upravo iz ovog razloga ne treba preskakati skiciranje.

Firma koja radi projekat i klijent treba da sednu i prvo ustanove za koga se pravi projekat, koja je ciljna publika, kakva je konkurencija i slično, a nakon toga dizajn firma treba da iz tih informacija razvije strategiju, arhitekturu sajta, wireframeove i slično, a tek nakon toga pristupa klasičnoj dizajn fazi kada se razvijaju rešenja koja će se prezentovati klijentu. Mnogo toga se ustanovi, odbaci ili usvoji u ovim fazama, što znatno olakšava naredne faze.

Wireframing su obično jako grube, crno bele, gotovo bezlične skice stranica i interfejsa. Odatle se može videti gde će stajati logo na sajtu, kakav heder i futer će imati, gde će doći sadržaj, gde slajder, gde slika. Kod wireframeova postoji i neka doza interakcije, gde se može kliknuti na link ili navigacioni element i preći na drugu stranicu. To je isto važno kako bi se sagledao tok kretanja kroz sajt ili aplikaciju. Vrlo je važno da skice budu crno bele i što jednostavnije kako klijentu ništa ne bi odvraćalo pažnju i kako bi se fokusirao na elemente same strukture. To pravilo ne važi za pravljenje prototipa za mobilne uređaje, gde poznati elementi interfejsa izgledaju gotovo isto kao kod gotovog proizvoda.

Ova faza nije važna samo za klijenta i prezentaciju. U ovoj fazi i članovi dizajn tima mogu da ustanove šta bi funkcionisalo, a šta ne u projektu i to lako ispraviti. A ne tek nakon kada je većina stvari iskodirana i dizajnirana.

Većina ovih alata ima drag & drop elemente koji se prevlače u radni prostor, izrada ovakvih prototipa je zaista brza. Može se sarađivati s drugim članovima tima, tako da, recimo i programer i menadžer projekta mogu biti u toku i dati povratne informacije. Eksportovanje skica je obično ili u PNG, PDF ili nekom drugom formatu, a neki od alata nude mogućnost deljenja linka sa klijentima.

Pošto je broj ovakvih alata zaista veliki, opisaćemo nekoliko istaknutih i, pre svega, free predstavnika:

Moqups je jedan od alata gde s leve strane imate elemente stencils, dugmiće, tekst boksove, link barove, drop down menije, check boksove i slične stvari. Nakon prevlačenja željenog elementa na radni prostor automatski se otvara meni s opcijama za podešavanje specifičnim za taj element. Možete kreirati linkove između stranica i njihovu hijerarhiju. U free planu dobijate 5 MB prostora za dva projekta.

Mockflow je nešto složeniji. Na početku projekta možete izabrati platformu i temu i odmah dobiti gotov templejt koji ćete podešavati. Ako ste recimo izabrali da pravite skicu za aplikaciju za mobilni uređaj, imaćete na raspolaganju sve GUI elemente svojstvene Androidu, iOS-u, itd. Mockflow ima i svoj store gde možete birati između brojnih templejta i uzeti onaj koji najviše odgovara vašem projektu. Zbog svoje složenosti, Mockflow može biti previše robustan, ali zgodan je kada ne želite da počnete od nule nego od nekog predefinisanog templejta i ima mogućnost deljenja projekta sa timom ili klijentima.

Jumpchart je alat koji je fokusiran na kolaboraciju i prezentaciju klijentu. Možete kreirati projekat, sadržaj projekta, pozvati druge članove, dati im dozvole za editovanje ili samo za pregledanje. Jumpchart je kao neki interaktivni, online design brief. U sekciji za gotova dizajn rešenja klijent ili članovi tima mogu odobriti i komentarisati prototipe. Moguće je eksportovati ceo sajt ili samo jednu stranicu, kao i importovati direktno u Wordpress.

Gliffy je sličan Moqups alatu. Pored wireframea za sajtove, sa Gliffy alatom možete kreirati i planove prostorija, tehničke crteže, dijagrame i tako dalje. Alat je besplatan za pet dijagrama i nudi 2 MB prostora.

Wirify je alat čiji je koncept malo drugačiji. I sa njim naravno možete kreirati skice za vaš projekat, ali ono što je zanimljivo jeste da sa ovim alatom možete kreirati instant wirefrejm od bilo koje stranice na internetu i tako sagledati njene elemente bolje. Potrebno je instalirati njihov bookmarklet. Ovo je zgodno i kod prezentacije klijentima, na primer kako bi videli primere na nekim njima poznatim sajtovima, kako izgledaju „pre i posle” i tako shvate na koji način da gledaju uprošćeni nacrt svog budućeg sajta.

Fluidui je alat za kreiranje prototipa isključivo za mobilne uređaje. Pored wireframing dela, sa ovim alatom možete i testirati svoje projekte direktno na telefonu.

Od aplikacija koje nemaju free planove, ali su vredne pomena, tu je HotGlue, Proto.io, Pidoco, UXPin i Justinmind. Sneakpeekit nudi i A4 PDF templejte koje možete odštampati, ako volite da crtate „old school”, na papiru s olovkom. Tu možete da nađete templejte za web, tablete i telefone.

Opcija je puno i veoma je lako zadiviti „tehnički nepismene” klijente vašim prototipima, što će osigurati deal i uliti vam samopouzdanje da budete sigurni da radite pravu stvar.

Marija KRSMANOVIĆ