În Tips & Tricks

Aplicaţii de wireframing

wireframing

Wireframe-urile sunt folosite tot mai des în etapa de planificare a unui proiect, atunci când urmează să fie dezvoltat un website sau o aplicaţie. Mai jos veţi găsi o serie de resurse care vă pot fi utile în construcţia unei astfel de schiţe.

Pentru început, ce este un wireframe?

Probabil mulţi dintre voi sunteţi deja familiarizaţi cu termenul, dar pentru ca subiectul articolului să fie înţeles fără probleme şi de către cei care sunt la început de drum, o definiţie scurtă şi la obiect sună astfel: un wireframe este o schiţă a interfeţei unui website ce urmează a fi dezvoltat, necesară pentru a prezenta vizual structura de ansamblu a acestuia. Este puntea de legătură dintre arhitectura informaţională şi design-ul grafic.

Un wireframe trebuie să se axeze pe trei aspecte principale:

1. Design informaţional– ce presupune aranjarea şi prioritizarea informaţiei într-un mod uşor de înţeles de către utilizatori.

2.Design funcţional– utilizatorului trebuie să îi fie uşor să înţeleagă care este relaţia dintre link-uri şi cum poate naviga pe site.

3. UI design– acesta presupune definirea şi aranjarea elementelor de interfaţă în aşa fel încât utilizatorul să poată să interacţioneze cât mai uşor cu site-ul.

Acum că am lămurit ce reprezintă un wireframe, să stabilim şi ce nu este. Un wireframe nu este o creaţie artistică, nu conţine culori, elemente grafice sau fonturi speciale. Dimpotrivă, absenţa lor ne ajută să ne concentrăm atenţia pe funcţionalitate, pe organizarea conţinutului în funcţie de priorităţile stabilite şi pe comportamentul utilizatorului.

Modalităţi de construire a unui wireframe

Există diverse metode prin care puteţi crea schiţa unui viitor site, iar alegerea finală ar trebui să fie luată în funcţie de complexitatea proiectului la care lucraţi. Dacă unele dintre metode sunt acceptabile pentru proiectele mici, în cazul în care lucraţi la un site complex ca şi conţinut şi funcţionalitate, s-ar putea să fie necesar să vă gândiţi mai bine înainte să faceţi o alegere. Vestea bună este că există o multitudine de aplicaţii pe care le puteţi folosi. Vestea proastă este că cele mai multe dintre ele costă.

Aşadar, aveţi la dispoziţie mai multe variante:

1. Desenarea schiţei de mână

Nu este absolut necesar să aveţi talent într-ale desenului, dar nici nu strică. De regulă, un wireframe este alb-negru şi cât mai simplu, pentru ca toţi cei implicaţi să înţeleagă ideea. Dezavantajul este că nu este foarte uşor să faceţi modificări, sunt necesari mai mulţi paşi, trebuie să ştergeţi, să tăiaţi, să mâzgăliţi peste, ceea ce ia timp şi îngreunează procesul de înţelegere.

 2. Crearea unei schiţe în Photoshop, Illustrator etc

Această variantă poate fi adeseori la îndemâna designerilor, însă, până la urmă, s-ar putea să nu fie chiar cea mai inspirată. Este mai greu să mutaţi elementele dintr-o parte în alta dintr-o multitudine de layere, mai ales atunci când vorbim despre un wireframe complex.

3. Programe şi tool-uri online specializate în crearea de wireframe-uri

În cazul acesta, aveţi cu siguranţă de unde alege. Mai mult, puteţi face comparaţii între ele, pentru a vedea care vă avantajează cel mai bine. Găsiţi aici o analiză de-a gata, dacă vreţi să economisiţi timp. Totodată, mai jos veţi găsi câteva sugestii care poate vă vor fi, la un moment dat, de ajutor.

a. Axure RP

Acesta funcţionează fără probleme pe Windows şi pe OS X, foarte util mai ales dacă obişnuiţi să folosiţi ambele sisteme de operare. Are o interfaţă prietenoasă, prin drag&drop pot fi adăugate uşor şi mai ales rapid elementele, ceea ce înseamnă că vă ajută să câştigaţi mult timp. Chiar dacă lista iniţială de elemente nu este foarte complexă, aveţi opţiunea să adăugaţi noi elemente din librăriile Axure. De asemenea, aveţi la dispoziţie un sitemap, pentru ca navigarea să fie cât mai uşoară. În plus, pe site-ul Axure veţi găsi şi o serie de tutoriale care vă învaţă cum să deveniţi un Axure Fu Master. Ca şi preţ, Axure nu este neapărat cel mai accesibil, licenţa pentru un singur utilizator, varianta PRO, fiind de 589 $.

b. Balsamiq

Veţi avea nevoie de Adobe AIR pentru a putea folosi Balsamiq. Un avantaj major este că folosind Balsamiq, veţi beneficia de o interfaţă intuitivă, cu 75 de componente şi 187 de pictograme, plus toate elementele pe care le găsiţi pe comunitatea Balsamiq, unde utilizatorii contribuie cu propriile creaţii. Totodată, a fost lansat şi MyBalsamiq, un tool menit să faciliteze munca în echipă, capitol la care Balsamiq nu excela până acum. Acesta permite organizarea wireframe-urilor create pe proiecte, iar astfel, colaboratorilor le este mult mai uşor să îşi aducă aportul.

