Wireframe!

by admin

Fiecare designer are “grețurile” lui și solicită o documentație inainte de a porni un proiect care are etapă de design (și în care cadrul caruia este evident implicat). Pefect de acord, dar de cele mai multe ori clientul nu va ști cum să scrie o documentație pentru designer; clientul va putea nota eventual idei legate de planificarea proiectului, de strategie și target.

În urma unei discuții cu un client, un designer cu ceva experiență, își poate forma repede o viziune asupra viitorului design. Odată ce i-a fost împărtășită  ideea și tema proiectului,  designerul va atribui  în minte un wireframe, o structură, funcționalități necesare sau chiar o paleta de culori.

Astfel, suntem tentați să omitem intenționat etapa de schițare (wireframing) și vom prezenta clientului varianta finală a propunerii grafice. Clientul va fi tentat să dorească prea multe modificări sau pur și simplu să nu înghită albstrul pe care l-ai folosit în propunere. Da, și acum îți vei pune mâinile în cap.

Un wireframe este o schița a unui viitor design vizual, în cazul unui website, a unei propuneri grafice (layout proposal). Un wireframe te poate scăpa de probleme.

În cazul uni proiect pentru client un wireframe reprezintă un prin pas în cadrul discuției, un punct de la care poți construi.

Cum  construiești un wireframe?

1. Dacă există, studiezi documentația (care prezintă o hartă a site-ului, explică targetul, acțiunile spre care trebuie ghidat utilizatorul, cerințele clientului).

Ideal ar fi să cunoști un profil al celui care va accesa site-ul pe care-l construiești, subiect foarte interesant.
Important pentru tine ca designer e scopul designului pe care-l dezvolți, dar mai esențiale sunt acțiunile spre care trebuie să-l ghidezi pe cel care a accesat siteul.

Vorbind de un site simplu/corporate clientul va dori probabil ca designul să-i îndrume vizitatorii spre blogul companiei, cu scopul de a-i ține la curent cu ultimele noutăți din cadrul firmei sau spre sectiunea de abonare la newletter.

2. Stabilești functionalitățile solicitate (sau care se pretează proiectului), elementele de design necesare și le schițezi simplu:
- Meniu de navigare
- Sectiunile de conținut
- Sectiuni video sau galerii foto
- Formular(e)

Dacă luăm ca exemplu un site corporate vei avea câteva opțiuni standard:
- Meniu de mavigare top și bottom
- Header (care de obicei este o imagine însoțită de un slogan)
- Zona de conținut unde poți avea un newsletter, un motor mic de căutare, legături spre ultimele articole din blog și RSS și/sau cele mai importante date de contact
- Footer (meniu de navigare și copyrighting)

3. Așezi toate aceste elemente cu o logică și cu un CTA (call to action) corect și bine gândit.

4. Totul se rezumă la a acoperi cât mai bine spațiile goale

5. Dacă ai o colaborare la distanță și nu vei putea prezenta live wireframe-ul tău clientului folosește indicii (annotations) care să explice punctele importante.

6. Un wireframe se construiește în alb-negru-gri și nu este foarte detaliat; oferă o direcție designerului; constituie un punct de plecare în discuția cu clientul și de multe ori diferă puțin de propunerea finală (layout design). În faza de wireframe este absolut necesar sa utilizezi elemente care imită tag-urile html (select-uri, input-uri, link-uri, imagini, butoane, etc.). Sesizând un select sau un input clientul va ști imediat ce dorești sa construiesti! Nu va trebui să pierzi timp cu explicații inutile.

Rămâne la latitudinea ta să hotărăști complexitatea butoanelor pe care le construiesti, dar nu exagera.
Păstrează lucrurile simple și clare. Te va ajuta să câștigi timp.

7. Construcția unui wireframe nu ar trebui să solicite mai mult de 2-3 ore. Poți începe pe o foaie de hârtie, pe un whiteboard, apoi poți alege un editor grafic (Adobe rulează).

Poți opta pentru Axure care este un tool excelent și foarte complex (prototypes).

La Goof Koof (follow us)  ne jucăm zilnic cu wireframe-uri. Mai multe exemple (unele prea detaliate) găsiți pe flickr.