Le immagini degli eroi sono ciò che i creatori di siti Web usano spesso per salutare i visitatori del loro sito Web in un formato attraente.
Se te lo sei mai chiesto" cos'è l'immagine di un eroe? ", Sei nel posto giusto. In questo articolo, daremo un'occhiata all'argomento e a come puoi creare bellissime immagini di eroi con potenti effetti visivi.
Un'immagine eroe è il termine utilizzato dai creatori di siti Web per descrivere il contenuto sovradimensionato nella parte superiore di una pagina Web.
Il ruolo di un'immagine eroica è quello di accogliere il tuo visitatore non appena incontra la tua azienda o organizzazione. L'abbondanza di tipi di immagini di eroe nel toolkit di creazione web offre tanti motivi per includere un'immagine di eroe nel tuo sito web.
Comprendiamo i principali vantaggi di fare questo, e perché?
Che cos'è l'immagine di un eroe?
Abbracciando la virtù di una "buona prima impressione", le immagini degli eroi hanno in genere una o più delle seguenti caratteristiche:
- Un'immagine di alta qualità
- Un video accattivante
- Un cursore di immagine o una giostra multimediale multimedia
- Illustrazione animata o statica
- Intestazioni e descrizioni accanto o davanti al contenuto visivo
In termini di stile, i dettagli di design comuni che vedrai applicati alle immagini degli eroi includono:
- Immagini di sfondo o video con sovrapposizioni di sfondo
- Posizionamento fisso o appiccicoso
- Il puntamento influisce sulla modifica della trasparenza o della sovrapposizione
- Elementi di contrasto che differenziano l'immagine dall'intestazione sopra o dal contenuto successivo
La novità delle immagini degli eroi nel web design è che da un lato stai lavorando con uno spazio molto specifico e definito sulla pagina web. D'altra parte, le scelte di stile, effetti e tecniche da utilizzare durante la progettazione di questa parte del contenuto della tua pagina sono assolutamente infinite.
Perché dovresti usare un'immagine da eroe?
Quando il design e la funzionalità della tua immagine di eroe sono di alto livello, ottieni automaticamente la credibilità e la fiducia degli utenti. La tua immagine di eroe e il suo contenuto di eroe circostante rappresentano spesso la tua prima opportunità per trasmettere il punto di forza unico del tuo organizzazione e il principale punto di contatto dell'utente per la conversione.
Quando cerchi di attivare determinati comportamenti degli utenti, un'immagine di eroe potente e di prim'ordine che faccia una forte prima impressione sui tuoi visitatori è il modo migliore per iniziare.
Puoi fare una prima impressione duratura
Le prime impressioni sono importanti in molti ambiti della vita, ma soprattutto quando si tratta di come gli utenti si relazionano all'estetica del sito web.
I risultati di esperti in interazione uomo-macchina (HCI) e visualizzazione a Ricerca Google attestano l'influenza delle immagini degli eroi sul successo di un sito web:
Questo studio, " Il ruolo della complessità visiva e della prototipicità nelle prime impressioni del sito web : lavorare sulla comprensione dei giudizi estetici ”, Studia come la complessità visiva e la prototipicità influenzino il design di un sito Web e le prime impressioni dei suoi utenti.
Gli autori hanno mostrato 119 screenshot reali dal sito Web ai partecipanti allo studio e hanno scoperto che la complessità visiva e la prototipicità influenzano la percezione estetica dell'utente nelle prime 50 immagini della mostra, e talvolta anche entro 17 ms.
Come creatori di siti web, la nostra conclusione è abbastanza semplice: l'immagine dell'eroe che scegliamo e il modo in cui la presentiamo sulla nostra pagina influenzano il sentimento e il comportamento degli utenti in modo sostanziale.
Otterrai il massimo dai tuoi contenuti above the fold
La sezione “above the fold” di una pagina web può essere definita in termini semplici: contenuto che riempie lo schermo / appare sopra il bordo inferiore della finestra del browser web dopo il caricamento della pagina page. Se il contenuto richiede lo scorrimento per essere visto, significa che si trova “under the fold”.
Il concetto di "above the fold" ha le sue origini nel design di stampa e nell'editoria, molto prima dell'era dei media digitali. Sappiamo tutti cosa vuol dire notare immediatamente qualcosa nella metà superiore di una prima pagina, ed è anche sicuro dire che il contenuto della prima pagina è spesso ciò che ci fa decidere se comprare o meno un giornale, o semplicemente fermarci in edicola.
Questo è esattamente il motivo per cui i tuoi contenuti above the fold possono essere un grosso problema per il successo del tuo sito web.
Cosa intendiamo?
Se un visitatore del sito web è confuso dai tuoi contenuti e dalle immagini above the fold, lascerà rapidamente il tuo sito web. Se la tua immagine da eroe e il suo ambiente above the fold sono chiari, coinvolgenti e ben rappresentativi della tua proposta di valore, sarà più propenso a restare.
In definitiva, più investi nell'immagine e nel contenuto della tua sezione degli eroi, meno è probabile che gli utenti escano rapidamente.
Non dimenticare il Responsive Design
Tieni presente che la posizione di una piega dello schermo è soggettiva alle dimensioni dello schermo del dispositivo. Questa è una considerazione importante nel responsive design, poiché i contenuti above the fold devono essere personalizzati e configurati in modo applicabile a più dimensioni del dispositivo.
I web designer e gli sviluppatori usano spesso punti di interruzione specifici del dispositivo per garantire questa reattività. Questo ti dà il controllo completo sull'adattabilità del design del tuo sito web alle dimensioni dello schermo pertinenti ed evita l'aspetto o l'impatto compromessi della tua immagine da protagonista.
Dichiara la tua proposta di valore senza sovraccarico di informazioni
Potresti avere familiarità con il concetto di "sovraccarico di informazioniNella progettazione di siti Web e l'esperienza dell'utente : Vogliamo evitare di utilizzare troppi contenuti, in particolare contenuti scritti, quando rappresentiamo il nostro marchio e il nostro valore aziendale.
In questo senso, l'uso di un'immagine, illustrazione o video vale 1 parole. La messa a punto di immagini di branding efficaci catturerà l'intera storia in un unico mezzo visivo. Invece di verbalizzare la tua storia e la tua proposta di branding, potresti essere in grado di alleggerire il carico cognitivo del tuo utente in modo semplice e intuitivo.
Lo screenshot qui sopra è tratto da Costruzione Millbrookbrook, un'impresa di costruzioni con sede a Perth specializzata in "edilizia residenziale con finiture di alto livello e attenzione ai dettagli". Per il loro sito Web Elementor, l'immagine dell'eroe sulla homepage fa un uso perfetto della sua interfaccia "above the fold". La fotografia accattivante e nitida di una casa moderna e felice e una piscina all'aperto creano vibrazioni positive e rilassanti.
Facendo un ulteriore passo avanti, le scelte di stile dell'immagine di sfondo a tutta altezza e le dimensioni di una "coperta" indicano l'abilità robusta dell'azienda per la creazione di lussuose proprietà residenziali. La proposta di valore è chiara come l'acqua di una piscina e gli utenti assorbono comodamente tutte le informazioni necessarie.
Le tue immagini eroiche possono aiutarti a convertire i lead
I touchpoint accattivanti e visibili sono un ingrediente fondamentale per un flusso utente di conversione-riproduzione. Questo è il motivo per cui la relazione tra l'invito all'azione della sezione dell'eroe e la tua stessa immagine dell'eroe può creare o distruggere gli obiettivi di creazione del tuo sito web.
Lascia che i tuoi messaggi CTA dicano " Registrati ora "," Per saperne di più "," Contattaci », ecc., la tua immagine da eroe deve essere coordinata in modo trasparente su tutti i fronti: visibilità, messaggistica, combinazione di colori, aspetto, ecc.
Conversazioni credibili ed efficaci con potenziali clienti si basano su un'atmosfera confortevole e naturale; immagini visivamente piacevoli sono il modo migliore per raggiungere questo obiettivo.
Questo è esattamente ciò che vediamo sul sito Web di Elementor creato da Caricatura STL, un team di artisti del fumetto che forniscono servizi di intrattenimento per eventi. Il titolo animato (testo dell'eroe) raffigura i clienti felici nelle loro immagini degli eroi, mostrando ciò che gli artisti dei cartoni animati forniscono a ogni persona.
Quindi, una volta che ti sei rimboccato le maniche e hai iniziato a dedicarti alla praticità, cosa succede nel processo di decisione del tipo di immagine dell'eroe da usare?
Esploriamo i quattro diversi tipi di immagini degli eroi e come valutare quale si adatta meglio al tuo sito web.
# 1 Immagine dell'eroe del prodotto
Un'immagine dell'eroe del prodotto è un'immagine grande e alta définition del prodotto del marchio. Queste immagini possono essere presentate in modo statico o in movimento/in azione, purché permettano di visualizzare la proposta di valore del prodotto.
I modi popolari tra i web designer per mostrare e personalizzare le immagini degli eroi dei loro prodotti possono includere:
- Un esempio dettagliato/istantanea di un singolo prodotto, come si vede sopra sul sito web dell'azienda abbonamento australiano avo lover.
- Screenshot dell'interfaccia di un prodotto digitale, ad esempio una dashboard.
Le immagini dell'eroe del prodotto si trovano solitamente sui siti Web die-Commerce (ma non esclusivamente). I potenziali acquirenti si aspettano di vedere esempi di prodotti reali, che supportano il processo decisionale informato sull'idoneità del negozio per le loro esigenze di acquisto.
Gli amanti di Avo hanno utilizzato Elementor per creare il loro sito Web di e-commerce, che i loro clienti utilizzano per acquistare abbonamenti settimanali di avocado freschi consegnati a casa loro.
La base di clienti di Avo lover è un mercato di nicchia in un'area di interesse ristretta, quindi la scelta dell'immagine dell'eroe del prodotto ha perfettamente senso. I potenziali abbonati sono appassionati di avocado; vedere una fotografia ravvicinata e intricata dei prodotti è esattamente ciò che stanno cercando di vedere.
Migliori pratiche:
- Investi nella qualità delle immagini di sfondo
Sia che l'immagine di sfondo sia una fotografia, un video, un'illustrazione, ecc., il file immagine dovrebbe essere il più leggero possibile, con una risoluzione cristallina.
- Attenzione ai livelli di contrasto
Se aggiungi del testo davanti all'immagine della sezione eroe (o a un componente di qualsiasi tipo), assicurati che il contrasto tra gli elementi del sito web sia forte e facilmente visibile. È qui che le sovrapposizioni di sfondo e gli effetti filtro possono essere estremamente utili.
# 2 Immagine dell'eroe del cliente
Il seguente tipo di immagine dell'eroe utilizzata dalle aziende online adotta un approccio alternativo per mostrare il proprio valore aggiunto: mostrare al cliente l'utilizzo del prodotto. Questa prospettiva è un modo strategico per entrare in empatia con i tuoi visitatori, dimostrando succintamente che comprendi il loro punto dolente e puoi soddisfare le loro esigenze.
Il video sopra è tratto dal sito Elementor creato da Alessandro Fischer, un personal trainer con sede a Stuggart che fornisce una gamma di servizi relativi alla salute e al fitness.
L'immagine dell'eroe del cliente di Alexander mostra più di un cliente soddisfatto che gode di uno stile di vita sano e in forma. L'immagine dell'eroe fa un ulteriore passo avanti presentando un video in cui il suo cliente si lega e si connette con i propri cari.
Migliori pratiche:
- Condividi i tuoi casi d'uso e l'esperienza del cliente
Differenzia il tuo prodotto mostrando il suo caso d'uso più dominante. Un'immagine che trasmette i tuoi obiettivi di business e il valore mostra come il visitatore trarrà vantaggio dalla tua offerta unica.
- Mettiti in relazione con il tuo pubblico di destinazione
Assicurati che il tuo pubblico di destinazione sia preso in considerazione quando selezioni il tipo di persona da inserire nella tua immagine. Scegli un'immagine che comunichi la tua comprensione del settore e la tua capacità di deliziare i tuoi clienti.
# 3 Immagine dell'eroe fondatore
Un'immagine dell'eroe fondatore è una grande immagine del fondatore del proprietario dell'attività, inserita nella sezione dell'eroe per salutare il visitatore del sito web.
Le immagini degli eroi fondatori vengono spesso utilizzate nei siti Web di portfolio per liberi professionisti, imprenditori come psicologi, truccatori o musicisti, come mostrato sul Sito web di Elementor di Jasmine Cain sopra.
La più grande virtù dell'immagine di un eroe fondatore è che dà un volto a un nome; collega il visitatore del sito web al fornitore di servizi, creando una piacevole dinamica tra i due individui.
La scelta delle immagini per l'immagine dell'eroe fondatore dovrebbe essere gestita con cura. Con un sacco di opzioni tra cui scegliere, che si riduce a:
cosa trasmetterà il messaggio del tuo marchio nel modo più forte possibile?
È una foto del fondatore che guarda dritto nell'obiettivo e sorride, o forse guarda in una direzione diversa?
Oppure sarebbe più adatta una foto sincera dell'imprenditore che lavora sodo?
Migliori pratiche:
- Attenzione alle taglie e alle dimensioni
Usa un'immagine (o video) chiara e di buone dimensioni che mostri ai visitatori i dettagli esatti che devono vedere. Se necessario, puoi concentrarti su aree più grandi delle tue immagini ritagliandole e rimuovendo i contenuti meno importanti.
- Concentrati su ciò che la tua immagine dovrebbe trasmettere
Il ruolo dello sfondo dovrebbe essere quello di concentrarsi sulla persona di fronte ad esso, non il contrario. Le immagini dell'eroe fondatore di maggior impatto mostreranno il proprietario dell'azienda sorridente, che implica la sua passione per mantenere felici i clienti.
# 4 Immagine dell'eroe non contestuale
Le immagini degli eroi non contestuali sono, come suggerisce il nome, sequenze che mostrano qualcosa di apparentemente "non correlato" al proprietario del prodotto o dell'attività. Lo scopo di un'immagine di un eroe non contestuale è di impressionare il visitatore attraverso l'associazione visiva o un messaggio subliminale. La visualizzazione dell'immagine non contestuale mostra all'utente qual è il prodotto o il marchio, ma in modo indiretto.
Questa tecnica viene utilizzata, ad esempio, nell'esempio sopra dal sito Web di Elementor costruito dalla società di marketing digitale Tecnologia AP, con sede in Oklahoma. Il sito Web dell'azienda utilizza un'immagine di sfondo ampia e chiara che mostra un'angolazione unica dei grattacieli di Oklahoma City.
Questa fotografia rappresenta la proposta di valore dell'azienda, come affermato nel testo dell'eroe del sito Web: Costruisci la tua attività e guardala crescere, alta quanto le torri di uffici più alte della città.
Non appena l'occhio umano vede le strutture fisiche che dominano il cielo, capisce che questi professionisti del marketing stanno lavorando per far decollare le aziende, verso l'alto.
Migliori pratiche:
- Assicurati che i visitatori capiscano perché l'immagine è rilevante
Sebbene non mostri una visuale diretta del tuo prodotto stesso, assicurati che il collegamento del valore del tuo prodotto con la tua immagine dell'eroe non contestuale sia ancora facile da identificare. Gli utenti non dovrebbero aver bisogno di perdere tempo a pensare alla sua rilevanza.
- Crea un chiaro collegamento tra l'immagine dell'eroe e il testo dell'eroe
Il testo dell'eroe che metti insieme alla tua immagine dovrebbe riguardare direttamente il suo contenuto visivo. È una necessità, anche se richiede diverse iterazioni del tuo testo e la scelta della dicitura.
- Crea uno schema di progettazione coerente
I colori che scegli per i testi dei pulsanti e gli sfondi, le intestazioni o le descrizioni dovrebbero coordinarsi con l'immagine o la grafica dell'eroe. Questo vale anche per gli accenti cliccabili sul tuo sito web:
gli elementi del menu di navigazione, il logo, ecc...
Sappiamo tutti quanto sia importante un linguaggio visivo coerente per il prestigio del nostro sito Web, la presenza del nostro marchio e la credibilità professionale. È qui che le guide allo stile di design possono essere davvero utili, soprattutto per assicurarsi che le immagini dei tuoi eroi siano allineate con il design del tuo sito web.
Come testare la tua immagine da eroe: i metodi che ci piacciono
Una volta che inizi a sperimentare diverse opzioni per la tua immagine di eroe, puoi valutare immediatamente quale opzione genera il maggior coinvolgimento e ottenere informazioni sul design più efficace e, infine, attenersi a quello.
Ecco alcuni metodi di test indispensabili, facili da configurare e che forniscono una vasta conoscenza per assicurarti di utilizzare la migliore immagine dell'eroe possibile.
A/B Metti alla prova la tua immagine da eroe
Il test A/B richiede che il designer crei due o più opzioni per la sezione dell'eroe (che si tratti di due versioni dei titoli e della loro copia, dell'immagine dell'eroe stessa, della sezione del layout, delle dimensioni dei caratteri o qualsiasi altra cosa ti venga in mente) - Dipende completamente da te.
Immagina di aver deciso di utilizzare una modalità di fusione quando gli utenti passano il mouse sull'immagine del tuo eroe, ma non sai quale modalità migliorerà di più l'esperienza dell'utente.
Eseguire un Prova A/B tra due diverse opzioni di modalità (ci sono 13 opzioni di modalità di fusione, dopotutto), ti consente di provare più di una modalità per vedere quale ottiene il maggior numero di passaggi, clic e, in definitiva, più coinvolgimento.
Uno dei passaggi più comuni e importanti nel test A / B della tua sezione eroe è anche testare almeno due opzioni del pulsante CTA - per identificare quale pulsante ottiene il maggior numero di conversioni.
Nello specifico, testare il colore di un pulsante CTA è sempre un'esperienza utile che permette di capire quale colore del pulsante attrae e coinvolge maggiormente gli utenti. Il test A/B del colore dei pulsanti è molto popolare tra i web designer perché è veloce e facile da eseguire e difficilmente richiede risorse di progettazione aggiuntive.
Usa gli strumenti della mappa termica per scoprire il comportamento degli utenti
Gli strumenti Heatmap identificano e analizzano i luoghi in cui gli utenti fanno clic su una pagina web. Questi strumenti consentono ai proprietari di siti Web e pagine di destinazione di vedere esattamente come gli utenti navigano attivamente nei contenuti. Ciò si ottiene una volta che lo strumento identifica se gli utenti interagiscono o meno con elementi chiave (e come), come collegamenti, pulsanti, opzioni e, naturalmente, CTA.
Ecco alcune informazioni che i proprietari di siti Web possono ottenere utilizzando gli strumenti della mappa di calore:
- Gli elementi non cliccabili distraggono gli utenti.
- Le dimensioni dei pulsanti sono troppo grandi o troppo piccole.
- I colori dei pulsanti non sono visibili.
Sii l'eroe del tuo sito web
Le tendenze dei siti web sono in continua evoluzione, aggiungendo nuove funzionalità alle possibilità di web design. È sempre importante mantenere la sezione degli eroi in prima linea nelle considerazioni sul design, assicurandosi che raggiunga sempre il suo potenziale nel mostrare il tuo sito Web alle folle.
Ottieni Elementor Pro ora!
Conclusione
Ecco ! Questo è tutto per questo articolo che ti mostra come creare un'immagine da eroe. Se hai dubbi su come arrivarci ffacci sapere in commentaires.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
