Una email senza design è solo un foglio di testo che nessuno legge. Ecco perché il layout, i colori, la tipografia e il bottone CTA decidono quanto guadagni davvero da ogni invio.

📌 Punti chiave dell’articolo

• Il design batte il copy: il cervello processa le immagini 60.000 volte più veloce del testo, quindi l’utente decide in 1,7 secondi se leggere o cancellare.
• Mobile-first non è opzionale: oltre il 60% delle email viene aperto da smartphone, un layout non responsive ti fa perdere click reali.
• Una sola CTA principale per email aumenta il CTR fino al 371% rispetto a email con CTA multiple e confuse.
• La gerarchia visiva guida l’occhio: titolo grande, spazio bianco, immagine forte, bottone sotto. In questo ordine.
• I colori del brand devono restare coerenti tra sito, ads e email, altrimenti l’utente perde fiducia.
• A/B test su design, non solo su oggetto: cambiare il colore del bottone può portare +20% di conversioni.
• Affidati a un team specializzato in email marketing per impostare campagne con design che converte.

1. Perché il design conta più del copy nelle email

Ti sei mai chiesto perché certe email le cancelli dopo mezzo secondo senza nemmeno leggerle? Nove volte su dieci il problema non è il copy. È il design. Quello che l’occhio vede prima che il cervello inizi a leggere le parole.

Lavoro nell’email marketing da diversi anni e una cosa l’ho imparata sul campo: il copy migliore del mondo, dentro una email brutta, non converte. E succede pure il contrario? Sì, succede. Un design pulito riesce a salvare un copy mediocre, almeno fino a un certo punto.

Il motivo è biologico, non opinabile. Il cervello processa le immagini circa 60.000 volte più veloce del testo. Quando un utente apre la tua email, decide in 1,7 secondi se continuare o chiudere. In quel lasso non sta leggendo: sta scansionando. Guarda colori, spazi bianchi, gerarchia, dove si trova il bottone.

Cosa nota davvero l’occhio in quei primi 1,7 secondi:

• Il blocco principale (immagine hero o titolo grande)
• La posizione e il colore del bottone CTA
• La densità del testo: troppo = chiudo subito
• La coerenza con il brand che si aspetta di vedere
• Lo spazio vuoto attorno agli elementi

Un cliente del settore moda, l’anno scorso, aveva un tasso di apertura del 28% (ottimo) ma un CTR dell’1,1% (pessimo). Abbiamo lasciato copy e oggetto identici. Cambiato solo il design: titolo più grande, una sola immagine prodotto invece di sei, un bottone nero pieno invece di un link sottolineato. CTR salito al 4,3% in due settimane. Nessuna magia, solo design fatto bene.

Il design email funziona quando rende la decisione facile. Niente da capire, niente da cercare, niente da interpretare. L’utente vede, capisce, clicca. Questo è il framework che applichiamo con tutti i clienti che si rivolgono a noi per il reparto creative. Se il design rallenta la decisione, la conversione muore. Punto.

2. I primi 3 secondi: cosa vede davvero chi apre la tua email

Tre secondi. È tutto il tempo che hai. Oltre questa soglia, se non hai catturato l’attenzione, l’email è già chiusa o archiviata. E sai cosa fa l’utente in quei 3 secondi? Non legge. Scorre.

L’occhio segue un pattern preciso, studiato in decine di ricerche eye-tracking: parte dall’alto a sinistra, scende a zig-zag verso destra, si ferma sulle immagini, salta i blocchi di testo lunghi. Si chiama pattern a F. Funziona così da sempre, e funziona uguale per le email come per le landing page.

Cosa significa nella pratica? Che i primi 200 pixel verticali della tua email sono i più importanti del messaggio. Sopra il “fold” (quella linea immaginaria oltre la quale l’utente deve scrollare) ci deve essere tutto il valore principale: chi sei, cosa offri, perché clicco.

Elemento	Posizione consigliata	Errore comune
Logo brand	Alto-sinistra o centro, max 150px	Logo gigante che mangia metà schermo
Hero image	Subito sotto al logo	Immagine senza testo alt, non si carica
Titolo principale	Sopra l’immagine o sovrapposto	Titolo troppo piccolo, sotto i 22px
CTA primaria	Sopra il fold (entro i 600px)	Bottone in fondo dopo 3 schermate
Pre-header	Visibile in inbox prima dell’apertura	Lasciato vuoto o con link “view in browser”

