Blog Headers: 20 gode eksempler og bedste praksis
Overskriften er sandsynligvis den første ting en ny besøgende ser på en blog, så det er første indtryk - men hvorfor er en blog header så meget vigtigere eller i det mindste anderledes end overskriften på en grundlæggende hjemmeside?
Blog overskrifter har brug for mere funktionalitet. Andre webdesign kan variere med hensyn til deres brug, og derfor er det, der er inkluderet i hjemmesiden header og hvordan det præsenteres, meget forskellige.
Med en blog specifikt er der dog bedste praksis, som kan hjælpe læseren med at navigere gennem bloggen og blive bedre involveret.
Det er præcis, hvad denne artikel vil gøre. Vi hjælper dig med at definere, hvad der skal være en del af en blogoverskrift, og hvordan du endelig implementerer den , og så ser vi på tyve fantastiske eksempler, der gør netop det.
For at bestemme, hvordan en blog header skal udformes og hvad man skal sætte ind i det, skal vi stille et par spørgsmål om bloggen:
- Hvilket humør skal indstilles til at tiltrække den rigtige målgruppe?
- Hvordan kan det første indtryk via overskriften kommunikere, hvad bloggen handler om?
- Hvordan kan bloggens overskrift give første indtryk, "Jeg er forskellig fra de andre."
- Hvilke indholdstyper skal øjeblikkeligt ses for at skabe bedre handling? (klik på links, abonnement osv.)
Lad os grave lidt dybere ...
Hvilket humør skal indstilles til at tiltrække den rigtige målgruppe?
Når en besøgende først kommer ind på enhver form for hjemmeside, er det første, de bestemmer, bloggens "personlighed" - og om det er rigtigt for dem.
Dette er vigtigt for blogdesign, fordi blogs kræver, at den rigtige målgruppe skal være vellykket .
For eksempel: Med et indhold i den kreative industri, skal et blogdesign have et kreativt overskrift, der kan imponere og inspirere nyankomne. En mere teknisk eller forretningsblog vil have en direkte fremad, avanceret header, der både er æstetisk tiltalende, men alligevel ret subtil.
Hvordan kan det første indtryk via overskriften kommunikere, hvad bloggen handler om?
Vi har en del af dette, der dækkes af udviklingen af det overordnede humør, som overskriften skal skabe, men et overskrift kan gøre mere end det for at afklare for den nye læser, hvad denne blog handler om.
Det allerførste indtryk opdager bloggens personlighed, men hvad handler det egentligt om? Man kunne inkludere en tagline med et logo, der siger det, eller inkludere et lille afsnit / sætning, der fortæller læseren, hvad denne blog er, og hvem den er til.
Hvordan kan bloggens overskrift give første indtryk, "Jeg er forskellig fra de andre"?
En anden måde at sætte dette på er, "Hvordan skal denne blog blive husket? ”
Hvis det vil blande sig ind på hver anden blog på internettet, er det slet ikke et godt blogtema. Derfor er overskriften et glimrende sted for logoet, tagline og enhver anden branding.
Det overordnede udseende og indholdet præsenteret ved første øjekast er, hvad der vil holde sig, hvis det fremlægges godt nok.
Hvilke indholdstyper skal øjeblikkeligt ses for at skabe bedre handling? (klik på links, abonnement osv.)
Overskriften skal være overordnet enkel med hensyn til indhold, men nogle former for indhold kan være til stede for at hjælpe med i deres opfordring til handling. Efter en ny læser dømmer første indtryk af bloggen og beslutter at blive, de begynder at kigge efter stykker af indhold og hvor man skal navigere.
Når kategorier er umiddelbart til stede, ser seeren over dem og finder områder, der interesserer dem. Når et søgefelt er til stede eller et RSS-feed, kan de naturligvis ikke abonnere eller foretage en søgning med det samme selvfølgelig, men de har lavet et underbevidst notat om placeringen og hvor de kan finde fremover.
Indstillingerne varierer meget ud over dette, men stort set er ethvert indhold placeret i overskriften det første indtryk for indhold , så det burde være det vigtigste og designet godt.
Lad os nu se på nogle få gode blogoverskrifter og diskutere deres fordele.
1. Tutorial9
Tutorial9 indeholder næsten alle de fordele, der er beskrevet ovenfor. Logoet og tagline viser straks, hvad bloggen handler om, og hvordan det kan hjælpe læseren.
De primære navigationsstykker er på store, mærkbare faner med ikoner inkluderet for at trække i øjet. Dette fører øjeblikkeligt brugeren til indhold og fremmer dem til at grave dybere ind i bloggen.
Baggrundsdesignet er kreativt og har endda et tema for kunstnerisk skabelse - præcis hvad tutorials er beregnet til. Derudover er der vigtigt indhold til højre, herunder RSS-feed, søgeformular, blogs sider og meget mere.
2. Home Design Find
Denne overskrift bruger en stor udnyttelse af det visuelle hierarki for at få pointet på tværs. Bloggens titel er næsten nok til at fortælle læseren, hvad det hele handler om, og det fremmer at opholde sig og se nærmere på, hvad det handler om.
Øjet fører derefter til det første sæt navigation, hvor den omgående side er tydeligt bemærket, samt kontaktsiden. Billederne til højre sæt derefter stemningen og inspirere dem, der er interesseret i denne blogs emne.
Endelig fører billederne til højre øjet nedad til en mere beskrivende sætning til bloggen.
3. Blog Design Blog
De mest bemærkelsesværdige træk ved denne overskrift er logoet og tagline. Den specifikke målgruppe for denne blog gør den mere unik, og ved at sige hvad bloggen handler om ved første øjekast ser en ny læser det og er overbevist om, at det er anderledes end andre.
Lidt længere, og i mindre tekst er antallet af læsere og link til RSS-feed, samt primær navigation for yderligere at dykke ind i, hvad bloggen handler om, eller i selve indholdet.
4. kevin john gomez
Den håndtegnede appel og foto gør denne blogs tema føler sig personlig og matcher navnet på hjemmesiden - webmaster selv. Dette er en personlig blog for en kreativ person, og overskriften kommunikerer det perfekt.
Den komplette navigation er i overskriften, da det er begrænset navigation og kan lægge større vægt på det.
5. Naldz Graphics
Denne overskrift giver et godt logo og effektiv brug af indhold i overskriften. Den største del af overskriften er logoet eller blognavnet, og det gør det nemt at huske.
Øjet fører derefter til navigationen, hvor læseren kan grave dybere ind i bloggen lige så og da eller i det mindste få en ide om, hvad bloggen handler om. Navigation og kategorier er en fantastisk måde at fortælle nye læsere om, hvad bloggen handler om, hvis de er veldefinerede.
En grafik til højre hjælper med at sætte stemningen i bloggen, og fører også øjnene til antallet af abonnenter og RSS-linket. Med en blog, der har et moderat til højt feedtælling, er det en god idé at vise, at tæller i overskriften, fordi det på en måde bekræfter bloggens indhold og giver det troværdighed.
Der er også ekstra indhold på toppen, på et traditionelt sted for denne type indhold, så det nemt kan findes.
6. Pro Blog Design
De to kontrastgrønne elementer i dette overskrift gør mere end man måske tror. De fleste ser logoet med den grønne pop farve først venstre, hvor de læser bloggens titel og overskriften. Dette er endnu en fantastisk overskrift, der fortæller nye læsere, hvordan denne blog kan hjælpe dem.
Derefter sættes store overstørrelser i fokus med 1) deres indlysende størrelse og 2) den anden pop i grøn farve. Den anden grønne fane fortæller læseren, at dette ikke kun er en blog, der kan hjælpe dig med at give dig et bedre blogdesign, men det har blogdesign-tjenester at tilbyde. Over det, sociale medier ikoner som læseren kan notere for senere handling.
7. Octwelve
Denne illustrerede kreative header sætter stemningen til bloggen ganske hurtigt. Illustrationen er af webmaster, og giver bloggen en personlig tilgang. Vi begynder at få en ide om indholdet af bloggen, før den endda præsenteres.
Dette design sætter en lille indledende sætning lige i overskriften og definerer, hvad netop denne blog er. Hovednavigationen er lige under logoet, så det ses næsten øjeblikkeligt. Der er også andre detaljer i overskriften, der er sjove, og lede seeren til at se på overskriften længere.
8. Mark Forrester
Denne sjove, quirky og kreative header sætter et humør og er unikt nok til virkelig at fange din opmærksomhed.
Beskueren ved første øjekast undersøger straks overskriften og dens fine detaljer, og den historie, den præsenterer. Dermed kommer logoet og tagline, hvor udsigten finder ud af, hvad bloggen handler om.
Når de er færdige med overskriften, kan de se navigation øverst og socialt bogmærker til højre. Overskriften leder også pænt ind i indholdet, hvilket fører til, at den besøgende ruller ned og tjekker mere.
9. Cult-Foo
Dette er bare et smukt overskrift, der fanger opmærksomheden fra mange læsere dagligt. Stemningen er sat som et kreativt og inspirerende tema og tiltrækker bare det rigtige publikum. Logoet i denne overskrift er "kilde" til resten af overskriften - en boks, der fører ud i resten af designet.
Søgelinjen er lige under den for nem adgang, og de to indholdsområder er defineret til højre.
Navigationen er det, der er virkelig sejt om denne overskrift. Det har mere af en tag-cloud føler, med de større kategorier er den større tekst. På denne måde ser de største ting først, når en ny læser ser taggskyen.
Til gengæld laver de forbindelse med disse ord og indholdet af blogs. Nu indeholder indholdet på bloggen det meste af det, der nu er mest mindeværdigt om dets indhold. Sørg for at tjekke den levende version af dette websted: Overskriftsmærkeblokområdet flyttes faktisk med brugerens scrollning med en dekorativ og endnu diskret grænse.
10. Vectips
Denne overskrift er temmelig minimalistisk, hvilket lægger større vægt på de bit af indhold, det holder. Logoet er dekorativt og skitseret i en kontrastfarve, hvilket gør det mindeværdigt.
Det efterfølges af en taglinje, der deler hvad bloggen handler om, og derefter simpel navigation, som yderligere definerer det. Navigationen er stor, fordi den har individuelle ikoner til at gøre opmærksom på hver, da læseren skinner over dem.
Den sjove illustration til højre sætter stemningen og fører øjet til navigationen øverst.
11. Deltidsindlæg
I modsætning til Vectips har denne overskrift meget at foregribe. Logoet øverst til venstre indeholder en tagline, og leder derefter øjet til navigation. Før du klikker gennem navigationen, fortsætter overskriften imidlertid med, hvordan hjemmesiden kan hjælpe de nye besøgende, og derefter under det er der mere navigation. Gennem dette hierarki har læseren lige fået et godt overblik over, hvordan man navigerer gennem hele hjemmesiden.
Illustrationen til højre fører derefter seeren til at notere RSS-feedet, og så er øjet ført videre ret til at fremme virksomhedens Facebook fan side.
12. TutCandy
Det største træk ved TutCandy header er dets kreative, farverige og detaljerede billedsprog. Med det sætter det stemningen og skaber troværdighed for en blog som denne. Navnet er sammenflettet i den farverige illustration, og kan betragtes som logoet.
Til højre er der en tagline, der forklarer, hvad bloggen er, og hvordan den er anderledes: "Kun de Tastiest Design Tutorials." Til trods for at det primært er et simpelt og sjovt spil på ord, er der et par søgeord, der slår læseren til forårsage positiv vurdering. "Kun" - det er unikt, originalt, one-of-a-kind.
Det svarer til "Hvordan er denne blog forskellig fra andre?" Spørgsmål. "Tastiest" - tagline kunne have været "Tasty Design Tutorials." Det lyder ikke kun mærkeligt, men det indebærer ikke nogen prioritet i forhold til andre designtutorials eller andre tutorial blogs.
Ovenfor er der også navigation vedrørende bloggen og en søgelinje til højre. Direkte nedenfor er indholdet defineret og organiseret, hvilket fører læseren til at grave dybere ind i bloggen.
13. Yoast
Denne blog giver et godt indhold i overskriften. Den unikke wireframe gør det muligt for overskriften at indeholde grafik og tilstrækkeligt indhold til at oprette forbindelse til en ny læser. Karakteren og illustrationen bag ham er en af de første ting, en ny besøgende vil bemærke, og de foretager et godt opkald ved at have tegnet peger på overskriftsindholdet til venstre.
Når øjet fører til indholdet i overskriften, ser de logoet, og måder at abonnere på eller oprette forbindelse til bloggen. Det læses så som en normal smule "om side" -indhold, bortset fra det medtages direkte på forsiden, hvilket betyder, at ikke kun læsere, der er interesserede nok til at gå til den omkringliggende side, laver den personlige forbindelse - i stedet gør alle nye læsere. Indholdet forklarer, hvad bloggen handler om, og viser derefter nogle populære og fremhævede indhold.
Under illustrationen til højre er RSS-feed igen, men denne gang med en mere genkendelig grafik. Bemærk, hvordan denne anden feed display viser til højre, efter at læseren lige havde afsluttet at læse nogle indholds titler, lidt om information, og efter at de allerede har lavet forbindelse til bloggen.
14. Den Indie Dude
Karakteren i denne overskrift, som alle andre overskrifter med tegn, giver et personligt præg og fungerer som en god introduktion til bloggen. Det er det første, som en ny læser vil bemærke, og dens høje kvalitet samt designfunktionerne omkring det gør en erklæring om stilen på denne designer og hvad man kan forvente af ham.
Til venstre er logoet, som yderligere fører øje til tagline forklarer indholdet på bloggen. Øjet fører igen til et indhold, der deler bloggens personlighed.
15. Ozon3
Temaet for denne overskrift er unikt, og i den forstand skaber det et mindeværdigt webdesign - et rigtig godt første indtryk. Efter at have værdsat illustrationen fører øjet til logoet til at huske mærket og fører derefter direkte ned til den primære navigation og derefter til indholdet.
Første gang seerne kan se, at denne blog er fokuseret omkring en webdesignportefølje, og de opdager dette efter virkelig at se designers arbejde på overskriften.
På trods af sin enkelhed er denne overskrift meget effektiv med hensyn til visuel hierarki og sætter en stor erklæring for seerne.
16. nDesign Studio
Denne farverige overskrift er hovedattraktionen til dette webdesign, og logoet fortæller den besøgende, at det er et designstudio.
Den fantastiske header validerer designerens færdigheder og hans mærke. Navigations-, feeds- og søgelinjen er også meget sammenflettet med overskriften, hvilket gør dem til et af de første mærkbare elementer.
Hovednavigationen er i form af faner og er først anerkendt som en del af overskriften. Fordi det er i form af faner, ser det ud til at det også er forbundet med indholdet, hvilket bringer besøgerens øje ned i bloggens vigtige indhold.
17. Web Designer Wall
Dette er en anden stor blog af Nick La fra nDesign Studio, og vi ser en lignende teknik: en fantastisk stor baggrund / header, der bekræfter talenter og ekspertise hos designeren. Logoet er større her, der giver en tagline, der forbinder bloggens navn med dets formål.
Resten af indholdet i overskriften er den oprindelige navigation, kontakt / RSS og søgelinjen. De er alle indrettet på lignende måde til hovedet, der forbinder dem.
Disse elementer har også lignende egenskaber til indholdet (mere almindelig baggrund, papirlignende tekstur), så de også føler, at de også er en del af indholdet. Dette afsnit i overskriften forbinder den indledende overskrift til indholdsområdet.
18. Ma.tt
Der ser ud til at være en ultimativ webdesignregel til ikke at lave overskrifter over 200-250 pixel. Dette er en stor regel at følge af mange forskellige årsager, men denne overskrift viser kun, hvordan man effektivt kan bryde den regel.
Ved ikke at vise noget indhold i starten bruger Matt sit design for at få det største indtryk på førstegangsviseren. Dens elegante detaljer og kreative måder skaber et uforglemmeligt første indtryk.
Logoet er stort, og da hjemmesiden er et navn, går det ud fra stillingen af en personlig blog. RSS-feedet er også øverst til venstre og fortæller seeren, at det faktisk er en blog fra starten. Endelig er navigationen det, der ses sidst, og dette provokerer den besøgende at fortsætte gennem bloggen.
19. Pixel Resort
Den detaljerede illustration stil af denne header gør det sjovt, men rent og professionelt. Det er endda animeret, da scenen går igennem dag og nat, og minder den besøgende om at fortsætte med at kigge op på overskriften, som indeholder logoet (mærket) og navigationen. Denne metode kan let promovere mere aktivitet i bloggen.
Under navigationen, der sættes i forgrunden, er der undernavigation med en pil, der "forbinder" den med resten af overskriften. Det hjælper yderligere at definere kategorier, og hjælper læseren med at finde det indhold, der interesserer dem bedst.
20. Webdesigner Depot
Ahh, ja - den blog du kigger i øjeblikket på. Uanset om du er en første gangs besøgende eller har læst Webdesigner Depot for lang tid, får overskriften din mest opmærksomhed.
Hvad der er godt med denne overskrift er, at det ikke kun er en header med en kreativ appel, men elementerne i den angiver, at det er en header med en kreativ appel, der er fokuseret omkring computere eller internettet. Den bærbare computer illustrationer, "www." Og andre teknologier alle bringe målgruppen mere specifikt.
Overskriften har virkelig ikke meget at tilbyde med hensyn til indhold, bortset fra et svævende link tilbage til hjemmesiden. Men fordi det er så komplekst, kan eventuelle ekstra funktioner overvælde designet og gøre det for rodet.
Denne overskrift er bare perfekt, selvom: indstilling af stemningen, inspirerende seeren, og det er kort nok til, at det fører seeren ned til resten af indholdet.
Afslutter
Forhåbent at se over disse tyve eksempler kan hjælpe mange bedre at definere spørgsmålene præsenterer i begyndelsen af denne artikel og hjælpe hver webdesigner til at være bedre opmærksom på blogoverskrifter.
Indhold, der kan medtages i et overskrift, kan variere meget fra blog til blog, og det er vigtigt at huske på målene i bloggen, temaet og hvad en første gangs besøgende vil se efter, når man besøger bloggen.
Skrevet udelukkende til WDD af Kayla Knight .
Du er velkommen til at dele dine egne tips til header design, samt eventuelle yderligere eksempler.