Principi di progettazione delle pagine di atterraggio

1. Sezioni
2. Gerarchia visiva
3. Chiamate all'azione (CTA) e moduli
4. Copertina Copertina
5. Navigazione
6. Colore Colore
7. Font
8. Immagini Immagini
9. Icone Icone
10. Animazione
11. Stile complessivo
12. Ricettacolo

Abbiamo introdotto il concetto di sezioni nel secondo capitolo, quando abbiamo scomposto la struttura di un sito web: la vostra offerta, alcune informazioni sul progetto, il feedback, il calendario e i blocchi call-to-action.

Le sezioni sono utili perché ognuna di esse risponde a una domanda specifica - quanto costa qualcosa, dove siamo, perché siamo i migliori - e quindi contengono un'idea completamente formata. In questo modo è più facile per le persone percepire le informazioni, dato che avete sollevato un argomento (ad esempio, "Per chi è questo corso"), lo avete spiegato e siete passati a quello successivo. La coerenza e la prevedibilità sono due cose che il cervello umano ama.

Le sezioni di landing si distinguono dalle tradizionali diapositive di presentazione perché non sono limitate dall'altezza dello schermo. Una singola sezione può occupare da più schermi a una piccola parte di un singolo schermo.

Anche se gli elementi all'interno di una sezione possono avere un aspetto diverso, l'importante è che siano collegati da un unico tema.

Gli spazi sono necessari, ma non sempre sono sufficienti per dividere chiaramente la landing page in diverse sezioni.

Un divisorio sotto forma di linea o di bordo è un altro modo per marcare l'inizio o la fine di una sezione.

Affinché la landing page risulti ordinata, si consiglia di utilizzare un'unica forma di bordo per tutta la pagina. L'uso di stili diversi, come ad esempio linee divisorie a zig zag o oblique, renderà la pagina difficile da digerire.

Le sezioni possono contenere titoli a sé stanti o sottovoci. I titoli definiscono il ritmo e la struttura della pagina e aiutano gli utenti a identificare l'inizio di una nuova idea.

Per esempio, se il primo titolo "Informazioni sul corso" è di 62px, anche il titolo della sezione successiva, "A chi è rivolto il corso", dovrebbe essere di 62px. In questo modo la pagina risulterà ordinata, mentre ogni nuova sezione (e ogni nuova idea) sarà facile da leggere.

Per rendere la struttura della pagina leggibile non solo agli esseri umani, ma anche ai robot, utilizzate il tag H1 per l'intestazione della copertina della vostra landing page e aggiungete il tag H2 a ogni intestazione di sezione. I motori di ricerca interpreteranno questo come una pagina ben strutturata e corretta.

Le intestazioni di sezione non devono essere sempre nere: possono essere anche colorate. Si tratta di una mossa piuttosto rara, perché i titoli colorati sono più difficili da inserire nello stile generale della pagina.

Se è necessario evidenziare un elemento con il colore, affidatevi allo stesso principio applicato alle dimensioni dei titoli: mantenete identico il colore di tutti i titoli delle sezioni per facilitare la lettura della pagina.

Abbiamo notato che le pagine che presentano sezioni con colonne posizionate una dopo l'altra sono difficili da leggere.

È più sensato che le sezioni vicine abbiano lo stesso numero di colonne, ad esempio tre. Una pagina di questo tipo sembrerà comunque sbilanciata.

Se non si è esperti di web design, è meglio evitare del tutto l'uso delle colonne: sono piuttosto difficili da ottenere. È anche possibile alternare sezioni con colonne e sezioni con testo. Per esempio, una colonna di testo può essere seguita da tre colonne di icone, poi da una frase chiave con un'immagine di sfondo, seguita da altre tre colonne o da una colonna di testo, e così via.

All'inizio abbiamo parlato di una sezione composta da un titolo e da un contenuto. Questo è vero nella maggior parte dei casi. Tuttavia, a volte ci sono sezioni che non rientrano in questa definizione.