Una cosa che faccio spesso con i clienti del reparto performance: stampiamo l’email a colori, la mettiamo a 50 centimetri di distanza e guardiamo solo 3 secondi. Poi giriamo il foglio e ci facciamo una domanda: cosa abbiamo capito? Se non sappiamo dire cosa offre l’email e dove cliccare, c’è un problema di design da risolvere.

Aggiungo un dettaglio che spesso viene ignorato: il pre-header. Quella riga di testo che appare nella inbox subito dopo l’oggetto. È il secondo titolo gratuito che hai a disposizione, e quasi nessuno lo cura. Scrivici una promessa concreta, non “Apri questa email per scoprire…”. Tipo: “Sconto 30% solo oggi, codice DOM30”. Diretto.

3. Layout mobile-first: l’errore che fa perdere il 60% dei click

Pensaci un secondo: quando hai aperto l’ultima newsletter? Probabilmente sul telefono, in metro, in bagno, in fila al supermercato. Esatto, come tutti. Eppure ancora oggi vedo email progettate sul Mac con uno schermo da 27 pollici e mai testate su un iPhone SE.

I dati parlano chiaro: oltre il 60% delle aperture avviene da mobile, e in alcuni settori (moda, food, lifestyle) si arriva al 75%. Una email che non funziona sul telefono è una email che brucia il 60% del budget dell’invio. Senza esagerare.

Il design creative mobile-first non significa “rimpicciolisco tutto e via”. Significa progettare prima per lo schermo piccolo e poi adattare al desktop. Ribaltare il processo.

Checklist mobile che uso su ogni progetto:

1. Larghezza email: max 600px, idealmente 580px per evitare scroll orizzontale
2. Font body: minimo 16px, mai sotto. 14px su mobile è illeggibile
3. Font titolo: minimo 24px, meglio 28-32px
4. Bottone CTA: altezza minima 44px (lo standard Apple per il tap), larghezza minima 200px
5. Padding intorno ai bottoni: almeno 20px, così il dito non sbaglia
6. Una colonna sola: layout multi-colonna su mobile collassa male nel 90% dei client email
7. Immagini ottimizzate: max 200KB l’una, formato WebP o JPG compresso
8. Spazio tra link testuali: minimo 12px verticali tra link cliccabili

Un errore tipico: il “double tap problem”. Hai due link uno sotto l’altro, distanza 4px. L’utente prova a cliccare il primo, sbaglia, clicca il secondo. Risultato? Click sbagliato, frustrazione, unsubscribe. Risolto con 12px di padding tra elementi.

Altro errore che vedo girare: l’immagine come unico contenuto. Una sola foto enorme, niente testo. Carina, certo. Ma se il client email blocca le immagini (succede al 30% delle aperture in Outlook), l’utente vede una casella bianca con la X. Hai perso. Usa sempre testo HTML + immagini, mai solo immagini.

4. Tipografia e gerarchia visiva nelle email che convertono

La tipografia in email è strana. Non puoi usare i font fighi che usi sul sito, perché non tutti i client email li supportano. Outlook, in particolare, è il principale problema di chi disegna email da quindici anni a questa parte.

Quali font funzionano sempre? Quelli “web safe” o “system fonts”: Arial, Helvetica, Georgia, Verdana, Tahoma, Trebuchet MS. Sono brutti? Dipende. Helvetica usata bene è bellissima. Il problema non è il font in sé, è come lo gestisci.

La gerarchia visiva è quello che separa una email pro da una amatoriale. Significa che l’occhio capisce in un colpo cosa è importante, cosa è secondario, cosa è dettaglio. Senza pensarci.

Livello	Dimensione (px)	Peso	Funzione
H1 – Titolo principale	28-36px	Bold (700)	Promessa centrale dell’email
H2 – Sottotitoli	22-26px	Semibold (600)	Sezioni interne
Body text	16-18px	Regular (400)	Spiegazione del prodotto/offerta
Caption / disclaimer	12-14px	Regular (400)	Termini, link unsubscribe
CTA button text	16-18px	Semibold (600)	Azione richiesta

Un trucco che uso spesso: la regola del 3. Massimo 3 livelli di gerarchia per email. Più di così l’occhio non li distingue, anzi si confonde. Titolo, corpo, CTA. Stop. Se hai un’offerta complicata con 5 livelli di info, probabilmente devi spezzare in due email diverse.

Line-height (interlinea): sempre 1,5x la dimensione del font. Se il body è 16px, l’interlinea va a 24px. Questo dà respiro al testo e lo rende leggibile in mobilità. Una email con interlinea 1,2 sembra un muro di parole, l’utente non la legge proprio.

