Am decis să vă aduc aminte de școală astăzi și să vă vorbesc despre ciorne. Îmi imaginez că acum aveți în minte cel puțin o foaie mâzgâlită, pătată de cerneală, pe care încercați să aflați cât e x din ecuație sau cum anume argumentați că Titu Herdelea era intelectual. De Moromete nici nu mai zic. Dar nu ne întoarcem pe băncile școlii, ci povestim despre ciornele pe care trebuie să le folosim înainte de a crea un website: wireframe-urile.

O definiție a wireframe-urilor spune așa:

A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics. Wireframes also help establish relationships between a website’s various templates.

Usability.gov

 

Așadar, wireframe-ul este schița site-ului pe care urmează să îl creați pentru voi sau businessul vostru. În mod evident, procesul de wireframing are o mulțime de pași anteriori, de la research, la conceptualizare, la definirea obiectivelor platformei, până la crearea arhitecturii informației pe care o veți prezenta în site sau în aplicație. Dar odată ce ați încheiat toate aceste etape, a sosit momentul să desenați. Există o multitudine de opțiuni de creare de wireframe-uri, dar dacă nu ați făcut asta până acum, recomandarea mea este să începeți în stil foarte clasic și deloc specific erei digitale. Pentru asta veți avea nevoie de trei obiecte de care v-ați dezobișnuit probabil: hârtie, creion, radieră.

Pasul 1: Ca să nu ne simțim chiar ca în anul 1950 imprimați pe un set de foi imaginea unui desktop și a unui ecran de smartphone (sau pentru orice dispozitiv doriți). Vă va fi mult mai ușor așa să desenați la o scară corectă. Imprimați multe foi, veți avea nevoie.

Basic RGB

Pasul 2: Ca să puteți desena trebuie să aveți la îndemână toată munca de pâna atunci: structura site-ului și toate informațiile/concluziile adunate în timp. Ar fi o idee bună să grupați într-un document ce urmează să prezentați în fiecare pagină din site, sau măcar în fiecare categorie.

Pasul 3: Stabiliți-vă câteva convenții sau folosiți-le pe cele general acceptate. Prin convenții ne referim la acei indicatori grafici ușor de identificat de toată lumea.

conventii

 

Pasul 4: Decideți asupra numărului de ecrane pentru fiecare pagină în parte – Homepage, pagina de categorie, pagina de contact, pagina de articol, pagina de produs etc.

Pasul 5: Desenați.

wireframes

Sursa: www.interaction-design.org

 

Tendința tuturor este să se piardă foarte mult în detalii atunci când se apucă de wireframing. Ideal ar fi să nu insistați asupra unui desen demn de școala de arte, ci să ilustrați exact ce anume vă doriți să apară în paginile site-ului vostru, să împărțiți practic spațiul oferit fiecărui tip de informație prezentat și să precizați elementele esențiale care nu trebuie să lipsească din el. Lăsați efectele artistice pentru grafician.

În același timp preocupați-vă și de parcursul userului prin site aplicând regulile de usability și urmărind atent care sunt scopurile voastre de business pentru că wireframe-urile sunt folosite pentru a creiona și diferitele etape prin care trece un utilizator într-un site. Odată ajuns în site, ce informație va vedea prima dată? Care este primul buton pe care vrem să apese, ce se întâmplă după ce îl apasă? Apare un pop-up, se deschide un tab care împinge restul site-ului în jos și face loc unui box ascuns până atunci sau îl duc în pagină nouă? În pagina nouă ce acțiune trebuie să facă? Ș.a.m.d.

Nu uitați de varianta de mobil.

Dacă nu sunteți chiar deloc nostalgici și nu vreți să căutați prin casă niciun creion, atunci vă invit să folosiți unul din nenumăratele tool-uri gratuite pe care le găsiți pe net. Personal, folosesc moqups.com pentru că este foarte prietenos, simplu de folosit, are foarte multe elemente predefinite și permite lucrul în echipă. Și pentru că este dezvoltat de o echipă neaoșă (support local business!).

 

_______________________

Pst!

Te mai țin două secunde să îți spun că pe 17-18 septembrie ne vedem la cursul Online de la A la Zen unde vorbim despre websiteuri, aplicatii, scris, public, tipuri de content, google analytics și multe altele.

Cursul ține două zile în care trecem prin toate punctele cheie utile unui Online Project Manager adevărat – website building, design, content writing, strategii, un strop de social media și analytics. Mai mult, avem și invitați speciali.  Detalii și înscriere aici

 

 

 

 

Sharing is caring :)
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Written by Olivia
I am always online.