Il design della home page (o home page) è il design visivo e strutturale della prima pagina di un sito Web che i visitatori vedono quando visitano il sito per la prima volta. La home page gioca un ruolo chiave nel creare la prima impressione del sito e aiuta i visitatori a trovare le informazioni di cui hanno bisogno o a navigare ulteriormente nella risorsa.

 

1. Progettazione della home page di Shopify

Come molte altre pagine di destinazione in questo post, la pagina di destinazione di esempio Shopify: lo rende semplice. Ad esempio, il titolo incentrato sull’utente è composto da poche parole e la pagina si basa su semplici punti elenco anziché su paragrafi per trasmettere i dettagli e i vantaggi della sperimentazione. Ci sono solo alcuni campi che devono essere compilati prima di iniziare. Tutto ciò ti semplifica la vendita online utilizzando il tuo strumento.

Registrazione della pagina di destinazione di Shopify

 

2. Design della home page della museruola

Le pagine di destinazione aiutano gli utenti a decidere se il tuo prodotto o servizio vale il loro tempo prezioso e le loro energie. Quale modo migliore per comunicare la tua proposta di valore in modo chiaro e diretto se non abbinando i tuoi visitatori al problema risolto dalla tua app?

I commenti su Instagram ottengono di più

MusoUn'app per Mac che silenzia le notifiche sullo schermo copre completamente questo problema mostrare senza dire mentalità sulla loro pagina di destinazione minima. I visitatori di questa pagina vengono accolti da un rapido fuoco di notifiche imbarazzanti nell'angolo in alto a sinistra dello schermo. L'animazione non è solo divertente, ma trasmette anche in modo convincente l'utilità dell'applicazione senza lunghe descrizioni.

Progettazione della home page 11

 

 

3. Design della home page di TransferWise

TransferWise ti consente di inviare e ricevere denaro in più valute e la sua pagina di destinazione, mostrata di seguito, suddivide ogni singola azione in modo da non essere distratto da opzioni che non si applicano a te.

Se desideri inviare denaro, puoi compilare il modulo di trasferimento. Per ricevere denaro, vai semplicemente alla scheda centrale e per iscriverti a TransferWise utilizzando la tua carta di debito, vai alla scheda all'estrema destra.

Ogni scheda in questa pagina di destinazione crea la propria chiamare all'azione a seconda di ciò a cui ti stai iscrivendo, ciascuno con una cornice verde brillante per evidenziare il passaggio successivo dopo tre possibili punti di partenza.

Design della home page di TransferWise

 

4. Progettazione della home page di Airbnb

Per aiutare a convertire i visitatori in host, Airbnb offre alcune personalizzazioni allettanti: una stima approssimativa dei guadagni medi in base alla tua posizione. Puoi inserire ulteriori informazioni sul tuo potenziale posizionamento nei campi per ottenere una valutazione ancora più personalizzata.

Se hai già visitato una pagina di cui sei convinto, un chiaro invito all'azione nella parte superiore della pagina facilita la conversione immediata.

Progettazione della home page di Airbnb

 

5.Ambito di squadra

strano di solito non è la prima parola che ti viene in mente quando pensi al software HR, ma la landing page visiva di Teambit è proprio questo. Un modulo semplice con un campo è accompagnato da un adorabile ufficio pieno di personaggi animali, tutti quanti molto soddisfatto di Teambit, se sei interessato. Un animale cartone animato appare accanto a ciascuna sezione informativa della pagina di destinazione, invogliando i visitatori a scorrere verso il basso per saperne di più. Progettazione della home page

Pagina di destinazione Teambit è un'ottima prova che non è necessario avere un prodotto o un servizio "divertente" per creare una landing page divertente.

Pagina di destinazione Teambit con CTA

 

 

6. Progettazione della home page di Wistia

Prima di tutto, questa è la pagina di destinazione Wistia per il loro account Wistia gratuito. Noterai immediatamente il modulo con un campo per creare un account: lo sfondo blu dal design minimale contrasta piacevolmente con il campo del modulo bianco brillante.

La lunghezza del campo del modulo combinata con il posizionamento ben visibile elimina quasi ogni attrito durante la creazione di un account... ma se hai dei dubbi, puoi sempre scorrere qui sotto per leggere le domande frequenti. Separando i due con un forte contrasto cromatico, Wistia rende il processo di conversione molto più semplice.

