Blog Headers: 20 Bra exempel och bästa praxis
Sidhuvudet är troligen den första som en ny besökare ser på en blogg, så det är första intrycket - men varför är en blogghuvud så mycket viktigare, eller åtminstone annorlunda än huvudet på en grundläggande webbplats?
Blogghuvudet behöver mer funktionalitet. Andra webbdesigner kan skilja sig åt när det gäller användningen och därför kan vad som ingår i webbplatshuvudet och hur det presenteras variera mycket.
Med en blogg specifikt finns det dock bästa praxis som kan hjälpa läsaren att navigera genom bloggen och bli bättre involverad.
Det är precis vad den här artikeln kommer att göra. Vi hjälper dig att definiera vad som ska vara en del av en blogghuvud och hur du äntligen implementerar det , och då tittar vi på tjugo fantastiska exempel som bara gör det.
För att bestämma hur en blogghuvud ska utformas och vad som ska sättas in, behöver vi ställa några frågor om bloggen:
- Vilket humör måste ställas in för att locka rätt målgrupp?
- Hur kan det första intrycket via rubriken kommunicera vad bloggen handlar om?
- Hur kan bloggrubriken ge första intrycket, "Jag skiljer mig från de andra."
- Vilka innehållsdelar måste märkas omedelbart för att skapa bättre åtgärder? (klicka på länkar, prenumeration etc.)
Låt oss gräva lite djupare ...
Vilket humör måste ställas in för att locka rätt målgrupp?
När en besökare först kommer in i någon typ av webbplats, är det första som de bestämmer bloggens "personlighet" - och huruvida det är rätt för dem.
Detta är viktigt för bloggdesign, eftersom bloggar kräver att rätt målgrupp ska bli framgångsrik .
Till exempel: Med innehåll i reklambranschen borde en bloggdesign ha ett kreativt huvud för att imponera och inspirera nykomlingar. En mer teknisk eller affärsblogg kommer att ha en rakt framåt, avancerad rubrik som både är estetiskt tilltalande, men ändå ganska subtil.
Hur kan det första intrycket via rubriken kommunicera vad bloggen handlar om?
Vi har en del av detta som omfattas av att utveckla det övergripande humör som huvudet ska skapa, men en rubrik kan göra mer än för att klargöra för den nya läsaren vad den här bloggen handlar om.
Det allra första intrycket upptäcker bloggens personlighet, men vad handlar det om? Man kan inkludera en tagline med en logotyp som säger det, eller inkludera en liten paragraf / fras som berättar läsaren vad den här bloggen är och vem den är för.
Hur kan bloggrubriken ge första intrycket, "Jag skiljer mig från de andra"?
Ett annat sätt att säga detta är, "Hur kommer den här bloggen att komma ihåg? ”
Om det kommer att smälta in på alla andra bloggar på Internet, är det inte alls ett bra bloggtema. Detta är anledningen till att rubriken är en utmärkt plats för logotypen, tagline och någon annan branding.
Det övergripande utseendet och innehållet som presenteras vid första anblicken är vad som kommer att hålla fast, om det presenteras tillräckligt bra.
Vilka innehållsdelar måste märkas omedelbart för att skapa bättre åtgärder? (klicka på länkar, prenumeration etc.)
Sidhuvudet ska vara övergripande enkelt med avseende på innehåll, men vissa innehållsformer kan vara närvarande för att hjälpa till i deras uppmaning till handling. När en ny läsare dömmer bloggins första intryck och bestämmer sig för att stanna, börjar de leta efter bitar av innehåll och vart man ska navigera.
När kategorierna är omedelbart närvarande tittar tittaren över dem och hittar områden som intresserar dem. När ett sökfält är närvarande eller ett RSS-flöde, kan de inte prenumerera eller göra en sökning direkt, men de har naturligtvis gjort en undermedveten notering av placeringen och var den kan hittas i framtiden.
Alternativen varierar mycket bortom det här, men i princip är innehållet i rubriken det första intrycket för innehåll , så det borde vara det viktigaste och väl utformade.
Låt oss nu titta på några bra bloggrubriker och sedan diskutera deras fördelar.
1. Handledning9
Tutorial9 innehåller nästan alla de fördelar som diskuteras ovan. Logotypen och tagline visar omedelbart vad bloggen handlar om och hur det kan hjälpa läsaren.
De primära navigeringsbitarna finns på stora, märkbara flikar med ikoner som ingår för att dra i ögat. Detta leder omedelbart användaren till innehåll och främjar dem att gräva djupare in i bloggen.
Bakgrundsdesignen är kreativ och har till och med ett tema för konstnärlig skapande - exakt vad handledningarna är avsedda för. Dessutom finns det väsentligt innehåll till rätten, inklusive RSS-flödet, sökformuläret, bloggens sidor och mer.
2. Hemdesign Hitta
Denna rubrik använder en stor användning av visuell hierarki för att få poängen över. Bloggets titel är nästan tillräckligt för att berätta läsaren vad det handlar om, och det främjar att vistas och ser mer detaljerat om vad det handlar om.
Ögonet leder sedan till den första uppsättningen av navigering, där den omgående sidan är tydligt noterad, liksom kontaktsidan. Bilderna till höger ställa in stämningen och ge inspiration till de som är intresserade av den här bloggens ämne.
Slutligen leder bilderna till höger ögat nedåt till en mer beskrivande fras för bloggen.
3. Blog Design Blog
De mest anmärkningsvärda funktionerna i denna rubrik är logotypen och tagline. Den specifika målgruppen för denna blogg gör den mer unik, och genom att ange vad bloggen handlar om vid första anblicken ser en ny läsare det och är övertygad om att det skiljer sig från andra.
Ner lite längre, och i mindre text, är antalet läsare och länk till RSS-flödet, såväl som primärnavigering för att ytterligare gräva in vad bloggen handlar om, eller till innehållet i sig.
4. Kevin John Gomez
Den handgjorda överklagandet och fotot gör denna bloggs tema känner sig personligt och matchar webbplatsens namn - webmaster själv. Det här är en personlig blogg för en kreativ person, och huvudet kommunicerar det perfekt.
Komplett navigering finns i rubriken, eftersom det är begränsad navigering och kan lägga större vikt på det.
5. Naldz Graphics
Denna rubrik ger en bra logotyp och effektiv användning av innehåll i rubriken. Den största delen av rubriken är logotypen eller bloggnamnet, och det gör det enkelt att komma ihåg.
Ögat leder sedan till navigeringen, där läsaren kan gräva djupare in i bloggen då och då, eller åtminstone få en uppfattning om vad bloggen handlar om. Navigering och kategorier är ett bra sätt att berätta för nya läsare vad bloggen handlar om, om de är väldefinierade.
En grafik till höger hjälper till att ställa in stämningen i bloggen, och leder också till antalet abonnenter och RSS-länken. Med en blogg som har ett måttligt högt matningsantal är det en bra idé att visa det som räknas i rubriken, eftersom det på ett sätt validerar bloggens innehåll och ger det trovärdighet.
Det finns också extra innehåll på toppen, på en traditionell plats för denna typ av innehåll så att det lätt kan hittas.
6. Pro Blog Design
De två kontrasterande gröna elementen i den här rubriken gör att mer än en kanske tror. De flesta ser logotypen med den gröna popfärgen till vänster först, där de läser titeln på bloggen och rubriken. Det här är ännu en bra rubrik som berättar för nya läsare hur den här bloggen kan hjälpa dem.
Sedan läggs stora stora flikar i fokus med 1) sin uppenbara storlek och 2) den andra popen i grön färg. Den andra gröna fliken berättar läsaren att detta inte bara är en blogg som kan hjälpa dig att skapa en bättre bloggdesign, men det har bloggdesigntjänster att erbjuda. Ovanför, sociala medier ikoner som läsaren kan notera för senare åtgärd.
7. Octwelve
Denna illustrerade kreativa header sätter stämningen för bloggen ganska snabbt. Illustrationen är av webmaster och ger bloggen ett personligt tillvägagångssätt. Vi börjar få en uppfattning om innehållet i bloggen, innan det ens presenteras.
Denna design lägger en liten inledande mening direkt i rubriken och definierar precis vad den här bloggen är. Huvudnavigeringen ligger strax under logotypen, så det märks nästan omedelbart. Det finns också andra detaljer inom rubriken som är roliga, och leda tittaren till att titta på rubriken längre.
8. Mark Forrester
Denna roliga, knäppa och kreativa rubrik sätter en stämning och är unik nog för att verkligen fånga din uppmärksamhet.
Betraktaren vid första anblicken undersöker genast huvudet och dess fina detaljer och berättelsen den presenterar. Därmed kommer logotypen och tagline, där vyn hittar ut vad bloggen handlar om.
När du är klar med att ha rubriken kan de se navigationen uppåt och sociala bokmärken till höger. Rubriken leder också snyggt in i innehållet, vilket leder besökaren att rulla ner och kolla mer.
9. Cult-Foo
Detta är bara en vacker rubrik som fångar uppmärksamheten hos många läsare dagligen. Stämningen är ett kreativt och inspirerande tema och lockar bara rätt publik. Logotypen i denna rubrik är källan till resten av rubriken - en låda som leder till resten av designen.
Sökfältet ligger precis under det för enkel åtkomst, och de två innehållsområdena definieras till höger.
Navigationen är det som är riktigt coolt om den här rubriken. Det har mer av en tag-cloud-känsla, med de större kategorierna som den större texten. På det här sättet, när en ny läsare ser taggskyget, ser de de största föremålen först.
I gengäld gör de en koppling till dessa ord och innehållet i bloggarna. Nu har innehållet på bloggen det mesta av vad som är mest minnesvärt om innehållet. Var noga med att kolla in den levande versionen av den här webbplatsen: rubrikområdets molnområde flyttas faktiskt med användarens rullning, med en dekorativ och ändå obegränsad gräns.
10. Vectips
Denna rubrik är ganska minimalistisk, vilket lägger större vikt vid de bitar av innehåll som den innehåller. Logotypen är dekorativ och skisserad i en kontrastfärg som gör den till en minnesvärd.
Det följs av en tagglinje som delar vad bloggen handlar om, och sedan enkel navigering som ytterligare definierar det. Navigationen är stor eftersom den har enskilda ikoner för att uppmärksamma var och en som läsaren skummar över dem.
Den roliga bilden till höger ställer stämningen och leder ögat till navigationen uppåt.
11. Deltidspost
I motsats till Vectips har denna rubrik mycket på gång. Logotypen längst upp till vänster innehåller en tagline och leder sedan ögat till navigering. Innan du klickar i navigeringen fortsätter huvudet hur webbsidan kan hjälpa sina nya besökare, och under den här funktionen finns mer navigering. Genom denna hierarki fick läsaren en bra översikt över hur man navigerar på hela webbplatsen.
Bilden till höger leder så tittaren att notera RSS-flödet, och sedan leder ögat vidare rätt för att marknadsföra företagets Facebook-fan sida.
12. TutCandy
Den största funktionen i TutCandy-huvudet är dess kreativa, färgstarka och detaljerade bilder. Med det sätter det stämningen och skapar trovärdighet för en blogg som den här. Namnet är sammanflätat inom den färgstarka illustrationen, och kan betraktas som logotypen.
Till höger finns det en tagline som förklarar vad bloggen är och hur den är annorlunda: "Endast de smutsigaste designtutorialsna." Trots att det i första hand är ett enkelt och roligt spel på ord, finns det några nyckelord som slår läsaren till orsaka positiv bedömning. "Endast" - det är unikt, original, en-of-a-kind.
Den svarar på "Hur skiljer den här bloggen från andra?" Fråga. "Tastiest" - tagline kunde ha varit "Tasty Design Tutorials." Inte bara låter det lite konstigt, men det innebär inte något föregång över andra designtutorials eller andra handledningsbloggar.
Ovan finns även navigering om bloggen och en sökfält till höger. Direkt nedan definieras och organiseras innehållet, vilket leder läsaren till att gräva djupare in i bloggen.
13. Yoast
Den här bloggen ger bra innehåll i rubriken. Den unika wireframe gör det möjligt för huvudet att innehålla grafik och tillräckligt innehåll för att ansluta till en ny läsare. Karaktären och illustrationen bakom honom är en av de första sakerna en ny besökare kommer att märka, och de gör ett bra samtal genom att karaktären pekar på rubrikinnehållet till vänster.
När ögat leder till innehållet i huvudet ser de logotypen och sätt att prenumerera eller ansluta till bloggen. Det läser sedan precis som en vanlig bit av "om sidan" innehåll, förutom att det finns direkt på framsidan, vilket betyder att inte bara läsare som är intresserade nog att gå till omsidan gör den personliga anslutningen - istället gör alla nya läsare. Innehållet förklarar vad bloggen handlar om och visar sedan ett populärt innehåll med innehåll.
Nedanför bilden till höger visas RSS-flöde igen, men den här gången med en mer genkänlig grafik. Lägg märke till hur denna andra matningsdisplay visas till höger, efter att läsaren helt enkelt hade läst några innehålls titlar, lite om information och efter att de redan har anslutit sig till bloggen.
14. Den indie dude
Karaktären i denna rubrik, som alla andra rubriker med tecken, ger en personlig prägel och fungerar som en bra introduktion till bloggen. Det är det första som en ny läsare kommer att märka, och dess höga kvalitet, liksom de designfunktioner som omger det, gör ett uttalande om stilen hos denna designer och vad man kan förvänta sig av honom.
Till vänster är logotypen, som ytterligare leder ögat till tagline förklarar innehållet på bloggen. Ögat leder återigen till en del innehåll som delar bloggens personlighet.
15. Ozon3
Temat för denna rubrik är unikt, och i den meningen skapar det en minnesvärd webbdesign - ett riktigt bra första intryck. Efter att ha uppskattat illustrationen leder ögat till logotypen för att memorera varumärket och leder sedan direkt till den primära navigeringen och sedan till innehållet.
Första gången tittarna kan se att den här bloggen är inriktad kring en webbdesignportfölj, och de upptäcker detta efter att ha tittat på designers arbete på huvudet.
Trots sin enkelhet är denna rubrik mycket effektiv när det gäller visuell hierarki och sätter ett stort uttalande för tittarna.
16. nDesign Studio
Denna färgstarka rubrik är huvudattraktionen för denna webbdesign, och logotypen berättar för besökaren att det är en designstudio.
Den fantastiska huvudet validerar designerns färdigheter och hans varumärke. Navigations-, feeds- och sökfältet är alla väldigt sammanflätade med rubriken, vilket gör dem till en av de första märkbara elementen.
Huvudnavigering är i form av flikar och är först erkänd som en del av rubriken. Eftersom det är i form av flikar ser det ut att det också är kopplat till innehållet, vilket leder besökarens öga till det viktiga innehållet i bloggen.
17. Web Designer Vägg
Det här är en annan bra blogg av Nick La i nDesign Studio, och vi ser en liknande teknik: en fantastisk stor bakgrund / rubrik, som validerar talanger och expertis hos designer. Logotypen är större här, vilket ger en tagline som kopplar bloggens namn till sitt syfte.
Resten av innehållet i rubriken är startnavigering, kontakt / RSS och sökfältet. De är alla inredda på samma sätt som huvudet, som förbinder dem.
Dessa element har också liknande egenskaper för innehållet (mer vanlig bakgrund, papperliknande konsistens) så de känner sig också som om de är en del av innehållet också. Detta avsnitt i rubriken kopplar in den inledande rubriken till innehållsområdet.
18. Ma.tt
Det verkar vara en ultimat webbdesign regel att inte göra rubriker över 200-250 pixlar. Det här är en stor regel att följa av många olika anledningar, men den här rubriken visar hur man effektivt bryter den regeln.
Genom att inte visa något innehåll först använder Matt sin design för att göra det största intrycket på förstahandsvisaren. Dess eleganta detalj och kreativa sätt skapar ett minnesvärt första intryck.
Logotypen är stor, och eftersom webbplatsen är ett namn, förutsätter det en personlig bloggposition. RSS-flödet finns också längst upp till vänster och berättar betraktaren att det verkligen är en blogg från början. Slutligen är navigeringen det som ses senast, och detta provocerar besökaren att fortsätta genom bloggen.
19. Pixel Resort
Den detaljerade illustrationstilen i denna rubrik gör det roligt, men rent och professionellt. Det är även animerat som scenen går igenom dag och natt, och påminner besökaren om att fortsätta titta upp i huvudet, vilket innehåller logotypen (varumärket) och navigeringen. Denna metod kan enkelt främja mer aktivitet i bloggen.
Under navigeringen som ligger i framkant finns subnavigering med en pil som "kopplar" den till resten av rubriken. Det hjälper till att ytterligare definiera kategorier, och hjälper läsaren att hitta det innehåll som intresserar dem bäst.
20. Webdesigner Depot
Ahh, ja - den blogg du tittar på. Oavsett om du är en första gången besökare, eller har läst Webdesigner Depot för länge, får huvudet definitivt din uppmärksamhet.
Vad som är bra med den här rubriken är att det inte bara är en rubrik med en kreativ överklagande, men elementen i den anger att det är en rubrik med en kreativ överklagande fokuserad på datorer eller på webben. Den bärbara illustrationen, "www.", Och andra tekniska delar som alla tar in målgruppen mer specifikt.
Rubriken har inte mycket att erbjuda när det gäller innehåll, förutom en svängande länk till hemsidan. Men eftersom det är så komplicerat kan eventuella ytterligare funktioner överväldiga designen och göra den för rotig.
Den här rubriken är bara perfekt men: inställning av stämningen, inspirerande tittaren och det är tillräckligt kort att det leder tittaren ner till resten av innehållet.
Avslutar
Förhoppningsvis tittar på dessa tjugo exempel kan hjälpa många bättre att definiera frågorna presenteras i början av den här artikeln, och hjälpa varje webbdesigner att uppmärksamma bloggrubrikerna.
Innehåll som ska inkluderas i en rubrik kan variera kraftigt från blogg till blogg och det är viktigt att komma ihåg målen för bloggen, temat och vad en första gången besökare skulle leta efter när du besöker bloggen.
Skriven uteslutande för WDD av Kayla Knight .
Du är välkommen att dela med dig av dina egna tips för huvuddesign, samt några ytterligare exempel.