Come abbinare efficacemente i colori delle tue ads per bloccare lo scroll

Testo su fondo neutro

Il primo caso che vi porto come esempio è questa creative di Fabletics.

Il contrasto di colori tra lo sfondo grigio (#EEEEEE) e la scritta nera (#000000) rende il copy perfettamente leggibile, cattura l’attenzione e, grazie anche all’immagine, porta a bloccare lo scroll.

Interessante la scelta di non usare un bianco (che a volte si confonde con lo sfondo dell’app) ma di usare comunque una tonalità chiara che faccia da sfondo neutro.

La nostra attenzione verrà quindi catturata solamente dalla scritta e non dallo sfondo o da altri elementi.

Bianco e rosso

Quella che andremo ad analizzare ora è una creative che ha lo scopo di bloccare lo scroll facendo emergere la leva dei saldi.

Come farlo quindi?

Il riquadro rosso (#DD3433) cattura l’attenzione subito, dando anche un segnale forte all’utente grazie alla percezione che si ha di quel colore.

Il copy bianco (#FFFFFF) stacca totalmente dal riquadro permettendoci di leggere chiaramente il contenuto.

La parola FINAL invece inserita in nero (#000000), non ha lo scopo di catturare l’attenzione, bensì quello di rafforzare il concetto una volta che avremmo letto la parola SALE.

È infatti stato utilizzato il nero per creare contrasto e per emergere dallo sfondo chiaro, in questo caso la camicia rosa.

Il green che blocca lo scroll

Questa creative contiene in sé più di quanto si possa pensare.

Tralasciando l’effetto meme, dovuto alla presenza dell’immagine e del testo ironico, voglio concentrarmi sull’aspetto cromatico.

Ad un primo impatto blocca lo scroll perché contiene uno sfondo omogeneo, di un verde “carico”, ed una scritta grande e ben leggibile.

Il contrasto tra il verde (#3ED26A) ed il colore più scuro (#15233A) è netto, rende ben leggibile il copy e ci permette di non avere distrazione nella lettura.

L’aspetto più interessante però non è solo questo, ma è il fatto che questi siano colori che fanno parte della brand identity di Treedom.

Siamo quindi riusciti ad ottenere un effetto “blocca-scroll” utilizzando dei colori che fanno parte della nostra comunicazione e che si ricollegano al nostro brand.

Il verde infatti riporta al concetto di green, core di Treedom, poterlo sfruttare per creare creative come questa è un grande vantaggio.

Comparazione cromatica

Come nel caso di Treedom, Katoo sceglie di utilizzare i propri colori per valorizzare la propria creative.

Il lato interessante è che il viola (#6C43DD) ed il bianco (#FFFFFF), vengono utilizzati non solo per catturare l’attenzione dell’utente, ma anche per creare la comparazione di prezzo tra due prodotti (o in questo caso servizi).

Come vediamo infatti sono presenti due lattine identiche, inserite in due riquadri totalmente diversi e con contrasti differenti.

Quella della concorrenza è in un riquadro grigio con scritta nera, scelta cromatica che se utilizzata da sola può avere un’impatto interessante (vedi esempio 1) ma che comparata con un viola acceso con scritta bianca assume un tono negativo, inferiore.

Questo è un ottimo esempio di come le combinazioni colore possano essere efficaci e non, in base al contesto ed al contrasto con altre.

Altro trucco utilizzato in questa creative, a livello percettivo ma rafforzato dalla scelta cromatica, è stato rendere la lattina dell’offerta più grande nonostante fosse la stessa identica.

In un primo momento la somma delle due cose ci sembrerà ancora più vantaggiosa di quello che è!

Complementari…e non!

In questa creative andiamo ad analizzare diversi “trucchi del mestiere” che molti grafici già conoscono.

Tralasciando la prospettiva dell’auto e le forme squadrate, che ci portano a guardare al centro della creative e all’offerta, quello su cui mi voglio soffermare è la scelta dei colori.

Due di loro sono complementari, infatti l’arancione (#FF9901) e l’azzurro/verde acqua (#03D4CE) sono opposti nella ruota cromatica.

Affiancare due colori così infatti è praticamente sempre una scelta giusta, è quasi impossibile che due complementari stiano male affiancati.
Esiste tra l’altro una tecnica di color, utilizzata anche in molti film (e pure in filtri instagram), denominata “teal and orange” che riprende questi due colori dando un’armonia ed un contrasto piacevoli.

Il terzo colore dello sfondo, il viola (#510062) ha invece una funzione di netto contrasto, utile a valorizzare l’inserimento del copy e del riquadro offerta in bianco.

Ora ci rimane solo la scelta cromatica per l’offerta, quindi scegliamo qualcosa di forte impatto come un “rosa carico” (#FF2E73) aggiungendogli un’ombra per dare un effetto 3D.

Si ma, il nero non si usa?

Utilizzare il nero (#000000) sulle creative abbiamo visto che può essere utile per valorizzare i testi su uno sfondo neutro, ma a volte può essere utilizzato anche come blocca scroll.

In questo caso vediamo sfruttata la presenza del giallo (#FFE00E) della brand identity di The Pitch come sfondo, contrastata dal nero (#000000) delle scarpe e del riquadro contenente la CTA.

L’utilizzo del giallo così acceso richiede qualcosa di netto per staccare e catturare l’attenzione mantenendo la leggibilità, la scelta quindi di utilizzare il nero per creare dei riquadri ci permette di valorizzare l’offerta ed i prodotti.

Per creare poi una sorta di effetto catalogo possiamo vedere la scelta effettuata di utilizzare dei riquadri bianchi con all’interno altri modelli di scarpe, molto efficace a mio avviso.

E per i video?

Tutto bello Gabri, ma ci hai detto mille volte che i video domineranno il mondo… anche li si può ragionare cromaticamente? CERTO!

L’esempio che vi porto è lampante, a mio avviso.
Questa creative sfrutta sia la dinamicità del video (sulla struttura poi potremmo parlarne per ore perché è praticamente perfetta) che la combinazione cromatica sulla grafica.

Infatti vediamo utilizzato un azzurro/verde acqua (#3BD1E2) sia per la parte riguardante lo sfondo dei copy che per gli elementi grafici all’interno dello stesso.

Questo porta innanzitutto ad un’omogeneità di colori e poi, grazie al contrasto col bianco dei testi, rende la creative molto impattante e ferma-scroll.

Conclusione

Quelli che vi ho mostrato sono chiaramente solo alcuni dei tantissimi esempi di combinazioni colore che possiamo utilizzare!

La cosa importante da ricordare, quando si creano, è che dovranno essere facilmente visibili e catturare la nostra attenzione fin dal primo istante.

Quindi ben vengano i colori accesi e contrastati se vogliamo dare un tono energico alle nostre creative o i colori neutri con testi scuri se vogliamo comunicare calma, bloccando comunque la navigazione ai nostri utenti.

Ma ora ditemi, voi quali combinazioni di colori preferite? Scrivetelo sui commenti!
Per qualsiasi confronto mi trovate sul mio IG @chiamatemicep o su Linkedin!