pagina di destinazione wisita

 

7. Flusso web. Progettazione della home page

WebFlow, uno strumento di progettazione per sviluppatori web, racchiude molte informazioni in una GIF e tre campi modulo. Sarebbe bello avere l'intero modulo di registrazione su un'unica riga: non solo rende la pagina più breve, ma compilando ogni campo da sinistra a destra mostra agli utenti quanto sono vicini a fare clic sul quarto pulsante blu e iniziare gratuitamente.

La GIF animata sotto il modulo viene visualizzata nello stesso frame sul sito Web in modo che gli utenti possano vedere come funziona il prodotto. и registrati senza scorrere o passare a una nuova pagina.

Flusso web. Progettazione della home page

 

Progettazione della home page dell'e-book

8. Progettazione della home page di Nauto

Nauto, una piattaforma dati per auto a guida autonoma, sta contribuendo a rendere la guida autonoma più sicura per le aziende che gestiscono flotte. Naturalmente i suoi clienti avranno bisogno di tutte le informazioni per vendere su questa piattaforma. Nauto lo rende semplicissimo e-book, la cui pagina di destinazione fornisce un breve modulo di contatto e statistiche in anteprima per dimostrare perché questa risorsa è così importante.

Pagina di destinazione del libro Nauto

 

Il pulsante verde "Scarica ora" potrebbe anche essere stato fatto apposta (dopo tutto il verde significa "vai").

Scorri verso il basso e vedrai un altro CTA "Ottieni eBook" per ricordare agli utenti cosa c'è in serbo. Vedrai anche tre sconcertanti statistiche sugli incidenti stradali per incoraggiare gli utenti a saperne di più. Dai un'occhiata qui sotto.

nauto-book-airborne-page-STA-1

 

9. Design della home page di marketing industriale forte

Questa landing page mi attira immediatamente con il suo titolo irresistibile e incisivo: "Non farmi zoomare". Questo si riferisce direttamente all'esperienza generale che la maggior parte di noi ha quando scorriamo i nostri telefoni o tablet - ed è anche un po' sfacciato.

Ma non è l'unica cosa che mi ha interessato a questa landing page. Nota come il colore rosso è posizionato strategicamente nella parte superiore e inferiore del modulo, avvicinandoti ancora di più all'evento di conversione.

marketing-atterraggio a livello industriale

 

Inoltre, questo design è meta per l'avvio: sembra e funziona benissimo dispositivi mobili. Tieni presente che molti visitatori accederanno alle tue pagine di destinazione dai loro smartphone o tablet, e se progettazione del tuo sito web non è adatto a loro, potrebbero arrendersi e lasciare la tua pagina.

Gli specialisti di Industrial Strength Marketing sono scesi in campo caratteri e moduli sufficientemente grandi da consentire ai visitatori, ad esempio, di non dover eseguire lo zoom per leggere e interagire con il contenuto.

pagina di destinazione mobile per marketing a livello industriale

 

 

10. Chat dal vivo Velaro

A volte i più piccoli dettagli fanno la differenza più grande. Ad esempio, sono loro che realizzano la landing page Velaro Live Chat Sorprendente.

Quel piccolo simbolo PDF sopra l'immagine dell'articolo aiuta a determinare in quale formato sarà il download. Una freccia prima del sottotitolo aiuta a evidenziare ulteriormente il testo importante che i visitatori desiderano leggere. Come IMPACT, hanno anche una casella di controllo selezionata automaticamente per abbonamento alla newsletter nel loro modulo - che, se trasformato in una casella di controllo aggiuntiva, è un ottimo modo per aumentare il numero dei tuoi iscritti. Tutti questi piccoli dettagli apparentemente insignificanti contribuiscono a creare un design della pagina di destinazione solido e sorprendente. Progettazione della home page

Esempio di pagina di destinazione Velaro

 

11. IMPATTO Branding e design / Design della home page

 Homepage IMPATTO sono da tempo fonte di ispirazione per i designer. Adoro il layout semplice della pagina, dal testo grande del titolo e dall'immagine dettagliata, al contorno che circonda la forma, ai colori e ai caratteri che sono molto piacevoli alla vista.

Inoltre, il manuale gratuito IMPACT offerto per il download qui non evidenzia il download stesso nel pulsante blu che consente di inviare il modulo compilato. Piuttosto, IMPACT ti invita a “generare più conversioni” concentrandoti su ciò che puoi ottenere dalla lettura della guida.

