Web Designer Freelance Milano ・ Yunikon Design

  • Chi sono
  • Servizi
    • Identità per Brand
    • Siti Web su misura
  • Consulenze
    • Brand Styling
    • Performance sito web
  • Web Designer Freelance Milano e Online · Yunikon Design
  • Newsletter
  • Blog
    • Branding
    • Web Design
    • Palette Colori
    • Risorse e How-To
    • Vita da freelance
  • Contatti
Come amplificare l’identità del tuo sito attraverso l’header

Come amplificare l’identità del tuo sito attraverso l’header

Web Design/ 30 Giugno 2014

La prima impressione è quella che conta

Uno studio afferma che un visitatore impiega due decimi di secondo per per farsi un’idea del tuo sito, quando vi accede per la prima volta, e che impiega altri due secondi e mezzo per decidere quale parte del tuo blog influenza maggiormente la sua prima impressione.

Ora, qual è la porzione di sito che ogni visitatore vede quando accede in un sito? Esatto, l’header. Capisci ora perché deve essere perfetta?

Se sei alle prese con la creazione dell’header ricorda che deve:

  • essere professionale: che non vuol dire noioso. Il tuo potrebbe pure essere un mom blog dalla grafica giocosa e frizzante ma risultare comunque professionale, perché in grado di trasmettere fiducia verso te e i tuoi contenuti.
  • rappresentare chi sei e cosa fai: è fondamentale. L’header, insieme al resto del design del tuo blog, deve rappresentare chi sei ed essere in linea con i contenuti che proponi.
  • attrarre il tuo target: il compito dell’header è dare una chiara idea dei contenuti del tuo blog. Devi solleticare la curiosità dei tuoi visitatori ma soprattutto, essere in grado di ammaliare il tuo target di riferimento.

Tagline

La tagline è una breve frase che riassume i valori di un brand. Più è breve, emozionale ed empatico e più rimarrà impresso nella mente o nel cuore delle persone. Nella grafica la tagline di solito accompagna il logo. In un blog possiamo trovarlo a destra o sotto al logo. E’ fondamentale? Se il dominio fa già capire quali sono i contenuti trattati nel tuo blog puoi anche ometterlo, ma se il dominio non fa chiarezza sui contenuti è da includere.

Ecco alcuni esempi:

Social Media

jon-loomer

 

Travel

too-happy-to-be-homesick

 

Copywriting

penna-blu
my-social-web

 

Web Design

lea-verou

Se ti stai chiedendo perché non ho ancora una tagline, ecco: ci sto ancora pensando (non ne uscirò mai…).

Elementi dell’header

Il consiglio che ti posso dare è sempre quello pensare di realizzare un header che sia facilmente navigabile, quindi prediligi la chiarezza all’opulenza (se non sei sicuro, meglio un elemento in meno che uno in più, come sempre).

