Share
Cosa starai creandoIn questo tutorial ti guiderò attraverso il processo di progettazione di un'elegante pagina di destinazione per un servizio fittizio di "gratitudine". Inizieremo da zero, stendendo il layout con Adobe Photoshop in pochissimo tempo. Useremo alcune tecniche di base e intermedie per creare questo design con la conversione in mente. Cominciamo!
Per poter seguire, avrai bisogno di alcune risorse (disponibili gratuitamente):
Inizia creando un nuovo documento Photoshop (File> Nuovo ... ) usando le impostazioni mostrate sotto. Sei libero di usare una tela di qualsiasi dimensione tu preferisca, il web non è una larghezza fissa, dopotutto.
Impostiamo alcune guide in modo che il nostro layout abbia spazio sufficiente e un aspetto equilibrato. Non utilizzo sempre una griglia predefinita, ma l'impostazione di alcune linee guida garantirà l'accuratezza e contribuirà a definire la larghezza del nostro sito web. Vai a Visualizza> Nuova guida ... e impostare alcune linee guida. Di solito scelgo 1000px come larghezza del sito web e aggiungo alcune linee guida dagli angoli in modo che abbia spazio per respirare.
Nota: Linee guida utilizzate per questo tutorial: verticale a 200px, 500px, 700px, 900px e 1200px.
Mancia: È anche possibile utilizzare il plug-in GuideGuide Photoshop per rendere questo processo ancora più rapido.
Seguendo l'etichetta di Photoshop manterremo le cose organizzate e quindi facili da navigare e modificare. Creiamo tre gruppi di livelli denominati Intestazione, Contenuto e Piè di pagina. Per creare gruppi vai a Livello> Nuovo> Gruppo ... e dare a ciascuno un titolo come detto. Per la creazione rapida di un gruppo fai semplicemente clic sull'icona della cartella.
L'intestazione o l'area "above the fold" (ovunque sia in questi giorni) svolge un ruolo molto importante nel coinvolgere gli utenti e assicurare che i visitatori rimangano sul sito web. Per questo layout di pagina di destinazione userò un colpo di due persone sedute su una panchina; uno di loro che alza le mani in aria raffigurando emozioni positive e felicità.
Iniziamo a creare lo sfondo del blog. All'interno del gruppo "Intestazione" disegna un nero # 000000 forma a rettangolo colorato usando il Strumento rettangolo (U). Nel mio caso ho disegnato un rettangolo di dimensioni 1400x728px e l'ho posizionato nella parte superiore del documento.
Ora scarica la foto di Chillin 'nella foto del sole, trascinala nel documento di Photoshop e posizionala sopra il livello del rettangolo. Rinominare il livello dell'immagine in qualcosa che riconoscerai in seguito, nel mio caso che ho usato IMG. Dopo di ciò, tieni premuto il tasto alt tasto e mouse sul livello foto fino a quando non vedi una piccola freccia rivolta verso il basso, quindi rilasciala. Hai appena creato un Maschera di ritaglio. Infine riduci lo strato IMG Opacità a 70% quindi il testo che metteremo in cima sarà più leggibile.
Ora colpisci T CMD + e ridimensiona la foto in base alle tue esigenze.
Mancia: tenere premuto Cambio chiave per trasformare proporzionalmente.
Ora creiamo una navigazione globale per la nostra pagina di destinazione in modo che le persone possano navigare attraverso il sito web.
Crea un nuovo gruppo chiamato "Navigazione", posizionalo all'interno del gruppo "Intestazione". Dopo di che prendi il Strumento rettangolo (U) e disegna una forma rettangolare bianca tra la prima e l'ultima guida verticale. Fatelo in giro 60px in altezza in modo che gli oggetti di navigazione abbiano uno spazio per respirare e avere un aspetto pulito. Infine spostalo 30px giù dalla cima così possiamo avere questo effetto fluttuante che rimane benissimo sulla nostra immagine.
Ora inseriamo un logo e alcuni collegamenti per rendere la barra di navigazione simile a qualcosa che le persone possono utilizzare. Per il logo ho semplicemente scritto "Grttd" usando Display Playfair (grassetto in corsivo) font 26px taglia e colore grigio scuro # 0e0e0e.
Per i link di navigazione che ho usato Source Sans Pro 14px con una spaziatura estesa tra le lettere. Per la chiamata principale all'azione "Iscriviti" che ho usato Nero e il colore verde # 96c218. Abbiamo finito con la "Navigazione", quindi ridurla a icona facendo clic sull'icona a forma di triangolo accanto al nome del gruppo.
Scriviamo un messaggio ispiratore che accompagna l'immagine e l'idea generale del sito web. Userò un carattere grassetto enorme con un sottotitolo che spiega il concetto in modo più dettagliato.
Dato che abbiamo uno sfondo piuttosto scuro per la nostra area superiore, è consigliabile utilizzare un testo chiaro per creare un contrasto elevato e garantire la leggibilità. Ho usato il bianco #FFFFFF Source Sans Pro (nero) 80 px con un'altezza di linea di 86px. Mettilo in giro 120px sotto la barra di navigazione in modo che il messaggio abbia spazio sufficiente per essere percepito come importante.
Visualizzazione ingrandita del 70%.Ora inseriamo il sottotitolo che chiarirà l'intero concetto e risponderà ad alcune domande che i visitatori potrebbero avere. Per creare una bella combinazione tipografica, mescoliamo il principale titolo sans serif con l'elegante font serif che abbiamo usato in precedenza per il logo.
Per ulteriori combinazioni di font di ispirazione consulta: Google Web Fonts Typographic Project e A Beginner's Guide to Pairing Fonts.
Per questo tutorial ho usato il bianco #FFFFFF 26px Display Playfair (corsivo) carattere e lo ha inserito 40px sotto il titolo principale.
Aggiungiamo qualcosa di più accattivante in modo che il visitatore possa vedere il vantaggio di rimanere sul sito web. Un registro di ringraziamento si basa sulla registrazione delle cose per cui sei grato, quindi alcune prove sociali sarebbero una buona idea, mostrando a qualcuno che effettivamente lo usa e mostrando qualcosa di più desiderabile come un striscia.
Crea un nuovo gruppo chiamato "Esempio", quindi scegli il Ellipse Tool (U) e, tenendo premuto Cambio, disegna un cerchio. Nel mio caso lo è 60x60px. Dopodiché metti la faccia di qualcuno sulla parte superiore del livello del cerchio e, tenendo premuto il tasto alt tasto, passa il mouse sul livello finché non vedi una piccola freccia rivolta verso il basso, quindi rilascialo per creare un Maschera di ritaglio. Ora puoi ridimensionare l'immagine se necessario facendo clic T CMD +.
Per questo tutorial sto usando una faccia casuale da Facce Inter utente.
Suggerimento: tieni premuto il tasto Maiusc per disegnare / ridimensionare le forme proporzionali.
Ora dobbiamo inserire un indicatore di log consecutivi. Creiamo un'altra forma di cerchio, questa volta più piccola, e inseriamo un numero al suo interno. Semplice, ma comprensibile, e fa il lavoro. Per il colore del cerchio ho riutilizzato il verde precedentemente utilizzato # 96c218. Nel mio caso la dimensione è 30x30px e il testo all'interno è bianco #FFFFFF Source Sans Pro (Bold) 14px.
Infine diamo un nome alla nostra persona e chiariamo cosa significa questo numero. Scegli il Strumento di tipo orizzontale (T) e inserisci un nome e lunghezza della striscia. Nel mio caso ho usato PT Serif (grassetto corsivo) 16px per il nome e Source Sans Pro (Regular) 13px per la striscia. Assicurati di utilizzare un'altezza della linea abbastanza grande in modo che gli elementi abbiano spazio per respirare.
Fantastico, un'ultima cosa prima di passare all'area del contenuto. Abbiamo bisogno di un forte Call To Action (CTA) quindi l'utente può fare qualcosa dopo aver visto le immagini e leggere i titoli. Crea un nuovo gruppo chiamato "CTA", imposta il colore di primo piano sul bianco #FFFFFF e prendi il Strumento rettangolo (T). Dopo di che disegna una forma rettangolare, nel mio caso la sua dimensione è 280x60px. Notare la consistenza in altezza precedentemente utilizzata per la barra di navigazione.
Dopodiché, inserisci una copia persuasiva per il pulsante. Ho usato "INIZIA VIVERE →", il colore è come in precedenza utilizzato nella barra di navigazione grigio scuro # 0e0e0e, font Source Sans Pro (Semibold) 16px con il monitoraggio impostato su 140.
Ora abbiamo finito con "Header". Apriamo il gruppo "Contenuto" e ne creiamo un altro chiamato "Descrizione". Inseriremo un titolo forte seguito da una descrizione più dettagliata dell'intero sito web. È importante ripetere il Call To Action (CTA) quindi l'utente non deve pensare troppo, ma è comunque in grado di agire quando è pronto.
Scegli il Strumento di tipo orizzontale (T) e scegli un font potente per il tuo titolo. Nel mio caso sto usando il bello ed elegante, ma dall'aspetto autorevole Display Playfair (nero) 60px. Assicurati di dare a questa bestia molto spazio per respirare, l'ho spostato 100px giù dall'immagine dell'intestazione.
Ora usando lo stesso Strumento di tipo orizzontale (T) fai un rettangolo cliccando e trascinandolo. Nel mio caso è un 600x140px casella di dimensioni dove ho messo una copia convincente per gli utenti a prendere la decisione di fare clic sul CTA. Per stabilire una chiara gerarchia visiva il testo della descrizione dovrebbe essere più piccolo e non così pesante. Nel mio esempio uso il grigio # 666666 PT Serif (normale) 18px, altezza della linea 28px. L'intero elemento viene spostato di 50 px dal titolo per conferire un aspetto pulito e professionale.
Dopo aver letto la copia, il nostro visitatore potrebbe essere convinto di fare un tentativo, quindi è consigliabile ripetere ancora una volta il pulsante Call To Action (CTA). Apri il gruppo "Intestazione", trova il gruppo "CTA" e duplicalo battendo CMD + J. Dopodiché spostalo all'interno del gruppo "Descrizione" e cambia il colore del pulsante nel nostro green it precedentemente utilizzato # 96c218 e per il testo usa il bianco #FFFFFF. Spostalo verso il basso 50px dalla copia per avere spaziatura costante.
Sembra fantastico finora. Mettiamo una linea semplice per separare visivamente il blocco di descrizione dal successivo. Scegli il Strumento linea (U), impostato Peso a 1px e traccia una linea orizzontale sulla prima e sull'ultima guida verticale. Nel mio caso ho usato un colore grigio chiaro # e6e6e6 che non è troppo forte, ma fa perfettamente il lavoro.
Suggerimento: tieni premuto il tasto Cambio chiave per disegnare una linea perfettamente dritta.
Ora che abbiamo finito con il blocco "Descrizione" è ora di passare a quello successivo. Crea un nuovo gruppo chiamato "Get Inspired". Dopo di ciò duplicare i livelli titolo e descrizione dal gruppo "Descrizione" e spostarli nel gruppo "Ottieni ispirato". Modifica i livelli e modifica la copia. Di seguito è il mio esempio:
Ora vai al gruppo "Intestazione" e trova il gruppo "Esempio". Duplica l'intero gruppo colpendo CMD + J e spostalo nel gruppo "Ottieni Ispirato". Riutilizzeremo il nostro esempio dall'alto e mostreremo alcune storie di utenti per ispirare il nostro visitatore ad agire.
Rinominare il nome del gruppo in "Storia" e sbarazzarsi dell'indicatore verde. Inoltre, dovrai cambiare il colore del testo in grigio scuro # 0e0e0e quindi è leggibile su uno sfondo bianco. Usa un'altra immagine per l'avatar e scrivi la posizione e la posizione della persona in grigio chiaro # 666666 così le persone possono riferirsi di più a quella persona.
Successivamente, crea una casella di testo di circa 300x160px dimensione usando il Strumento di tipo orizzontale (T) e scrivi un esempio di aggiornamento del registro di ringraziamento. Ho usato PT Serif (Corsivo) 16px dimensione grigio scuro come usato prima # 666666.
Ora duplica il gruppo "Storia" due volte e modifica gli avatar, i nomi e le descrizioni. Metti questi due gruppi in ordine orizzontale, lasciando spazi vuoti equidistanti tra loro e metti una linea dopo tutti questi gruppi come abbiamo usato in precedenza.
Ora, come abbiamo fatto con il gruppo "Get Inspired", passiamo all'ultima sezione della nostra pagina di destinazione. Il finale Chiamare all'azione (con alcuni dettagli in più) incoraggerà i visitatori a registrarsi inserendo un indirizzo email.
Crea un nuovo gruppo chiamato "Email" e vai al gruppo precedente per trovare un livello di titolo, quindi duplicalo picchiando CMD + J e spostarlo nel gruppo appena creato. Cambia il titolo in qualcosa di incoraggiante e muoviti 100px sotto la linea per mantenere la coerenza.
Grande! Ora imposta il colore di primo piano su grigio chiaro # f5f5f5 e scegli il Strumento rettangolo (U) disegnare una casella per un campo di posta elettronica. Dovrebbe essere della stessa altezza del nostro principale Call To Action (CTA) pulsante, anche se la larghezza non ha importanza. Nel mio caso lo è 430x60px. Quindi prendi il Strumento di tipo orizzontale (T) e scrivi "Inserisci la tua email" o qualcosa di simile, assicurati di utilizzare un colore scuro in modo che sia facilmente leggibile.
Ora vai al gruppo "Descrizione" nel pannello dei livelli e trova il gruppo "CTA". Duplicalo colpendolo CMD + J e spostarlo nel gruppo "Email". Posiziona il pulsante accanto al campo dell'email e centra l'intero elemento.
Visualizzazione ingrandita dell'80%.La fine è vicina! Riduciamo al minimo tutti i gruppi e apriamo il gruppo "Piè di pagina". Imposta il colore di primo piano su grigio scuro # 2d2d2d e, usando il Strumento rettangolo (U), disegnare un rettangolo di larghezza completa di circa 230px in altezza. Questo sarà lo sfondo del nostro footer e distinguerà l'area del contenuto con il suo contrasto.
Vai avanti e trova il gruppo "Navigazione" e il livello del logo, duplicalo colpendolo CMD + J e spostarlo nel gruppo "Piè di pagina". Cambia il colore in bianco #FFFFFF e spostalo 50px sotto il bordo del rettangolo del piè di pagina.
Finalmente, prendi il Strumento di tipo orizzontale (T) e inserire alcuni collegamenti che gli utenti potrebbero trovare utili. Assicurati di raggruppare i tuoi collegamenti in modo che siano facilmente associati. Nel mio caso ho usato Source Sans Pro (Semibold) 16px per i titoli dei gruppi di collegamento e PT Serif (normale) 14px per i titoli dei collegamenti.
Questo è tutto! Abbiamo finito con la progettazione del layout, quindi ora rivedere i livelli, eliminare quelli non necessari e consegnarli allo sviluppatore, o ancora meglio codificarlo da soli. Ho toccato alcune tecniche di base e ho dimostrato il mio flusso di lavoro per la progettazione di layout web, spero che tu abbia imparato qualcosa.
Mi piacerebbe sentire il tuo feedback e vedere i risultati di questo tutorial!
Se sei nuovo in Landing Page Design, ti consigliamo di utilizzare una serie di tutorial introduttivi per familiarizzare con le nozioni di base:
Se sei interessato ad avere un po 'di aiuto con il design della tua pagina di destinazione, Envato Studio ha una grande collezione di servizi di progettazione e sviluppo di pagine di atterraggio che potresti voler esplorare. Puoi anche dare un'occhiata ai temi della pagina di destinazione sul mercato Envato.
Accentsconagua