In passato, una “intestazione” nel web design si riferiva tipicamente alla striscia sempre presente nella parte superiore dei siti web che conteneva il logo, la barra di navigazione, e forse alcuni dettagli di contatto e la barra di ricerca. Al giorno d’oggi, un “header” si riferisce più spesso all’intero spazio sopra la piega della home page.
A meno che qualcuno non abbia trovato il tuo sito attraverso un post di un blog condiviso sui social media o da una segnalazione su un altro sito, è molto probabile che vi entrerà attraverso la home page. E la prima cosa che vedranno è quello spazio privilegiato in alto, messo a nudo.
Ho scritto in precedenza su come i visitatori rispondono meglio al posizionamento prevedibile di alcuni elementi sul tuo sito web (come il logo e il CTA). Progettando un sito web con l’obiettivo di soddisfare le loro aspettative e migliorare il loro comfort rendendo l’esperienza un po’ più prevedibile, è possibile migliorare efficacemente i tassi di click-through e di conversione.
Ora pensa a quello spazio di intestazione sulla home page.
La maggior parte delle persone si affida alle home page per avere una visione a volo d’uccello di ciò che riguarda una società o un sito web, il che significa che non puoi permetterti di sprecare questa opportunità di soddisfare questa aspettativa. Naturalmente, il design dell’intestazione della tua home page può essere unico per il tuo marchio, ma gli elementi che si trovano al suo interno non dovrebbero esserlo. I visitatori si aspettano che lo scorrimento non sia necessario per scoprire ciò che un sito farà per loro. In sostanza, la tua intestazione dovrebbe essere una storia di 10 secondi che dimostra ai tuoi visitatori quale valore avrà il sito per loro.
Quindi, cosa farai con questo spazio per catturare l’interesse dei tuoi visitatori?
Parliamo di alcune delle tendenze nel design dell’intestazione nel 2017, cosa puoi fare per utilizzare questo bene immobile altamente visibile, e diamo un’occhiata ad alcuni esempi interessanti di intestazioni lungo la strada.
14 Trends in Header Web Design nel 2017
Non è che i tuoi visitatori non siano consapevoli della loro capacità di scorrere una pagina o di cliccare attraverso una navigazione per saperne di più sul marchio dietro un sito. Ma perché dovrebbero farlo? C’è abbastanza spazio nell’intestazione per fornire un messaggio succinto che dica loro tutto quello che devono sapere. E se 50 parole o meno non sono sufficienti, l’immagine di sfondo o il design comunicheranno il resto della storia.
Soprattutto, l’intestazione della home page può fare o rompere la prima impressione dei tuoi visitatori, ecco perché è così importante fare bene questa sezione.
Se stai lottando per trovare un modo per dare il via al tuo sito con il botto, forse troverai un po’ di ispirazione nelle seguenti tendenze di design dell’intestazione del 2017:
Oversized Hero Image
Grazie allo stile modulare di progettazione dei siti per essere reattivi, la maggior parte dei design sono ora suddivisi in blocchi e sezioni distinte. Questo stile di design si presta bene a queste immagini a tutta larghezza che popolano molti siti web.
Prendiamo il sito web di Cleverbird Creative, per esempio. Fa uso di un’immagine singolare e sorprendente sovrapposta a un testo semplice per dare il benvenuto ai visitatori. Non c’è dubbio su cosa stiano cercando qui: bellezza semplificata.
Immagini scorrevoli
Credo ci sia stato un tempo, non troppo lontano nel passato, in cui molti di noi stavano mettendo in discussione lo slider come elemento di design fattibile. Tuttavia, molti designer hanno fatto un ottimo lavoro utilizzandolo nelle intestazioni. Ci sono immagini scorrevoli che scorrono automaticamente da una bella immagine ad alta risoluzione alla successiva e ci sono quelle come quella di Pierre che pregano i visitatori di prendere il controllo di questa esperienza da soli.
Immagini di parallasse trasformative
Lo scorrimento parallelo è ancora in forte crescita e l’intestazione ha dimostrato di essere il posto perfetto per applicare questo tipo di “illusione” visiva ai progetti web. Quello che vedrete più di recente, tuttavia, è che i designer danno al loro scroll di parallasse un bordo trasformativo, probabilmente per sorprendere i visitatori con il risultato inaspettato dello scroll. L’agenzia australiana di UX design August ha fatto proprio questo con il suo header.
Sfondi video
Lo sfondo video è un’altra di quelle tendenze recenti che funziona davvero meglio quando applicato all’header della home page. Questo di Le 28 fa un ottimo lavoro per creare l’atmosfera del sito web del ristorante, mostrando video dalla parte anteriore e posteriore del locale.
Navigazione nascosta
Anche se si potrebbe sostenere che il menu hamburger appartiene ai siti web visti su dispositivi mobili (come originariamente inteso), c’è qualcosa da dire su ciò che questo tipo di minimalismo di navigazione fa per l’intestazione. Il sito di +rehabstudio è un bell’esempio di questo. Nascondendo la navigazione, la tua attenzione è immediatamente attratta dalle immagini eccitanti all’interno del simbolo più… e poi ti rendi conto che ci sono piccoli tocchi di animazione che lo circondano.
Mascotte del marchio
Se l’intestazione è il posto per introdurre i visitatori al tuo sito, quale modo migliore per iniziare se non presentando loro i “personaggi” che incontreranno lungo la strada? Se il tuo sito usa mascotte, come fa il sito di WPMU DEV, questo è il momento e il luogo per mostrarle.
Tipografia accattivante
C’è molto che può essere fatto per dare un lifting alla tipografia del tuo sito. Detto questo, a volte non si tratta di scegliere il carattere corsivo più fantasioso da sbattere in faccia alle persone. Se guardate l’esempio di Slack qui sopra, vedrete che è tutta una questione di dimensioni del carattere. Non c’è niente di veramente speciale nella tipografia che hanno scelto, ma è così pulita e chiara. Questo abbinato alla dimensione del messaggio principale è ciò che lo rende così accattivante.
Content First
Per i siti web che si concentrano principalmente sul fornire frotte di contenuti ai visitatori (pensa a qualsiasi sito di notizie o blog importante), una strategia content first per l’intestazione avrà più senso. Non c’è davvero alcun motivo di fare giri di parole qui. Le persone sono venute sul tuo sito per leggere i tuoi contenuti, non hanno bisogno di essere impantanate da ulteriori letture sulla home page, quindi puoi andare dritto al punto come fa Glamour.
Prodotti prima
Sulla stessa linea, i siti di e-commerce non hanno bisogno di preoccuparsi di usare l’intestazione per scrivere un titolo accattivante o fornire un video esplicativo sulla società. I visitatori sanno per cosa sono venuti sul sito, quindi si può entrare subito nel merito. A differenza dei fornitori di contenuti, tuttavia, i rivenditori di prodotti possono usare questo spazio privilegiato per mostrare i loro prodotti più venduti o le ultime uscite per attirare i visitatori in avanti come fa Apple.
CTA Front-and-Center
Può arrivare un momento in cui il tuo sito ha qualcosa di veramente speciale da mostrare ai visitatori, qualcosa che vuoi che loro scarichino o comprino. Ora, anche se questo potrebbe non essere l’attrazione principale del tuo sito, puoi usare l’intestazione temporaneamente o permanentemente per evidenziare questa speciale call-to-action come fa la blogger di Everywhereist con il suo libro.
Colori vivaci e texture
Forse una delle cose più belle uscite dal Material Design di Google è la nostra volontà di usare colori più vivaci, livelli e gradienti nel web design. Non devono più essere relegati ai pulsanti di call-to-action, ma possono essere usati per interi blocchi del sito, come fa Stripe con il suo header colorato e texturizzato.
Animazione
Non c’è assolutamente nulla di sbagliato nell’avere un header design statico in home page, specialmente se si vuole che l’attenzione sia attirata da un CTA o un video. Mantenetela semplice in modo che non ci siano distrazioni che impediscano ai visitatori di compiere l’azione che volete. Ma per i siti web che vogliono un modo interessante per condividere il loro messaggio con i lettori, le animazioni potrebbero essere una scelta saggia. Baianat usa una piccola animazione per condividere un certo numero di messaggi all’interno dello stesso spazio, il che evita di sembrare disordinato o sovraffollato di informazioni.
Design geometrico
Il web design geometrico è molto popolare in questo momento, perché si presta bene alle linee logiche e pulite necessarie per il responsive design. Quindi non è una sorpresa che stiamo vedendo più siti web, come quello di Perspective API, integrare elementi geometrici nel design dell’intestazione. Ce ne sono altri, come Stripe e WPMU DEV, che usano linee diagonali per creare un paesaggio visivo unico e inaspettato per i visitatori.
Sperimentale
Infine, veniamo ai design di header sperimentali. La chiave per questi di solito non è che l’intestazione sia stravagantemente strana e insolita. Sarebbe troppo distraente per i visitatori. Invece, il tuo obiettivo dovrebbe essere quello di creare qualche effetto inaspettato causato dal semplice movimento attraverso l’intestazione.
Prendi il design di Teamgeek, per esempio. Potete vedere che c’è qualcosa di “strano” nel logo e nel messaggio al centro della pagina, ma non è fino a quando non vi impegnate con esso che vi rendete conto che c’è un tocco speciale incorporato.
Involucro
Come potete vedere, ci sono una varietà di modi per progettare un’intestazione per un sito WordPress. Se guardate attentamente gli esempi di cui sopra, però, noterete che i designer sono stati molto strategici su quale stile di intestazione hanno usato e quali elementi sono stati inclusi al suo interno. Quando arriva il momento di progettare un’intestazione per il vostro prossimo progetto di sito web, considerate se avrete bisogno di quanto segue:
- Logo
- Tradizionale vs. nascosto
- Sezione di intestazione eroe vs. andare direttamente al contenuto
- Tagline o mission statement
- Informazioni di contatto
- Link ai social media
- Barra di ricerca
- Toggetto multilingue
- Carrello degli acquisti
- Mascotte del marchio
- Fotografia di repertorio contro Fotografia reale dell’azienda, delle persone o del prodotto
- Immagine statica vs. immagini scorrevoli vs. video di sfondo
- Video promozionale incorporato
- Pulsante di chiamata all’azione
- Modulo di contatto
- Barra di benvenuto
Si possono trovare anche altri elementi che appartengono a questa sezione dell’intestazione superiore della tua home page. Si riduce tutto a ciò che ha più senso per il vostro sito. In altre parole, quali elementi racconteranno la storia del tuo marchio, educheranno e coinvolgeranno il tuo pubblico fin dall’inizio, e ispireranno abbastanza fiducia da spingerlo ad andare avanti nel tuo sito?
Tag:
- design
- headers