Gli elementi di un header sono due:

  • il logo: che per convenzione sta sempre in alto a sinistra del tuo sito. Eventualmente puoi metterlo al centro, se hai pensato ad un design del genere (con le voci di menu a sinistra e a destra del logo: a me non fa impazzire, ma lo tollero, via…). In questo caso non ti serve essere creativo, inventandoti di mettere il logo a destra: predisporre il logo a sinistra è quella che Steve Krug chiamerebbe una convenzione. Ovvero, quando una cosa è chiara ed è diventata di uso e comprensione comune, perché stravolgere le cose inserendo un elemento che non farà altro che disorientare i tuoi lettori? Mah…
  • il menu di navigazione: può essere posto a destra del logo o appena sotto di esso. Insieme al logo, è la parte più importante del tuo header. Riuscire a costruire un buon menu di navigazione è importantissimo e fidati, per nulla facile. Quindi, carta e penna alla mano e inizia a riflettere sull’architettura che deve avere il tuo blog. Quali sono i temi principali del tuo sito? Caratteristiche ed esigenze dei tuoi utenti sono le cose che più devi tenere sott’occhio. Io ti consiglio di ridurre al minimo gli effetti in JQuery, per rendere il tutto più facile da navigare ed evitare il rischio che alcuni utenti non riescano ad accedere al tuo menu. Tieni in considerazione quelli che sono i tuoi obiettivi ma anche quelle che sono le esigenze dei tuoi utenti (che informazioni cercano? Perché si trovano sul tuo blog?). Usa termini che siano semplici e facili da capire e colora il link di un colore diverso se l’utente si trova in quella pagina: faciliterai la navigazione;
  • social icon: non sono fondamentali, ma non è sbagliato, inserire le social icon direttamente nell’header. Io ti consiglio di inserirle comunque nella sidebar, appena sotto all’about box che spiega brevemente chi sei e racconta di cosa parla il tuo blog;
  • campo cerca: deve essere presente in tutti i blog. Non è necessario inserirlo nell’header, perché puoi anche decidere di metterlo nella sidebar: insomma sta a te. Però ecco, non venirmi a dire che non lo vuoi mettere perché non ti piace o lo reputi inutile; non lo è affatto, soprattutto per tutti quei visitatori che arrivano nel tuo blog cercando un post e non lo riescono a trovare… intesi?

Dimensioni header

Ah, che argomento spinoso. Quando insegnavo design dei siti web alla Naba, i miei studenti facevano sempre una fatica immonda a comprendere l’esatta altezza di un header. Nella maggior parte dei casi gli header erano enormi. Quindi, a scanso di equivoci: se sei insicuro, meglio un header con un’altezza non superiore ai 300px. Se il tuo header è basso avrai dalla tua la possibilità di mostrare ulteriori contenuti ai tuoi visitatori, come una porzione di sidebar e di main. Gli toglierai inoltre la noia di scrollare verso il basso fino al primo contenuto utile da leggere (ovvero l’ultimo post che hai scritto).

Di contro un header più alto ti dà la possibilità di essere maggiormente creativo: di solito in questi casi è perché si inserisce un’immagine o uno slider (io ho già detto come la penso sugli slider, eh…). Se fai questa scelta, pensa prima di tutto che i tuoi visitatori saranno comunque più interessati al tuo menu che a tutto il resto.

Al lavoro!

Ora hai tutte le nozioni necessarie per creare un ottimo header per il tuo blog. Mi fai vedere i risultati? Aspetto un tuo commento!

Potrebbe interessarti anche:

Perché i visitatori abbandonano il tuo sito webPerché i visitatori abbandonano il tuo sito web Come scegliere la palette colori del tuo sito webCome scegliere la palette colori del tuo sito

Ciao, sono Laura Lonighi, Brand & Web designer freelance

Nel mio lavoro disegno la personalità visiva di un marchio e realizzo siti web ed ecommerce. Vivo nelle nebbiose (sigh!) campagne mantovane con il mio compagno e nostri due gatti di nome Brando e Briseide. Se questo articolo ti è piaciuto puoi ricevere i prossimi iscrivendoti alla newsletter che trovi in fondo al sito.

Leggi chi sono

