Suggerimento di progettazione: creazione di immagini di intestazione efficaci

Le immagini dell'intestazione sono spesso la prima cosa che i visitatori notano quando arrivano sul tuo sito web, sulla tua pagina di destinazione o sulla tua campagna di marketing. Questo li rende uno degli strumenti più importanti per trasmettere ciò che vuoi che i tuoi visitatori sappiano sul tuo sito e sulla tua attività. Ora, non lasciarti ingannare, non sono un esperto di design. Tuttavia, ho parlato con il nostro guru del design grafico residente, per saperne di più sul processo che utilizza per creare immagini di intestazione efficaci. Ha condiviso le migliori pratiche su come incorporare il testo per diversi casi d'uso, quali tipi di immagini funzionano meglio e dove trovare le immagini per le tue campagne.

Testo live vs testo grafico

Per iniziare, è importante pensare al testo che desideri utilizzare con l'immagine dell'intestazione, se presente. La maggior parte delle immagini di intestazione include il testo in due modi, come testo live o come testo grafico incorporato nell'immagine.

Che cos'è il testo in tempo reale?

Il testo attivo è il testo aggiunto su un'immagine di sfondo. In ShortStack, puoi aggiungere questo testo utilizzando un Rich Text o un Widget di testo. I vantaggi dell'utilizzo del testo in tempo reale includono:

Ricercabilità : il testo live aggiunto alla tua campagna è ricercabile dai browser, conferendo al tuo sito una potenza SEO extra;

Reattività del testo : il testo live si ridimensionerà automaticamente con la larghezza del dispositivo da cui lo spettatore accede alla tua campagna; e

Modificabilità : il testo live può essere facilmente modificato all'interno del tuo ShortStack Campaign Builder.

APPROFONDIMENTO : Usiamo il testo in tempo reale nei nostri modelli a causa dei vantaggi offerti da questa opzione.

Che cos'è il testo grafico?

Il testo grafico è un testo che fa parte di un'immagine. Puoi creare un'immagine che include testo grafico utilizzando un programma di progettazione come Photoshop o uno strumento online come Canva. I vantaggi dell'utilizzo del testo grafico includono:

Maggiore libertà creativa : il testo grafico ti consente di utilizzare qualsiasi tipo di carattere desideri e di disporre il testo come preferisci; e

Reattività dell'immagine : a seconda del design, l'utilizzo di testo grafico può consentire una maggiore flessibilità in termini di reattività dell'immagine su schermi di diverse dimensioni. Tuttavia, se hai caratteri piccoli nell'immagine, ciò potrebbe ridurre la leggibilità del testo quando viene ridimensionato sui dispositivi mobili.

Selezione di un'immagine

Dopo aver determinato quale tipo di testo utilizzerai, è il momento di decidere quale tipo di immagine utilizzerai per completare il tuo testo. Potresti considerare l'utilizzo di:

Un pattern ripetuto : questo tipo di immagine è ottimo per la reattività, poiché non importa quanto sia ampia l'immagine per visualizzare lo stesso contenuto;

Un'immagine semplice : un'immagine che non è "occupata" è migliore per sovrapporre il testo rispetto a un'immagine con troppo da fare;

Un'immagine macro con effetto bokeh : un'immagine macro è un primo piano del soggetto e l'aggiunta di un effetto bokeh sfoca lo sfondo dell'immagine, mettendo a fuoco il soggetto dell'intestazione;

Un'immagine con il soggetto su un lato : l'impostazione del soggetto di un'immagine su un lato lascia spazio al testo su schermi larghi che aumenta la leggibilità del testo; o

Un'immagine che si fonde con il colore di sfondo della tua campagna : questo tipo di immagine funziona bene per la reattività e la visualizzazione delle campagne su dispositivi mobili, poiché non devi preoccuparti di quanto sia alta la tua campagna quando crei la tua immagine.

Questa intestazione ha l'oggetto dell'immagine contenuto da un lato lasciando spazio per un blocco di testo dall'altro.

Non sai dove trovare le immagini? Suggeriamo Shutterstock, Pixabay o Adobe Stock. Altrimenti, puoi scattare le tue foto o creare le tue immagini e utilizzare quelle invece.

Proporzioni immagine

Quando si seleziona un'immagine, è importante considerare le proporzioni dell'immagine. Un'immagine alta e stretta può funzionare bene sui dispositivi mobili, ma potrebbe non avere un bell'aspetto sul desktop. In alternativa, un'immagine ampia con piccoli dettagli perderà il suo impatto (e, potenzialmente, parte del contenuto) se ridimensionata sui dispositivi mobili. A volte è meglio avere due immagini, una per dispositivi mobili e una per desktop. Puoi utilizzare le nostre impostazioni di visibilità specifiche del dispositivo per mostrare contenuti diversi su dispositivi mobili rispetto a desktop.

Stile del testo

Una volta completata l'immagine per l'intestazione, è il momento di aggiungere il testo. La cosa più importante da tenere a mente quando si aggiunge del testo è la leggibilità. Le seguenti tecniche possono aiutare a migliorare la leggibilità del testo nell'intestazione:

Aggiungi un blocco di colore dietro il testo : un colore a tinta unita dietro il testo creerà una barriera tra l'immagine di sfondo e il testo dell'intestazione;

Aumenta la trasparenza dell'immagine : l'applicazione della trasparenza all'immagine di sfondo consentirà al testo senza trasparenza di risaltare sullo sfondo;

Applicare un'ombra al testo : utilizzare un'ombra attorno ai caratteri di testo per dare loro più profondità;

Usa caratteri più audaci : i caratteri più audaci danno ai caratteri di testo un peso maggiore;

Contrasto del colore del testo con i colori dell'immagine : l'uso di colori contrastanti attirerà l'attenzione degli spettatori sul testo dell'intestazione; e

Utilizzare caratteri di dimensioni diverse per il testo importante : suddividere il testo con caratteri di dimensioni diverse consente di mettere in risalto le informazioni più importanti.

reattività

Pensi di aver finito? Non così in fretta. Devi assicurarti che l'immagine dell'intestazione abbia un bell'aspetto sia su desktop che su dispositivi mobili. Tieni a mente le seguenti considerazioni durante la progettazione dell'intestazione per evitare problemi:

Proporzioni : la larghezza e l'altezza dell'immagine influiscono sul suo aspetto sui dispositivi mobili (vedi nota sopra);

Ridimensionamento dell'immagine : assicurati che il testo e gli elementi importanti dell'immagine siano ancora leggibili quando un'immagine viene ridimensionata su dispositivi mobili; e

Scorrimento delle immagini: le immagini potrebbero aumentare la quantità di scorrimento che i visitatori devono eseguire sui dispositivi mobili, quindi assicurati che le informazioni importanti non richiedano molto scorrimento.

Ecco qua! I migliori consigli per progettare un'immagine di intestazione efficace. Hai domande sullo stile della tua campagna? Invia un messaggio al nostro team di supporto: [email protected].

Vuoi altri suggerimenti e idee di design? Scopri gli articoli della nostra serie Design.