Last but not least, il contrasto. Testo grigio chiaro su sfondo bianco è elegantissimo ma non si legge. Usa nero #1a1a1a su bianco, o se vuoi un grigio, non scendere mai sotto #333333. Lo standard WCAG vuole un contrasto di almeno 4.5:1 per il body text. Controllabile in 10 secondi con tool gratuiti tipo WebAIM Contrast Checker.

5. Colori, brand identity e psicologia del click

I colori in una email non sono decorazione. Sono comunicazione veloce. Un rosso intenso comunica urgenza, un verde comunica conferma, un blu comunica fiducia. L’utente non lo legge razionalmente, lo sente.

La domanda che mi fanno sempre i clienti è: “Quale colore converte di più per il bottone?”. Risposta vera: non esiste un colore che converte di più in assoluto. Esiste il colore giusto rispetto al contesto. Il bottone deve essere il colore che spicca di più rispetto al resto della pagina email. Punto.

Se la tua email è prevalentemente bianca e blu (tipico di SaaS B2B), un bottone arancione spicca. Se la tua email è scura con accenti gialli (tipico di brand sportivi), un bottone bianco pieno spicca. Si chiama contrasto cromatico, ed è l’unica regola che vale davvero.

Significati dei colori più usati nelle email:

• Rosso — urgenza, sconto, ultima chance. Funziona bene per saldi e flash sale, da non abusare
• Blu — fiducia, sicurezza, professionalità. Top per banche, SaaS, settore healthcare
• Verde — natura, ok, conferma. Bene per food, sostenibilità, wellness
• Nero — lusso, eleganza, premium. Standard per moda alto-gamma e cosmetica
• Giallo/Arancione — energia, ottimismo, attenzione. Funziona per CTA su sfondi chiari
• Viola — creatività, premium, mistico. Usato bene per beauty e brand creativi

L’altra regola, che spesso viene ignorata: la coerenza tra email e brand. Se sul sito i bottoni sono neri, in email non possono essere arancioni. L’utente non lo razionalizza, ma percepisce qualcosa che non torna, e questa rottura della coerenza brucia fiducia. Su questo tema mi è capitato di lavorare anche con strumenti di AI per generare varianti coerenti con la brand identity in modo rapido, mantenendo la palette fissa.

Un’altra dritta: la regola 60-30-10. Il 60% dell’email deve essere il colore primario (di solito bianco o un neutro), il 30% il colore secondario (il colore del brand), il 10% il colore accent (il bottone CTA). Questa distribuzione crea equilibrio visivo senza pensare troppo.

6. Il bottone CTA: design, posizione e parole che convertono

Se devo scegliere un solo elemento del design email su cui investire tempo, è il bottone CTA. Senza nemmeno pensarci. È letteralmente il pezzo di pixel su cui dipende il fatturato dell’invio.

Cominciamo dalla quantità. Una sola CTA primaria per email. Una. Se hai 3 bottoni diversi che chiedono cose diverse, l’utente non sceglie, chiude. Si chiama paradosso della scelta e nelle email è devastante.

Studi su migliaia di email hanno mostrato che passare da CTA multiple a una singola CTA chiara può aumentare il CTR fino al 371%. Numero esagerato ma reale, perché parte da una base bassa. Comunque, anche un raddoppio del CTR cambia il ROI di una campagna.

Elemento del bottone	Cosa funziona	Cosa evitare
Forma	Rettangolo con angoli leggermente smussati (4-8px)	Bottoni perfettamente tondi o quadrati duri
Dimensione	Larghezza 200-300px, altezza 48-56px	Bottoni troppo piccoli (sotto 40px altezza)
Colore	Colore accent del brand, alto contrasto	Stesso colore dello sfondo o link sottolineato
Testo	Verbo + beneficio: “Ricevi lo sconto”	“Clicca qui”, “Scopri di più”, “Invia”
Posizione	Sopra il fold + ripetuto in fondo	Solo in fondo, dopo 3 schermate di scroll
Padding interno	16px verticale, 32px orizzontale minimo	Testo che tocca i bordi del bottone

Sul copy del bottone, una regola che funziona quasi sempre: inizia con un verbo all’imperativo e poi specifica il beneficio. Non “Scopri di più” (cosa scopro? perché dovrei?), ma “Ricevi la guida gratis”. Non “Acquista” ma “Aggiungi al carrello con -20%”. Il bottone deve dire all’utente esattamente cosa succede dopo il click.

