Una hero image occupa la maggior parte dello spazio visibile sulla tua homepage ed è dunque un elemento fondamentale per la prima impressione del tuo brand. Scopri in questo articolo come creare hero image sorprendenti e persuasive per il tuo sito web.
Navigando tra i vari negozi online, potresti notare un elemento importante comune a tutti: una grande immagine in evidenza (o una serie di immagini) visualizzata in primo piano sulla homepage.
Tali immagini vengono chiamate hero image, banner o carosello. Indipendentemente dal nome, le hero image di un sito web rivestono un ruolo molto importante per qualunque azienda di ecommerce. Sono pensate per essere una prima impressione accattivante che cattura i visitatori del tuo sito web, invogliandoli a rimanere e a fare acquisti nel tuo negozio.
In questo articolo trovi tutte le informazioni sull'importanza delle hero image, oltre ad alcune best practice per il loro utilizzo. Scoprirai anche alcuni incredibili strumenti e risorse di grafica per aiutarti a creare hero image sorprendenti e persuasive per il tuo negozio online.
Cos'è una hero image?
Una hero image è una foto, video o illustrazione di grandi dimensioni che appare nella parte superiore di una pagina web. Le hero image possono comparire in diverse pagine di un sito, ma sono più spesso utilizzate nella homepage. Si trovano sotto l'header e la barra di navigazione in uno spazio noto come above the fold, quindi sono la prima cosa che cattura l'occhio di un visitatore prima che abbia fatto qualsiasi scroll.
Una hero image occupa la maggior parte dello spazio visibile della tua homepage. Per certi versi, svolge la stessa funzione di una landing page. Dalla hero image dipende la prima impressione del tuo brand, il che significa che può essere una risorsa molto preziosa per la tua attività, se usata correttamente.
Tipi di hero image per siti web
La tua hero image è un gancio visivo che dovrebbe attirare i visitatori. Dagli sfondi audaci ai caroselli interattivi, ogni tipo di hero image ha il potere di catturare l'attenzione e guidare i clienti più in profondità nel tuo brand.
Ecco alcuni esempi di hero image e le best practice per ogni opzione.
- Hero image a schermo intero
- Slideshow o immagini carosello
- Immagine statica con sovrapposizione di testo
- Sfondi video
1. Hero image a schermo intero
Occupando l'intero viewport, le immagini di sfondo a schermo intero creano un'esperienza immersiva che prepara il terreno per la narrazione del tuo brand.
Nell'esempio qui sotto, il rivenditore di moda Lois Jeans utilizza un'immagine drammatica ad alta risoluzione di un modello che indossa la sua ultima collezione per far sentire il visitatore parte di una sfilata esclusiva.
Consigli per immagini di sfondo a schermo intero efficaci:
- Assicurati di utilizzare immagini ad alta risoluzione per evitare la pixelazione.
- Abbina testo minimale e chiaro per mantenere la leggibilità.
- Centra il contenuto importante per evitare che venga oscurato su diverse dimensioni dello schermo.
L'obiettivo è creare un impatto ma non a scapito della chiarezza o dell'esperienza utente (UX).
2. Slideshow o immagini carosello
Gli slideshow o i caroselli sono perfetti per i brand con più offerte o highlight stagionali. Questo formato ti permette di raccontare più storie senza richiedere più spazio.
Ad esempio, in questo esempio dinamico di hero image, Lakme evidenzia le sue offerte Diwali tramite caroselli dei suoi prodotti cosmetici.
Best practice per i caroselli di hero image:
- Limita a 3-5 slide per evitare di sovraccaricare l'utente di informazioni.
- Progetta con navigazione controllata dall'utente. Ad esempio, fai riferimento agli otto punti nell'immagine sopra: gli utenti possono toccare ogni punto per far avanzare il carosello di immagini al proprio ritmo.
- Assicurati che ogni immagine e messaggio possa stare da solo senza bisogno di ulteriore contesto.
- Ottimizza la velocità di caricamento delle immagini per prevenire ritardi e ridurre il bounce rate dovuto a tempi di caricamento lenti.
3. Immagine statica con sovrapposizione di testo
Un'immagine statica con sovrapposizione di testo bilancia l'appeal visivo con messaggi chiari. Questo formato funziona benissimo per promozioni, nuovi arrivi o presentazioni del brand.
Ad esempio, questa panetteria utilizza un'immagine appetitosa di prodotti da forno assortiti con la call to action (CTA) "Ordina ora" all'interno del banner hero image.
4. Sfondi video
Gli sfondi video aggiungono un livello di movimento per coinvolgere i visitatori. Questi possono essere efficaci per brand lifestyle o servizi che beneficiano dello storytelling.
Ad esempio, il brand di abbigliamento Forever New utilizza silhouette femminili e movimento nei suoi video hero. Utilizzando il video come hero image del sito web, il brand è in grado di dimostrare il flusso e il movimento dei suoi vestiti in evidenza sui modelli.
Considerazioni chiave per i video hero della homepage:
- Utilizza loop brevi e senza interruzioni così i tuoi clienti non avranno un'esperienza di visualizzazione lunga o frammentata.
- Assicurati che il video completi piuttosto che distrarre dal contenuto chiave. Ad esempio, non limitarti a mostrare vendite e promozioni nei tuoi video: mostra i tuoi migliori prodotti in contesti lifestyle.
- Evita l'audio, poiché suoni inaspettati possono allontanare gli utenti. Le persone spesso ascoltano musica mentre fanno shopping online, e l'audio interrompe la loro esperienza.
Best practice per le hero image dei siti web
Una hero image perfetta attira i visitatori, comunica l'identità del tuo brand e alla fine spinge i tuoi clienti a seguire la tua CTA. Ma ci vuole più di una semplice bella immagine per fare la differenza. Dettagli come velocità di caricamento, qualità dell'immagine, leggibilità del testo e call to action contribuiscono tutti a quanto efficace può essere la prima impressione di una hero image.
Fai risaltare la tua hero image con queste best practice.
- Ottimizza per la velocità di caricamento
- Utilizza immagini di alta qualità
- Assicurati che il testo sia leggibile
- Includi una CTA forte
- Considera le dimensioni
- Costruisci per la responsività mobile
1. Ottimizza per la velocità di caricamento
La velocità della pagina è tutto. Anche la hero image più sorprendente può fallire se rallenta il tuo sito. Mantieni le tue hero image leggere comprimendole con strumenti online gratuiti.
Scegli tipi di file efficienti come WebP invece di JPEG o PNG per bilanciare alta qualità e dimensioni ridotte del file. Quando necessario, utilizza il lazy loading per le immagini sotto la piega per dare priorità a ciò che conta di più: far arrivare la tua hero image davanti al tuo pubblico velocemente.
2. Utilizza immagini di alta qualità
La tua hero image è la tua stretta di mano visiva: falla contare. Immagini di bassa qualità e pixelate segnalano mancanza di professionalità, il che può far perdere fiducia nel tuo brand agli utenti. Investi in immagini ad alta risoluzione che si allineino con la personalità del tuo brand. Ad esempio, i brand di lusso prosperano con scatti ricchi e dettagliati che irradiano eleganza, mentre le aziende eco-friendly potrebbero favorire scene naturali e nitide.
Beardbrand eccelle con immagini nitide e sorprendenti che enfatizzano il suo ethos premium.
3. Assicurati che il testo sia leggibile
Il testo sovrapposto dovrebbe amplificare, non oscurare, il tuo messaggio. Uno sfondo troppo pieno può seppellire le tue parole, quindi usa contrasto, ombre o sovrapposizioni semi-trasparenti per mantenere il testo leggibile.
Ad esempio, utilizzare parole bianche in grassetto su immagini scure assicura la leggibilità.
4. Includi una CTA forte
La tua CTA dovrebbe essere concisa e convincente, spingendo i visitatori a interagire dandogli una direzione chiara. Alcune CTA comuni per l'ecommerce includono: "Acquista ora", "Esplora" o "Inizia".
La CTA della hero image di Gymshark dice "Shop Women" direttamente sotto una descrizione dei nuovi lanci della stagione. È semplice, audace e indica chiaramente ai visitatori esattamente quale categoria di prodotti staranno acquistando.
Ricorda: il posizionamento è importante. Assicurati che la CTA sia visibile, contrasti con lo sfondo e non competa con altri elementi del web design.
5. Considera le dimensioni
Una hero image d'impatto appare benissimo su qualsiasi dimensione dello schermo, da un grande desktop a un dispositivo mobile. Ma questo richiede un design responsive ponderato che mantenga gli elementi essenziali, come l'immagine principale, il testo e la CTA, centrati e visibili.
Le dimensioni ideali per le hero image sono:
- Desktop: 1.600 pixel di larghezza per 500 pixel di altezza con un rapporto pixel 16:9
- Mobile: 800 pixel di larghezza per 1.200 pixel di altezza
Evita di posizionare informazioni importanti vicino ai bordi, poiché potrebbero essere tagliate su schermi più piccoli. Un buon approccio è progettare all'interno di "zone sicure" dove i dettagli chiave rimangono intatti su vari dispositivi.
Ad esempio, il design della hero image per il sito web di Dash and Dot mette sia i modelli che le CTA al centro dello schermo. In questo modo, la versione mobile non taglia il contesto critico.
6. Costruisci per la responsività mobile
Con il traffico mobile che rappresenta oltre la metà del traffico web mondiale, ottimizzare la tua hero image per schermi più piccoli non è negoziabile. La responsività mobile significa più che semplicemente rimpicciolire un'immagine: si tratta di assicurarsi che il testo rimanga leggibile, le CTA siano facilmente toccabili e le immagini mantengano la loro chiarezza e appeal sui dispositivi mobili.
In questo esempio, il sito web Dash and Dot presenta la stessa hero image della versione desktop sopra, eccetto che ritagliata perfettamente per un piccolo schermo. Ottimizzata per i browser mobili, la hero image si carica anche con Wi-Fi e crea un inizio senza interruzioni al percorso di navigazione.
Come creare hero image per il tuo negozio online
Creare una hero image ben progettata e che catturi l'attenzione aiuta ad attirare i nuovi visitatori del tuo sito web e a spingerli a esplorare ulteriormente le sezioni di prodotto.
Segui questa guida step by step per creare una hero image per il tuo negozio online.
- Utilizza immagini di alta qualità per i tuoi prodotti
- Crea una grafica con un tool di design online
- Aggiungi una CTA altamente pertinente
- Utilizza un video come parte della tua hero image
- Testa diverse hero image
- Aggiorna regolarmente la tua hero image
1. Utilizza immagini di alta qualità per i tuoi prodotti
Attira nuovi clienti con foto sorprendenti dei tuoi prodotti o del tuo negozio fisico. Puoi utilizzare fotografie professionali da banca immagine, la tua fotografia di prodotto o assumere un fotografo per scattare foto di prodotto di alta qualità, se rientra nel tuo budget.
Ecco un ottimo esempio di hero image da un negozio online di piante. Qualsiasi amante delle piante che visita questo sito sarà incuriosito dal verde sorprendente della sua hero image mostrato contro uno sfondo bianco netto.
2. Crea una grafica con un tool di design online
Rendi più accattivanti le foto dei tuoi prodotti o crea una hero image utilizzando elementi grafici. Trova un tool di design online come Canva, Visme o Adobe Cloud e metti insieme una grafica accattivante.
Ecco un ottimo esempio di come potrebbe apparire: Detour Coffee ha creato un ritaglio del suo prodotto e lo ha posizionato su una grafica con colori e forme audaci per attirare l'attenzione.
Detour
3. Aggiungi una CTA altamente pertinente
Nessuna hero image è completa senza una call to action. Assicurati che il tuo pulsante CTA corrisponda al design generale in modo che risalti ma non sembri fuori posto. Ecco un ottimo esempio di come potrebbe apparire:
Il pulsante CTA di Horne si abbina alla sua hero image del sito web e all'estetica del brand.
4. Utilizza un video come parte della tua hero image
Un altro ottimo modo per catturare l'attenzione è creare un video o una GIF in loop e senza audio per la tua hero image. Ad esempio, il sito web Nomz ha diversi videoclip come sua hero image. I video attirano i visitatori del sito web, facendoli rimanere sulla pagina più a lungo mentre guardano l'intera scena svolgersi.
Nomz cattura i visitatori con video come sua hero image del sito web.
5. Testa diverse hero image
Per rendere la tua hero image indimenticabile, devi sapere cosa funziona davvero. Il testing non è solo un compito una tantum: è come affini ed evolvi la tua strategia visiva per massimizzare le conversioni.
Esegui test A/B
Il modo più veloce per imparare quale hero image risuona con i visitatori è eseguire un test A/B. Prova a mettere due diverse hero image l'una contro l'altra, magari una presenta un primo piano del prodotto, mentre l'altra lo mostra in un contesto lifestyle. O sperimenta con modifiche sottili come un diverso posizionamento della CTA o un tono di colore più caldo. Traccia metriche reali come tassi di click-through (CTR), coinvolgimento e tempo sulla pagina. Le intuizioni che ottieni non riguardano solo "cosa appare bello": rivelano cosa converte e mantiene i tuoi clienti interessati.
Raccogli feedback del pubblico
Dove i test A/B ti danno numeri, il feedback dei clienti ti dà la storia dietro quelle statistiche. Chiedi direttamente al tuo pubblico: cosa li ha attirati? Cosa non ha funzionato? Forse stanno desiderando più scatti lifestyle o vogliono viste più ravvicinate dei dettagli del prodotto.
Utilizza sondaggi veloci o un semplice prompt di feedback post-visita per catturare queste intuizioni. Abbina questo input qualitativo con i tuoi risultati quantitativi dei test A/B, e avrai una ricetta per una hero image che connette, coinvolge e fa tornare le persone per di più.
6. Aggiorna regolarmente la tua hero image
Anche se potresti amare la hero image che hai, dovrai aggiornarla di tanto in tanto per presentare ai clienti di ritorno ancora più prodotti e offerte.
Potresti anche considerare di creare uno slider per la hero image così puoi condividere più CTA contemporaneamente. Questa è un'ottima idea quando vuoi promuovere una festività o evento imminente.
Ottimizza il tuo negozio con una hero image sorprendente
Una hero image sorprendente e ottimizzata cattura l'attenzione, trasmette il messaggio del tuo brand e invita le persone a esplorare ulteriormente.
Ecco alcuni consigli chiave per sviluppare la hero image del tuo sito web:
- Scegli un'immagine che risuoni: Seleziona un'immagine personalizzata di alta qualità o una grafica on-brand che rifletta la personalità del tuo brand e parli direttamente al tuo pubblico di riferimento.
- Abbina i colori del tuo brand: Rinforza il riconoscimento del brand allineando la hero image con la tua palette di colori per un aspetto coeso e professionale.
- Abbina con un titolo forte e una CTA: Mantieni il testo conciso, lasciando che la hero image prenda il centro della scena mentre guidi i visitatori con un titolo e una call-to-action.
- Ottimizza UI/UX per tutti i dispositivi: Utilizza il design web responsive per assicurarti che l'immagine appaia nitida su tutti i dispositivi, con testo e CTA che rimangano chiari e cliccabili su mobile e desktop.
- Mantieni veloce la velocità di caricamento: Comprimi le immagini senza perdere qualità e utilizza formati come WebP per mantenere il tuo sito che si carica velocemente e SEO-friendly.
- Testa e affina regolarmente: Esegui test A/B con diverse hero image per vedere quale genera più coinvolgimento e affina basandoti sul comportamento dei visitatori.
Continua a leggere
- Come aprire un ecommerce partendo da zero in 3 giorni- guida completa + caso studio
- Come creare un brand di abbigliamento di successo in 11 step
- 10 suggerimenti per ottimizzare foto e immagini sui motori di ricerca
- Come creare un logo di successo (da soli o con l’aiuto di un designer)
- Come fotografare il cibo- guida alla food photography
- Instagram- 13 strumenti essenziali per il social media marketing
- Fotografare scarpe per ecommerce- 7 regole per non sbagliare
- Lookbook- come usare foto lifestyle di alta qualità per incrementare le vendite
- Come fare da soli le foto per ecommerce- guida pratica su come fotografare prodotti
Hero image: domande frequenti
Cosa dovrei considerare per una hero image del sito web?
Una hero image del sito web dovrebbe riflettere l'identità e il messaggio del tuo brand, convincendo i visitatori a rimanere più a lungo. Immagini di alta qualità che risuonano con il tuo pubblico possono creare una forte prima impressione e migliorare il coinvolgimento degli utenti.
Come faccio ad aggiungere una hero image al mio sito web?
Se utilizzi un tema di Shopify, puoi aggiungere la hero image nell'editor del tema. Accedi al tuo negozio Shopify. Poi, vai su Negozio online > Temi e seleziona "Personalizza" accanto al tuo tema attuale.
La maggior parte dei temi del sito web ha spazio per un banner per impostazione predefinita, ma se devi aggiungerlo, seleziona "Aggiungi sezione" in fondo al tuo menu di destra, quindi seleziona l'elemento della sezione hero. Questo elemento può essere etichettato come "hero image", "immagine banner" o "slideshow", a seconda del tema che stai utilizzando.
Nota anche che, a differenza delle immagini di prodotto e delle immagini del blog in linea, le hero image del sito web non si trasferiscono tra i temi se ridisegni il tuo sito con un nuovo tema. Le hero image devono essere aggiunte direttamente in ogni tema separatamente e appariranno sulla pagina solo se le aggiungi al tuo tema attuale.
Che dimensioni deve avere la hero image di un sito web?
Puoi aggiungere file PNG e JPEG fino a 20 megabyte, ma è una buona idea mantenere la dimensione del file il più bassa possibile per garantire tempi di caricamento della pagina ragionevoli. Le dimensioni esatte delle immagini dipenderanno dal tema che stai utilizzando, ma tipicamente, le hero image dovrebbero essere almeno 2048 pixel di larghezza per mostrare in risoluzione nitida quando visualizzate a schermo intero.
Tieni presente che i temi sono responsive, il che significa che lo spazio riservato per le hero image cambia a seconda delle dimensioni dello schermo su cui viene visualizzato il sito web. Assicurati di lasciare spazio intorno alla cornice della tua immagine per tenere conto delle parti che potrebbero essere tagliate.
Vuoi anche evitare di mettere il tuo copy e CTA direttamente nell'immagine. Invece, usa il tuo editor del tema per sovrapporre copy e pulsanti CTA che fluttueranno davanti alla tua immagine e si adatteranno indipendentemente dalla tua immagine.
Qual è lo scopo di una hero image in un sito web?
Le hero image del sito web servono a una vasta gamma di scopi, ma generalmente sono ottime per qualsiasi annuncio che vuoi fare al maggior numero di visitatori possibile. Gli scopi comuni includono annunciare vendite, evidenziare i valori del brand o annunciare nuovi prodotti.
Cosa deve includere una hero image?
Una hero image del sito web deve contenere un'immagine grande e che attira l'attenzione insieme a copy conciso e convincente e una forte call to action.
Come inserire una hero image in CSS?
Per inserire una hero image in CSS, utilizza la proprietà background-image sul selettore della sezione hero, posizionando il percorso dell'immagine in url(). Imposta background-size: cover per riempire l'area e background-position: center per mantenerla visivamente bilanciata. Questo mantiene la hero image responsive e rifinita su diversi dispositivi.
