• HOME
  • Blog
  • Come si usa il colore di sfondo nelle email?
Kelly Shetron
1 Marzo 2018
Tempo di lettura: 9 min.

Come si usa il colore di sfondo nelle email?

I brand si affidano spesso a immagini dei prodotti e a elementi grafici per attirare interesse a livello visivo nelle email. Un’altra efficace tattica per ravvivare le email, senza stravolgere il rapporto tra immagine e testo o appesantire le dimensioni dei messaggi con le immagini, è l’utilizzo dei colori di sfondo.

I colori di sfondo permettono di organizzare meglio il contenuto, stabilire gerarchie e, se utilizzati dietro le immagini, possono rinforzare il concetto grafico anche quando la visualizzazione delle immagini è disattivata. Inoltre, i colori di sfondo HTML vengono visualizzati su tutti client di posta (diversamente dalle immagini), occupano meno di una riga di codice e sono facili da implementare (nell’editor BEE non è richiesta alcuna codifica).

Spesso le email mantengono uno sfondo bianco e riservano il blocco colorato all’header e al footerseparando visivamente il contenuto di introduzione e di conclusione dal corpo dell’email. Ad esempio, questo è l’approccio che General Assembly adotta nell’email riportata di seguito:

Utilizzare una gamma di colori minimale, incorporando ampio spazio bianco, è una delle migliori pratiche di email design. Ma ultimamente abbiamo anche visto email che sfruttano i colori di sfondo in un modo nuovo e interessante, non limitandoli solo all’header o al footer.

Ecco alcuni suggerimenti per utilizzare in modo creativo i colori di sfondo nelle email, traendo ispirazione da messaggi arrivati di recente che non temono di giocare con le tonalità.

256x218
prova la piattaforma
Attiva la trial gratuita e scopri cosa puoi fare con MailUp.

Dallo sviluppo di integrazioni al supporto strategico, dalla creazione di concept creativi all’ottimizzazione dei risultati.

Suggerimento n. 1. Abbina il colore di sfondo alle immagini

Le email costituite interamente da immagini (con una presenza minima o nulla di testo semplice) possono essere problematiche: non tutti i lettori saranno in grado di visualizzarle correttamente, qualora il client di posta impedisca il download delle immagini.

Inoltre, le email image-only finiscono spesso nelle cartelle spamnon sono ottimizzate per i dispositivi mobili e possono non essere scaricate completamente. Ecco perché insistiamo sempre sul fatto che, per essere efficaci, le email debbano conservare un equilibrio tra immagini e testo (almeno 500 caratteri di testo).

Ecco come appare questa email di MOO con la visualizzazione delle immagini disattivata:

Ora con la visualizzazione delle immagini attivata:

Con le immagini visibili, possiamo notare che la maggior parte della sezione superiore dell’email è costituita da testo semplice, mentre la seconda metà presenta l’immagine di una pila di biglietti da visita. Combinando insieme gli elementi, sembra che l’email sia un’unica immagine senza soluzione di continuità. I due moduli dell’email si integrano perfettamente l’uno con l’altro grazie all’uso di un colore di sfondo viola melanzana.

Questa tattica di email design si rivela molto intelligente. Consente a MOO di utilizzare il colore in modo semplice e sorprendente per creare un messaggio email con un singolo fulcro visivo (sembra un’unica immagine o un modulo coeso). Inoltre, in questo modo MOO evita di inviare un’email image-only, bypassando i rischi connessi.

Per ottenere questo risultato, è necessario che 3 elementi fondamentali della struttura dell’email siano identici:

  1. Il colore di sfondo delle immagini
  2. Il colore di sfondo HTML della sezione di testo semplice
  3. Il colore di sfondo dell’Alt Text quando le immagini non appaiono (se non conosci il codice colore HTML di un’immagine o di un grafico, uno strumento web come HTML Color Codes ti consentirà di caricare una foto per determinare i colori utilizzati).

Logitech adotta un approccio simile in un’email inviata di recente. Eccola senza immagini:

Ed ecco l’email con le immagini:

Come MOO, Logitech crea blocchi di colore combinando moduli di testo semplice e immagini con colori di sfondo corrispondenti. Le sezioni sono chiaramente distinte. Entrambe le email sono ottimizzate con testo e CTA bulletproof che vengono sempre visualizzati.