IMPATTO Branding e design/design della home page

 

Pagine di destinazione per saperne di più

12. Unbounce

Non sorprende che la Unbounce è in cima a questa lista: hanno davvero scritto un libro sulla creazione di pagine di destinazione ad alta conversione. Sebbene ci siano molte cose straordinarie in questa landing page, due che mi piacciono molto sono: 1) l'uso di una casella di chat invece di un modulo classico e 2) le informazioni dettagliate, ma ben confezionate, sotto il modulo/Home Progettazione della pagina

Il primo aiuta a dirigere l'attenzione sullo scopo della pagina, ovvero compilare un modulo, in un modo discreto e non sembra un compito ingrato. Il secondo dà a quella pagina una spinta SEO (i motori di ricerca avranno più contenuti da scansionare) e rimuove l’ansia dalle persone che hanno bisogno di saperne di più su un contenuto prima di inviare le proprie informazioni, senza distrarre le persone dalla finestra della chat.

 

13. Bills.com. Progettazione della home page

Le persone spesso pensano alle pagine di destinazione come pagine statiche sul tuo sito web. Ma con gli strumenti giusti puoi renderli interattivi e personalizzati.

Prendi l'esempio qui sotto con Bills.com. Per scoprire se potresti trarre vantaggio dalla loro consulenza, rispondi a tre domande prima che ti venga mostrato il modulo. Si inizia con questo:

 

Quindi rispondi ad altre due domande come quella qui sotto:

 

Ed ecco il modulo della pagina di destinazione finale in cui inserisci le tue informazioni:

Progettazione della home page 33

 

Non sono sicuro di come funzioni l'algoritmo (o se ne esista uno), ma mentre lo compilavo avevo qualche preoccupazione riguardo no titoli di studio. Una volta scoperto cosa avevo fatto, ero entusiasta di compilare il modulo, cosa che sono sicuro faccia la maggior parte delle persone che hanno debiti e utilizzano questo strumento. Rendendo questa offerta più esclusiva prima che il modulo venga visualizzato sulla pagina di destinazione, scommetto che Bills.com lo farà in modo significativo aumento della conversione.

14. Progettazione della home page di Trulia

Trulia ha fatto qualcosa di molto simile a Bills.com con la sua pagina di destinazione. Inizia con un semplice modulo che chiede "indirizzo" (che suona meno inquietante di "il tuo indirizzo", anche se è quello che significano). Sotto questo semplice campo modulo c'è un pulsante arancione brillante che contrasta bene con l'immagine del personaggio dietro il modulo e sottolinea che il preventivo sarà personalizzato per la tua casa.

Naturalmente l’indirizzo in sé non è sufficiente per stimare il valore della casa. Denota semplicemente i dintorni della casa. Ecco perché la pagina successiva include ulteriori domande sulla proprietà stessa, come il numero di letti e bagni. Di seguito puoi vedere una copia di "Dicci dove inviare la segnalazione" - con la dichiarazione di non responsabilità che inserendo queste informazioni accetti di contattare l'agente immobiliare. Questo è un ottimo esempio di come un'azienda valorizza i suoi visitatori fin dall'inizio, fissando allo stesso tempo le aspettative dei visitatori su ciò che accadrà di conseguenza.

Pagina di destinazione di Trulia

 

15. Progettazione della home page di Landbot

bot di terra, un servizio che crea landing page basate su chatbot, pone il proprio prodotto al centro della sua landing page basata su chat. I visitatori vengono accolti da un bot amichevole, completo di emoji e GIF, che li incoraggia a fornire informazioni in un formato conversazionale anziché nella forma tradizionale.

landbot Progettazione della home page

 

16. Profitti web

Per un po' di contrasto... che ne dici di pagine di destinazione lunghe? Con pochi accorgimenti puoi far sembrare corta anche la landing page più lunga. La pagina di destinazione di Webprofits di seguito mostra come eseguire questa operazione. Progettazione della home page

C'è un pulsante CTA prominente in alto a destra per saperne di più, con un buon contrasto sullo sfondo per farlo risaltare e una freccia giù per incoraggiare lo scorrimento. Non posizionando il campo del modulo in primo piano, aiutano a ridurre l'attrito e offrono ai visitatori l'opportunità di saperne di più prima che venga loro presentata un'opzione di conversione.