Una galleria fotografica, un pezzo di testo centrale o un blocco di testo e un'immagine senza titolo sono tutti esempi di sezioni "personalizzate". Tuttavia, se contengono ancora un'idea e rispondono a una domanda, sono ancora soggette agli stessi principi e devono essere spaziate come tutte le altre sezioni ed evidenziate con un colore di sfondo o un bordo.

Ecco alcuni esempi di sezioni personalizzate:

La gerarchia visiva è essenziale per eliminare il caos in una landing page. "Cosa c'è in offerta? Come lo uso? Perché ne ho bisogno?": queste sono le domande a cui una persona dovrebbe trovare immediatamente una risposta. Gli strumenti visivi vi aiuteranno a farlo.

Ad esempio, l'intestazione principale di una sezione è più grande dell'intestazione all'interno di una sezione. In questo caso, la gerarchia visiva aiuta a capire che i titoli piccoli hanno un significato simile, mentre il titolo principale li unisce sotto un unico ombrello.

Ma è necessario prestare attenzione al contrasto. Gli elementi grandi devono essere grandi. Se un titolo di secondo livello è di 22px rispetto a uno di primo livello di 24px, il contrasto visivo è troppo debole e non c'è gerarchia. Una differenza di 1,5-2 volte nella dimensione dei caratteri è più facile da notare e interpretare.

Nel contesto della gerarchia visiva, la "luminosità" non si riferisce a una tonalità di colore, ma al contrasto e alla quantità di colore presente nella pagina rispetto allo schema cromatico principale.

Un'intestazione verde abbinata a un testo blu e a un pulsante arancione creerà un conflitto visivo e tutti e tre gli elementi finiranno per perdersi. Questo è un esempio esagerato, ma dovreste pensarci bene ogni volta che volete aggiungere un altro colore.

Se un colore contrastante appare sullo sfondo di un colore più generale, l'elemento diventa più visibile, attirando l'attenzione e dicendo: "Sono importante".

Se diversi elementi si trovano uno accanto all'altro, significa che sono legati da un tema o da un significato comune. Per combinare gli elementi in un gruppo, è necessario ridurre la distanza tra gli elementi all'interno del gruppo e aumentarla dall'esterno.

Vediamo alcuni esempi:

Più gruppi di elementi possono formare un'unica composizione all'interno di una determinata sezione. Ad esempio, un titolo e un sottotitolo possono formare un gruppo, mentre un blocco di testo con un'immagine in due colonne può formarne un altro.

Ogni gruppo può avere anche dei sottogruppi. Gli elementi all'interno di un sottogruppo sono riuniti secondo lo stesso principio: gli elementi che sono correlati nel significato sono collocati più vicini tra loro che a tutti gli altri elementi e sottogruppi.

È possibile evidenziare un elemento in modo altrettanto efficace utilizzando lo spazio bianco che manipolandone le dimensioni o il colore.

Gli elementi densamente disposti sono come il capanno di vostro nonno: sapete che la chiave è qui da qualche parte, ma è impossibile da trovare, quindi vi arrabbiate e perdete tempo a cercarla.

È possibile utilizzare uno sfondo luminoso o un pulsante a contrasto per evidenziare il blocco tra le altre sezioni della landing page.

Per incoraggiare qualcuno a compilare un modulo, è possibile specificare cosa accadrà dopo che avrà cliccato sul pulsante corrispondente.

"Richiameremo entro un'ora per coordinare la consegna", "Invieremo un promemoria 2 ore prima del webinar", "Invieremo l'e-book alla tua e-mail", "Invieremo una newsletter educativa solo una volta ogni due settimane", questi sono gli esempi di messaggi formulati in modo semplice e con un tocco umano che incoraggiano la fiducia.

La landing page è talvolta un collegamento intermedio nell'imbuto di vendita, con il modulo che funge da lead magnet.

