Imaginează-ți sau gândește-te la acel client care vine la tine și te comandă să proiectezi un site web. Este posibil să trebuiască să proiectați tema pe care o va folosi și că va fi prima impresie pe care o va lăsa miilor sau milioanelor de oameni care urmează să o viziteze. Cum i-ai prezenta-o? Ați face capturi de ecran ale unui site web unde ați lucrat la design și le-ați arăta? Nu ar fi mai bine să folosiți o mamă web?
Aşteptare, Nu știai că există și o machetă web? Ei bine, atunci acest subiect te interesează. Și multe. Pentru ca iti poti oferi prezentarii tale o prezenta mai buna si il faci pe client sa plece mult mai fericit dupa ce a vazut imagini in care pare ca site-ul este deja functional. Și adevărul este că nu te va costa atât de mult să o faci.
Ce este o machetă a site-ului web
În primul rând, să explicăm puțin ce a site-ul web simulat. După cum știți, o machetă este de fapt o reprezentare „imagine reală” care arată cum ar arăta rezultatul final al lucrării dumneavoastră.
În cazul unui site web, ar fi o imagine a rezultatului acelei pagini web.
Acest tip de colaj sunt folosite pentru a da mai mult realism lucrării, deoarece de multe ori, atunci când îl prezinți, poate fi gol sau nu reprezintă sută la sută ceea ce ați făcut. În plus, clientul are un mod mai vizual de a-și face o idee.
Și vei spune, de ce să nu-i arăți site-ul la care ai lucrat? S-ar putea face, dar nu ca o prezentare a lucrării ci ar trebui să lăsați clientul să navigheze pe web ca el să o cunoască temeinic și, de multe ori, nu au timp să o facă, așa că nu te asiguri că a văzut totul.
Pe de altă parte, cu o machetă web ai reuși, deoarece ai evidenția tot ce vrei să vezi în acele imagini.
Cum sunt făcute
Acum, cum sunt făcute aceste machete web? Există vreun program pentru a le crea? Sunt colaje care sunt luate de pe Internet?
de fapt există mai multe instrumente gratuite că vă pot ajuta să le creați și că vă pot oferi opțiuni, nu numai cu exemplele pe care vi le vom oferi puțin mai târziu.
Cu aceasta ai putea chiar să creezi o colecție de ele pentru acel client, punând designul în secvențe diferite care fac ca rezultatul final să arate mult mai bine.
Aceste instrumente sunt:
Gliffy
Acest instrument este online și este gratuit. Cu el puteți crea machete web deoarece are multe scheme și un API cu care puteți face treaba în câteva minute.
De fapt, este o dintre cele mai folosite și asta vă oferă multe opțiuni.
Cacoo
În acest caz trebuie să vă avertizăm că, deși ne vom concentra pe parte gratuită, instrumentul se plateste si si asta inseamnă va fi mai limitat în ceea ce poți face.
Pentru a vă face o idee, puteți doar exporta în PNG (deci nu este atât de personalizabil dacă vrei să-l folosești cu alți clienți).
Lucrul bun este că dacă lucrezi cu o echipă ai putea lucra împreună în același timp (adică în timp real).
wirify
wirify este unul dintre instrumente poate transforma un site într-un wireframe si, odata cu el, lucra cu clientul arătându-ți web-ul după bunul plac. Dar desigur, aici ar fi necesar să alegeți o fotografie a unui computer, tabletă sau mobil pentru a monta rezultatul acestui program.
După cum probabil ați ghicit, toate instrumentele vă oferă o imagine a designului web, dar ar fi necesar să îl asamblați într-o imagine reală. Pentru aceasta, trebuie să accesați fotografii în care sunt afișate computere, telefoane mobile, tablete pentru a vă introduce designul deasupra și a obține o fotografie care să le unească pe amândouă (și care să arate bine).
Pentru a face acest lucru, puteți folosi machete gata făcute sau le puteți crea singur cu un program de editare a imaginilor.
Machetă web pe care o puteți descărca
Dacă nu doriți să vă copleșiți prea mult pentru a prezenta lucrarea, aici vă lăsăm câteva exemple de site-ul web simulat pe care le puteți descărca și utiliza. Vei economisi timp.
Machetă reală a site-ului web
Începem cu o scenă pe care oricine o poate avea. Este un birou și un ecran de computer deasupra (tastatură și mouse dedesubt). Pe fundal o bibliotecă cu cărți. Totuși, această bibliotecă este în alb-negru, la fel și elementele decorative ale biroului (mai multe cărți și o lampă) și peretele, care este într-o nuanță gri.
De ce? Pentru ca privirea să fie concentrată pe pagina afișată de monitor. in cazul tau ar putea fi prima pagină a paginii, sau părți reprezentative pe care doriți să le arătați clientului.
Îl descărcați aici.
Machetă simplă a site-ului web
O reprezentare mai simpla, unde cu un fundal gri (desi poate fi personalizat) nu arata un ecran in care sa fi inserat pagina web.
Se remarcă faptul că, dacă te uiți la ecran, are o parte mai deschisă și una mai întunecată, pentru că simulează că cade lumina pe el.
Acest lucru poate fi interesant pentru piese unde doriți clientul se uită exclusiv la ei.
Îl descărcați aici.
Macheta Samsung Galaxy S5
Aceasta este, în special, o machetă a Samsung Galaxy S5, dar poate fi perfect pentru tine să arăți, în aceeași imagine, trei părți ale designului web pe care l-ai realizat, astfel încât clientul să aprecieze cum ar arăta pe un mobil.
Rețineți că acum Google dă putere companiilor mai mult decât utilizați un site web receptiv, adică că arată bine dacă folosești un computer, o tabletă sau un mobil. Prin urmare, nu este suficient să arate bine pe computer, trebuie să te asiguri pe toate celelalte platforme.
O puteți descărca aici.
Machetă pentru tabletă și mobil
În acest caz, nu vei putea afișa 100% din web pe o tabletă, dar poți să arăți pe mobil. Și este că, dacă vrei să-ți arăți designul pe aceste două dispozitive, o poți face și tu, astfel încât clientul să-și facă o idee despre cum va arăta.
Desigur, rețineți că pe tabletă va fi afișat în format peisaj în timp ce mobil o va avea vertical. Este o modalitate pentru el de a vedea că designul tău se schimbă pentru a se potrivi ambelor dispozitive.
Ai inteles aici.
Aveți câteva exemple de modele web? Le puteți împărtăși în comentarii.