INDIETRO

Hero image

Molto spesso quando apriamo un sito internet ci troviamo di fronte a una grande immagine che riempe lo schermo nella sua interezza, oppure lo riempe solo in orzzontale lasciando intravedere atri contenuti nella parte sottostante, spesso con dei testi sovrapposti, queste sono le hero images.

Il concetto è quello di attirare l'attenzione dell'utente sfruttando l'immagine di grandi dimensioni e di trasmettere un messaggio non solo attraverso la grafica dell'immagine o la fotografia, ma anche grazie a un claim che andremo a sovrapporre all'immagine o a incastrare all'interno dell'immagine stessa.

Tutti sappiamo quanto sia importante il primo impatto a livello visivo che un sito ci trasmette, può fare la differenza tra il proseguire nella navigazione oppure abbandonare il sito e trovare quello che stiamo cercando altrove, la hero image ha il compito di trattenere l'utente e invogliarlo a vedere il resto del sito, è fondamentale per realizzare una home page efficace.

Nel web design la loro importanza è sempre in aumento, persino gli e-commerce che tendevano a mostrare in home page le immagini delle categorie in primo piano hanno iniziato a sfruttare le hero images per avere un impatto visivo maggiore e comunicare un messaggio in modo più forte, relegando le immagini delle categorie in secondo piano o addirittura eliminandole. Pensate se entrando in un negozio online la prima cosa che vedete è un'immagine di altissima qualità con sopra un testo che richiama uno sconto su tutti i prodotti, quanto meno sarete curiosi di vedere che prodotti ci sono e se i prezzi sono davvero scontati, questo è il compito delle hero images.

Come deve essere una hero image?

Sembra quasi scontato ma non è così, la hero image deve essere nitida e di alta qualità. L'errore che a volte vediamo nei siti web è proprio la poca importanza data alla qualità, ad esempio utilizzando immagini larghe meno di 1.920 px, questo comporterà un allargamento forzato dell'immagine oltre le sue misure naturali in tutti i monitor in HD (oggi anche i portatili hanno tutti schermi da 1.920 px) riducendone notevolmente la qualità.

Se ad esempio volete utilizzare un'immagine o una fotografia che è larga solo 1.600 px dovrete limitare la larghezza massima a questa misura in modo che non venga forzata alla larghezza dei monitor più larghi, l'effetto sarà comunque bello e raggiungerete lo stesso il vostro scopo.

Non utilizziamo immagini 'rubate' ini giro per la rete ma scarichiamole o da banche dati a pagamento (dove avremo una gamma enorme tra cui scegliere) o anche dai numerosi siti che offrono immagini libere da diritti completamente gratuite, anche in questo caso la qualità sarà ottima e avremo un discreto numero di immagini e fotografie a disposizione.

Ricordiamoci sempre che se vogliamo sovrapporre un testo la scelta dovrà ricadere su immagini pocho chiassose con parti neutre e sfondi che contrastino con il colore di testo che vogliamo sovrapporre, nel caso il testo si perda possiamo inserire un livello al 30% (più o meno dipende dallo sfondo della fotografia) del colore in contrasto col testo, usando il bianco per tutti i colori di testo tendenti allo scuro e il nero per tutti i colori di testo tendenti al chiaro.

Infine, ma non meno importante, dovrai fare attenzione al peso. Le hero images sono uno dei motivi principali del rallentamento nel caricare le pagine. Per loro natura sono grandi e ovviamente più grandi sono più pesano. Dovrai fare molta attenzione perché ad esempio un aumento dei tempi di caricamento di circa un secondo può far perdere un 20% di visitatori. Per farlo avrai a disposizione tantissimi strumenti, da tool gratuiti online a programmi di grafica installati sul tuo computer, l'importante è trovare il miglior compromesso tra leggerezza e qualità.

Hero image nei siti web

Cosa deve rappresentare una hero image?

Anche questo sembra scontato ma non sempre lo è: dovrà rappresentare ciò che vendi o che vuoi comunicare, non per forza in modo diretto, anche indiretto ma il tema dovrà essere quello. Se ad esempio vendiamo creme solari va benissimo una persona che prende il sole in spiaggia o una persona che sotto il sole si spalma la crema, non andrà sicuramente bene la foto di una persona sotto la pioggia.

