Immagina o pensa a quel cliente che viene da te e ti commissiona la progettazione di un sito web. Può darsi che tu debba progettare il tema che utilizzerà e che sarà la prima impressione che lascerà sulle migliaia o milioni di persone che lo visiteranno. Come gliela presenteresti? Faresti screenshot di un sito web in cui hai lavorato al design e glielo mostreresti? Non sarebbe meglio usare un mock up web?
In attesa, Non sapevi che esisteva anche un mock up web? Bene, allora questo argomento ti interessa. E molto. Perché puoi dare alla tua presentazione una presenza migliore e rendere il cliente molto più felice dopo aver visto immagini in cui sembra che il sito web sia già operativo. E la verità è che non ti costerà così tanto farlo.
Che cos'è un modello di sito Web
Prima di tutto, spieghiamo un po' cosa a mock up del sito web. Come sai, un mockup è in realtà una rappresentazione di "immagine reale" che mostra come sarebbe il risultato finale del tuo lavoro.
Nel caso di un sito web, sarebbe un'immagine del risultato di quella pagina web.
Questo tipo di collage sono usati per dare più realismo al lavoro, poiché molte volte, quando lo presenti, potrebbe essere vuoto o non rappresentare al cento per cento ciò che hai fatto. Inoltre, il cliente ha un modo più visivo per farsi un'idea.
E tu dirai, perché non mostrargli il sito web su cui hai lavorato? Potrebbe essere fatto, ma non come presentazione del lavoro ma dovresti consentire al cliente di navigare sul web per farla conoscere a fondo e, molte volte, non hanno tempo per farlo, quindi non ti assicuri che abbia visto tutto.
D'altra parte, con un mockup web lo raggiungeresti perché evidenzieresti tutto ciò che vuoi vedere in quelle immagini.
Come sono fatti
Ora, come sono fatti questi mock up web? Esiste un programma per crearli? Sono collage presi da Internet?
effettivamente ci sono diversi strumenti gratuiti che possono darti una mano per crearli, e che possono darti delle opzioni, non solo con gli esempi che ti daremo poco dopo.
Con questo potresti persino crearne una raccolta per quel cliente, inserendo il design in diverse sequenze che rendono il risultato finale molto migliore.
Questi strumenti sono:
Gliffy
Questo strumento è online ed è gratis. Con esso puoi creare web mock up perché ha molti schemi e un'API con la quale puoi portare a termine il lavoro in pochi minuti.
Infatti è un dei più usati e questo ti dà molte opzioni.
Cacoo
In questo caso dobbiamo avvertirvi che, anche se ci concentreremo sul parte libera, lo strumento è anche a pagamento e questo significa sarà più limitato in quello che puoi fare.
Per farti un'idea, puoi solo esportare in PNG (quindi non è così personalizzabile se vuoi usarlo con altri client).
La cosa buona è che se lavori con un team potresti lavorare insieme allo stesso tempo (cioè in tempo reale).
Wirefy
Wirefy è uno degli strumenti può trasformare un sito web in un wireframe e, con esso, lavorare con il cliente mostrandoti il web a tuo piacimento. Ma ovviamente qui sarebbe necessario scegliere una foto di un computer, tablet o cellulare per montare il risultato di questo programma.
Come avrai intuito, tutti gli strumenti ti danno un'immagine del web design, ma sarebbe necessario assemblarlo effettivamente in un'immagine reale. Per questo, devi accedere alle foto in cui vengono mostrati computer, cellulari, tablet per inserire il tuo design in cima e ottenere una foto che unisca entrambi (e che stia bene).
Per fare ciò puoi utilizzare modelli già pronti o crearli tu stesso con un programma di modifica delle immagini.
Web mock up che puoi scaricare
Se non volete essere troppo travolti per presentare l'opera, qui ve ne lasciamo alcuni esempi di mock up del sito web che puoi scaricare e utilizzare. Risparmierai tempo.
Sito Web realistico mock up
Iniziamo con una scena che chiunque potrebbe avere. È una scrivania e uno schermo di computer in alto (tastiera e mouse in basso). Sullo sfondo una libreria con dei libri. Tuttavia, questa libreria è in bianco e nero, così come gli elementi decorativi della scrivania (più libri e una lampada) e la parete, che è in una tonalità di grigio.
Come mai? In modo che lo sguardo sia concentrato sulla pagina visualizzata dal monitor. nel tuo caso potrebbe essere la home della paginao parti rappresentative che si desidera mostrare al cliente.
Lo scarichi qui.
Mockup di sito Web semplice
Una rappresentazione più semplice, dove con sfondo grigio (sebbene personalizzabile) non mostra una schermata in cui avremo inserito la pagina web.
Si nota che, se guardi lo schermo, ha una parte più chiara e una più scura, perché simula che la luce cada su di esso.
Questo può essere interessante per le parti dove vuoi il cliente li guarda esclusivamente.
Lo scarichi qui.
Mockup Samsung Galaxy S5
Questo in particolare è un mockup del Samsung Galaxy S5 ma può essere perfetto per mostrare, nella stessa immagine, tre parti del web design che hai realizzato in modo che il cliente apprezzi come apparirebbe su un cellulare.
Tieni presente che Google ora dà più potere alle aziende utilizzare un sito web reattivo, ovvero che stia bene sia che utilizzi un computer, un tablet o un cellulare. Pertanto, non è sufficiente che stia bene sul computer, devi assicurarti su tutte le altre piattaforme.
Puoi scaricarlo qui.
Mockup per tablet e cellulare
In questo caso, non sarai in grado di mostrare il 100% del web su un tablet, ma puoi farlo sul cellulare. Ed è che se vuoi mostrare il tuo design su questi due dispositivi puoi anche farlo, in modo che il cliente abbia un'idea di come apparirà.
Ovviamente tienilo a mente sul tablet verrà visualizzato in formato orizzontale mentre il mobile lo avrà verticale. È un modo per lui di vedere il tuo design cambiare per adattarsi a entrambi i dispositivi.
Avete capito bene qui.
Hai qualche esempio di mock up web? Puoi condividerli nei commenti.