Intestazioni del blog: 20 grandi esempi e best practice
L' intestazione è probabilmente la prima cosa che un nuovo visitatore vede su un blog, quindi è la prima impressione - ma perché l'intestazione di un blog è molto più importante, o almeno diversa, dell'intestazione di un sito web di base?
Le intestazioni dei blog richiedono più funzionalità. Altri design web possono differire in termini di utilizzo e, pertanto, ciò che è incluso nell'intestazione del sito Web e il modo in cui viene presentato può variare notevolmente.
Con un blog specifico, però, ci sono le migliori pratiche che possono aiutare il lettore a navigare attraverso il blog e a coinvolgerlo meglio.
Questo è esattamente ciò che questo articolo farà. Ti aiuteremo a definire cosa dovrebbe far parte dell'intestazione di un blog e come implementarlo finalmente , quindi vedremo venti esempi fantastici che fanno proprio questo.
Per determinare come deve essere progettato un header del blog e cosa metterlo, dobbiamo fare alcune domande sul blog:
- Quale umore deve essere impostato per attirare il pubblico di destinazione corretto?
- Come può la prima impressione tramite l'intestazione comunicare di cosa si tratta il blog?
- Come può l'intestazione del blog dare la prima impressione, "Sono diverso dagli altri."
- Quali parti di contenuto devono essere immediatamente percepibili per creare un'azione migliore? (cliccando sui link, iscrivendosi, ecc.)
Scaviamo un po 'più a fondo ...
Quale umore deve essere impostato per attirare il pubblico di destinazione corretto?
Quando un visitatore entra per la prima volta in qualsiasi tipo di sito Web, la prima cosa che determinano è la "personalità" del blog - e se è giusto o meno per loro.
Questo è essenziale per il design del blog, perché i blog richiedono che il target di riferimento corretto abbia successo .
Ad esempio: con i contenuti nel settore creativo, un blog design dovrebbe avere un'intestazione creativa per impressionare e ispirare i nuovi arrivati. Un blog più tecnico o commerciale vorrà un header straight-forward, high-end che sia esteticamente attraente, ma allo stesso tempo discreto.
Come può la prima impressione tramite l'intestazione comunicare di cosa si tratta il blog?
Abbiamo una parte di questo coperto dallo sviluppo dell'umore generale che l'intestazione dovrebbe creare, ma un'intestazione può fare di più per chiarire al nuovo lettore di cosa parla questo blog.
La prima impressione scopre la personalità del blog, ma di cosa si tratta esattamente? Si potrebbe includere una tagline con un logo che la dice, o includere un piccolo paragrafo / frase che dice al lettore che cos'è questo blog e per chi è.
Come può l'intestazione del blog dare la prima impressione, "Sono diverso dagli altri"?
Un altro modo per dirlo è: "Come sarà ricordato questo blog? “
Se si confonderà con tutti gli altri blog su Internet, questo non è affatto un buon tema per il blog. Questo è il motivo per cui l'intestazione è un posto privilegiato per il logo, la tagline e qualsiasi altro marchio.
L'aspetto generale e il contenuto presentato a prima vista è ciò che si attaccherà, se presentato abbastanza bene.
Quali parti di contenuto devono essere immediatamente percepibili per creare un'azione migliore? (cliccando sui link, iscrivendosi, ecc.)
L'intestazione dovrebbe essere nel complesso semplice in termini di contenuto, ma alcune forme di contenuto possono essere presenti per aiutare gli aiuti nella loro chiamata all'azione. Dopo che un nuovo lettore ha giudicato l'impressione iniziale del blog e decide di rimanere, inizieranno a cercare pezzi di contenuto e dove navigare.
Quando le categorie sono immediatamente presenti, lo spettatore le esaminerà e troverà le aree che le interessano. Quando un campo di ricerca è presente o un feed RSS, non possono iscriversi o effettuare una ricerca subito, naturalmente, ma hanno fatto una nota subconscia del suo posizionamento e dove trovarlo in futuro.
Le opzioni variano molto al di là di questo, ma fondamentalmente qualsiasi contenuto inserito nell'intestazione è la prima impressione per il contenuto , quindi dovrebbe essere il più importante e ben progettato.
Diamo ora un'occhiata ad alcune ottime intestazioni dei blog e poi ne discutiamo i benefici.
1. Tutorial9
Tutorial9 offre quasi tutti i vantaggi discussi sopra. Il logo e lo slogan mostrano istantaneamente di cosa parla il blog e come può aiutare il lettore.
I pezzi di navigazione principali si trovano su enormi schede evidenti con icone incluse per disegnare negli occhi. Questo porta istantaneamente l'utente ai contenuti e li incoraggia a scavare più a fondo nel blog.
Il design dello sfondo è creativo e ha anche un tema di creazione artistica - esattamente per cosa sono pensati i tutorial. Inoltre, vi sono contenuti essenziali a destra tra cui il feed RSS, il modulo di ricerca, le pagine del blog e altro.
2. Trova design per la casa
Questa intestazione usa un grande uso della gerarchia visiva per ottenere il punto. Il titolo del blog è abbastanza vicino da dire al lettore di cosa si tratta e promuove restare e vedere in dettaglio di cosa si tratta.
L'occhio viene quindi portato al primo set di navigazione, dove viene chiaramente indicata la pagina relativa, nonché alla pagina dei contatti. Le immagini a destra quindi impostano l'atmosfera e forniscono ispirazione a chi è interessato all'argomento di questo blog.
Infine, le immagini a destra portano lo sguardo verso il basso ad una frase più descrittiva per il blog.
3. Blog Blog Design
Le caratteristiche più notevoli di questa intestazione sono il logo e la tagline. Lo specifico pubblico di destinazione di questo blog lo rende più unico e, affermando a prima vista cosa è il blog, un nuovo lettore lo vede ed è convinto che sia diverso dagli altri.
Più in basso, e in caratteri più piccoli, il numero di lettori e link al feed RSS, così come la navigazione primaria per approfondire l'argomento del blog o il contenuto stesso.
4. Kevin John Gomez
L'appello e la foto disegnati a mano rendono personale il tema di questo blog, e corrisponde al nome del sito Web - il webmaster stesso. Questo è un blog personale di una persona creativa e l'intestazione lo comunica perfettamente.
La navigazione completa è nell'intestazione, in quanto è una navigazione limitata ed è in grado di avere maggiore enfasi su di essa.
5. Grafica Naldz
Questa intestazione offre un grande logo e un uso efficace del contenuto nell'intestazione. La parte più grande dell'intestazione è il logo o il nome del blog e questo lo rende facile da ricordare.
L'occhio è poi portato alla navigazione, dove il lettore può scavare più a fondo nel blog proprio lì e lì, o almeno farsi un'idea di cosa sia il blog. Navigazione e categorie sono un ottimo modo per dire ai nuovi lettori di cosa parla il blog, se sono ben definiti.
Un grafico sulla destra aiuta a impostare l'umore del blog e inoltre porta l'occhio al numero di abbonati e al collegamento RSS. Con un blog con un numero di feed da moderato ad alto, è una buona idea mostrare tale conteggio nell'intestazione, perché in un modo, convalida il contenuto del blog e gli dà credibilità.
Vi sono inoltre contenuti aggiuntivi in alto, in un luogo tradizionale per questo tipo di contenuti, in modo che possano essere facilmente trovati.
6. Pro Blog Design
I due elementi verdi contrastanti in questa intestazione fanno più di quanto si possa pensare. La maggior parte vede il logo con il pop verde di colore prima a sinistra, dove legge il titolo del blog e il titolo. Questo è ancora un altro grande titolo che dice ai nuovi lettori come questo blog può aiutarli.
Quindi, le grandi schede sovradimensionate vengono messe a fuoco con 1) le loro dimensioni ovvie e 2) quelle dell'altro pop di colore verde. L'altra scheda verde indica al lettore che questo non è solo un blog che può aiutarti a migliorare il design del blog, ma offre anche servizi di progettazione di blog. Oltre a ciò, icone dei social media che il lettore può prendere in considerazione per un'azione successiva.
7. Octwelve
Questa intestazione creativa illustrata imposta l'umore per il blog abbastanza rapidamente. L'illustrazione è del webmaster e offre al blog un approccio personale. Iniziamo a farsi un'idea del contenuto del blog, prima ancora che venga presentato.
Questo disegno inserisce una piccola frase introduttiva nell'intestazione, definendo cosa esattamente questo blog è. La navigazione principale è proprio sotto il logo, quindi viene notata quasi immediatamente. Ci sono anche altri dettagli nell'intestazione che sono divertenti, e portano lo spettatore a guardare l'intestazione più a lungo.
8. Mark Forrester
Questo divertente, bizzarro e creativo header crea un'atmosfera ed è abbastanza unico da catturare la tua attenzione.
A prima vista, lo spettatore esamina immediatamente l'intestazione, i suoi dettagli precisi e la storia che presenta. In questo, arriva il logo e lo slogan, in cui la vista scopre di cosa tratta il blog.
Al termine dell'intestazione, possono vedere la navigazione in alto e i social bookmark sulla destra. L'intestazione conduce anche piacevolmente nel contenuto, portando il visitatore a scorrere verso il basso e controllare di più.
9. Cult-Foo
Questa è solo una bella intestazione che attira l'attenzione di molti lettori ogni giorno. L'atmosfera è impostata come un tema creativo e stimolante e attira solo il pubblico giusto. Il logo in questa intestazione è la "fonte" del resto dell'intestazione, una scatola che conduce al resto del progetto.
La barra di ricerca è proprio sotto quella per facilità di accesso, e le due aree di contenuto sono definite sulla destra.
La navigazione è ciò che è veramente interessante su questa intestazione, però. Ha più di una sensazione di tag cloud, con le categorie più grandi che sono il testo più grande. In questo modo, una volta che un nuovo lettore vede il tag cloud, vedono prima gli elementi più grandi.
In cambio, fanno una connessione con queste parole e il contenuto del blog. Ora, i contenuti presenti sul blog hanno la maggior parte di ciò che è ora più memorabile sul suo contenuto. Assicurati di dare un'occhiata alla versione live di questo sito: l'area del cloud dell'intestazione del tag viene effettivamente spostata con lo scorrimento dell'utente, con un bordo decorativo ma non invadente.
10. Vectips
Questa intestazione è piuttosto minimalista, il che mette maggiormente l'accento sui bit di contenuto che contiene. Il logo è decorativo e delineato in un colore a contrasto, rendendolo memorabile.
È seguito da una tag line che condivide ciò di cui parla il blog, quindi una semplice navigazione che lo definisce ulteriormente. La navigazione è eccezionale perché ha icone individuali per attirare l'attenzione su ciascuna di esse mentre il lettore scorre su di esse.
L'illustrazione divertente sulla destra crea l'atmosfera e porta l'occhio alla navigazione verso l'alto.
11. Post part time
In contrasto con Vectips, questa intestazione ha molto da fare. Il logo in alto a sinistra include una tagline, quindi guida l'occhio alla navigazione. Tuttavia, prima di fare clic sulla navigazione, l'intestazione continua a capire come il sito può aiutare i nuovi visitatori e, in seguito, offre più navigazione. Attraverso questa gerarchia, il lettore ha appena ottenuto una grande panoramica su come navigare attraverso il sito web.
L'illustrazione sulla destra induce lo spettatore a prendere nota del feed RSS, e quindi l'occhio è ulteriormente indotto a promuovere la pagina Facebook di Facebook dell'azienda.
12. TutCandy
La più grande caratteristica dell'intestazione di TutCandy è rappresentata dalle sue immagini creative, colorate e dettagliate. Con ciò, crea l'atmosfera e crea credibilità per un blog come questo. Il nome è intrecciato all'interno dell'illustrazione colorata e può essere considerato il logo.
A destra c'è una tagline che spiega cosa è il blog e come è diverso: "Solo i tutorial di design più semplici". Nonostante sia principalmente un gioco di parole semplice e divertente, ci sono alcune parole chiave che colpiscono il lettore causare un giudizio positivo. "Only" - è unico, originale, unico nel suo genere.
Risponde alla domanda "Com'è questo blog diverso dagli altri?". "Più acuta" - la tagline avrebbe potuto essere "Tasty Design Tutorials." Non solo sembra un po 'strano, ma non implica alcuna precedenza rispetto ad altri tutorial di design o ad altri blog tutorial.
Sopra, c'è anche la navigazione sul blog e una barra di ricerca sulla destra. Subito sotto, il contenuto è definito e organizzato, portando il lettore a scavare più a fondo nel blog.
13. Yoast
Questo blog offre ottimi contenuti nell'intestazione. L'esclusivo wireframe consente all'intestazione di contenere elementi grafici e contenuti sufficienti per creare una connessione con un nuovo lettore. Il personaggio e l'illustrazione dietro di lui sono una delle prime cose che un nuovo visitatore noterà, e fanno una buona chiamata facendo in modo che il personaggio punti al contenuto dell'intestazione sulla sinistra.
Dopo che l'occhio è stato indirizzato al contenuto dell'header, vedono il logo e i modi per iscriversi o connettersi al blog. Si legge quindi come un normale bit di contenuto "sulla pagina", ad eccezione delle sue funzionalità in primo piano nella pagina principale, il che significa che non solo i lettori che sono interessati a visitare la pagina su rendono quella connessione personale, invece, tutti i nuovi lettori lo fanno. Il contenuto spiega di cosa tratta il blog e quindi visualizza alcuni contenuti popolari e in primo piano.
Sotto l'illustrazione a destra, il feed RSS è di nuovo caratterizzato, ma questa volta con un grafico più riconoscibile. Si noti come questo secondo display di alimentazione mostri a destra, dopo che il lettore avrà appena finito di leggere alcuni titoli di contenuto, un po 'di informazioni e dopo aver già stabilito una connessione con il blog.
14. Quel tizio indipendente
Il personaggio in questa intestazione, come tutte le altre intestazioni con personaggi, fornisce un tocco personale e agisce come una grande introduzione al blog. È la prima cosa che un nuovo lettore noterà, e la sua alta qualità, così come le caratteristiche del design che lo circondano, fanno una dichiarazione sullo stile di questo designer e su cosa aspettarsi da lui.
A sinistra c'è il logo, che porta ulteriormente lo sguardo allo slogan che spiega i contenuti presenti sul blog. L'occhio è portato ancora una volta a un contenuto condividendo la personalità del blog.
15. Ozon3
Il tema di questa intestazione è unico e in questo senso crea un web design memorabile: una prima impressione davvero eccezionale. Dopo aver apprezzato l'illustrazione, l'occhio viene portato al logo per la memorizzazione del marchio e quindi direttamente alla navigazione principale e quindi al contenuto.
Gli spettatori della prima visione possono vedere che questo blog si concentra su un portfolio di web design e lo scoprono dopo aver visto il lavoro del designer sull'intestazione.
Nonostante la sua semplicità, questa intestazione è molto efficace in termini di gerarchia visiva e stabilisce una dichiarazione enorme per gli spettatori.
16. nDesign Studio
Questa testata colorata è l'attrazione principale di questo web design e il logo dice al visitatore che si tratta di uno studio di design.
L'incredibile intestazione convalida le capacità del designer e il suo marchio. La navigazione, i feed e la barra di ricerca sono tutti strettamente intrecciati anche con l'intestazione, rendendoli uno dei primi elementi apprezzabili.
La navigazione principale è sotto forma di schede e viene inizialmente riconosciuta come parte dell'intestazione. Poiché è sotto forma di schede, sembra collegato anche al contenuto, portando l'occhio del visitatore verso il contenuto importante del blog.
17. Parete Web Designer
Questo è un altro grande blog di Nick La di nDesign Studio, e vediamo una tecnica simile: uno stupendo grande background / header, che convalida i talenti e le competenze del designer. Il logo è più grande qui, fornendo una tagline che collega il nome del blog al suo scopo.
Il resto del contenuto nell'intestazione è la navigazione iniziale, contatto / RSS e la barra di ricerca. Sono tutti decorati in modo simile all'intestazione, collegandoli.
Questi elementi hanno però anche caratteristiche simili al contenuto (uno sfondo più semplice, una trama simile alla carta), quindi anche loro si sentono parte del contenuto. Questa sezione dell'intestazione collega l'intestazione introduttiva all'area del contenuto.
18. Ma.tt
Sembra esserci una regola definitiva per il web design per non creare intestazioni oltre 200-250 pixel. Questa è una regola da seguire per molti motivi diversi, ma questa intestazione mostra solo come infrangere efficacemente quella regola.
Inizialmente, non mostrando alcun contenuto, Matt sta usando il suo design per fare la più grande impressione sul visualizzatore per la prima volta. I suoi dettagli eleganti e i modi creativi creano una prima impressione memorabile.
Il logo è grande e, poiché il sito Web è un nome, assume la posizione di un blog personale. Il feed RSS è anche in alto a sinistra, dicendo allo spettatore che è davvero un blog dall'inizio. Infine, la navigazione è ciò che è visto per ultimo, e questo provoca il visitatore a continuare attraverso il blog.
19. Pixel Resort
Lo stile di illustrazione dettagliato di questa intestazione lo rende divertente, ma pulito e professionale. È persino animato mentre la scena attraversa giorno e notte, ricordando al visitatore di continuare a guardare indietro nell'intestazione, che presenta il logo (marchio) e la navigazione. Questo metodo può facilmente promuovere più attività nel blog.
Sotto la navigazione che viene messa in primo piano, c'è una navigazione secondaria con una freccia che "connette" al resto dell'intestazione. Aiuta a definire ulteriormente le categorie e aiuta il lettore a trovare il contenuto che le interessa meglio.
20. Deposito Webdesigner
Ah, sì, il blog che stai visualizzando. Sia che tu sia un visitatore per la prima volta, sia che stia leggendo a lungo il Webdesigner Depot, l'intestazione attira sicuramente la tua attenzione.
La cosa eccezionale di questa intestazione è che non è solo un'intestazione con un appeal creativo, ma gli elementi al suo interno indicano che si tratta di un'intestazione con un appeal creativo incentrato sui computer o sul Web. Le illustrazioni del laptop, il "www." E altri pezzi di tecnologia portano tutti in particolare al target di riferimento.
L'intestazione in realtà non ha molto da offrire in termini di contenuto, ad eccezione di un link hovering alla home page. Tuttavia, poiché è così complesso, qualsiasi funzionalità aggiuntiva può travolgere il design e renderlo troppo ingombrante.
Questa intestazione è semplicemente perfetta: l'impostazione dell'umore, l'ispirazione per lo spettatore, ed è abbastanza breve da spingere lo spettatore verso il basso del resto del contenuto.
Avvolgendo
Si spera che la ricerca di questi venti esempi possa aiutare a definire meglio le domande presenti all'inizio di questo articolo e aiutare ogni web designer a prestare maggiore attenzione alle intestazioni dei blog.
Il contenuto da includere in un'intestazione può variare notevolmente da blog a blog ed è importante tenere a mente gli obiettivi del blog, il tema e ciò che un visitatore alla prima visita dovrebbe cercare quando visita il blog.
Scritto esclusivamente per WDD da Kayla Knight .
Sentiti libero di condividere i tuoi suggerimenti per la progettazione dell'intestazione, nonché eventuali altri esempi.