Si può giocare anche con foto emozionali, ad esempio se vendete appartamenti potrebbe andar bene anche la foto di una famiglia felice in mezzo a un prato, la casa non ci sarà ma l'idea di una famiglia che sorride e gioca nel prato è scontato che dovrà rientrare in una casa e parte delal loro felicità arriverà comunque dal fatto di avere una casa in cui tornare. Sarà poi il messaggio ad evidenziare questo punto.

Il soggetto dell'immagine è fondamentale, dipenderà del tipo di pubblico e dal tema trattato, inoltre occorrerà fare qualche prova per vedere cosa converte di più, non è così scontato che il soggetto che ci sembra più adatto sia più coinvolgente per il pubblico.

Per avere sempre il miglior soggetto possibile l'ideale sarebbe scattare le foto o creare le immagini autonomamente, se però non è possibile la scelta può ricadere sulle risorse offerte dalla rete, magari personalizzandole.

Quando devo utilizzare una hero image?

Non c'è una regola, va utilizzata solo quando riteniamo che possa aiutarci a livello visivo e comunicativo. Oggi potremmo azzardare che il 90% dei siti web in circolazione (se non di più) ne fanno uso, siamo talmente abituati a vederle che ci sembra quasi impossibile realizzare un sito web senza l'ausilio di una grande immagine subito sotto il menu di navigazione della home page.

Programmi open source come Wordpress la inseriscono sempre nei loro layout e anche questo ha incrementato il loro utilizzo. A volte si tratta di un'immagine statica, quasai sempre di uno slideshow di immagini e a volte anche di un video. Tutavia quest'ultimo per i blocchi all'avvio automatico di browser e soprattutto delle piattaforme mobile è un po' più problematico nell'utilizzo.

Se troviamo la giusta immagine o meglio la creiamo per avere qualcosa di originale e impattante, scriviamo il giusto messaggio e magari la animiamo un po' o seguendo il movimento del mouse o alternandola in modo originale con altre immagini è sicuramente consigliata. Oltretutto il fatto che tutti la utilizzino nelle proprie pagine web ci farebbe sembrare un po' poveri rispetto alla media dei siti web.

Tuttavia restiamo dell'idea che esistano dei casi dove si può evitare, siti con layout più originali, meno convenzionali, più minimal magari legati a settori artigianali o artistici, ma è tutto molto soggettivo, non esiste una regola assoluta.

Come deve essere il testo sulla hero image?

Breve. Il testo non dovrà essere lungo per diversi motivi:

Esteticamente sarebbe poco gradevole
Coprirebbe troppo l'immagine vanificando il messaggio che trasmette l'immagine stessa
Se abbiamo uno slideshow e un testo per ogni immagine non si riuscirebbe a leggere tutto prima che l'immagine cambi
Non ha senso sovracaricare di informazioni l'immagine, il messaggio deve essere semplice, diretto e unico

A livello visivo il testo dovrà essere leggibile, ovvero dovrà avere un buon contrasto con lo sfondo, dovrà esserer su una parte dell'immagine abbastanza neutra e con i colori sia di fondo che degli elementi in netto contrasto col colore che sceglieremo per il testo. Se questo non fosse possibile potremmo mettere un livello di colore (di solito bianco per i testi scuri e nero per i testi chiari) tra il testo e l'immagine, tenendolo con una trasparenza del 20/30% circa (dipenderà da quanto ne serve perché il testo sia ben leggibile).

Hero image nel web design

Conclusioni

Dopo aver letto l'articolo pensate di dover inserire una hero image nel vostro sito? Probabilmente si o meglio, probabilmente l'avrete già da tempo. Infatti trovare siti web senza hero image è raro al giorno d'oggi.

La quasi totalità dei siti internet le utilizza e potremmo dire con buoni risultati, un po' perché in effetti ci trasmettono un messaggio in modo molto più forte e deciso, in modo visuale e come sappiamo un'immagine vale di più di mille parole, un po' perché essendo abituat ia vederle ovunque la sua assenza farebbe sembrare il web design del nostro sito un po' più povero.