Un trucco che uso quando il cliente ha un’offerta complessa: la doppia CTA. Bottone primario pieno (colore brand, alto contrasto) per l’azione principale. Sotto, un link testuale secondario per l’azione alternativa. Esempio: [ACQUISTA ORA -30%] primario, Hai bisogno di info? Parla con noi secondario. Mai due bottoni pieni uguali, mai.

Su questo abbiamo testato decine di varianti con clienti diversi: trovi alcuni esempi nei nostri casi studio dove mostriamo come piccoli cambi al bottone CTA hanno portato salti di conversione importanti.

7. Errori di design che uccidono engagement e deliverability

Ci sono errori di design che non solo riducono il CTR, ma che finiscono per danneggiare la deliverability. Cioè il fatto stesso che la tua email arrivi in inbox e non in spam. Tema sottovalutato, ma critico.

Il rapporto immagine/testo è il primo. Se la tua email è fatta al 90% di immagini e 10% di testo, i filtri antispam la marchiano come sospetta. Lo fanno perché molte email di phishing usano proprio questo trucco per nascondere il contenuto. La regola sicura: almeno 60% di testo HTML rispetto alle immagini.

Top 10 errori di design che incidono su engagement e deliverability:

1. Email solo immagine – se il client blocca le immagini, l’utente vede una pagina bianca
2. Larghezza superiore a 600px – causa scroll orizzontale su mobile
3. Font piccoli sotto i 14px – illeggibili senza zoom, abbandono immediato
4. CTA invisibili o non distinguibili – colore identico al body, niente bottone
5. Troppe CTA diverse – paralisi decisionale, l’utente non clicca niente
6. Niente versione testo plain – i filtri antispam lo notano
7. Link senza HTTPS – i client moderni avvisano l’utente di pericolo
8. Mancanza di alt text sulle immagini – chi blocca le immagini non capisce nulla
9. Background image come unico sfondo – Outlook non lo supporta, layout rotto
10. GIF animate pesanti – sopra 1MB rallentano l’apertura, deliverability penalizzata

Mi è capitato di vedere un cliente che aveva un open rate del 18% e una sospetta percentuale di email finite in spam. Il design era fatto interamente con una unica immagine PNG da 1,2MB. Abbiamo riscritto la struttura in HTML + tre immagini più leggere (totale 280KB), testo alt su tutto, versione plain text generata in automatico. Open rate salito al 26% in due settimane, soprattutto perché meno email finivano in promozioni o spam.

Un altro errore frequente: ignorare la dark mode. Molti utenti hanno il telefono in dark mode di default. Se hai un logo nero su sfondo bianco, in dark mode il logo sparisce sul fondo scuro. Soluzione? Usare PNG con sfondo trasparente e versione del logo che funzioni su entrambi i temi, o testare con strumenti gratuiti tipo Litmus.

Le strategie di remarketing via email sono particolarmente esposte a questi errori, perché spesso vengono create in fretta come trigger automatici. Vale la pena dedicare tempo a curare il design anche per i trigger flow, non solo per le campagne broadcast.

8. A/B test, heatmap e metriche per validare il design

“Secondo me funziona meglio così” non è una strategia di design. Quello che funziona si misura, quello che non si misura è opinione personale. Per le email, fortunatamente, abbiamo strumenti molto precisi per testare ogni elemento del design.

L’A/B test classico funziona così: dividi la lista in due gruppi (50/50), invii la stessa email con UNA variabile diversa, misuri quale versione genera più click o conversioni. La regola d’oro: cambia una sola cosa per volta, altrimenti non sai cosa ha funzionato davvero.

Cosa testare per primo nel design email (in ordine di impatto):

1. Colore del bottone CTA – di solito porta swing del 5-20% sul CTR
2. Testo del bottone – cambiare “Acquista” con “Aggiungi al carrello -20%” può raddoppiare i click
3. Hero image vs niente hero – dipende dal settore, va testato
4. Email lunga vs corta – sopra il fold tutto vs scroll lungo
5. Una colonna vs due colonne – mobile vince quasi sempre con una colonna
6. Posizione della CTA – sopra il fold vs solo in fondo
7. Personalizzazione visiva – nome utente nel banner vs senza

Quali metriche guardare per capire se il design funziona? Non basta l’open rate (che dipende dall’oggetto), serve guardare a tutta la pipeline.

25%+Open rate buono

3-5%CTR medio sano

15%+Click-to-open rate (CTOR)

<0,3%Unsubscribe rate accettabile

