fbpx

De la wireframe la mockup design. Un alt pas foarte important din proiect.

ipad mockup

ipad mockup

Am vorbit despre wireframe și despre cât de folositor poate fi, iar acum trecem la nivelul următor și anume la așa numitul mockup design.

Înainte de toate trebuie să înțelegem ce este acest mockup design. Pentru a face o analogie, wireframe-ul este baza, are rolul scheletului, pe când mockup-ul este ceea ce vine peste, este țesutul, e ceea ce dă unicitate și personalitate unui site. De la layout la culori, la elemente vizuale, la toate acele detalii grafice care definesc site-ul.

Din punct de vedere al momentului creării acestuia, raportat la timpul implementării proiectului, mockup-ul este făcut imediat după crearea wireframe-ului, pentru că cele două merg mână în mână, iar mockup-ul este face trecerea de la wireframe la programarea propriu zisă. Dacă te folosești cum trebuie de avantajele oferite de crearea unui mockup, câștigi foarte mult pe partea de organizare a proiectului și obținere a unui rezultat final de calitate.

Mockup-ul se realizează în programe speciale de editare foto, precum Adobe Photoshop, sau Corel Draw și pot fi exportate în format .jpg sau .png ca orice altă imagine.

Cum trebuie să te folosești de un mockup?

În primul rând, ca și în cazul wireframe-ului, opțiunile sunt aproape nelimitate, de aceea, în acest punct trebuie să găsești acel echilibru perfect pentru site-ul tău. Pornești de la mare la mic, de la imaginea holistică a site-ului la detaliile care fac diferența, însă fără a te pierde în ele.

În procesul de creare al unui mockup oferă multă atenție contrastului și schemei de culori în general. Nu trebuie să obosească utilizatorul printr-un contrast prea strident, dar în același timp să fie ușor de făcut diferența între background și text spre exemplu.

Nu încărca site-ul doar pentru că poți face asta, o zona lăsată liberă poate avea un impact de efect din punct de vedere grafic.

În mare parte se aplică aceleași reguli ca la partea de wireframe, mai mult nu înseamnă în mod obligatoriu mai bine sau mai estetic, chiar dacă avem tendința de a ne folosi de cat mai multe ‘features’, asta nu înseamnă că trebuie să o și facem.

Am ajuns în acea perioada a erei digitale în care ușer-ul nu mai pune accent pe detalii ‘flashy’, ci preferă un design simplu și de efect care să îl ajute în primul rând să ajungă la informația pe care o caută fără să fie agasat vizual.

Punctul în care te poți răzgândi.

Mockup-ul este partea din proiect care ajută programatorul în dezvoltarea site-ului, sau aplicației. Mockup-ul este modelul după care se construiește efectiv site-ul. De aceea, este esențial ca în momentul în care se începe dezvoltarea site-ului la nivel de programare, mockup-ul să se afla în varianta finală. E mult mai ușor să se aducă modificări mockup-ului la nivel de design, decât site-ului după ce a fost programat.

 

 

Distribuie articolul:

Articole asemănătoare:

2 Comentarii
  1. Samuel Coman

    Cred că în ultimii ani Sketch a devenit mult mai popular și chiar a depășit Photoshop-ul mai ales în faza de mockup dar chiar și după. Merită menționate și tool-urile precum Invision care ajută clientul să înțeleagă flowurile aplicației în faza de mockup.

    Nu sunt de acord cu ultimul paragraf al articolului. Majoritatea companiilor de software lucrează agile și clienții sunt educați a fi agile. Asta înseamnă că se pot răzgândi oricând în timpul implementării dacă realizează că direcția nu e bună, dacă ce și-au dorit inițial nu e ceea ce le trebuie sau dacă o etapă de user testing a demonstrat că anumite detalii nu sunt gândite corect. Bineînțeles că clientul trebuie să își asume costurile în astfel de situații. Dar o va face dacă dorește succesul proiectului.

    Cred că articolul poate fi îmbunătățit cu obiecțiile de mai sus.

    1. Thecon
      Thecon

      Salut Samuel, mulțumim pentru completări. Recomandăm și noi toolurile menționate de tine. Referitor la răzgândirea clientului, bineînțeles că este posibilă în orice pas, chiar și când proiectul a fost finalizat, cât timp acesta își asumă costurile. Noi încercăm mereu să ducem clientul de la început în direcția bună pentru a evita costuri suplimentare. Există din păcate și cazuri în care clientul nu consideră că trebuie să plătească suplimentar pentru schimbările cerute după implementare.

Lasă un comentariu