c. Mockingbird

Este o aplicaţie creată de către doi absolvenţi Harvard cu care puteţi realiza wireframe-uri online. Acesta este compatibil cu Safari, Chrome şi Firefox şi, la fel de important, nu foloseşte Flash.  La fel ca şi în cazul celorlalte aplicaţii amintite, elementele UI pot fi rearanjate foarte simplu cu drag&drop,  puteţi crea câte pagini aveţi nevoie şi la final, puteţi trimite un link cu rezultatul clienţilor şi colaboratorilor. Un alt avantaj este că Mockingbird permite opţiunea de multi-user editing, ceea ce înseamnă că mai mulţi oameni pot lucra în acelaşi timp, fără a fi nevoie să închidă documentul şi fără să se suprascrie informaţiile. De asemenea, o licenţă permite ca aplicaţia să fie folosită de mai mulţi oameni, diferenţa de preţ constând în numărul de proiecte active. Este o soluţie destul de ieftină, preţul minim e de 9 $ pe lună, iar cel preţul maxim este de 85 $.

Există şi două dezavantaje: faptul că nu puteţi adăuga elemente proprii cu care să lucraţi şi trebuie să vă limitaţi la cele care sunt puse la dispoziţie şi mai ales, faptul că nu există o aplicaţie desktop, aşadar nu puteţi lucra dacă nu sunteţi conectat la Internet.

d. iPlotz

iPlotz este o aplicaţie online disponibilă pentru Windows, Linux şi OS X pentru browsere ce folosesc Flash. Vă oferă posibilitatea să daţi drepturi de editare şi altor persoane, precum şi posibilitatea de a trimite invitaţii pentru ca toţi cei implicaţi să poată comenta. Ce este mai diferit la aceasta este că aduce o opţiune de project management şi vă permite să creaţi task-uri. Preţul porneşte de la 15 $ pe lună. Pe site-ul lor puteţi găsi o serie de tutoriale care să vă ajute să folosiţi corect aplicaţia.

e. PowerMockup

PowerMockup este un add-on pentru Microsoft Powerpoint cu ajutorul căruia puteţi crea wireframe-uri. Acesta pune la dispoziţia utilizatorilor 79 de elemente de interfaţă care pot fi editate şi 86 de pictograme. Dacă vreţi să transpuneţi rezultatul într-un document Word, veţi avea posibilitatea să şi editaţi direct din Word eventualele greşeli. Avantajul folosirii Powerpoint pentru a construi wireframe-uri este faptul că majoritatea dintre noi suntem deja familiarizaţi cu el, inclusiv clienţii. Cea mai ieftină licenţă costă 39.95$, dar dacă citiţi bine pe site-ul PowerMockup, există şi modalităţi de obţinere gratuită a licenţei.

f. FlairBuilder

FlairBuilder este un tool creat de către un român, Cristian Pascu, ce permite crearea de propotipuri și wireframe-uri interactive pentru site-uri și aplicații mobile. FlairBuilder are două teme, este foarte intuitivă, dinamică și la un preț accesibil (99 USD pe viață). Pentru a o putea folosi, aveți nevoie de Adobe AIR și o puteți încerca gratuit, pentru 15 zile.

g. Wireframe Sketcher

Wireframe Sketcher este o aplicație de wireframing pentru site-uri și aplicații mobile lansată în 2008. Aceasta poate fi folosită atât ca aplicație stand-alone, cât și ca plug-in pentru orice Eclipse IDE. A fost dezvoltată tot de un român, Petru Severin și din februarie 2013, a devenit parte din Eclipse Foundation (comunitate open sourse, ale cărei proiecte se focusează pe consturirea unei platforme de dezvoltare deschise). Aceasta este disponibilă pe Windows, Mac OS X și Linux și oferă posibilitatea de a lucra în echipă. Prețul este 99$, iar dacă vreți sa cumpărați o licență pentru mai mult de 5 utilizatori, prețul e de 89$.

h. Justinmind

Justinmind este o platformă de prototyping pentru aplicații web și mobile. Aceasta este utilă mai ales în cazul în care se doresc wireframe-uri interactive și prototipuri funcționale. Pe partea de mobile, cu ajutorul acestui tool se pot obține prototipuri de aplicații pentru iPhone, iPad și pentru Android, cu opțiuni extrem de practice cum ar fi simularea swipe-ului, pinch, rotate etc, ba chiar și orientarea dispozitivului, pentru a simula astfel designul responsive. La baza produsului se află modelul freemium: există o variantă gratuită a aplicației, cu mai puține feature-uri, iar versiunea Pro (cu 30 zile trial) costă de la 19$ per utilizator anual sau 29 $/utilizator, dacă se plătește lunar.

Bineînţeles, lista nu se opreşte aici. Sunt multe alte opţiuni disponibile, fiecare cu avantajele cu dezavantajele sale. Rămâne să decideţi care dintre ele vă poate ajuta cel mai bine.

Resurse utile:

Six Revisions

Wireframes Magazine

CMSWIRE

Wireframes

Actualizare articol la data de 02.04.2013