L’header gioca un ruolo chiave nel design di un sito web e stabilisce il tono per ogni altro suo aspetto. Specialmente ora nell’era del minimalismo trionfante, quando le varie caramelle per gli occhi vengono spesso espulse in modo spietato ma giusto. A volte non c’è nient’altro da catturare per l’occhio, quindi il ruolo del design dell’intestazione di un sito web è aumentato significativamente.
I web designer si impegnano molto nella progettazione di questa parte di un sito web con creatività e produttività in mente. Secondo Google, ci vogliono solo 50 ms per formare un’opinione su un sito web e alcune opinioni si sviluppano entro l’incredibile 17 ms. La conoscenza dei consumatori con un marchio inizia qui.
Per imparare come progettare un header di un sito web che funzioni, e quali elementi dovrebbe includere, continuate a leggere, ci saranno degli esempi.
“La vita è una prima impressione. Hai una sola possibilità.
Fa che sia eterna.”
– J.R. Rim
Un’intestazione di sito web è la sezione superiore della pagina web. In passato, la gente intendeva le intestazioni come strisce strette nella parte superiore dei siti web che contenevano un logo, una chiamata all’azione e informazioni di contatto. Ma nel design moderno, l’intero spazio sopra la piega della homepage è considerato un’intestazione.
Essendo la parte strategica della pagina che le persone vedono nei primi secondi di caricamento di un sito web, un’intestazione agisce come una sorta di invito. Dovrebbe fornire informazioni di base su un sito in modo che gli utenti possano capire cosa offre in pochi secondi.
Alcuni designer fanno intestazioni separate per varie sezioni del sito. Per esempio, si può fare una grande intestazione per una homepage e lasciare una piccola striscia per le altre pagine. Ma mantienila coerente. Il design dell’intestazione sulla pagina interna dovrebbe essere una versione abbreviata dell’intestazione sulla pagina principale. Questa è una buona pratica di design del sito web.
- Cosa include l’intestazione di un sito web?
- Le migliori pratiche di design dell’intestazione del sito
- Dimensione dell’intestazione
- Gerarchia visiva
- Testata fissa (appiccicosa)
- Il messaggio trasmesso da un header
- Immagini rilevanti
- Video o animazione
- Una call to action ben progettata
- Best fonts for website headers
- Simple header design
- Navigazione nascosta (menu hamburger)
- Mobile header design
- In conclusione
Cosa include l’intestazione di un sito web?
Il compito dell’intestazione è quello di dare agli utenti le risposte alle domande di base: quale marchio è rappresentato, quali beni e servizi sono offerti, come entrare in contatto con i dipendenti dell’azienda, ci sono offerte in corso, e così via.
Oltre a questo, rappresenta anche la qualità e persino l’identità di un sito web. Se l’intestazione evoca una buona risposta emotiva, e lo spettatore sente che ha qualcosa di valore, allora avete superato il test iniziale.
Gli elementi principali dell’intestazione di un sito web di solito sono:
- logo o identificatore del marchio
- chiamata all’azione
- testo o titolo
- elementi di navigazione
- ricerca.
Non è necessario aggiungerli tutti insieme. È necessario trovare un equilibrio tra l’abbondanza di informazioni e la loro disposizione armoniosa. Usa solo i dati di cui hai bisogno, sovraccaricare un’intestazione non si rivelerebbe vantaggioso, per quanto importanti possano sembrare tutti i link.
Anche lasciare l’intestazione troppo vuota non è una buona idea. Un utente che non riesce a capire la tua interfaccia in pochi secondi, molto probabilmente se ne andrà e non tornerà. Una cattiva intestazione può allontanare i visitatori verso un altro sito con un contenuto inferiore.
Nel design minimalista delle intestazioni, vengono presentati solo i link alle sezioni principali del sito e il logo della società. Questa tecnica è particolarmente utile quando si progettano le landing page.
Le migliori pratiche di design dell’intestazione del sito
Niente limita la tua creatività quando si tratta di progettare la sezione dell’intestazione. L’intestazione del sito è un’area aperta a un ampio campo di decisioni di design creativo, che dovrebbe essere memorabile, conciso e utile.
Passiamo in rassegna i punti principali.
Dimensione dell’intestazione
Non esiste una risposta definitiva alla domanda su quali dimensioni dovrebbe avere l’immagine dell’intestazione di un sito web. Alcune risorse cercano di fornire serie di cifre precise, ma oggi uno degli aspetti più difficili della costruzione di un sito web è garantire l’efficacia di ogni dimensione dello schermo. E anche se due schermi sono della stessa dimensione, la risoluzione potrebbe essere diversa, quindi gli utenti non vedranno la stessa cosa.
Quindi non fissatevi sul concetto di pixel esatto, meglio seguire semplici regole di buon senso.
L’intestazione dovrebbe essere di un’altezza tale da non interferire con la percezione del contenuto. Per le risorse informative, un’intestazione piccola sarebbe un’ottima scelta, mentre per le atterrazioni l’intestazione può essere più grande.
Nel caso di intestazioni voluminose, è meglio lasciare un po’ di spazio sotto la piega in modo che un utente abbia un’idea di cosa c’è dopo nella pagina e inizi a scorrere.
Gerarchia visiva
Nielsen Norman Group ha formulato per la prima volta la sua teoria sul modello a F della lettura sul web nel 2006, e non ha perso la sua rilevanza fino ad oggi.
Una persona che si trova su un nuovo sito sconosciuto inizia sempre il suo viaggio visivo dall’angolo superiore sinistro dello schermo. E se non trova lì le informazioni attese, allora la pagina sarà automaticamente percepita come complicata e non standard, richiedendo troppo sforzo per capirla.
Logo. Un altro studio condotto dalla NN/g ha scoperto che gli utenti ricorderebbero molto più facilmente i marchi i cui loghi sono posizionati a sinistra rispetto al centro o alla parte destra.
Se avete un logo di forma rotonda, allora è accettabile posizionarlo al centro dello schermo, anche se la sua efficacia sarà comunque inferiore rispetto a quelli posizionati a sinistra.
Navigazione. Fate molta attenzione a non ingombrare troppo questa sezione del sito web. Troppi link sopraffanno i visitatori. A volte un intero rifacimento della struttura di un sito web potrebbe essere necessario per liberare un po’ di spazio per le categorie più importanti.
Fate in modo che i visitatori capiscano facilmente dove si trovano e come trovare la loro strada. Usa gli effetti hover per guidare gli utenti durante la navigazione.
Call to action. Implementa i principi della gerarchia visiva per evidenziare naturalmente una CTA.
Testata fissa (appiccicosa)
Le barre di navigazione persistenti, o in altre parole “testate appiccicose”, significa che la navigazione ti segue nella pagina mentre scorri. Questo è ora uno standard di web design.
Fate l’intestazione fissa se non viola il vostro concetto generale di design. È una buona idea sia per il design desktop che per quello mobile:
- Siti di e-commerce – il carrello è sempre davanti all’utente.
- Siti di servizio – il numero di telefono o una CTA sono costantemente in mostra.
Le intestazioni fisse migliorano l’esperienza del cliente, mantenendo gli utenti orientati e dando loro più controllo.
Il messaggio trasmesso da un header
Prima di progettare un header, considera lo stile generale del sito web e il suo scopo principale.
Se si tratta di un sito web promozionale destinato alla presentazione di un prodotto, il design dell’intestazione può contenere link alle sezioni principali, combinato con una grande immagine eroe sulla prima schermata poiché lo scopo principale di un sito web di questo tipo è quello di presentare efficacemente il prodotto. Nel caso di siti di e-commerce o di business, la situazione potrebbe essere diversa. Un utente ha bisogno di navigare facilmente, conoscere le ultime offerte, come contattare rapidamente il manager e dove vedere gli ordini che ha già fatto, quindi in questo caso, l’intestazione può essere più concisa lasciando spazio ad altre categorie.
Ci sono diversi messaggi possibili che un’intestazione può trasmettere:
- sollecitare un consumatore a fare qualcosa
- lavorare sulla costruzione della fiducia
- incoraggiare un visitatore a saperne di più
- essere divertente, ecc.
La scelta dipende dallo scopo di un particolare sito web.
Immagini rilevanti
L’immagine nell’intestazione dovrebbe trasmettere direttamente informazioni sul business. Per esempio, se rappresenta il servizio di consegna di cibo, allora l’immagine potrebbe raffigurare un corriere ordinato con cibo esteticamente attraente. In generale, il visitatore, avendo visto il tuo sito, dovrebbe voler comprare qualcosa da te.
Foto di alta qualità. La fotografia è uno strumento potente per i web designer. Può raccontare una storia, evocare un’emozione e motivare i tuoi visitatori a scorrere oltre. Per i siti con immagini di grande impatto, prova a fare un’intestazione trasparente. Mostra meglio le immagini, mantenendo i link principali.
Immagini scorrevoli. Se hai diverse grandi foto che rappresentano l’attività del sito, vai avanti! Gli utenti possono scorrere una serie di squisite immagini ad alta risoluzione.
Illustrazioni. Le immagini di intestazione per i siti web devono colpire la giusta corda e stabilire una connessione personale. Meglio se un’immagine è distinta e facilmente riconoscibile anche se tagliata dall’intestazione del sito web. Puoi ottenerlo capitalizzando la tendenza odierna per le illustrazioni.
Video o animazione
Non focalizzare la tua attenzione solo su immagini statiche.
L’aggiunta di video è tra le idee di intestazione di siti web più efficienti. Se possibile, provate ad aggiungere un materiale video tematico in un’intestazione. Molti siti web lo usano per catturare il pubblico mentre presentano la loro azienda o prodotto nel miglior modo possibile.
Un altro modo per rendere il tuo design ancora più attraente, vivido e memorabile è quello di aggiungere l’animazione. Può rendere le intestazioni del sito web davvero cool. Se stai cercando una pagina web interattiva che coinvolga gli spettatori, l’animazione è una grande alternativa.
Una call to action ben progettata
Nella progettazione di un’intestazione web, il designer aggiunge alcuni elementi call to action come “log-in”, “sign-in”, “get in touch”, ecc. Per attirare l’attenzione dell’utente in modo che si traduca nell’azione necessaria, il pulsante dovrebbe contenere una scritta comprensibile per il cliente ed essere evidente tra gli altri contenuti.
Un posizionamento di call to action in una posizione strategicamente significativa è un’opportunità perfetta per sollecitare gli utenti ad agire fin dall’inizio, aumentando così il tuo tasso di conversione. Alcune CTA possono essere utilizzate per un periodo di tempo per promuovere offerte speciali, altre hanno una presenza a lungo termine.
Best fonts for website headers
Prima di tutto, il cliente percepisce i nomi delle sezioni e le informazioni fornite dall’azienda: dettagli di contatto, offerte interessanti. Pertanto, è necessario scegliere caratteri chiari e leggibili che non compromettano la percezione e possano essere compresi a prima vista.
Per le intestazioni di homepage di grandi dimensioni, è possibile utilizzare alcuni elementi tipografici in grassetto e fantasiosi per catturare l’attenzione degli utenti, altrimenti, è meglio non scegliere caratteri di fantasia che possono rivelarsi difficili da leggere.
Simple header design
Mantenendo un’intestazione ben definita e ordinata, i tuoi visitatori avranno l’impressione che tu non cerchi di opprimerli con le tue offerte. Un’intestazione creativa per un sito web può avere un aspetto molto semplice.
Questa è una soluzione sempre più usata per il design di siti web. Il menu hamburger è una piccola icona di tre strisce, che visualizza il menu completo quando viene cliccato. Questa tecnica è utilizzata dai designer quando hanno bisogno di concentrarsi sulla schermata principale.
Dal punto di usabilità del sito, questa è una buona opzione. Un tale menu proviene dal design mobile ed è già familiare agli utenti. L’hamburger è adatto ai siti promozionali, dove l’enfasi principale è sulla presentazione di alta qualità del prodotto utilizzando foto o video. Per i negozi online, questa opzione potrebbe essere meno adatta, poiché è importante per il cliente avere un carrello, prodotti selezionati e un campo di ricerca in accesso rapido.
Mobile header design
L’header deve essere visualizzato correttamente non solo sulla versione desktop del sito web ma anche su quella mobile. Quindi deve essere reattiva e in grado di adattarsi bene a qualsiasi dispositivo mobile.
L’uso quotidiano dei dispositivi mobili ha portato a design di siti web che sembrano orientati al mobile anche nelle loro incarnazioni desktop. Per esempio, l’implementazione di grandi immagini eroe e menu hamburger ha le sue origini nel design mobile.
In conclusione
Il sito web è presentato dal suo header. È come un biglietto da visita unico. Pertanto, quando si progetta un sito web, prestare la massima attenzione all’intestazione.
E un’ultima buona pratica del design dell’intestazione di un sito web: fare modifiche regolari per mantenere il tuo sito web fresco e aggiornato. Usate alcune intuizioni da questo articolo.
Si può fare.