Mockup

Mockup je slika koja pokazuje kako će nešto izgledati kad bude gotovo, prije nego što se napravi.

U izradi sajta to je ekran s pravim bojama, pismom, slikama i tekstom, koji još nije stranica nego slika stranice. U grafičkom dizajnu je to logo prikazan na kombiju ili etiketa na tegli, prije nego što išta ode u štampu. U oba slučaja služi istom: da se odluka donese dok je izmjena besplatna.

Skica, mockup, prototip

Tri koraka koji se stalno miješaju, a rade različite poslove.

Skica je bez boja i bez slika. Na njoj se odlučuje šta ide gdje i kojim redom. Namjerno je ružna, da bi rasprava ostala na sadržaju.

Mockup je isti raspored s bojama, pismom, pravim slikama i pravim tekstom. Na njemu se odlučuje kako to izgleda.

Prototip je verzija koja se može kliknuti. Kroz nju se prolazi kao kroz sajt, pa se vidi je li put od početne do upita logičan.

Ne treba svaki projekat sva tri. Manji sajt često ide iz skice pravo u izradu, a mockup se radi samo za početnu, jer se tamo najviše raspravlja.

Šta se na mockupu odlučuje

Ono što je vidljivo i o čemu će neko imati mišljenje.

Boje u stvarnom odnosu, dakle koliko je čega, a ne kako izgledaju jedna pored druge u paleti.

Pismo u stvarnim veličinama, i to je mjesto gdje se prvi put vidi je li naslov čitljiv i ima li tekst dovoljno zraka. Više o tome pod tipografijom.

Fotografije, i s njima obično prvo razočaranje. Slika koja je izgledala dobro sama, u rasporedu često ne radi.

I odnos između elemenata: šta je prvo, šta je tiše, gdje oko pada. To je vizuelna hijerarhija, i mockup je prvo mjesto gdje se ona može provjeriti.

Pravi tekst, ne lažni

Mockup s izmišljenim latinskim tekstom je mockup na kojem se odobrava izgled, a ne stranica.

Naslov koji u prijedlogu ima pet riječi u stvarnosti ima trinaest. Cjenovnik s pravim nazivima usluga ne stane u kolone koje su nacrtane za kratka imena. Ime firme koje je duže nego što je predviđeno lomi zaglavlje.

Zato se, gdje god je moguće, u mockup stavlja tekst koji će zaista biti objavljen, ili barem tekst iste dužine. To pomjera raspravu s toga kako izgleda na to radi li.

Šta mockup ne pokazuje

Ovdje je granica koju vrijedi izgovoriti naglas prije odobrenja.

Brzinu. Slika se učitava odmah; stranica ne mora.

Kretanje. Šta se dešava dok se skrola, šta se otvara na dodir, kako se meni ponaša na telefonu.

Stanja. Prazna lista rezultata, dugi naziv proizvoda, poruka o grešci u obrascu, proizvod kojeg nema na stanju. Ti se ekrani rijetko crtaju, a u radu se pojave prvog dana.

Zbog toga se uz mockup dogovara i šta se dešava u tim slučajevima, makar u nekoliko rečenica. Sajt koji se sprema za ozbiljniju upotrebu to rješava dizajn sistemom, gdje svaki element ima i svoja neugodna stanja.

Koliko ekrana je dovoljno

Crta se nekoliko obrazaca, ne sve stranice.

Za uslužnu firmu obično: početna, stranica jedne usluge, stranica s kontaktom i obrascem, i jedan članak. Za trgovinu: početna, kategorija, stranica proizvoda i korpa.

Svaki od tih obrazaca se crta u dvije širine, za telefon i za računar. Ako se crta samo jedna, to je ona za telefon, jer tamo dolazi većina, i jer je lakše raširiti nego stisnuti. Više o tome pod responsive dizajnom.

Ostale stranice slijede iste obrasce. Dodatni ekrani uglavnom samo produže raspravu o istoj stvari.

Mockup u dizajnu identiteta

Druga upotreba iste riječi, i kod nas češća.

Logo na bijeloj podlozi izgleda dobro gotovo uvijek. Isti logo na kombiju, na tabli iznad ulaza, na radnom odijelu i na fakturi je stvarni ispit. Mockup je slika koja to pokazuje prije nego što se plati folija.

To je jedini trenutak u kojem je izmjena jeftina. Poslije štampe se ne mijenja dizajn, nego se ponovo plaća štampa.

Ista logika vrijedi za ambalažu i za natpise: predmet, udaljenost s koje se gleda, i podloga na koju ide. Više o tome pod vizuelnim identitetom.

Kako se odobrava

Odobrenje ima smisla samo ako ga daju svi koji poslije mogu reći da nisu pristali.

Zato se na pregled zovu i ljudi koji odgovaraju na upite, ne samo vlasnik i dizajner. Oni znaju šta kupci pitaju i šta na stranici mora stajati da ih se ne bi pitalo.

Korisno je i zapisati šta je odobreno, jednom rečenicom po ekranu. Usmeno odobrenje se tri sedmice kasnije sjeća različito.

I rok. Prijedlog koji stoji na odobrenju mjesec dana najčešće se vrati s izmjenama koje nemaju veze s dizajnom, nego s time što se u međuvremenu promijenila ponuda.

Greške koje najčešće viđamo

Prva je lažni tekst, pa se izgled odobri, a sadržaj ne stane.

Druga je mockup samo za računar, pa se izgled na telefonu prvi put vidi kad je sajt već napravljen.

Treća je preskakanje skice, pa se o rasporedu raspravlja preko boja.

Četvrta je prikaz koji je ljepši od onoga što će stvarno biti: savršene fotografije koje firma nema i tekst koji niko neće napisati.

Peta je mockup logoa samo na bijeloj podlozi, bez ijednog stvarnog predmeta.

Šesta je odobrenje jedne osobe, poslije kojeg se u izradi pojave tri nova mišljenja.

Lista za provjeru

• Je li raspored dogovoren na skici, prije boja?
• Stoji li u prijedlogu pravi tekst, ili barem tekst prave dužine?
• Postoji li verzija za telefon, a ne samo za računar?
• Jesu li fotografije one koje zaista imate?
• Zna li se šta se dešava kad je lista prazna ili obrazac pogrešno popunjen?
• Je li logo prikazan na predmetu na kojem će stvarno stajati?
• Jesu li prijedlog vidjeli i ljudi koji odgovaraju na upite?
• Je li zapisano šta je tačno odobreno i kada?

Pojmovi koje ćete čuti uz mockup

• Vjernost: koliko je prijedlog blizu konačnom izgledu.
• Lažni tekst: izmišljeni sadržaj koji popunjava mjesto do pravog.
• Prototip: verzija kroz koju se može kliknuti.
• Stanja elementa: kako nešto izgleda kad je prazno, pogrešno ili predugo.
• Skica: raspored bez boja, korak prije mockupa.
• Prikaz na predmetu: logo ili ambalaža prikazani u stvarnoj upotrebi.