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.