Share
Cosa starai creandoIn questo tutorial userò Photoshop CS6 per progettare una pagina di destinazione semplice, pulita per una startup itinerante fittizia. Durante questo processo vedremo la creazione di griglie personalizzate con linee guida, caratteri di stile, utilizzando un sacco di spazio bianco e componendo il contenuto del nostro sito Web in modo molto pulito e professionale. Il file PSD finito sarà pronto da consegnare a uno sviluppatore per la codifica.
Per poter seguire, avrai bisogno dei seguenti beni (disponibili gratuitamente):
Inizia creando un nuovo documento (File> Nuovo ... ) usando le impostazioni mostrate sotto.
Assicurati che la risoluzione sia impostata su 72 pixel / polliceImpostiamo alcune guide in modo che il nostro layout abbia spazio sufficiente e un aspetto equilibrato. Non utilizzo sempre una griglia, ma l'impostazione di alcune linee guida garantirà la perfezione dei pixel e aiuterà a definire la larghezza del nostro sito. Dividi la tela in due metà verticalmente in modo da poter creare una composizione centrata. 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, 260px, 700px, 1140px e 1200px.
Mancia: È anche possibile utilizzare il plug-in GuideGuide Photoshop per rendere questo processo ancora più rapido.
Stiamo andando a mantenere il nostro documento ben organizzato fin dall'inizio, quindi creiamo tre gruppi di livelli denominati Intestazione, Funzionalità, Prova sociale, CTA finale e Piè di pagina. Attenersi a questa etichetta di Photoshop manterrà le cose organizzate e facili da navigare o modificare. Per creare gruppi vai a Livello> Nuovo> Gruppo ... e dare a ciascuno un titolo come detto. Per creare rapidamente un gruppo, fai clic sull'icona.
L'intestazione è molto importante per ogni sito Web in quanto è la prima occasione per convincere un nuovo visitatore che è utile rimanere sul sito. È qui che noi, i progettisti, dobbiamo usare immagini straordinarie e un messaggio chiaro con alcune azioni da intraprendere per i visitatori.
Iniziamo a cambiare il colore dello sfondo con qualcosa di molto semplice per l'occhio, nel mio caso ho usato il grigio chiaro #ebebeb. Successivamente, apri il Intestazione raggruppa e usa il Strumento rettangolo (U) disegna un rettangolo 1000 x 600 px e posizionalo tra le linee guida verticali. Quindi scarica la foto di Viaggiatore di bici, trascinala nel documento di Photoshop e posizionala sopra il livello di rettangolo. 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.
Ora colpisci T CMD + e ridimensiona la foto in base alle tue esigenze.
Mancia: tenere premuto Cambio chiave per trasformare proporzionalmente.
Ora abbiamo bisogno di aggiungere uno strato di colore trasparente per scurire l'immagine in modo che le parti luminose dell'immagine diventino più scure e il testo bianco sia facilmente leggibile. Crea un nuovo livello sopra l'immagine e crea anche una maschera di ritaglio. Quindi riempire quel livello con un solido colore scuro e cambiare il Opacità in giro 20% quindi possiamo ancora vedere chiaramente l'immagine.
Ora mettiamo un semplice logo basato sulla tipografia e la navigazione in alto. Scegli un Strumento di tipo orizzontale (T) e scrivi il titolo di avvio sul lato sinistro. Assicurati che sia leggibile e abbia abbastanza spazio intorno. Il nostro logo si trova nell'angolo in alto a sinistra poiché si tratta di convenzioni Web comuni e di ciò che molti visitatori si aspetteranno.
Ho usato Aller carattere per il titolo e Apri Sans per gli elementi di navigazione.
Ora giochiamo con il messaggio principale. Dovresti sempre limitare la linea di cintura a una o due frasi e assicurarti che sia corta e facilmente leggibile. Nel mio caso ho usato 32px Apri Sans scrivere il messaggio principale, ponendo l'accento sul "viaggio" rendendolo più audace.
La seconda riga è molto più piccola, quindi costringendola a percepire un'importanza secondaria, quindi la gente la leggerà dopo aver finito con il messaggio principale. L'ho abbinato con una spaziatura maggiore tra le lettere, dato che i caratteri sono maiuscoli.
Notate dove posiziono la messaggistica, pensate sempre al contrasto e dove è meglio posizionare la vostra copia per essere facilmente letta dal lettore.
Crea un semplice chiamare all'azione informare i visitatori su cosa dovrebbero fare. Nel mio caso si tratta di un semplice messaggio che suggerisce ai visitatori di iscriversi alla newsletter. Ho usato 14px taglia PT Serif (Corsivo) font.
Creiamo un semplice modulo email che consente ai nostri visitatori di inserire il loro indirizzo email e iscriversi alla lista. Crea un nuovo gruppo chiamato Modulo email. Utilizzare il Strumento Rettangolo arrotondato (U) con 3px raggio per creare un bianco semplice (#FFFFFF) colore input.
Aggiungi testo suggerimento per le persone per capire dove inserire la loro e-mail e creare un pulsante di chiamata all'azione. Ho usato 13px Open Sans (Semibold) grigio (#Bdbdbd)per il testo di input e 13px Open Sans (Bold) bianca (#FFFFFF) per il testo del pulsante. Scegli un colore accattivante per il tuo invito principale all'azione, in modo che risalti e incoraggi l'azione.
Nel mio caso ho usato il verde (# 51a200) per la chiamata principale all'azione. Scegli un Strumento rettangolo (U) e disegna una forma rettangolare posizionata sopra l'input bianco. Quindi tenere premuto il tasto alt tasto e il mouse sul rettangolo verde fino a quando non si vede un'icona freccia giù, rilasciare il tasto e si creerà a Maschera di ritaglio.
Questa è la parte principale del corpo proprio sopra l'area della piega. Se le persone sono interessate a ciò che hai da offrire, scorreranno verso il basso per vedere ciò che hai in maggior dettaglio.
Comprimi il gruppo di intestazione facendo clic sulla piccola freccia accanto al nome del gruppo. Ora abbiamo bisogno di creare uno sfondo leggermente diverso per l'area del corpo del nostro sito web. Ho usato il Strumento Rettangolo arrotondato (U) con un raggio di 5px e colore bianco #FFFFFF.
Posiziona la forma appena creata sopra il livello di sfondo principale.
Espandi il gruppo Funzioni e inizia a digitare la tua copia. Nel mio caso ho aggiunto la riga del messaggio principale e due colonne di funzioni con un titolo e un breve paragrafo.
Quando crei una copia coinvolgente, assicurati che sia leggibile e non troppo lungo. Usa pesi, dimensioni e colori diversi per creare una gerarchia visiva. Infine, ma molto importante; usa un sacco di spazi bianchi. Nel mio caso l'ho usato Apri Sans variazioni di carattere, grigio scuro # 545454 e grigio chiaro # a2a2a2 per la mia copia.
Ora è il momento di progettare la nostra seconda area del corpo che aiuterà i visitatori del sito Web a prendere una decisione e ad agire. Progetteremo un'area di prova sociale che mostri un paio di testimonianze.
Per prima cosa dobbiamo separare l'area precedente in modo sottile. Ho usato il Strumento linea (U) impostato 1px con il colore grigio chiaro # e8e8e8.
Riduci a icona il gruppo Funzioni ed espandi il gruppo Prova sociale. Ancora una volta scrivi un titolo mantenendo le stesse dimensioni che hai usato prima. La chiave per pulire il design è la coerenza, quindi, una volta che hai usato un colore e una dimensione prima, attenersi a quelli.
Per l'area di prova sociale ho usato due testimonianze di finzione di persone di finzione. Il carattere utilizzato per la citazione è PT Serif e il resto è il precedente usato Apri Sans con diverse dimensioni e variazioni di peso.
Come puoi vedere ho lasciato dello spazio davanti ai nomi. Vai su User Inter Faces per ottenere alcuni avatar. Dopo di che scegli un Ellipse Tool (U) e tenendo premuto Cambio il tasto disegna un cerchio. Infine copia e incolla il tuo avatar sopra il livello del cerchio e il mouse sopra il livello di avatar alt chiave in modo da creare un Maschera di ritaglio.
Per rendere le cose più organizzate, crea due gruppi all'interno del gruppo Social Proof e posiziona i livelli di testimonianza in gruppi separati.
Secondo GoodUI dovresti sempre ripetere la tua chiamata principale all'azione, in modo che le persone che non hanno preso la decisione, in primo luogo, possano farlo dopo aver visto più del tuo sito web.
Separiamo l'area precedente usando la stessa linea. Trova lo strato di linea e semplicemente premi CMD + J duplicarlo e poi spostarlo sotto le testimonianze lasciando molto spazio.
Successivamente, scrivi il titolo principale della sezione e il sottotitolo semplice fornendo maggiori informazioni o indicazioni. Come puoi vedere, ho utilizzato lo stesso stile, peso e dimensione dei caratteri usati per le sezioni precedenti. Attenersi a uno stile per tutta la tua copia.
Vai al gruppo di intestazione e trova il tuo gruppo di moduli, dopo quel duplicato (CMD + J) e passare al gruppo Final CTA. Posizionalo sotto la messaggistica e personalizzalo un po 'aggiungendo un tratto verde attorno al campo di input.
Fare clic con il tasto destro del mouse sul livello di input e selezionare Opzioni di fusione… dopo ciò si applica a Ictus effetto come mostrato di seguito. Il colore che ho usato è # 51a200.
Abbiamo finito con il gruppo Final CTA, quindi riducilo e espandi il gruppo Footer. Infine, inseriamo alcuni link alle pagine interne del tuo sito web e metti un semplice testo di copyright su una nuova riga. ho usato Open Sans (Semibold) carattere per i collegamenti.
Nota come viene posizionato all'esterno dello sfondo del corpo per distinguerlo dal contenuto principale. Assicurati di utilizzare spaziatura costante sopra e sotto la copia in modo che appaia equilibrata.
E abbiamo finito con il layout. Congratulazioni!In questo tutorial ti ho guidato attraverso il processo di creazione di una pagina di atterraggio del sito web di viaggio molto semplice e pulita che include alcune sezioni chiave che ti permettono di catturare l'attenzione dei tuoi visitatori, incoraggiando ulteriori azioni.
Il risultato è un layout equilibrato e leggero con una forte attenzione per le immagini nella parte superiore e la tipografia pulita nell'area del corpo. Se avete domande o pensieri, fatecelo sapere nell'area dei commenti!
Se sei nuovo in Landing Page Design, ti consigliamo di utilizzare una serie di tutorial introduttivi per familiarizzare con le nozioni di base:
.
Accentsconagua