Ecco le migliori proposte grafiche per realizzare un Hero Header, una soluzione creativa in apertura del sito internet, che faccia dire “wow!” ai vostri visitatori.
Ultimamente il trend del web design più contemporaneo prevede una home page a tutto schermo. Specie per un sito web che si occupa di comunicazione e/o servizi in genere, un forte impatto visivo è fondamentale; un’immagine o un video di apertura grande quanto tutto lo schermo è senz’altro una fantastica presentazione del nostro Brand, che comunica forte il messaggio e genera emozione nel visitatore.
Così come per le immagini fullscreen, anche per il video sarà importante calibrare la luminosità e la colorimetria; per non inficiare la leggibilità del testi sovrastanti, questi dovranno essere sempre ben contrastati allo sfondo animato, durante tutta l’animazione. Solitamente l’audio in un video di background è sconsigliato, poiché distrae il visitatore dal concept che viene espresso dai messaggi posti al di sopra del video stesso. Si utilizza perciò un breve loop di uno spezzone video muto, che si ripete ad libitum.
Tecnicamente, si frutta la parte alta del sito web (l’header, appunto) per una presentazione d’effetto, lasciando libero il visitatore di scorrere in basso la pagina o navigare le altre pagine per scoprire i vari contenuti. Come quando si fa bella mostra dei prodotti migliori, in vetrina, per invogliare ad entrare nel negozio: il nostro Hero Header sarà la vetrina spettacolare e accattivante, il vostro sito/negozio soddisferà le varie esigenze del visitatore attratto.
I migliori 10 progetti-copertina per il vostro sito web
Foto e video a tutto schermo
Una foto evocativa a tutto schermo. Proponiamo di “nascondere” anche il menù di navigazione, per massimizzare il senso di maestosità della presentazione. Il menù tornerà visibile facendo lo scroll della pagina verso il basso, con un bell’effetto di apparizione. Un messaggio personalizzato invita a fare click e in popup apparirà un video in finestra. Molto creativo l’effetto di scorrimento delle slide di presentazione.
La seconda slide mostra un video (muto) a tutto schermo con, in sovrimpressione, testi concept e un bottone di apertura di una finestra popup con link e testi di approfondimento.
La terza slide è tecnicamente come la precedente, con la sostituzione del video in background con un’immagine a fullscreen.
Foto e video con effetto 3D
Ancora un video in background con autoplay (avvio automatico), che fa da sfondo ai testi e alle immagini (scontornate). Si aggiunge però un gradevole e innovativo effetto di parallasse, che simula un’interazione 3D; questo effetto su un video di sfondo a tutto schermo è davvero molto bello. L’effetto 3d è presente anche nella seconda slide di questa presentazione a tutto schermo per il vostro sito internet; con un sapiente uso dello scontorno e scomposizione della foto, si riesce ad ottenere un gradevole effetto di tridimensionalità, servendosi esclusivamente di immagini fotografiche standard.
Un modo interessante di presentare i contenuti…viva il 3d!
Video + Audio fullscreen
Quando la colonna sonora è importante, c’è l’esigenza di presentare un video promozionale comprensivo dell’audio. Per non far partire il video e l’audio al caricamento della pagina, poiché, come dicevamo, potrebbe disturbare, proponiamo una soluzione con un immagine statica (un frame del video?) a tutto schermo, che fa da background ai testi informativi e ad un pulsante che avvia il video a tutto schermo. Il video è così pienamente fruibile (compreso l’audio!) in tutta le sue caratteristiche e peculiarità. Essendo l’utente a deciderne la visione e gustandolo “in esclusiva”, senza messaggi informativi sovrapposti ad esso, il risultato è molto gradevole.
Nell’esempio abbiamo inserito un video YouTube in 4K. Apprezzerete l’efficacia comunicativa di un video così qualitativo.
Video + Audio in finestra
Questa è un’altra soluzione di visualizzazione del video con audio, che si avvia (a comando) in finestra a pop up, oscurando lo sfondo per focalizzare l’attenzione sul video stesso.
Presentazione interattiva
La parte alta del sito può essere impiegata come presentazione interattiva dei prodotti e servizi; ecco allora un modo un po’ diverso di mostrare il vostro sito all’apertura dell’home page…a tutto schermo!
Header panoramico a larghezza 100%
Ecco un header a piena larghezza panoramico, che non riempie tutto lo schermo in altezza. In questa soluzione il menù è visibile in alto nella pagina. L’effetto 3D di parallasse e immagini e video che scorrono su device riprodotti, iPhone, iPad e MacBook, rendono l’interazione molto realistica e godibile per il visitatore.
Carosello con anteprime (immagini e video)
Qui il focus è sul carosello delle anteprime disposte in sequenza davanti agli occhi del visitatore. Possono essere mostrate immagini o video animati che partono in automatico quando si scorre l’anteprima o, nel caso sia lo scorrimento automatico, quando viene presentato il video. Questo può essere video caricato in self-hosting (ovvero sullo spazio hosting del sito stesso) o da YouTube o Vimeo, in modo da soddisfare qualsiasi esigenza in merito di presentazioni video. Per rispettare l’autonomia di scelta del visitatore, si consiglia di non “imporre” un video sonorizzato come prima slide; la riproduzione dell’audio in apertura del sito web potrebbe disturbare.
Tutto il sito in presentazione
In questo e quelli che seguono non utilizzeremo l’Hero Header in maniera standard, nel senso stretto del significato, ovvero quella che abbiamo fin qui proposto. Qui la bella presentazione fullscreen viene utilizzata per mostrare al 100% l’intero contenuto della pagina (o del sito internet). È un po’ come mostrare tutto il sito nella presentazione a pieno schermo, massimizzando l’effetto di dinamismo e coinvolgimento. La resa finale è infatti quella di una sequenza di slide/pagine, composte da immagini e testo che si compongono in movimento, con gradevoli effetti di animazione come in quelle belle presentazioni professionali realizzate in PowerPoint o Keynote.
Tutto il sito fullscreen
Qui, la presentazione dell’intero sito, mostra immagini fotografiche e anche video (vedi ultima slide) a tutto schermo, come background dei contenuti testuali. Elegante e con uno stile moderno il risultato finale.
Anche le immagini si muovono
Qui le tonalità sono più scure, ma un raffinato dinamismo è comunque garantito dalle azzeccate immagini e video a tutto schermo che fanno da “sostegno” ai contenuti testuali. Da notare che anche le immagini si muovono: un semplice effetto di zoom out (in animazione) è stato applicato alle immagini full screen.
Una case history ovvero il racconto di un esempio specifico realmente accaduto
Per esemplificare e spiegare meglio il senso di queste “immagini vetrina” di apertura per il sito web, come hai visto negli esempi.
Ok per le immagini al 100% dello schermo. Ma come testo in sovrimpressione cosa scriviamo? Il nome del progetto con un link ad esso non lo trovo efficace.
Selezionerei le immagini (di progetti specifici), con in sovrimpressione dei testi (magari un titolo e un sottotitolo) che richiamino dei servizi (e non i singoli progetti).
Ad esempio, l’immagine allegata con titolo:
Filmati per l’Arte e la Cultura
Sottotitolo:
Quando il Museo diventa Spettacolo
Aggiungerei un link alla categoria Filmati per l’arte e la cultura.
In testa alle singole categorie, inserirei una descrizione generale di quello che la categoria rappresenta e contiene, ovvero ciò che si intende per (in questo caso) Filmati per l’arte e la cultura; ad esempio: “Realizzazione di riprese video, animazioni 3D e montaggio per un uso didattico ecc…”
All’interno della categoria metterei i progetti con le descrizioni puntuali e, se ce ne sono, altri progetti (anche senza descrizione, per accelerare i tempi di sviluppo).
N.B. Un singolo progetto può appartenere e diverse categorie. Nell’esempio ho infatti utilizzato un’immagine della macro-categoria Eventi per richiamare un progetto di Comunicazione Visiva.
Così mi sembra più flessibile e accattivante.
Utilizzerei queste voci come categorie:
- COMUNICAZIONE VISIVA – CROSS MEDIA
- Film Corporate
- Filmati per l’arte e la cultura
- Filmati industriali
- Filmati prodotto
- Filmati emozionali
- Filmati per la formazione
- Infografica
- Multimedialità e interattività
- Digital e viral video
- Web marketing
- Web design
- Troupe ENG
- Post Produzione
- Fotografia
- EVENT COMMUNICATION
- Ideazione creativa del Concept
- Progettazione 3D
- Speech support
- Sigle multischermo
- Effetti speciali
- Videoproiezione
- Amplificazione
- Luci
- Scenografie
- Road show
- Convention
- Congressi
- Allestimenti mostre
- 3D mapping
Ovviamente non è detto che, all’inizio, siano tutte attive. Ma in futuro dovrebbero esserlo. Metterei in home solo una selezione di immagini, con i testi e/o le immagini più suggestive e “importanti” per il target del vostro business.
Se vi piace l’idea, si dovranno selezionare le top ten delle immagini, indicare il titolo e sottotitolo e il link alla categoria, con una descrizione di questa. Utilizzeremo le 10 immagini per “coprire” 10 servizi/categorie.
Tutti i progetti finiranno in portfolio con le descrizioni che mi hai già mandato.
Spero di esser stato chiaro. Fatemi sapere.
Immagini e video a tutto schermo, considerazioni finali
Le 10 proposte di Hero Header coprono un ventaglio molto ampio di possibili utilizzi. Il risultato e per tutti decisamente accattivante. Scegliete le giuste immagini e magari un video che vi rappresenti al meglio. Ora la difficoltà rimarrà una sola: quale presentazione scegliere per il vostro sito tra le tipologie proposte. Voi quale preferite?
Abbiamo sviluppato questo tema WordPress affinché il vostro sito risulti bello ed elegante a vedersi e facilmente navigabile su tutti i dispositivi; il layout delle pagine si adatterà automaticamente per fornire una visualizzazione ottimale dei contenuti, sia che si utilizzi un pc desktop (con un monitor di qualsiasi risoluzione), sia un tablet o uno smartphone.
Hero Header utilizza CSS media query, con diverse impostazioni di layout per le diverse dimensioni dello schermo. Non sarà più necessario fare uno zoom o scorrere orizzontalmente la pagina del vostro sito sul telefono cellulare. Se siete alla ricerca di un layout semplice e professionale che è già predisposto per un utilizzo anche attraverso Mobile e Tablet, come Hero Header, 
