Blog Headers: 20 gode eksempler og beste praksis
Overskriften er sannsynligvis det første en ny besøkende ser på en blogg, så det er førsteinntrykket - men hvorfor er en bloggheader så mye viktigere, eller i det minste annerledes enn tittelen på en grunnleggende nettside?
Bloggoverskrifter trenger mer funksjonalitet. Andre webdesign kan variere med hensyn til bruken av dem, og derfor er det som er inkludert i nettstedets topptekst og hvordan det presenteres, kan variere sterkt.
Med en blogg spesielt, er det imidlertid gode fremgangsmåter som kan hjelpe leseren til å navigere gjennom bloggen og bli bedre involvert.
Det er akkurat hva denne artikkelen vil gjøre. Vi hjelper deg med å definere hva som skal være en del av en bloggoverskrift og hvordan du endelig skal implementere den , og så ser vi på tjue gode eksempler som bare gjør det.
For å avgjøre hvordan en bloggoverskrift skal utformes og hva du skal legge inn i det, må vi stille noen få spørsmål om bloggen:
- Hvilken stemning må settes for å tiltrekke den riktige målgruppen?
- Hvordan kan det første inntrykket via overskriften kommunisere hva bloggen handler om?
- Hvordan kan bloggens overskrift gi første inntrykk, "Jeg er forskjellig fra de andre."
- Hvilke deler av innholdet må være umiddelbart merkbare for å skape bedre handling? (klikk på koblinger, abonnement, etc.)
La oss grave litt dypere ...
Hvilken stemning må settes for å tiltrekke den riktige målgruppen?
Når en besøkende først kommer inn i en hvilken som helst type nettside, er det første som de bestemmer bloggens "personlighet" - og om det er riktig for dem.
Dette er viktig for bloggdesign, fordi blogger krever at riktig målgruppe skal lykkes .
For eksempel: med innhold i den kreative industrien, bør en bloggdesign ha en kreativ header for å imponere og inspirere nykommere. En mer teknisk eller forretningsblogg vil ha en rett fremad, high-end header som er både estetisk tiltalende, men likevel ganske subtil.
Hvordan kan det første inntrykket via overskriften kommunisere hva bloggen handler om?
Vi har en del av dette som dekkes av å utvikle det generelle stemningen som overskriften skal skape, men en overskrift kan gjøre mer enn det for å klargjøre til den nye leseren hva denne bloggen handler om.
Det aller første inntrykk oppdager personligheten til bloggen, men hva handler det egentlig om? Man kan inkludere en tagline med en logo som sier det, eller ta med et lite avsnitt / setning som forteller leseren hva denne bloggen er og hvem den er for.
Hvordan kan bloggens overskrift gi første inntrykk, "Jeg er forskjellig fra de andre"?
En annen måte å sette dette på er, "Hvordan kommer denne bloggen til å bli husket? “
Hvis det vil blande seg inn i hver annen blogg på Internett, er det ikke et godt blogg tema i det hele tatt. Dette er grunnen til at toppteksten er et ypperlig sted for logoen, tagline og andre merker.
Det overordnede utseendet og innholdet som presenteres ved første øyekast, er det som vil holde seg, hvis det presenteres godt nok.
Hvilke deler av innholdet må være umiddelbart merkbare for å skape bedre handling? (klikk på koblinger, abonnement, etc.)
Overskriften skal være overordnet enkel når det gjelder innhold, men noen former for innhold kan være til stede for å hjelpe til med hjelpen i deres oppfordring. Etter at en ny leser dømmer første inntrykk av bloggen og bestemmer seg for å bli, vil de begynne å lete etter biter av innhold og hvor de skal navigere.
Når kategorier er umiddelbart til stede, ser seeren over dem og finner områder som interesserer dem. Når et søkefelt er til stede eller et RSS-feed, kan de ikke abonnere eller gjøre et søk med en gang, selvfølgelig, men de har gjort et underbevisst notat om plasseringen og hvor de skal finne fremover.
Alternativene varierer mye utover dette, men i utgangspunktet er innhold som er plassert i toppteksten det første inntrykket for innhold , så det bør være det viktigste og utformet godt.
La oss nå ta en titt på noen gode bloggenavn, og diskuter deretter fordelene sine.
1. Tutorial9
Tutorial9 inneholder omtrent alle fordelene som er omtalt ovenfor. Logoen og tagline viser umiddelbart hva bloggen handler om, og hvordan den kan hjelpe leseren.
De primære navigasjonsstykkene er på store, merkbare faner med ikoner inkludert for å trekke i øyet. Dette fører øyeblikkelig brukeren til innhold og fremmer dem for å grave dypere inn i bloggen.
Bakgrunnsdesignet er kreativt, og har til og med et tema for kunstnerisk skapelse - akkurat hva opplæringen er ment for. Videre er det viktig innhold til høyre, inkludert RSS-feed, søkeskjema, bloggens sider og mer.
2. Home Design Find
Denne overskriften bruker en stor bruk av visuelt hierarki for å få poenget på tvers. Bloggens tittel er nesten nok til å fortelle leseren hva det handler om, og det fremmer å holde og se nærmere på hva det handler om.
Øyet fører da til det første settet med navigasjon, hvor omsiden er tydelig angitt, samt kontaktsiden. Bildene til høyre angir stemningen og gir inspirasjon for de som er interessert i denne bloggens emne.
Til slutt fører bildene til høyre øyet nedover til en mer beskrivende setning for bloggen.
3. Blog Design Blog
De mest bemerkelsesverdige funksjonene i denne overskriften er logoen og taglinjen. Den spesifikke målgruppen til denne bloggen gjør den mer unik, og ved å si hva bloggen handler om ved første øyekast ser en ny leser det og er overbevist om at det er forskjellig fra andre.
Ned litt lenger, og i mindre tekst, er antall lesere og link til RSS-feed, så vel som primærnavigasjon for å dykke videre inn i hva bloggen handler om, eller inn i selve innholdet.
4. Kevin John Gomez
Den hånddrevne appellen og bildet gjør denne bloggens tema føler personlig, og samsvarer med navnet på nettstedet - webmaster selv. Dette er en personlig blogg for en kreativ person, og overskriften kommuniserer perfekt.
Den komplette navigasjonen er i overskriften, da det er begrenset navigasjon og kan legge større vekt på det.
5. Naldz Graphics
Denne overskriften gir en flott logo og effektiv bruk av innhold i overskriften. Den største delen av overskriften er logoen eller bloggnavnet, og det gjør det enkelt å huske.
Øyet fører da til navigasjonen, hvor leseren kan grave dypere inn i bloggen akkurat da og der, eller i det minste få en ide om hva bloggen handler om. Navigasjon og kategorier er en fin måte å fortelle nye lesere om hva bloggen handler om, hvis de er godt definert.
En grafikk til høyre bidrar til å sette stemningen til bloggen, og fører også øye til antall abonnenter og RSS-lenken. Med en blogg som har moderat til høyt feedtall, er det en god ide å vise det som teller i overskriften, fordi det på en måte styrker bloggens innhold og gir det troverdighet.
Det er også ekstra innhold på toppen, på et tradisjonelt sted for denne typen innhold, slik at den lett kan bli funnet.
6. Pro Blog Design
De to kontrastgrønne elementene i denne overskriften gjør mer enn en kanskje tenker. De fleste ser logoen med den grønne farven til venstre først, hvor de leser tittelen på bloggen og overskriften. Dette er enda et flott overskrift som forteller nye lesere hvordan denne bloggen kan hjelpe dem.
Deretter legges store over-sized tabs i fokus med 1) deres åpenbare størrelse og 2) den andre popen i grønn farge. Den andre grønne kategorien forteller leseren at dette ikke bare er en blogg som kan bidra til å gi deg et bedre bloggdesign, men det har blogdesigntjenester å tilby. Over det, sosiale medier ikoner som leseren kan ta oppmerksom på for senere handling.
7. Octwelve
Denne illustrerte kreative header setter stemningen for bloggen ganske raskt. Illustrasjonen er av webmaster, og gir bloggen en personlig tilnærming. Vi begynner å få en ide om innholdet i bloggen, før den blir presentert.
Denne utformingen setter en liten innledende setning rett i toppteksten, og definerer nøyaktig hva denne bloggen er. Hovednavigasjonen er rett under logoen, så det blir lagt merke til nesten umiddelbart. Det er også andre detaljer i overskriften som er morsomme, og lede seeren til å se på overskriften lenger.
8. Mark Forrester
Denne morsomme, quirky og kreative header setter en stemning, og er unik nok til virkelig å fange oppmerksomheten din.
Beskueren ved første øyekast undersøker umiddelbart toppteksten og dens fine detaljer, og historien presenterer den. I det kommer logo og tagline, hvor utsikten finner ut hva bloggen handler om.
Når du er ferdig med å ha header, kan de se navigering opp øverste og sosiale bokmerker til høyre. Overskriften fører også pent inn i innholdet, og fører den besøkende til å bla ned og sjekke ut mer.
9. Cult-Foo
Dette er bare en vakker header som fanger oppmerksomheten til mange lesere daglig. Stemningen er satt som et kreativt og inspirerende tema, og tiltrekker bare rett publikum. Logoen i denne overskriften er "kilde" til resten av overskriften - en boks som fører ut til resten av designet.
Søkefeltet ligger rett under det for enkel tilgang, og de to innholdsområdene er definert til høyre.
Navigasjonen er det som er veldig kult om denne heisen, skjønt. Det har mer av en tag-cloud-følelse, med de større kategoriene som den større teksten. På denne måten, når en ny leser ser taggskygen, ser de de største elementene først.
Til gjengjeld gjør de en forbindelse med disse ordene og innholdet i bloggene. Nå har innholdet på bloggen det meste av det som nå er mest minneverdig om innholdet. Sørg for å sjekke ut den levende versjonen av dette nettstedet: Overskriften tag cloud-området faktisk flyttet med brukerens rulling, med en dekorativ og likevel diskret grense.
10. Vectips
Denne overskriften er ganske minimalistisk, noe som legger større vekt på biter av innhold som det holder. Logoen er dekorativ og skissert i en kontrastfarge, noe som gjør den minneverdig.
Det følges av en taglinje som deler hva bloggen handler om, og deretter enkel navigering som videre definerer det. Navigasjonen er god fordi den har individuelle ikoner for å gi oppmerksomhet til hverandre som leseren skummer over dem.
Den morsomme illustrasjonen til høyre setter stemningen og fører øyet til navigasjonen oppå toppen.
11. Deltidspost
I motsetning til Vectips har denne heisen mye på gang. Logoen øverst til venstre inneholder en tagline, og leder deretter øyet til navigasjon. Før du klikker gjennom navigasjonen, fortsetter toppteksten hvordan nettstedet kan hjelpe de nye besøkende, og deretter under det er det mer navigering. Gjennom dette hierarkiet fikk leseren bare en flott oversikt over hvordan man navigerer gjennom hele nettstedet.
Illustrasjonen til høyre fører deretter seeren til å legge merke til RSS-strømmen, og så er øynet ytterligere rett til å markedsføre selskapets Facebook-fan side.
12. TutCandy
Den største funksjonen i TutCandy header er det kreative, fargerike og detaljerte bildet. Med det setter det stemningen og skaper troverdighet for en blogg som dette. Navnet er sammenflettet i den fargerike illustrasjonen, og kan betraktes som logoen.
Til høyre er det en tagline som forklarer hva bloggen er, og hvordan den er forskjellig: "Bare de smukkeste designtutorialene." Til tross for at det primært er et enkelt og morsomt spill på ord, er det noen få søkeord som slår leseren til forårsake positiv vurdering. "Bare" - det er unikt, originalt, en-of-a-kind.
Det svarer på "Hvordan er denne bloggen forskjellig fra andre?" Spørsmålet. "Tastiest" - tagline kunne ha vært "Tasty Design Tutorials." Ikke bare høres det litt rart ut, men det betyr ikke noe forrang over andre designtutorials eller andre opplæringsblogger.
Ovenfor er det også navigasjon om bloggen, og en søkefelt til høyre. Direkte nedenfor er innholdet definert og organisert, og leder leseren til å grave dypere inn i bloggen.
13. Yoast
Denne bloggen gir godt innhold i overskriften. Den unike wireframe gjør at overskriften kan inneholde grafikk og tilstrekkelig innhold for å koble til en ny leser. Tegnet og illustrasjonen bak ham er en av de første tingene en ny besøkende vil legge merke til, og de gjør en god samtale ved å ha tegnet peker på topptekstinnholdet til venstre.
Etter at øyet har ført til innholdet i toppteksten, ser de logoen, og måter å abonnere på eller koble til bloggen. Det leser så akkurat som en vanlig bit av "om side" -innhold, bortsett fra at den er omtalt rett på forsiden, noe som betyr at ikke bare lesere som er interessert nok til å gå til omsiden, gjør den personlige forbindelsen - i stedet gjør alle nye lesere. Innholdet forklarer hva bloggen handler om, og viser deretter noe populært og kjennetegnet innhold.
Nedenfor illustrasjonen til høyre, er RSS-feed igjen, men denne gangen med en mer gjenkjennelig grafikk. Legg merke til hvordan denne andre feed-skjermen viser til høyre, etter at leseren nettopp hadde lest noen innholdstitler, litt om informasjon, og etter at de allerede har koblet seg til bloggen.
14. Den Indie Dude
Karakteren i denne overskriften, som alle andre topptekster med tegn, gir et personlig preg og fungerer som en flott introduksjon til bloggen. Det er det første en ny leser vil legge merke til, og dens høye kvalitet, samt designfunksjonene rundt den, gjør en uttalelse om stilen til denne designeren og hva du kan forvente av ham.
Til venstre er logoen, som videre fører øynene til taglinen som forklarer innholdet på bloggen. Øyet fører igjen til et innhold som deler bloggens personlighet.
15. Ozon3
Temaet i denne overskriften er unikt, og i den forstand skaper det et minneverdig webdesign - et virkelig flott førsteinntrykk. Etter å ha forstått illustrasjonen, fører øyet til logoen for å huske merkevaren, og fører deretter direkte ned til primærnavigasjonen, og deretter til innholdet.
Første gang seerne kan se at denne bloggen er fokusert rundt en webdesignportefølje, og de oppdager dette etter at de virkelig ser designers arbeid på toppteksten.
Til tross for sin enkelhet er denne overskriften svært effektiv når det gjelder visuelt hierarki og setter en stor uttalelse for seerne.
16. nDesign Studio
Denne fargerike toppteksten er hovedattraksjonen til dette webdesignet, og logoen forteller den besøkende at det er et designstudio.
Den fantastiske toppteksten validerer designerens ferdigheter, og hans merkevare. Navigasjons-, feeds- og søkefeltet er også veldig sammenflettet med toppteksten, noe som gjør dem til en av de første merkbare elementene.
Hovednavigasjonen er i form av faner, og blir først anerkjent som en del av overskriften. Fordi det er i form av faner skjønt, virker det også knyttet til innholdet, og bringer besøkernes øye ned i det viktige innholdet i bloggen.
17. Web Designer Wall
Dette er en annen flott blogg av Nick La fra nDesign Studio, og vi ser en lignende teknikk: en fantastisk stor bakgrunn / topptekst, validering av talenter og kompetanse fra designeren. Logoen er større her, og gir en tagline som knytter bloggens navn til sitt formål.
Resten av innholdet i toppteksten er den første navigasjonen, kontakt / RSS, og søkefeltet. De er alle innredet på samme måte som toppteksten, og forbinder dem.
Disse elementene har også liknende egenskaper til innholdet selv (mer ren bakgrunn, papirlignende tekstur), slik at de også føler seg som om de er en del av innholdet også. Denne delen av overskriften kobler den innledende overskriften til innholdsområdet.
18. Ma.tt
Det synes å være en ultimate webdesignregel for å ikke lage overskrifter over 200-250 piksler. Dette er en stor regel å følge av mange forskjellige grunner, men denne overskriften viser hvordan du effektivt bryter den regelen.
Ved å ikke vise noe innhold i begynnelsen bruker Matt sitt design for å gjøre det største inntrykket på førstegangsbesøkeren. Den elegante detaljer og kreative måter gir et minneverdig førsteinntrykk.
Logoen er stor, og siden nettstedet er et navn, tar det utgangspunktet for en personlig blogg. RSS-feed er også øverst til venstre, og forteller seeren at det egentlig er en blogg fra begynnelsen. Endelig er navigasjonen det som er sett sist, og dette provoserer besøkende til å fortsette gjennom bloggen.
19. Pixel Resort
Den detaljerte illustrasjonsstilen i denne overskriften gjør det morsomt, men rent og profesjonelt. Det er til og med animert ettersom scenen går gjennom dag og natt, og påminner den besøkende om å fortsette å se opp på toppteksten, som inneholder logoen (merkevaren) og navigasjonen. Denne metoden kan enkelt fremme mer aktivitet i bloggen.
Under navigasjonen som ligger i forkant, er det undernavigering med en pil "kobling" den til resten av overskriften. Det hjelper videre å definere kategorier, og hjelper leseren til å finne innholdet som interesserer dem best.
20. Webdesigner Depot
Ahh, ja - bloggen du ser på nå. Enten du er en første gangs besøkende, eller har lest Webdesigner Depot for lenge, blir overskriften mest oppmerksomt.
Det som er bra med denne heisen er at det ikke bare er en header med en kreativ appell, men elementene i den oppgir at det er en header med en kreativ appell som er fokusert rundt datamaskiner eller på nettet. Den bærbare illustrasjonen, "www." Og andre biter av teknologi gir alle målgruppene mer spesifikt.
Overskriften har egentlig ikke mye å tilby med hensyn til innhold, bortsett fra en svingende lenke tilbake til hjemmesiden. Men fordi det er så komplekst, kan noen ekstra funksjoner overvelde designen og gjøre den for rotete.
Denne overskriften er bare perfekt skjønt: innstilling av stemningen, inspirerende betrakteren, og det er kort nok til at det fører seeren ned til resten av innholdet.
Wrapping Up
Forhåpentligvis å se på disse tjue eksemplene kan hjelpe mange bedre å definere spørsmålene som presenteres i begynnelsen av denne artikkelen, og hjelpe hver webdesigner til å gi bedre oppmerksomhet til bloggoverskrifter.
Innhold for å inkludere i en header kan variere sterkt fra blogg til blogg, og det er viktig å huske målene for bloggen, temaet og hva en første gangs besøkende vil se etter når du besøker bloggen.
Skrevet utelukkende for WDD av Kayla Knight .
Du er velkommen til å dele dine egne tips for toppdesign, samt eventuelle andre eksempler.