Commenti

  1. Susanna Marsiglia dice

    30/06/2014 alle 10:20 am

    L’header è croce e delizia di ogni web designer: ti basti pensare che ho speso l’intero sabato solo per stilizzare la navbar del mio nuovo blog 🙂
    Penso che sia il biglietto da visita per l’utente, il primo elemento del sito che salta all’occhio, e quindi in assoluto il più user-friendly.
    D’accordissimo sul non eccedere i 300px, è anche vero però che il limite è quello della creatività umana: mi sono imbattuta in siti web dall’header mastodontico che avevano creato un’architettura del sito tale da non infastidire per nulla l’utente. Pur rispettando le convenzioni, sono convinta che l’header possa davvero essere “sconvolto” in termini di stili e dimensioni. L’unico comandamento è quello di non intaccare l’usabilità e non confondere l’utente.

    Rispondi
  2. My Social Web dice

    30/06/2014 alle 4:26 pm

    Ringrazio per la citazione e aggiungo: fare in modo che la barra di ricerca sia visibile prima dello scrolling, ci sia in tutte le pagine (meno le landing) e presenti un ghost text che suggerisca la possibilità di inserire un testo.

    Rispondi
  3. Eli Sunday Siyabi dice

    01/07/2014 alle 3:30 pm

    Grazie per aver citato il mio (travel) header: una bella sorpresa!
    Questo bell’articolo mi ha fatto ripensare al menu di navigazione: il mio l’ho lasciato sopra l’header, però il tema da me scelto mi dà la possibilità di metterlo anche sotto. Pensi sarebbe meglio spostarlo?

    Rispondi
    • Laura Lonighi dice

      08/07/2014 alle 4:13 pm

      No, io lo lascerei lì dov’è. 🙂

      Rispondi
  4. Carola Speri dice

    02/07/2014 alle 8:55 am

    io continuo a cambiarlo! So che è sbagliato anche quello ma non sono mai convinta dello stile.. a volte semplice altre più ricco.. ora forse ho trovato una soluzione che mi rappresenta! Grazie articolo interessantissimo!

    Rispondi
  5. Sabrina Lorenzoni dice

    02/07/2014 alle 6:09 pm

    Molto interessante questo articolo sulla testata del blog: in effetti, credo che non si è mai contenti! Ora mi sembra che il mio blog sia abbastanza in ordine e che mi rappresenti, grazie anche ai suggerimenti di Laura e di My Social Web

    Rispondi
  6. Daniele Imperi dice

    03/07/2014 alle 7:55 am

    Grazie per aver “citato” la mia testata 🙂

    Ma ora cambierà, ho preso un tema responsive e è un po’ diverso. Quindi rifarò il logo e anche il motto.

    Però hai ragione, la testata del blog è molto importante e un motto serve a qualificarti subito agli occhi del lettore.

    Rispondi
  7. Valentina Scannapieco dice

    15/07/2014 alle 3:10 pm

    Ciao 🙂
    vorrei sapere cosa pensi del mio…e se potresti darmi qualche consiglio/critica

    ah il sito è http://www.occhiovunque.it

    grazie e baci

    Rispondi
    • Laura Lonighi dice

      30/07/2014 alle 9:53 am

      Mmh, non mi piace molto. Togli tutto il testo “Benvenuti nella cucina a fumetti etc”. Io metterei il tuo logo a sinistra, o anche centrato starebbe bene, e sotto una tagline che spieghi con una manciata di parole il tuo blog. Potrebbe stare bene “la cucina a fumetti”, oppure qualcosa che sia comunque legato alla cucina e ai fumetti.

      Guarda, te l’ho già detto, secondo me il tuo blog ha dietro un’idea super originale (mai vista altrove, personalmente), si tratta solo di dare una rinfrescata al layout del sito. Complimenti ancora!

      Rispondi
      • Valentina Scannapieco dice

        30/07/2014 alle 6:09 pm

        Per prima cosa ti ringrazio per i complimenti *__* Avrei voluto mettere a sx il logo ma poi non sapevo dove mettere la mia illustrazione…:/ a questo punto mi conviene toglierla direttamente 🙂

        Rispondi
      • Valentina Scannapieco dice

        30/07/2014 alle 7:54 pm

        Ho apportato delle modifiche ma mi sembra aver peggiorato tutto :(((

        Rispondi
  8. jembenton dice

    22/07/2014 alle 12:58 pm

    oh ma sono negli esempi! grazie!

    Rispondi

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Yunikon Design di Laura Lonighi
di Laura Lonighi
Web Designer Freelance
via Amendola, 4
46033 — Castel d’Ario (MN)
P. IVA: 02326200207
SDI: SZLUBAI

hello@yunikondesign.com

💎 Servizi

  • Brand Styling
  • Web Designer Freelance

🤖 Consulenze online

  • Brand Styling
  • Performance sito web

💌 Newsletter

Puoi cancellarti in ogni momento, cliccando sul link in fondo a ogni newsletter. Per ulteriori informazioni leggi la Privacy Policy.

Thank you!

You have successfully joined our subscriber list.

.
Rivedi i cookie
  • Privacy policy
  • Cookie policy
  • IG
  • FB
Questo sito usa diversi tipi di cookie. Puoi dare il tuo consenso cliccando ACCETTA e/o modificarlo con "Rivedi i cookie" in fondo al sito. Qui lo spiegone: Privacy policy.
ACCETTA RIFIUTA Personalizza
Rivedi i cookie

Privacy Policy

Questo sito Web utilizza i cookie per migliorare la tua esperienza durante la navigazione sul sito. I cookie classificati come necessari vengono memorizzati nel browser e sono essenziali per il funzionamento delle funzionalità base del sito. Utilizziamo anche cookie di terze parti che ci aiutano ad analizzare e comprendere come navighi questo sito. Questi cookie saranno memorizzati nel tuo browser solo se ci dai il tuo consenso: hai anche la possibilità di disattivare questi cookie. La disattivazione di alcuni di questi cookie può influire sulla tua esperienza di navigazione.
Necessary
Sempre abilitato
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurataDescrizione
_GRECAPTCHA5 months 27 daysThis cookie is set by the Google recaptcha service to identify bots to protect the website against malicious spam attacks.
csrftoken1 yearThis cookie is associated with Django web development platform for python. Used to help protect the website against Cross-Site Request Forgery attacks
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
CookieDurataDescrizione
_pin_unauth1 yearThis cookie is placed by Pinterest Tag when the user cannot be matched. It contains a unique UUID to group actions across pages.
cookielawinfo-checkbox-cookie-analitici1 yearNo description
cookielawinfo-checkbox-cookie-di-profilazione-e-social-plugin1 yearNo description
cookielawinfo-checkbox-cookie-tecnici1 yearNo description
ppwp_wp_session30 minutesNo description
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
CookieDurataDescrizione
_fbp3 monthsThis cookie is set by Facebook to display advertisements when either on Facebook or on a digital platform powered by Facebook advertising, after visiting the website.
fr3 monthsFacebook sets this cookie to show relevant advertisements to users by tracking user behaviour across the web, on sites that have Facebook pixel or Facebook social plugin.
VISITOR_INFO1_LIVE5 months 27 daysA cookie set by YouTube to measure bandwidth that determines whether the user gets the new or old player interface.
YSCsessionYSC cookie is set by Youtube and is used to track the views of embedded videos on Youtube pages.
yt-remote-connected-devicesneverYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
yt-remote-device-idneverYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
CookieDurataDescrizione
_ga2 yearsThe _ga cookie, installed by Google Analytics, calculates visitor, session and campaign data and also keeps track of site usage for the site's analytics report. The cookie stores information anonymously and assigns a randomly generated number to recognize unique visitors.
_gat_gtag_UA_13058607_221 minuteSet by Google to distinguish users.
_gid1 dayInstalled by Google Analytics, _gid cookie stores information on how visitors use a website, while also creating an analytics report of the website's performance. Some of the data that are collected include the number of visitors, their source, and the pages they visit anonymously.
CONSENT2 yearsYouTube sets this cookie via embedded youtube-videos and registers anonymous statistical data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
CookieDurataDescrizione
_auth1 yearThis cookie is set by Pinterest that collects statistical details to track the use of its services.
_pinterest_referrer5 minutesThis cookie is set by Pinterest to track the use of its services.
_pinterest_sess1 yearThis cookie is set by Pinterest that collects statistical details to track the use of its services.
_routing_idsessionThis cookie is set by Pinterest that collects statistical details to track the use of its services.
languagesessionThis cookie is used to store the language preference of the user.
ACCETTA E SALVA
Powered by CookieYes Logo