Un modello di mockup del sito Web può essere un risparmiatore di vita di design. Rende facile mostrare un concetto di design di un sito Web in un'impostazione che rappresenta l'uso effettivo (su molti dispositivi diversi). Ma come è possibile personalizzare un modello di mockup del sito Web e inserire il proprio design? Ecco come.
Ci sono due modi per iniziare. È possibile creare il proprio modello di mockup del sito Web da utilizzare nei progetti o scaricarne uno per iniziare rapidamente. Il bello è che ci sono così tante opzioni di template là fuori per aiutare i clienti a visualizzare un nuovo design in tempo reale.
Ecco tutto ciò che devi sapere sulla personalizzazione di un modello (e anche sulla ricerca di un modello eccezionale, per cominciare).
Che cos'è un modello di mockup del sito Web?
I clienti amano vedere un design finito in un modello di simulazione, perché dà loro un'idea migliore di ciò che il team di progettazione sta pensando. La maggior parte dei modelli di mockup del sito Web si presenta sotto forma di un file Adobe Photoshop modificabile. Il design è fatto in modo che tu possa incollare uno screenshot del tuo sito web in una cornice dall'aspetto realistico, come mostrare la homepage di un sito web su un computer, tablet o dispositivo mobile reale.
I modelli di prototipi del sito Web possono includere una singola immagine, più immagini e rendering con diversi orientamenti. Un buon mockup può fornire un'ottima visualizzazione di come sarà un prodotto finito in uso.
Mentre puoi creare i tuoi prototipi, ci sono molte opzioni disponibili per il download. La maggior parte di questi modelli viene creata come file PSD utilizzando livelli e oggetti intelligenti per creare il progetto finale, mantenendo le proprietà visive del file. Questo è utile quando si utilizza un mockup che utilizza un orientamento interessante, come la vista 3D o prospettica.
La maggior parte dei modelli di mockup del sito Web include un mix di immagini vettoriali e raster, quindi esporta con cura. Volete assicurarvi che l'immagine del vostro sito Web appaia quanto più bella possibile prima di mostrarla.
Come personalizzare un modello di mockup
Mentre un file Photoshop con diversi livelli dall'aspetto strano può essere un po 'intimidatorio, la personalizzazione di un modello di simulazione non è un processo complicato. Hai solo bisogno di:
- Trova un modello di mockup del sito web che ti piace. (Puoi crearne uno tuo, ma con così tante fantastiche opzioni disponibili, abbiamo consigliato l'opzione di download.) Cerca un modello che metta in evidenza le caratteristiche del tuo design, come più viste per siti Web reattivi (desktop, tablet e telefono), con un sfondo che si adatta allo stile del progetto (bianco o nero contro uno sfondo colorato o uno stile fotorealistico).
- Decomprimere il download e confermare di disporre di tutte le parti necessarie: un file PSD con il mockup modificabile, un file JPG che mostra come dovrebbe essere il design (facoltativo) e un file di informazioni o readme con tutte le informazioni e le istruzioni relative alla licenza.
- Apri il file PSD in Photoshop e dai un'occhiata ai livelli. Cerca il layer che dice? Drop Your Design Here ?, o simile (ce n'è sempre uno che si distingue con questa istruzione!)
- Fai doppio clic su quel livello per aprirlo.
- Prendi gli screenshot appropriati del tuo design, dimensionati per una risoluzione ottimale e per mostrare esattamente ciò che desideri che le persone vedano nel design del prototipo finale.)
- Copia e incolla o trascina e rilascia le immagini o il contenuto nel livello appropriato, ridimensionando in base alle necessità per riempire lo spazio.
- Premi Ctrl-S o Cmd-S per salvare il livello intelligente, quindi torna all'immagine originale. Ecco! Dovresti vedere il tuo nuovo screenshot nel modello.
- Esportare il file, utilizzando la dimensione e il formato necessari per la visualizzazione.
Come utilizzare un modello di mockup del sito Web
Dopo aver personalizzato un modello di mockup del sito Web, cosa ne fai? Questi disegni apparentemente semplici hanno molte applicazioni pratiche. Puoi utilizzare un modello di mockup del sito web per:
- Anteprima dei progetti per i clienti
- Preparare il marketing e le promozioni post-lancio
- Includere in portafogli stampati
- Sommare le voci di un concorso quando si prevede di mettere in mostra il progetto finale
Tutto quello che devi fare per usare un modello di mockup del sito web è esportare il tuo design personalizzato in un formato utilizzabile. La maggior parte delle volte questo include due opzioni: un file immagine ad alta risoluzione per le applicazioni di stampa e un file di risoluzione Web da utilizzare online o per la condivisione di e-mail.
Dove trovare un modello di mockup del sito Web
Quindi tutto questo probabilmente pone la domanda: dove trovi uno di questi modelli di mockup del sito web a portata di mano? Ci sono un sacco di opzioni gratuite ea pagamento disponibili da una varietà di fonti.
Abbiamo anche un paio di ottimi rastrellamenti che includono un sacco di mockup che puoi iniziare subito.
- 20+ migliori siti Web reattivi e modelli di modelli di app
- 20+ migliori prototipi di PSD per sito Web
10 mockup di sito web gratuiti da cui partire
Per assicurarti di essere pronto per iniziare a utilizzare un mockup del sito web, abbiamo trovato 10 fantastiche e gratuite opzioni per aiutarti a iniziare. Alcuni di questi modelli possono essere trovati anche in altre raccolte di Design Shack.)
2 modelli di MacBook Pro Desk
Responsive Showcase PSD Mockups
Vector Apple Outline Device PSD
Flat Responsive Showcase
Bianco iPad e iPhone Floor Mockup
MacBook e iPhone su Table Mockup
Mockup wireframe per dispositivi Apple
Responsive Web Design Showcase Mockup
Mockup MacBook Air
PSD per MacBook Pro Retina Display
Conclusione
Personalizzare un modello di mockup del sito Web per mettere in mostra un progetto è un ottimo strumento da avere nel tuo arsenale. Anche se hai solo un paio di minuti per preparare una presentazione, puoi far apparire il design del tuo sito web in uno scenario reale per un look elegante.
Anche se non ti interessa la presentazione generale di un design o un'idea, i clienti noteranno sicuramente. Questa è una di quelle scorciatoie facili e veloci che i designer (e i freelance) possono fare per fare una grande impressione. Divertiti a personalizzare un modello per i tuoi progetti!
Mockup del sito Web
Trova il mockup del sito web reattivo perfetto, per mostrare il tuo web design su tutti i tipi di dispositivo, schermo e formato. Inoltre, impara come usarli con grande effetto!