Un lead magnet è lo scambio di un contatto (un'e-mail o un numero di telefono) con qualcosa di valore come un e-book, uno sconto, un webinar, una lista di controllo o dati di ricerca. Questo crea il seguente imbuto:

• Ottenere gratuitamente
• Acquistare a un prezzo ragionevole (acquistare un corso)
• Post vendita (consulenza personale)

Per esempio, qualcuno si iscrive e riceve gratuitamente il primo capitolo di un corso online, che lo spinge ad acquistare l'intero corso e a richiedere una consulenza personale.

Ecco alcuni esempi di applicazione del testo alle foto precedenti:

Le illustrazioni sono una buona alternativa alle foto di copertina, in quanto definiscono lo stile della landing page e la rendono più interessante.

È possibile ordinare illustrazioni personalizzate da un illustratore o trovarle in una banca di foto.

Il layout ottimale per questo tipo di copertina di landing page sarebbe quello di posizionare il testo a sinistra dell'illustrazione. Nell'intestazione si può aggiungere un modulo di feedback o un pulsante di azione mirata.

Questa opzione non è peggiore di una copertina con foto, anzi a volte può essere addirittura migliore. Lasciate lo sfondo bianco ed enfatizzate la tipografia, lavorando sulla composizione, sulla dimensione e sul colore dei caratteri.

È possibile utilizzare un colore monocromatico o un gradiente come sfondo. Con l'aiuto di Tilda Colors, è possibile copiare colori e gradienti o scaricarli in formato PNG con una risoluzione di 1680px adatta alle immagini a schermo intero.

Un'altra opzione è l'utilizzo di una grafica astratta: forme geometriche, onde, linee o un motivo. L'importante è che l'intestazione sia leggibile sullo sfondo grafico.

Abbiamo trattato la formulazione del testo di copertina nel secondo capitolo.

Per quanto riguarda la lunghezza e la forma del testo, dobbiamo ricordare che l'intestazione e il sottotitolo della copertina non devono essere eccessivi. L'ideale sarebbe una semplice frase nell'intestazione che spieghi l'essenza dell'offerta e una o due frasi nel sottotitolo che completino e aprano l'offerta. Una o due righe per l'intestazione e due o tre righe per il sottotitolo dovrebbero essere sufficienti.

Il menu viene utilizzato in copertina se la pagina è lunga e occorre navigare tra le sezioni. Il menu ha una funzione di aiuto: nella maggior parte dei casi, se ne può fare a meno.

Una regola generale per qualsiasi menu è quella di evitare a tutti i costi il sovraccarico. Ciò è ancora più importante per il menu di una landing page, in quanto deve aiutare l'utente a trovare le informazioni senza distrarlo dall'azione desiderata.

Un menu è sovraccarico quando ci sono troppi elementi. Per questo motivo si può tranquillamente eliminare l'eccesso (ad esempio i pulsanti dei social network), ridurre le voci di menu al minimo e accorciare i nomi a una parola per ogni elemento.

Lo sfondo del menu può essere trasparente, trasparente o colorato.

Sfondo del menu trasparente. Questo menu ha una certa leggerezza ed è anche lo stile più versatile e comune. Le copertine senza piccoli dettagli funzionano meglio con il menu trasparente. Anche i filtri colorati funzionano bene.

Menu semitrasparente. Questa soluzione è utile se si desidera aumentare la leggibilità del menu senza appesantire la prima schermata.

Menu con sfondo colorato. Al 100% di opacità, il colore del menu diventa una base per il testo, rendendolo perfettamente leggibile. Questo metodo presenta due svantaggi: in primo luogo, il menu diventa troppo evidente e attira l'attenzione; in secondo luogo, è uno strumento stilistico piuttosto forte che non si adatta a tutte le landing page.

Ordinati per tipo di comportamento, i menu possono essere statici, fissi o possono apparire durante lo scorrimento.

I menustatici si trovano nella parte superiore della pagina (sopra la copertina o la parte che si sovrappone alla copertina), rimangono al loro posto e scompaiono dal campo visivo durante lo scorrimento.

I menu fissi sono fissati nella parte superiore della pagina di destinazione e rimangono visibili durante lo scorrimento. Possono anche esserci due menu: uno rimane nella parte superiore della pagina, l'altro appare durante lo scorrimento. In questo caso, il secondo menu contiene spesso un numero di telefono o un pulsante di registrazione per semplificare la chiamata all'azione.

I menu combinati appaiono quando si utilizzano contemporaneamente menu statici e fissi. Il menu statico contiene il logo, le voci di menu e i contatti, mentre il menu fisso contiene un pulsante di invito all'azione.

È inoltre possibile creare un menu semplice per la versione desktop della landing page e un menu hamburger con informazioni abbreviate o di altro tipo per la versione mobile.

Menu ad hamburger. Tipicamente utilizzato nelle versioni mobili per rendere il menu più compatto. A volte viene utilizzato anche per la versione desktop per rendere la pagina più concisa.

Un menu sotto forma di punti o puntini fissati sul lato della pagina distrae poco o nulla l'attenzione, pur aiutando gli utenti a navigare. Gli indicatori indicano all'utente quale parte della pagina sta visualizzando: quando passano sopra l'indicatore, vedranno un suggerimento di testo e quando lo cliccano, passeranno alla sezione corrispondente.

Gli indicatori di scorrimento sono una versione leggera della barra di navigazione laterale nella parte superiore dello schermo. Quando la barra di avanzamento si sposta da sinistra a destra, rappresenta quanto l'utente ha fatto scorrere la pagina.

Un indicatore di avanzamento è un punto fermo di una buona UX. Se cliccate su un link e la pagina non viene caricata immediatamente, vedrete che il processo è iniziato, c'è una reazione.

Il pulsante di scorrimento verso l'alto viene utilizzato nelle landing page lunghe (di solito 5 schermate o più). Si tratta di un elemento ausiliario che non dovrebbe essere troppo luminoso o contrastante, in modo da non entrare in conflitto con il pulsante di azione di destinazione. I rientri migliori del pulsante rispetto ai lati sono di 20-30px.

Facendo clic sul logo si accede all'inizio di una pagina o alla home page. Questa azione è diventata abbastanza comune.

Quando l'utente ha finito di scorrere la pagina, non deve trovarsi in un vicolo cieco. Ecco alcune opzioni di navigazione per la fine della pagina:

• Invito all'azione: Modulo o pulsante
• Link a materiali aggiuntivi: Recap degli eventi passati, link ad altri webinar
• Un footer con la navigazione del sito web se la landing fa parte di un sito web a più pagine. La scala del piè di pagina non deve interferire o distrarre dall'azione di destinazione.

Collocare un modulo o un pulsante di invito all'azione alla fine è una delle cose di buon senso che si possono fare quando si progetta una landing page. In teoria, la landing page esiste per convertire i visitatori in acquirenti o potenziali clienti: qualsiasi navigazione aggiuntiva può distrarre da questo scopo.

D'altra parte, se un utente non ha abbastanza informazioni e non ha la possibilità di imparare qualcos'altro sulla vostra azienda, la pagina può essere percepita come un vicolo cieco, il che significa che c'è la possibilità che l'utente chiuda la vostra pagina e passi al sito di un concorrente.

La regola principale è che non ci dovrebbero essere troppi colori nella landing page, ma solo uno o due. Il colore in evidenza non dovrebbe occupare più del 10% dello spazio complessivo, in quanto si limita a richiamare l'attenzione sugli elementi che devono essere visibili.

Alla Tilda chiamiamo questo rapporto 90:10 la "regola della boutique". Nei negozi costosi, i capi non sono mai affollati su una gruccia in corridoi stretti. Al contrario, ogni articolo ha abbastanza spazio intorno a sé per essere notato.

I negozi costosi non devono dimostrare o spiegare perché hanno prezzi elevati. Sono sicuri della loro offerta e i loro clienti sono sicuri di loro. Non c'è bisogno di fare storie.

Una landing page è essenzialmente l'offerta di un prodotto o di un servizio. Quando le persone mettono a disposizione il loro denaro, vogliono essere sicure che stanno pagando per la vostra competenza o per una qualità eccellente. L'uso misurato dei colori rafforzerà la loro fiducia in questo senso.

Il cervello umano utilizza attivamente gli stereotipi: Si aspetta che la pagina di destinazione di un salone di bellezza sia chiara e che un salone di tatuaggi sia nero. Il verde è associato ai prodotti freschi, mentre la tecnologia è tipicamente legata al colore blu. Le regole non sono incise nella pietra, ma semplificano la comunicazione, come qualsiasi altro schema.

Su Internet si trovano molte palette già pronte, ma il loro svantaggio è che offrono combinazioni complesse di 3-5 colori che risulteranno ridicole su una pagina di destinazione.

Se avete bisogno di aiuto nella scelta di una tonalità specifica, è più affidabile utilizzare quanto segue:

TildaColors è una raccolta di palette di colori da cui potete prelevare un colore o un gradiente di due colori e utilizzarlo nei vostri progetti. Fate clic sul vostro colore preferito per copiarne il codice negli appunti.

È inoltre possibile scaricare qualsiasi colore o sfumatura in formato PNG con una risoluzione di 1680px adatta alle immagini a schermo intero.

Material UI Colors è una tavolozza di colori per il Material Design.

Color Claim è un progetto del designer Tobias Van Schneider, che dal 2012 raccoglie combinazioni di colori di successo. La sua collezione consiste principalmente in combinazioni di due colori, ideali per la progettazione di landing page.

WebGradients è una collezione gratuita di 180 gradienti lineari e combinazioni di colori. La maggior parte dei gradienti è composta da due colori.

Esiste un piccolo numero di landing page che mirano a trasmettere un'atmosfera di felicità e gioia, convincendo le persone che si divertiranno. Ne sono un esempio i festival, i concerti e altri eventi. In questo caso, la regola della "boutique" può essere messa da parte e la selezione dei colori può essere applicata in base allo stato d'animo che si sta cercando di creare, utilizzando il proprio gusto e la propria intuizione.

Prestare attenzione alla grammatura dei caratteri è essenziale quando si crea una landing page.

La grammatura dei caratteri si riferisce a quanto spessi o sottili devono essere visualizzati i caratteri del testo. I valori più comunemente conosciuti sono normale e grassetto. Alcuni font supportano solo queste due opzioni, ma la maggior parte ha altre impostazioni di spessore: light, normal, medium, semi-bold e bold.

Le landing page di una maratona e di un costoso prodotto cosmetico hanno tonalità diverse, che possono essere espresse da varie combinazioni di caratteri.

Una combinazione di base che si adatta a qualsiasi progetto. Normalmente si usa se si deve creare una pagina di destinazione senza ulteriori elementi di spicco.

Una combinazione popolare, sottile e neutra, ma capace di mostrare slancio ed energia. Questa combinazione può funzionare per atterraggi legati al movimento e all'attività.

Una combinazione di caratteri per pagine di destinazione legate alla tecnologia o all'estetica che mantiene un tono moderno e progressista. Richiede molti spazi bianchi e piccoli punti luminosi.

In questa sezione sono stati trattati alcuni piccoli aspetti molto pratici dell'uso dei font. Se volete saperne di più, visitate"Come scegliere il font giusto per un sito web o un articolo".

Le immagini sono più facili da percepire e più veloci da leggere: è meglio mettere una foto del prodotto invece di una descrizione dettagliata del suo aspetto.

Ecco alcuni esempi di immagini di destinazione:

• Libro: una diffusione
• App: un video o schermate dell'interfaccia
• Tour: Punti di riferimento lungo il percorso
• Servizio di consegna di cibo: una scatola di cibo
• Webinar: un ritratto del relatore
• Conferenza: un'immagine della sede dell'evento

Le persone sono generalmente diffidenti nei confronti dei siti web sconosciuti, il che è del tutto logico, dato che chiunque può creare un sito web e i truffatori su Internet sono più che sufficienti. Le foto sono uno dei fattori che aiutano a creare fiducia. Questo funziona solo se le immagini sono autentiche e mostrano il vostro prodotto o persone reali.

Se non potete scattare le vostre foto, una banca fotografica può aiutarvi. Trovare foto originali è fondamentale per dare un aspetto gradevole alla landing page. Il marketing esiste da molto tempo e ci sono molti cliché di immagini che le persone trovano irritanti: Salvadanai, foto di persone in cima a montagne e strette di mano tra persone in giacca e cravatta.

Non è necessario cercare di trasmettere un'idea utilizzando associazioni semplicistiche. Una foto di qualcuno che sale le scale non dice "sono un coach di successo": probabilmente è solo una brutta foto.

Se state tenendo un workshop per la prima volta e non avete ancora delle foto, potete trovare immagini ravvicinate di eventi simili in una banca fotografica che vi aiuterà a trasmettere l'atmosfera e l'emozione.

Se si tratta di immagini del proprio team, potrebbe essere meglio assumere un fotografo per assicurarsi che le immagini siano uniformi e coerenti con lo stile della landing page.

È anche possibile applicare un filtro colore per rendere le foto più uniformi. Se avete un colore aziendale, anche questo manterrà l'identità del progetto.

Il modo più semplice per bilanciare le diverse foto è renderle in bianco e nero.

Le icone sottili e lineari si adattano alle pagine con un design minimalista e caratteri sottili. Se la pagina presenta titoli grandi o caratteri in grassetto, le icone piene o con contorni ampi funzioneranno meglio.

Tutte le icone di una landing page devono avere lo stesso stile. Mischiare icone a linee con icone colorate e scambiare icone sottili e piene porta alla sciatteria. Anche lo spessore delle linee è importante: devono essere tutte uguali. Non tutti noteranno che le icone provengono da set diversi, ma avranno comunque la sensazione che qualcosa non vada bene.

Se si utilizza Tilda per creare la propria landing page, è possibile utilizzare le icone gratuite della collezione Tilda Icons integrata nell'editor. Aprite il blocco di contenuto con un'immagine, fate clic sull'icona di ricerca e andate alla scheda Tilda Icons.

Le icone sono suddivise in oltre 45 categorie per tipologia di business e sono ricercabili per parole chiave. I designer creano regolarmente nuovi set di icone e le categorie si ampliano. Se avete bisogno di modificare un'icona, ad esempio cambiandone il colore, potete scaricare gratuitamente un set seguendo questo link:

Questo progetto è stato creato dal designer Dario Ferrando. Sono disponibili gratuitamente 730 icone di linea suddivise per categorie.

Un'ampia raccolta di icone con una comoda funzione di ricerca. I file sono scaricabili in formato PNG o SVG. Le icone possono essere utilizzate gratuitamente se si accredita l'autore.

Icone esclusive e illustrazioni 3D. Disponibili gratuitamente in bassa risoluzione con attribuzione obbligatoria.

Il prezzo medio di un'icona personalizzata disegnata da un illustratore professionista è di 10 dollari. Le icone già pronte sono spesso vendute in abbonamento - circa 10 dollari al mese - o come parte di un set.

Le icone sono soggette alle stesse leggi sul copyright delle foto, quindi prestate molta attenzione alle licenze quando utilizzate le icone nella vostra landing page: scoprite se le icone sono gratuite o a pagamento e cercate in quali condizioni possono essere utilizzate.

L'uso dell'animazione deve essere moderato per evitare che la pagina si trasformi in una presentazione PowerPoint da scuola superiore.

Ecco come evitare un'animazione eccessiva:

L'animazione rende la pagina più attraente. Non ha alcun significato, se non quello di essere una forma di intrattenimento e un modo per rendere la pagina meno monotona. Se si anima tutto, la pagina tornerà a essere monotona, per non dire fastidiosa.

Le prestazioni del sito web sono un aspetto importante da considerare quando si utilizzano le animazioni. Assicuratevi di testare le landing page animate su computer più deboli, poiché non tutti i dispositivi sono in grado di caricare rapidamente l'animazione.