# Design di una landing page: struttura per pagine che convertono

[Canonical HTML page](https://gradiently.design/it/guide/landing-page-design)

Una landing page è un unico ragionamento con un unico finale. Ecco l'ordine in cui farlo, un esempio concreto da copiare e le scelte di design che tengono le persone in movimento lungo la pagina.

## The short version

- Una landing page è una pagina autonoma costruita per un solo obiettivo, come un'iscrizione, una prenotazione o un acquisto.
- Una struttura affidabile è: hero, problema, come funziona, prove, dettagli dell'offerta, obiezioni e una call to action finale.
- La pagina deve corrispondere all'annuncio, al post o all'email che ha portato il visitatore, nelle parole e nell'aspetto.
- Togliere la navigazione del sito e i link in più tiene l'attenzione sull'unica azione per cui la pagina esiste.
- Prova le modifiche una alla volta sui tuoi numeri invece di affidarti a parametri generici.

Un buon **design di landing page** è un obiettivo, argomentato in ordine. A differenza di una homepage, che serve tutti, una landing page esiste per un visitatore che arriva da un posto preciso per compiere un'azione: prenotare la lezione di prova, iscriversi alla lista d'attesa, riscattare l'offerta. La struttura che funziona sempre è una hero chiara, il problema con le parole del lettore, come funziona, le prove, i dettagli dell'offerta, le risposte alle obiezioni e la stessa call to action alla fine. Il compito del design è rendere quell'ordine facile da seguire.

## Una pagina, un obiettivo

Scrivi l'obiettivo in una sola frase prima di progettare qualsiasi cosa: «Far prenotare una lezione introduttiva gratuita ai nuovi visitatori che arrivano dal nostro annuncio Instagram.» Così ogni sezione ha un test. Aiuta quella persona a compiere quel passo? Se no, taglia o sposta sul sito principale.

### Homepage

- Serve ogni tipo di visitatore
- Navigazione completa e molti link
- Più prodotti o servizi
- Spiega l'intera attività

### Landing page

- Serve un solo pubblico da una sola fonte
- Nessuna navigazione, o solo un logo
- Una sola offerta
- Fa un solo ragionamento e chiede una volta, poi di nuovo

## Struttura di una landing page, sezione per sezione

1. **Hero** Titolo con la promessa, una riga di supporto, un pulsante, un'immagine. Il [design della sezione hero](https://gradiently.design/it/guide/hero-section-design) tratta questa schermata nel dettaglio.
2. **Il problema** Due o tre frasi che descrivono la situazione in cui si trova il visitatore, con le sue parole. Mostra che capisci prima di vendere.
3. **Come funziona** Tre passaggi, ciascuno con un titolo breve e una frase. Ci si impegna più facilmente quando si riesce a immaginare il processo.
4. **Prove** Testimonianze vere con nomi, foto di lavori veri, loghi di clienti veri o una breve demo. Mai inventate.
5. **L'offerta nel dettaglio** Cosa ottengono esattamente, quando, e cosa costa o non costa. Condizioni chiare eliminano l'esitazione.
6. **Obiezioni** Una breve FAQ che risponde ai motivi per cui la gente non agisce: tempo, prezzo, adeguatezza, disdetta, cosa succede dopo.
7. **Call to action finale** Ripeti la promessa del titolo e lo stesso pulsante. I visitatori che leggono fino in fondo sono pronti; non farli tornare su.

Non ogni pagina ha bisogno di ogni sezione. Una lista d'attesa per un lancio può essere solo una hero, tre righe su come funziona e un campo email. Un'offerta di forte impegno, come un corso o una consulenza, di solito le richiede tutte e sette e più prove.

## Un esempio concreto: offerta introduttiva di uno studio yoga

| Sezione | Cosa dice la pagina |
| --- | --- |
| Hero | «La tua prima lezione la offriamo noi.» Riga di supporto: «Piccole lezioni per principianti a Bristol, sei giorni a settimana.» Pulsante: «Prenota la tua lezione gratuita» |
| Problema | «Le lezioni delle grandi palestre vanno veloci e nessuno controlla la tua postura. È difficile cominciare quando non sai cosa stai facendo.» |
| Come funziona | Scegli una lezione per principianti. Arriva dieci minuti prima, i tappetini sono forniti. Resta per una chiacchierata di cinque minuti su cosa fa per te. |
| Prove | Tre brevi recensioni di vere iscritte e iscritti con nome e foto, più immagini dello studio vero. |
| Offerta | Una lezione gratuita per i nuovi allievi, qualsiasi sessione per principianti, senza carta. |
| Obiezioni | «Non sono flessibile.» «Cosa devo indossare?» «C'è parcheggio?» «Cosa succede dopo la lezione gratuita?» |
| Call to action finale | «Vieni a provare una lezione.» Stesso pulsante: «Prenota la tua lezione gratuita» |

Ogni riga risponde a una domanda che un principiante nervoso si pone davvero. La stessa struttura funziona per l'offerta di una visita di controllo dal dentista o per la prova di un software.

## Fai corrispondere la pagina all'annuncio che ha portato il visitatore

La maggior parte dei visitatori di una landing page arriva da qualcosa: un [annuncio Instagram](https://gradiently.design/it/guide/instagram-ad-design), un annuncio LinkedIn, un'email, un QR code su un volantino. Appena atterrano, controllano di essere nel posto giusto. Ripeti nel titolo l'offerta esatta dell'annuncio e porta con te il suo aspetto: lo stesso sfondo, gli stessi colori e lo stesso carattere. Una pagina che non somiglia all'annuncio sembra un'esca, anche quando non lo è.

Un annuncio Instagram verticale per uno studio yoga che offre la prima lezione gratuita

L'annuncio Instagram a 1080×1350.

Una hero larga di landing page che ripete la stessa offerta di prima lezione gratuita e lo stesso sfondo dell'annuncio

La hero della landing page a 1920×1080: stesse parole, stesso aspetto, così nessuno si chiede se ha cliccato il link giusto.

Progettare entrambi da un'unica fonte lo rende automatico. In Gradiently, con Pro un solo progetto può essere ridimensionato a ogni formato in un passaggio, così il post, la storia, l'intestazione dell'email e la hero della pagina condividono un Mark e un titolo. [Un solo aspetto, ogni formato](https://gradiently.design/it/guide/one-look-every-size) mostra il flusso di lavoro, e la [coerenza del brand](https://gradiently.design/it/guide/brand-consistency) spiega perché conta oltre una singola campagna.

## Scelte di design che tengono le persone a scorrere

- **Un solo colore d'accento per tutti i pulsanti**, usato solo lì. L'occhio impara dove cliccare. [La regola 60 30 10](https://gradiently.design/it/guide/60-30-10-rule) è un buon modo per impostare l'equilibrio.
- **Spazio generoso tra le sezioni**, così ognuna si legge come un'unica idea. Le pagine affollate sembrano una fatica.
- **Titoli che hanno senso da soli.** Molti scorrono solo i titoli; devono raccontare l'intera storia.
- **Foto vere al posto di quelle stock.** La tua vera sala, il tuo prodotto, il tuo team o i tuoi risultati.
- **Moduli brevi.** Chiedi solo ciò che ti serve ora. Un indirizzo email è più facile da dare di un numero di telefono.
- **Nessun menu di navigazione**, o solo un logo, così non c'è dove andare a zonzo.

- Fondo della pagina: #fbf7f2
- Fascia di sezione: #efe6da
- Testo: #2b2a33
- Testo secondario: #6b6670
- Solo pulsante: #c2410c

Una palette calma per landing page: due fondi caldi che si alternano tra le sezioni, due colori di testo e un accento riservato alla call to action.

## Prima il mobile, poi i test

Il traffico dai post social arriva per lo più da telefoni, quindi progetta prima la versione larga 390 pixel. Tieni titolo e pulsante nella prima schermata, fai i pulsanti alti almeno 44 pixel e usa un pulsante fisso solo se non copre il contenuto.

### Da evitare

- Cambiare cinque cose insieme e indovinare cosa ha funzionato
- Copiare da un articolo un tasso di conversione come obiettivo
- Popup che compaiono prima che il visitatore abbia letto qualcosa
- Un modulo con dieci campi per scaricare una guida

### Da fare

- Cambiare una cosa alla volta, come il titolo, e confrontare
- Misurare rispetto alla tua versione precedente
- Lasciare che le persone leggano l'offerta prima di chiedere qualcosa
- Chiedere il minimo, poi saperne di più dopo

Non esiste un buon tasso di conversione universale: dipende dall'offerta, dal prezzo e dal traffico. Ciò che puoi sempre fare è rendere la versione successiva più chiara della precedente. Per i colori dietro a tutto questo, vedi le [combinazioni di colori per siti web](https://gradiently.design/it/guide/website-color-scheme).

## FAQ

### Qual è la struttura migliore per una landing page?

Hero, problema, come funziona, prove, dettagli dell'offerta, obiezioni e una call to action finale. Le offerte brevi possono saltare sezioni; impegni più grandi le richiedono tutte.

### Una landing page deve avere la navigazione?

Di solito no. Togliere il menu tiene l'attenzione sull'unica azione per cui la pagina esiste; basta un logo.

### Quanto deve essere lunga una landing page?

Quanto serve per rispondere alle domande del visitatore. Una lista d'attesa gratuita può stare in una schermata, mentre un corso a pagamento richiede spesso una pagina lunga con prove dettagliate e FAQ.

### Qual è la differenza tra una landing page e una homepage?

Una homepage serve ogni visitatore e rimanda ovunque. Una landing page serve un solo pubblico da una sola fonte e chiede una sola azione.

### La mia landing page deve somigliare al mio annuncio?

Sì. Ripeti nel titolo l'offerta dell'annuncio e mantieni i suoi colori e il suo sfondo, così i visitatori capiscono subito di essere nel posto giusto.