Il CTOR (click-to-open rate) è la metrica più sottovalutata. È il rapporto tra click e aperture, quindi misura quanto bene il design dell’email convince chi ha aperto a cliccare. Se l’oggetto è ottimo (open rate alto) ma il CTOR è basso, il problema è il design. Se l’open rate è basso ma chi apre clicca tantissimo, il problema è l’oggetto. Diagnosi rapida.

Per analisi più profonde esistono strumenti di heatmap email come Litmus o Email on Acid, che ti mostrano dove gli utenti cliccano davvero e dove invece nessuno clicca. Sorprese garantite: spesso scopri che un’area che tu pensavi importante viene completamente ignorata. Approfondiamo questa metodologia di test nei nostri case study di performance marketing, dove mostriamo numeri reali su clienti veri.

Vuoi che il tuo design email venga progettato per convertire e non solo per essere bello?

Parla con il nostro team →

FAQ – Domande frequenti sul design nell’email marketing

Quanto influisce davvero il design sul tasso di conversione di una email? Il design può cambiare il CTR di una email anche del 200-300% a parità di copy e oggetto. La maggior parte dell’effetto si gioca su tre fattori: posizione e visibilità della CTA, leggibilità mobile, gerarchia visiva. Cambiare solo questi tre elementi spesso fa più differenza di mesi di test sull’oggetto. Quali sono i migliori strumenti per disegnare email che convertono? Per il disegno: Figma o Sketch per i mockup, poi conversione in HTML via Stripo, BeeFree o Mailjet drag-and-drop. Per testare il rendering: Litmus o Email on Acid, che mostrano come appare l’email su 90+ client diversi. Per A/B test e analytics: Mailchimp, Klaviyo o Brevo offrono test integrati validi. Email con tanto testo o email visuale con tante immagini: cosa funziona meglio? Dipende dal settore e dall’obiettivo. Per le newsletter editoriali e B2B, il testo vince (60-70% testo, 30-40% visuale). Per ecommerce moda/lifestyle, il visuale predomina (40% testo, 60% immagine). La regola sicura per tutti: mai più del 70% di immagini, altrimenti rischi spam e mancato caricamento delle immagini sui client che le bloccano. Quante CTA dovrebbe contenere una email? Una CTA primaria, ripetuta 2-3 volte nella stessa email se il contenuto è lungo. Se hai obiettivi diversi (vendita E iscrizione webinar), spezza in due email differenti. Un’email con 4 bottoni diversi che chiedono cose diverse converte meno di un’email con un solo bottone ripetuto tre volte. Il design email è davvero diverso dal design web? Sì, completamente. Il design email vive in un ambiente molto più limitato: niente JavaScript, CSS supportato solo in parte, font web limitati, larghezza fissa, comportamenti diversi su Outlook vs Gmail vs Apple Mail. Le tecniche di design web non si applicano direttamente, serve un approccio specifico testato su molti client. Quanto tempo serve per disegnare una email di qualità professionale? Una email singola ben fatta richiede 4-8 ore di lavoro tra design, copy, sviluppo HTML, test su client e A/B test setup. Un flow di benvenuto da 5 email può richiedere 30-40 ore. Tempi inferiori di solito significano template recyclato senza adattamento, e si vede subito nei risultati. Vale la pena assumere un designer specifico per le email? Se invii più di 4 campagne al mese e hai un fatturato significativo dall’email, sì. Un designer specializzato in email conosce vincoli e best practice che un designer web generico ignora. In alternativa, affidati a un’agenzia che fa email marketing in maniera integrata con il resto del performance. Come si verifica che il design funzioni su tutti i client email? Test manuale su almeno 5 client: Gmail (web e app), Outlook (web e desktop), Apple Mail, Yahoo Mail, e una versione mobile recente di Android. Per test più esaustivi si usano tool come Litmus o Email on Acid che simulano il rendering su 90+ ambienti diversi in pochi minuti. I template prefatti di Mailchimp o Klaviyo bastano per partire? Per iniziare sì, sono un buon punto di partenza. Ma sono template usati da migliaia di altri brand, quindi la tua email non si distinguerà mai davvero. Appena raggiungi un volume di invii rilevante e capisci cosa funziona nel tuo settore, il salto verso template custom porta miglioramenti immediati di engagement. Quanto pesa la dark mode nel design email del 2025? Tantissimo. Più del 30% degli utenti mobile ha la dark mode attiva di default. Un design che non considera la dark mode rischia di mostrare loghi invisibili, contrasti rovinati, immagini che spariscono. Testare in dark mode è ormai parte standard del QA pre-invio, non più un optional.