Lo sfondo è ben progettato con alt-text, che sostengono la struttura del messaggio anche quando le immagini non sono visualizzabili. È un ottimo metodo per fare in modo che i colori di sfondo si integrino con le foto dei prodotti, al fine di creare un’email chiara e audace che sia accattivante e dia nuovo ritmo rispetto a uno sfondo bianco sterile.

Suggerimento n. 2. Utilizza un unico colore di sfondo per l’intera email

Allontanarsi dal tipico sfondo bianco è una scelta da valutare attentamente: l’utilizzo di un colore diverso come sfondo dell’email può infatti influenzare in modo significativo l’impatto sui lettori. Secondo i dati di TruConversion, il 90% del giudizio su un prodotto si basa esclusivamente sul colore.

Quindi, quando si utilizza il colore in modo potenzialmente opprimente, come da cima a fondo in un’email, è opportuno prima pensare alla sensazione che si desidera evocare. Da ciò che abbiamo visto, i brand che riescono meglio in questo ambito scelgono un colore caratterizzante con una tonalità chiara.

Ecco un’email di AIGA, che usa il suo colore rosa pallido come sfondo:

Lit Hub, il sito web letterario, adotta un approccio simile per le sue email quotidiane, utilizzando dappertutto uno sfondo beige:

In ognuna di queste email, il colore di sfondo uniforme non bianco rappresenta l’elemento grafico ideale e conferisce un aspetto piacevole per i seguenti motivi:

  • Vengono utilizzati colori a contrasto per font e link in modo che tutto il testo sia facile da leggere
  • C’è solo un altro colore complementare utilizzato oltre al colore di sfondo (per AIGA è il rosa più scuro nell’header e nel piè di pagina, per Lit Hub il colore rossastro dei collegamenti e dei pulsanti)

Inoltre, le tonalità chiare hanno la stessa funzione dello sfondo bianco: donano un aspetto leggero e arioso.

Suggerimento n. 3. Separa le sezioni di contenuto con diversi colori di sfondo

Uno dei nostri metodi preferiti per utilizzare colori di sfondo vivaci nelle email è sezione per sezione. Si tratta di una delle opzioni più efficaci di utilizzo del colore, rimarcando dove finisce una sezione e dove inizia un’altra. Ecco un’email di Litmus con tre moduli efficacemente colorati:

Le sezioni blu, arancione e verde si distinguono chiaramente. I colori rispecchiano lo stile del brand e si completano a vicenda. Inoltre, gli elementi grafici contenuti in ciascuna sezione sono prevalentemente bianchi e neri, quindi i colori di sfondo forniscono un contrasto piacevole e contribuiscono a farli risaltare.

Allo stesso modo, Modern Desk utilizza i colori di sfondo per separare i moduli della sua email, incluse due sfumature di rosa nella parte superiore, il giallo e il verde:

Sia l’email di Litmus che di Modern Desk incorporano saggiamente moduli con sfondi bianchi oltre a quelli con un colore di sfondo più acceso. Non c’è bisogno di utilizzare un nuovo colore per ogni sezione, che potrebbe risultare opprimente e ingombrante. Le email sono anche piuttosto lunghe, quindi differenziare i colori di sfondo delle sezioni è un ottimo modo per dividere visivamente la struttura e facilitare lo scorrimento verso il basso da parte del lettore.

In conclusione

  1. Coordina il colore di sfondo delle foto prodotto con il colore di sfondo HTML di una sezione di testo semplice adiacente, per migliorare il rapporto tra immagini e testo. L’email apparirà vivace e creativa, ma non resterà intrappolata nei filtri antispam e non rimarrà impantanata con immagini lente da caricare.
  2. Utilizza un unico colore di sfondo per l’intera email scegliendo una tonalità chiara e facendo in modo che il colore del testo sia in contrasto, risultando facilmente leggibile.
  3. Spezza le email lunghe con blocchi colorati. Usa colori di sfondo vivaci su diversi moduli per migliorare la disposizione e attirare l’attenzione su varie sezioni.

Divertiti! Ti consigliamo di provare l’editor BEE nella piattaforma MailUp per cambiare i colori della tua email con pochi clic.

Share this article

80x80
Kelly Shetron

Sono cresciuta a Philadelphia, negli Stati Uniti, e ho una doppia laurea in Inglese ed Economia. Amo riflettere sul modo in cui le persone vivono e lavorano, su come si sviluppano i processi creativi e su come interagiamo gli uni con gli altri. Collaborare a nuovi progetti è il mio carburante quotidiano.

    Ricevi aggiornamenti e novità con la nostra newsletter!