Zamislite ili razmislite o tom klijentu koji vam dolazi i naruči vam izradu web stranice. Možda ćete morati osmisliti temu koju će koristiti i da će to biti prvi dojam koji će ostaviti na tisuće ili milijune ljudi koji će ga posjetiti. Kako biste mu to predstavili? Biste li snimili screenshot web stranice na kojoj ste radili na dizajnu i pokazali im je? Ne bi li bilo bolje koristiti web mock up?
Čekam, Niste znali da postoji i web mock up? E, onda te ova tema zanima. I puno toga. Zato što svojoj prezentaciji možete dati bolju prisutnost i učiniti da klijent ode mnogo sretnijim nakon što vidi slike na kojima se čini da je web stranica već operativna. A istina je da vas to neće toliko koštati.
Što je maketa web stranice
Prije svega, objasnimo malo što a maketa web stranice. Kao što znate, mockup je zapravo prikaz “stvarne slike” koji pokazuje kako bi izgledao konačni rezultat vašeg rada.
U slučaju web stranice, bila bi slika rezultata te web stranice.
Ova vrsta kolaža koriste se da daju više realizma djelu, jer mnogo puta, kada ga prezentirate, može biti prazan ili ne predstavlja sto posto ono što ste napravili. Osim toga, klijent ima vizualniji način dobivanja ideje.
A vi ćete reći, zašto mu ne biste pokazali web stranicu na kojoj ste radili? Moglo bi se, ali ne kao prezentacija rada nego morali biste dopustiti klijentu da se kreće po webu da je on temeljito upozna i, često, nemaju vremena za to, pa se ne uvjerite da je sve vidio.
S druge strane, web mockupom biste to postigli jer biste na tim slikama istaknuli sve što želite vidjeti.
Kako su napravljeni
Sada, kako se prave ovi web maketi? Postoji li program za njihovo kreiranje? Jesu li to kolaži preuzeti s interneta?
Zapravo postoji nekoliko besplatnih alata da vam mogu pomoći da ih kreirate i da vam mogu dati opcije, ne samo s primjerima koje ćemo vam dati malo kasnije.
Uz to možete čak stvoriti njihovu kolekciju za tog klijenta, stavljajući dizajn u različite sekvence zbog kojih konačni rezultat izgleda puno bolje.
Ovi alati su:
blistav
Ovaj alat je online i besplatno je. Pomoću njega možete izraditi web mock up jer ima mnogo shema i API s kojim možete obaviti posao za nekoliko minuta.
Zapravo, to je a od najčešće korištenih a to vam daje mnogo opcija.
Cacoo
U ovom slučaju moramo vas upozoriti na to, iako ćemo se usredotočiti na slobodni dio, alat također se plaća a to znači bit će ograničeniji u onome što možete učiniti.
Da biste dobili ideju, možete izvesti samo u PNG (tako da nije toliko prilagodljiv ako ga želite koristiti s drugim klijentima).
Dobra stvar je što ako radite s timom, možete raditi zajedno u isto vrijeme (tj. u stvarnom vremenu).
ožičiti
ožičiti je jedan od alata može pretvoriti web stranicu u a Wireframe i, uz to, rad s klijentom pokazujući vam web po vašem ukusu. Ali naravno, ovdje bi bilo potrebno odabrati fotografiju računala, tableta ili mobitela za montiranje rezultata ovog programa.
Kao što ste možda i pretpostavili, svi alati vam daju sliku web dizajna, ali bi ga bilo potrebno zapravo sastaviti u pravu sliku. Za to morate pristupiti fotografijama na kojima su prikazana računala, mobiteli, tableti kako biste umetnuli svoj dizajn na vrh i dobili fotografiju koja ujedinjuje oboje (i koja izgleda dobro).
Da biste to učinili, možete koristiti gotove makete ili ih sami izraditi pomoću programa za uređivanje slika.
Web maketa koju možete preuzeti
Ako se ne želite previše opterećivati prezentiranjem rada, ovdje vam ostavljamo neke primjeri maketa web stranice koje možete preuzeti i koristiti. Uštedjet ćete vrijeme.
Realističan maketa web stranice
Počinjemo sa scenom koju bi svatko mogao imati. To je stol i ekran računala na vrhu (tipkovnica i miš ispod). U pozadini polica za knjige s knjigama. No, ova polica za knjige je crno-bijela, kao i dekorativni elementi radnog stola (više knjiga i lampa) i zid koji je u sivom tonu.
Zašto? Tako da je pogled usredotočen na stranicu koju prikazuje monitor. u vašem slučaju može biti početna stranica stranice, ili reprezentativne dijelove koje želite pokazati klijentu.
Vi ga preuzimate ovdje.
Jednostavna maketa web stranice
Jednostavniji prikaz, gdje sa sivom pozadinom (iako se može prilagoditi) ne prikazuje ekran u koji ćemo umetnuti web stranicu.
Ističe se da, ako pogledate ekran, ima svjetliji i tamniji dio, jer simulira da svjetlost pada na njega.
Ovo može biti zanimljivo za dijelove gdje želite klijent gleda isključivo u njih.
Vi ga preuzimate ovdje.
Model Samsung Galaxy S5
Ovo je posebno maketa Samsung Galaxy S5, ali može biti savršena da na istoj slici prikažete tri dijela web dizajna koje ste izradili kako bi klijent cijenio kako bi to izgledalo na mobilnom telefonu.
Imajte na umu da Google sada omogućuje tvrtkama više od koristiti responzivnu web stranicu, odnosno da izgleda dobro bez obzira koristite li računalo, tablet ili mobitel. Stoga, nije dovoljno da izgleda dobro na računalu, morate se uvjeriti na svim ostalim platformama.
Možete ga preuzeti ovdje.
Maketa za tablet i mobitel
U tom slučaju nećete moći prikazati 100% weba na tabletu, ali možete na mobilnom uređaju. A to je da ako želite prikazati svoj dizajn na ova dva uređaja možete to i učiniti, kako bi klijent dobio ideju kako će to izgledati.
Naravno, imajte na umu to na tabletu će se prikazati u pejzažnom formatu dok je pokretan imat će ga vertikalna. To je način da vidi kako se vaš dizajn mijenja kako bi odgovarao na oba uređaja.
Razumiješ ovdje.
Imate li neke primjere web mock up-a? Možete ih podijeliti u komentarima.