Share
Cosa starai creandoIn questo tutorial ti illustrerò il processo di progettazione di una pagina di destinazione delle app semplice e orientata alle conversioni. Useremo l'app per Android Tuts + per la demo, sottolineando le sue caratteristiche e i suoi vantaggi e impiegando inviti all'azione ovunque.
Quando si progettano le pagine di destinazione ci sono alcune cose che è necessario ottenere giustamente per godere di elevati tassi di conversione.
Secondo l'hacker di crescita Neil Patel, per avere una landing page schiacciante da competizione è necessario:
Implementeremo tutti gli elementi sopra riportati per rendere la nostra pagina di destinazione il più efficace possibile.
Consiglio vivamente di dare un'occhiata a Impiegare i principi AIDA in Web Design di Shaun Cronin. AIDA sta per Attenzione, Interesse, Desiderio e Azione; e questi principi possono essere applicati a diverse situazioni che comportano la vendita di prodotti o servizi.
Le ricerche dimostrano che le persone non si occupano dello scrolling, quindi una volta creato l'interesse iniziale nella parte superiore della pagina, non dovresti preoccuparti di prolungare la pagina di destinazione. Questo è necessario per raccontare una grande storia e aggiungere elementi persuasivi.
Le pagine di destinazione efficaci non possono semplicemente essere progettate una volta e avere un buon rendimento. Devi continuare a testare con varie combinazioni di copia, colori, call to action e altri elementi per ottenere i migliori risultati.
Per ulteriori informazioni su questo check out di A Web Designer's Introduzione alla A / B Test di Siddharth Deswan.
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.
Impostiamo alcune guide in modo che il nostro layout abbia spazio sufficiente e un aspetto equilibrato. L'impostazione di alcune linee guida garantirà l'accuratezza e contribuirà a definire la larghezza del nostro sito Web ai fini di questo progetto. Vai a Visualizza> Nuova guida ... e impostare alcune linee guida. Di solito scelgo 1000px come punto di partenza e aggiungo alcune linee guida dagli angoli in modo che abbia spazio per respirare.
Nota: Linee guida utilizzate per questo tutorial: verticale a 100px, 600px e 1100px.
Mancia: È anche possibile utilizzare il plug-in GuideGuide Photoshop per rendere questo processo ancora più rapido.
L'intestazione o l'area "above the fold" svolge un ruolo molto importante nel coinvolgere gli utenti e assicurare che i visitatori rimangano sul sito web.
La funzione principale della pagina di destinazione dell'app è convincere i visitatori a scaricare l'app. Per questo motivo ci concentreremo sui vantaggi di provare l'app e renderla facile da scaricare.
Per prima cosa, crea un gruppo chiamato "Intestazione" facendo clic Livello> Nuovo> Gruppo ... o premendo la piccola icona nella parte inferiore del pannello dei livelli. Dopo ciò prendi a Strumento di tipo orizzontale (T), scegliere PT Sans (Bold) 18px dimensione carattere, imposta il colore su nero # 000000 e inserisci il nome della tua app come logo, posizionalo nell'angolo in alto a sinistra accanto alla prima linea guida verticale. Dagli un po 'di spazio sopra in modo che non sembri angusto.
Creiamo un pulsante di invito all'azione che riutilizzeremo in tutto il nostro design per assicurarci che i visitatori agiscano. Crea un nuovo gruppo chiamato "CTA btn" e scegli il Strumento Rettangolo arrotondato (U), impostato Raggio a 2px, cambia il colore di primo piano in verde lime # 17e594 e disegna a 206x38px forma rettangolare di dimensioni.
Ora fai clic con il pulsante destro del mouse sul livello, seleziona Opzioni di fusione… e controllare il Ictus opzione. Successivamente applicare un verde più scuro # 09ba74.
Scegli il Strumento di tipo orizzontale (T) di nuovo e inserire la copia per il nostro pulsante. Ho usato PT Sans (Bold) 12px e il colore bianco #FFFFFF.
Ora scegli il Strumento rettangolo (T) e disegna a 1200x600px (qualsiasi colore) forma rettangolo e posizionarlo proprio sotto la nostra navigazione top minimo. Ho lasciato un 25px gap tra il logo e la forma come ho fatto per il logo qui sopra, quindi è coerente.
Ora prendi una foto di Toolkit da Unsplash e posizionala sopra il livello di forma rettangolare. Dopo di ciò, tieni premuto il tasto alt premere il tasto e il mouse sul livello dell'immagine finché non si vede una piccola freccia rivolta verso il basso, quindi rilasciare il mouse per creare un Maschera di ritaglio quindi l'immagine è visibile solo nell'area del rettangolo.
Colpire T CMD + per ridimensionare la foto, assicurandoti di tenere premuto il tasto Cambio chiave in modo da ridimensionarla proporzionalmente.
Aggiungiamo un filtro grigio per rendere pronto lo sfondo per la copia e lo screenshot dell'app.
Cambia il colore di primo piano in grigio scuro # 222.325 e creare un nuovo livello, quindi posizionarlo sopra il livello fotografico e creare nuovamente un Maschera di ritaglio. Dopo quel colpo Alt + Backspace per riempire il livello con il grigio. Infine, riduci il livello Opacità a 80%.
Prendi il Strumento di tipo orizzontale (T) di nuovo, cambia il colore in bianco #FFFFFF e usando PT Sans (Bold) 48px dimensione inserire il messaggio principale. Assicurati di dargli un sacco di spazio sopra.
Ora riduci la dimensione del carattere a 21px, selezionare Normale peso del carattere, inserire un messaggio più descrittivo e posizionarlo sotto il messaggio principale. Per rendere le linee equilibrate e facili da leggere, aumentare almeno l'altezza della linea 30px. Inserire la descrizione sotto il titolo principale, nel mio caso mi sono trasferito 40px giù.
Ripetiamo il pulsante call to action (CTA) in modo che sia chiaro per il visitatore cosa fare dopo aver letto la copia. Trova il gruppo "CTA btn" e duplicalo colpendo CMD + J, dopo questo posto sotto il messaggio secondario.
Abbiamo finito con la copia e la chiamata principale all'azione, quindi mettiamo un'anteprima effettiva dell'app per mostrare come appare l'app prima che la gente decida di scaricarla.
Scarica il mockup Samsung Galaxy S5 gratuito di Martin Adamko e inseriscilo nel tuo documento. Quindi, tieni premuto il tasto CMD tasto, fare clic su tutti i livelli che appartengono a quel modello e fare clic con il tasto destro per scegliere Converti in oggetto avanzato. Uso T CMD + ridimensionarlo e spostarlo a destra dalla nostra copia e descrizione principale.
Successivamente, posiziona lo schermo dell'app sul modello dello smartphone colpendo il livello dell'oggetto intelligente e salvandolo. Ho usato uno screenshot di una nuova app Android Tuts + Courses.
Abbiamo finito con l'intestazione. Riduci a icona il gruppo e creane un altro chiamato "Vantaggi".
Dopo, scegli il Strumento di tipo orizzontale (T) di nuovo, cambia il colore allo stesso grigio scuro # 222.325 abbiamo usato per il filtro (rendi il tuo design coerente e coeso invece di portare più colori) e usando PT Sans (Bold) 30px inserisci una dichiarazione forte e posizionala sotto l'area dell'intestazione, lasciando molto spazio sopra di essa.
Ora abbiamo la possibilità di convincere i nostri visitatori perché valga la pena scaricare la nostra app. Pensa ai vantaggi rispetto alle funzionalità in modo che le persone possano visualizzarsi usando questo. Cambia il colore in un blu grigio sottile # 6a7588 e inserisci un paio di righe che spiegano perché la gente dovrebbe usare la tua app. Sono andato per PT Sans (Regular) 21px con l'altezza della linea impostata su 32px, la stessa impostazione utilizzata per il messaggio secondario nell'area dell'intestazione.
Presta attenzione alla spaziatura tra i blocchi di testo, lascia abbastanza spazio per dare quella sensazione di luce al tuo progetto.
Ancora una volta, ripetiamo il pulsante call to action (CTA) in modo che i visitatori che non sono stati convinti prima possano agire subito dopo aver letto la copia dei vantaggi. Duplicare il gruppo "CTA btn" premendo CMD + J e posizionarlo sotto la copia dei benefici. Spostalo nel gruppo "Benefici" per rendere il tuo documento più organizzato.
Abbiamo finito con l'area dei vantaggi, quindi riduci al minimo il gruppo e creane uno nuovo chiamato "Funzionalità". Qui metteremo in evidenza alcune delle funzionalità dell'app in modo che i visitatori che vogliono saperne di più e siano già interessati possano saperne di più sull'app.
Cambia il colore di primo piano in grigio chiaro #fbfbfb, utilizzeremo un colore di sfondo diverso per la sezione Funzioni per separarlo dal resto. Dopo di che prendi il Strumento rettangolo (U) e disegna a 1200x700px forma graduata che servirà da sfondo. Assicurati di dare lo spazio della sezione sopra.
Per mettere ulteriormente a nudo l'area Caratteristiche, mettiamo 1px linee orizzontali tra gli sfondi. Scegli il Strumento linea (U), impostare il Peso a 1px e cambia il colore in un grigio più scuro #eeeeee.
Mancia: tenere premuto Cambio chiave per disegnare una linea perfettamente orizzontale.
Apri il gruppo "Benefici" e trova il livello del titolo, colpito CMD + J per duplicarlo e spostarsi nel gruppo "Caratteristiche". Modificalo per adattarlo alle tue esigenze e posizionalo all'interno dello sfondo grigio precedentemente creato.
Creeremo tre blocchi di funzioni con un'icona, un titolo e una breve descrizione. Crea un nuovo gruppo e chiamalo "Caratteristica 1" o qualcosa di più descrittivo. Vai su Iconfinder e scarica a 48x48 px icona utente. Fare clic con il pulsante destro del mouse sul nome del livello e applicare le seguenti opzioni.
Potresti notare che in realtà stiamo simulando lo stile del pulsante in modo che tutto sia coerente.
Ancora una volta, duplica il livello del titolo, posizionalo all'interno del gruppo "Caratteristica 1" e utilizza il Strumento di tipo orizzontale (T) riduci la dimensione del carattere a 16px e altezza della linea a 22px.
Usando lo stesso Strumento di tipo orizzontale (T) annota tre brevi righe che spiegano la tua funzionalità. Assicurati di cambiare il colore del tipo con il blu grigio precedentemente usato # 6a7588. Posiziona sotto l'icona e il titolo.
Ora minimizza il gruppo e duplicalo due volte colpendo CMD + J. Successivamente, personalizza i gruppi duplicati per adattarli alla tua app. Per questo tutorial ho usato icone marcatore e orologio di Iconfinder. Assicurati di lasciare abbastanza spazio tra i blocchi in modo che appaia equilibrato.
Più mostri il modo in cui il prodotto reale appare meglio, useremo una diversa prospettiva del nostro smartphone. Ho ribaltato il mockup Samsung Galaxy S5 utilizzato in precedenza e sostituito lo screenshot trovato su Google Play. Fai clic con il tasto destro sul livello di mockup in alto e seleziona Nuovo oggetto avanzato tramite copia per creare una copia indipendente.
Per personalizzare il mockup dello smartphone, fare clic due volte sulla miniatura del livello e posizionare lo schermo dell'app lì.
Aggiungeremo una certa credibilità sociale per la nostra app mostrando alcune testimonianze degli utenti di app.
Riduci a icona tutti i gruppi e creane uno nuovo chiamato "Testimonianze". Inserisci il titolo di una sezione come fatto in precedenza e posizionalo sotto lo sfondo del gruppo "Funzionalità" lasciando una quantità consistente di spazio.
Ora apri il gruppo "Funzioni", duplicane uno e spostalo all'interno del gruppo "Testimonianze". Riutilizzeremo il gruppo per le nostre testimonianze. Modifica la copia, modificando l'intestazione del nome e della descrizione di una persona nella copia della testimonianza.
Rimuovi l'icona e, usando il Ellipse Tool (U), disegna una forma circolare. Dopo di ciò posiziona la foto del profilo della persona sopra il livello di forma del cerchio e crea un Maschera di ritaglio. Ho usato una faccia da Inter facce utente.
Infine, duplica il gruppo di testimonianze appena creato e personalizzalo con nomi diversi, testimonianze e foto del profilo.
Riduci a icona il gruppo "Testimonianze" e creane un altro chiamato "Piè di pagina". Inseriremo qui un pulsante di invito all'azione (CTA) finale e alcuni collegamenti alle pagine interne del sito web mentre la maggior parte delle persone scorre verso il basso per cercare l'architettura del sito.
Dirigiti al gruppo "Header" e, tenendo premuto il tasto Cambio tasto, scegliere la forma rettangolare e i livelli filtro grigio. Dopo quel colpo CMD + J per duplicarli e spostarli nel nuovo gruppo "Piè di pagina". Quindi posiziona una foto a tua scelta tra la forma del rettangolo ei livelli del filtro grigio creando un Maschera di ritaglio.
Aggiungi un altro titolo per incoraggiare le persone ad agire e scaricare la tua app. Rendilo bianco #FFFFFF quindi è altamente visibile sullo sfondo più scuro. Dopodiché, duplica il pulsante call to action (CTA) e posizionalo sotto il titolo.
scegliere Strumento di tipo orizzontale (T) di nuovo e inserire alcuni link del tuo sito web. Ho usato il bianco #FFFFFF PT Sans (Regular) 16px e un'altezza della linea di 29px.
Duplica il tuo livello di testo e personalizzalo per adattarlo alla tua app. Dopodiché, posiziona una riga di copyright nella parte inferiore del piè di pagina lasciando molto spazio sopra e sotto di esso.
Questo è tutto! Abbiamo finito con il design del tema, ora rivediamo i livelli del documento, eliminiamo quelli non necessari e consegnali al tuo sviluppatore, o, ancora meglio, scrivici tu stesso!
Accentsconagua