Crea l'immagine dell'eroe perfetto usando il contrasto
Vuoi fare un'ottima prima impressione? Inizia con l'intestazione del tuo sito web. L'immagine che l'utente vede lascerà un'impressione, buona o cattiva, e determinerà se l'utente fa clic e continua, o lascia del tutto il sito.
Questo è un alto ordine per una singola immagine.
L'elemento chiave per creare un'immagine di eroe che attiri gli utenti e mantenerli in movimento nel design è il contrasto. (Seriamente, tutto risale alla teoria del design 101.) Una testa che presenta elementi contrastanti per dimensioni, colore e scala offre il giusto mix di interesse visivo e indica agli utenti come interagire con il design. Ecco alcuni modi per massimizzare il contrasto sul percorso verso la creazione di un'immagine di eroe perfetta.
Ritaglia Strategicamente
L'immagine dell'eroe non deve riempire la "prima" schermata sui dispositivi. Non farti prendere in quella trappola.
Ritaglia l'immagine per l'impatto in base al contenuto in esso. Considera gli altri elementi che sono importanti per gli utenti quando atterrano sulla pagina e creano alloggi anche per quelli. A seconda di questo framework, ciò potrebbe significare che l'immagine dell'eroe è ridimensionata per essere più grande o più piccola della finestra del browser (consideriamo solo più risoluzioni standard per argomento).
Prima di respingere l'idea, considerala per un momento.
- Un'immagine superficiale aiuterà a visualizzare in anteprima altri contenuti.
- Un'immagine insolitamente profonda incoraggerà gli utenti a scorrere di più.
- Qualsiasi forma insolita attirerà l'attenzione.
Considera l'animazione
Non è necessario creare un'esperienza cinematografica completa per aggiungere immagini in movimento all'intestazione dell'eroe. I più piccoli tocchi di movimento creano un contrasto sufficiente ad attirare l'attenzione.
Movimenti delicati, come l'aereo che attraversa l'immagine di Bar Z Winery, forniscono quell'elemento di contrasto senza essere schiaccianti. È una semplice alternativa ad alcune delle intestazioni video più appariscenti che sono diventate popolari. L'elemento di contrasto è duplice: il design è diverso rispetto a molti degli altri a cui gli utenti sono esposti e il movimento sottile è delizioso e piuttosto inaspettato.
D'altra parte, puoi andare all-in con animazione o video per un'immagine di eroe. Il movimento può essere particolarmente coinvolgente ed è un'opzione popolare. Usalo nello stesso modo in cui faresti un'immagine fissa quando si tratta di aggiungere effetti come la tipografia e gli inviti all'azione.
Pensa alla tipografia audace
La tipografia nell'immagine dell'eroe dovrebbe stupire l'utente. Deve essere audace, di impatto e memorabile.
Puoi crearlo sia con la selezione del carattere tipografico che con le parole sullo schermo. (No intestazioni Arial che dicono "Ciao" qui.)
La combinazione di stile lettering e messaggistica deve avere un impatto diretto e un appeal per l'utente. Hai sentito che le persone hanno un'attenzione più breve del pesce rosso; è il tuo lavoro catturarli con bellissime scritte e linguaggio.
Quando si parla di grassetto, gli elementi chiave di contrasto sono il colore e le dimensioni.
- Il tipo deve essere un colore che si distingue dallo sfondo. La luce su scuro o scuro su luce sono le migliori opzioni quando si tratta di leggibilità.
- Grassetto è una divagazione dalla norma. Prendi in considerazione la tipografia sovra o sottodimensionata sull'intestazione dell'eroe per l'impatto.
- Scegli parole con significato. A meno che non sia la chiave del tuo messaggio, non hai bisogno di un paragrafo nell'intestazione. Scegli alcune parole chiave che invogliano gli utenti a saperne di più. (Il numero di parole avrà un impatto su quanto possono essere grandi o piccole le lettere).
Scegli il colore con attenzione
Un'immagine dell'eroe potrebbe non essere affatto un'immagine. Potrebbe essere un blocco di colore o una texture fresca.
Scegli con attenzione un colore che ritrae il significato esatto che intendi. Un'intestazione di eroe dai colori audaci può impressionare gli utenti, ma il colore sbagliato può essere disattivato.
Le opzioni luminose e alla moda sono una buona alternativa. La cosa bella di questa opzione è che puoi mescolarlo di tanto in tanto cambiando semplicemente il colore dello sfondo. Una vasta gamma di colori può anche aiutare a rafforzare l'identità del brand, in particolare se ha una forte associazione di colori, e si presta alla leggibilità a causa della natura semplice del design.
Il colore è anche una considerazione importante quando viene utilizzato con un'altra immagine o video. Dalla tipografia colorata agli elementi dell'interfaccia utente colorati, è importante assicurarsi che le scelte cromatiche nell'immagine corrispondano al resto del design. Gran parte di ciò risale alla teoria dei colori e alla comprensione della ruota dei colori, in modo che le immagini e le scelte cromatiche interagiscano nel design.
Ma cosa succede se l'immagine dell'eroe e i colori del marchio non si adattano? Pensa in modo creativo a come utilizzare le parti nell'immagine dell'eroe insieme. Prova una sovrapposizione di colore sulla foto; considera in bianco e nero l'immagine o il testo. Sposta gli elementi colorati in una barra di navigazione bianca o nera per tenerli lontani dall'immagine reale. Quando l'immagine e i colori mandati non giocano bene, l'opzione migliore è eliminare o separare il colore.
Pensa agli spazi chiari e scuri
Contabilizzare gli spazi scuri e chiari in un'immagine potrebbe essere il compito più difficile quando si aggiungono elementi per creare contrasto in un'immagine di un eroe. In particolare con formati reattivi e punti di interruzione, il posizionamento del testo o dei pulsanti su un'immagine può cambiare e non è sempre possibile trovare una posizione eccellente.
Cosa deve fare un designer?
- Scegli un'altra immagine;
- optare per un diverso tipo di famiglia, dimensione o colore;
- aggiungere una sovrapposizione di colore;
- fare il meglio.
Ognuno di questi è un'opzione praticabile. L'opzione migliore può variare in base al progetto.
The Society Inc. La soluzione del cursore di immagine dell'eroe, con molta discrezione tra gli spazi chiari e quelli scuri, includeva un logo sovrapposto con testo bianco in una forma nera. Non toglie nulla alle immagini ed è molto meno invadente di quanto si possa pensare ascoltando l'idea. Il logo al centro aiuta anche a stabilire il marchio e l'identità visiva.
Includere un invito all'azione distinto
Non dimenticare il CTA!
Cosa vuoi che gli utenti facciano dopo aver guardato la tua immagine da eroe figo? Diglielo.
L'invito all'azione dovrebbe essere chiaro, che si tratti di compilare un modulo, scorrere per più contenuti o fare clic su un collegamento a un'altra pagina. Dovrebbe includere abbastanza definizione e contrasto in modo che sia facilmente visibile sullo sfondo dell'immagine. (Qual è il punto in un CTA se nessuno lo vede?)
Il colore e le dimensioni sono di particolare importanza qui. Il colore del pulsante (una cue CTA comune) dovrebbe distinguersi dal resto dell'immagine. Le parole che dicono agli utenti cosa devono fare devono essere eccezionalmente leggibili, semplici e chiare.
Conclusione
Il contrasto è una delle tecniche chiave per qualsiasi buon design. Crea separazione tra gli elementi e aiuta gli utenti a orientarsi verso l'azione desiderata.
Fai particolare attenzione a creare abbastanza contrasto durante la progettazione di un'immagine di un eroe in modo che gli utenti sappiano esattamente quali azioni intraprendere sulla pagina. Dai un'occhiata alle tue metriche e se quelle conversioni non stanno accadendo, ripensa la quantità di contrasto nel design. Potrebbe essere il momento di amplificarlo ancora di più.