Permettono anche di capire cosa è realmente делает Webprofitti Il resto della pagina fornisce i dettagli di ciò che riceverai quando invii le tue informazioni. Inoltre, include CTA strategici per aiutarti a tornare all'inizio per compilare il modulo, come "Parliamo".

Progettazione della home page 67

 

17.H.BLOOM

A volte basta fermarsi e ammirare una landing page per quanto è bella. Quando si utilizza una foto ad alta risoluzione e molto spazio bianco sulla pagina di destinazione H.BLOOM bello da guardare.

Oltre alla sua bellezza, la pagina ha alcuni ottimi elementi di conversione: un modulo in alto, una descrizione chiara e concisa di ciò che accadrà quando compilerai il modulo e persino un pulsante "Invia" arancione brillante. L'unica cosa che cambieremo? Copia sul pulsante Invia: potrebbe essere più specifico per la proposta offerta. Progettazione della home page

hbloom Progettazione della home page

 

18. Laboratorio di conversione

Anche se non includerei un post di modulo di esempio in un post sulle pagine di destinazione, questo sito è speciale. Homepage è l'intero sito: i collegamenti di navigazione ti porteranno semplicemente alle informazioni riportate di seguito. Progettazione della home page

Quando fai clic su "Ottieni assistenza sulle pagine di destinazione", l'intero sito si sposta per fare spazio al modulo. Ecco come appare prima di fare clic:

pagina di destinazione del laboratorio di conversione

 

E, quando fai clic sul CTA, controlla come appare il modulo:

Progettazione della home page 121

 

Mi piace il fatto che non devi lasciare la pagina per compilare il modulo, ma il modulo non sarà invadente per i visitatori occasionali del sito.

Idee/Design della home page

Una home page ben ottimizzata può trasformare i clienti in lead acquisendo informazioni che ti aiuteranno a comprendere, commercializzare e deliziare meglio i tuoi visitatori. Poiché le pagine di destinazione sono fondamentali per le conversioni, è importante assicurarsi che siano ben pianificate, progettate ed eseguite. Ecco alcune cose da considerare durante la creazione bersaglio pagine:Estetica accattivante: solo il colore della tua pagina di destinazione e un'interfaccia utente pulita possono aiutarti. I visitatori vorranno saperne di più sui tuoi prodotti e vedere la prova del valore che offri. Dai un'occhiata al numero 10 della nostra lista, Inbound Emotion, per un ottimo esempio di una fantastica pagina web.
Meno è meglio: lascia che sia la frase o le immagini a parlare di più, ma assicurati di includere tutti i titoli descrittivi e il testo di supporto per rendere la tua pagina di destinazione chiara e convincente. Questo vale per quasi tutti i componenti della pagina: spazi bianchi, copia semplice e moduli più brevi.

Progettazione della home page

Mantieni i visitatori sulla pagina: rimuovendo la navigazione principale o eventuali backlink che distraggono, è meno probabile che si verifichi qualche tipo di attrito nella generazione di lead che potrebbe indurre i visitatori ad abbandonare la tua pagina.
Condivisione sui social network. Un modo semplice per attirare visitatori sulla tua landing page è utilizzare i pulsanti di condivisionele reti sociali, in modo che possano distribuire i tuoi contenuti ai loro follower sui social media. Dopotutto, i clienti sono il centro del tuo volano di marketing.
Test A/B: le pagine di destinazione sono importanti per funzionare correttamente e poiché la psicologia del consumatore a volte può essere sorprendente, è sempre meglio sperimentare diverse versioni delle tue pagine per vedere quale ha il tasso di conversione (CVR) più alto. Controlla il posizionamento dell'offerta, i tipi di CTA o anche la combinazione di colori.
Call-To-Action: CTA, dove il nocciolo della questione è nella landing page, o il punto di svolta, dove c'è la prospettiva di diventare contatti. I CTA possono chiedere ai visitatori di iscriversi, scaricare, compilare un modulo, condividere le reti sociali ecc., ma in generale i CTA sono necessari per coinvolgere più attivamente il tuo pubblico con la tua offerta. Per generare lead, le CTA devono essere audaci e coinvolgenti, ma, soprattutto, devono trasmettere valore in modo efficace.

АЗБУКА