Blogkoppen: 20 geweldige voorbeelden en praktische tips
De header is waarschijnlijk het eerste dat een nieuwe bezoeker op een blog ziet, dus het is de eerste indruk - maar waarom is een blogkop zo veel belangrijker, of op zijn minst anders, dan de header van een standaardwebsite?
Blogkoppen hebben meer functionaliteit nodig. Andere webontwerpen kunnen verschillen in termen van hun gebruik en daarom kunnen de inhoud van de header van de website en de presentatie ervan sterk variëren.
Met een blog specifiek zijn er echter best practices die de lezer kunnen helpen bij het navigeren door de blog en er beter bij betrokken kunnen raken.
Dat is precies wat dit artikel zal doen. We zullen u helpen definiëren wat een onderdeel moet zijn van een blogkop en hoe u het uiteindelijk kunt implementeren , en dan zullen we twintig geweldige voorbeelden bekijken die precies dat doen.
Om te bepalen hoe een blogheader moet worden ontworpen en wat erin moet worden geplaatst, moeten we een paar vragen over de blog stellen:
- Welke stemming moet worden ingesteld om de juiste doelgroep aan te trekken?
- Hoe kan de eerste indruk via de header communiceren waar de blog over gaat?
- Hoe kan de kop van de blog de eerste indruk geven: "Ik ben anders dan de anderen."
- Welke stukken inhoud moeten onmiddellijk zichtbaar zijn om betere actie te creëren? (klikken op links, abonneren, etc.)
Laten we een beetje dieper graven ...
Welke stemming moet worden ingesteld om de juiste doelgroep aan te trekken?
Wanneer een bezoeker voor het eerst op een website komt, is het eerste wat zij bepalen de 'persoonlijkheid' van de blog - en of deze geschikt is voor hen.
Dit is essentieel voor blogontwerp, omdat blogs de juiste doelgroep nodig hebben om succesvol te zijn .
Bijvoorbeeld: met inhoud in de creatieve industrie moet een blogontwerp een creatieve kop hebben om indruk te maken op nieuwkomers en hen te inspireren. Een meer technische of zakelijke blog zal een rechtlijnige, high-end header willen die zowel esthetisch aantrekkelijk, maar toch redelijk subtiel is.
Hoe kan de eerste indruk via de header communiceren waar de blog over gaat?
We hebben een deel hiervan bedekt door het ontwikkelen van de algehele sfeer die de kop moet maken, maar een kop kan meer dan dat doen om aan de nieuwe lezer duidelijk te maken waar deze blog over gaat.
De allereerste indruk ontdekt de persoonlijkheid van de blog, maar waar gaat het allemaal over? Men zou een slogan kunnen opnemen met een logo dat het zegt, of een kleine alinea / zin bevatten die de lezer vertelt wat deze blog is en voor wie het is.
Hoe kan de kop van de blog de eerste indruk geven: "Ik ben anders dan de anderen"?
Een andere manier om dit te zeggen is: "Hoe zal deze blog worden onthouden? “
Als het zich voegt bij elke andere blog op internet, is dat helemaal geen goed blogthema. Dit is de reden waarom de koptekst een uitstekende plaats is voor het logo, de slogan en elke andere branding.
Het algehele uiterlijk en de gepresenteerde inhoud op het eerste gezicht is wat er zal blijven als het goed genoeg wordt gepresenteerd.
Welke stukken inhoud moeten onmiddellijk zichtbaar zijn om betere actie te creëren? (klikken op links, abonneren, etc.)
De kop moet over het algemeen eenvoudig zijn in termen van inhoud, maar sommige vormen van inhoud kunnen aanwezig zijn om te helpen bij hun oproep tot actie. Nadat een nieuwe lezer de eerste indruk van de blog heeft beoordeeld en besluit te blijven, gaan ze op zoek naar stukjes inhoud en waar naartoe.
Wanneer categorieën onmiddellijk aanwezig zijn, zal de kijker ernaar kijken en gebieden zoeken die hen interesseren. Wanneer een zoekveld aanwezig is of een RSS-feed, kunnen ze zich natuurlijk niet abonneren of meteen een zoekopdracht uitvoeren, maar ze hebben een onbewuste notitie gemaakt van de plaatsing en waar ze in de toekomst kunnen worden gevonden.
De opties variëren veel verder, maar eigenlijk is elke inhoud die in de kop wordt geplaatst de eerste indruk van inhoud , dus deze moet de belangrijkste zijn en goed zijn ontworpen.
Laten we nu een paar geweldige blogheaders bekijken en vervolgens hun voordelen bespreken.
1. Tutorial9
Tutorial9 biedt zo ongeveer alle voordelen die hierboven zijn besproken. Het logo en de slogan laten meteen zien waar het blog over gaat en hoe het de lezer kan helpen.
De belangrijkste navigatiestukken bevinden zich op enorme, opvallende tabbladen met pictogrammen om in het oog te tekenen. Dit leidt de gebruiker direct naar inhoud en promoot ze om dieper in de blog te graven.
Het achtergrondontwerp is creatief en heeft zelfs een thema van artistieke creatie - precies waar de tutorials voor zijn bedoeld. Verder is er essentiële inhoud naar rechts, waaronder de RSS-feed, het zoekformulier, de blogpagina's en meer.
2. Home Design zoeken
Deze header gebruikt een groot gebruik van visuele hiërarchie om het punt over te brengen. De titel van de blog is bijna voldoende om de lezer te vertellen waar het allemaal over gaat, en het bevordert het blijven en zien in meer detail waar het over gaat.
Het oog wordt vervolgens geleid naar de eerste navigatieset, waar de overpagina duidelijk wordt vermeld, evenals naar de contactpagina. De afbeeldingen aan de rechterkant bepalen vervolgens de stemming en bieden inspiratie voor diegenen die geïnteresseerd zijn in het onderwerp van deze blog.
Ten slotte leiden de afbeeldingen rechts het oog naar beneden naar een meer beschrijvende zin voor de blog.
3. Blog Design Blog
De meest opvallende kenmerken van deze header zijn het logo en de slogan. De specifieke doelgroep van deze blog maakt het meer uniek, en door op het eerste gezicht aan te geven waar de blog over gaat, ziet een nieuwe lezer dat en is hij ervan overtuigd dat het anders is dan andere.
Een beetje verder naar beneden, en in kleinere tekst, is het aantal lezers en link naar de RSS-feed, evenals primaire navigatie om verder te verdiepen in waar de blog over gaat, of in de inhoud zelf.
4. Kevin John Gomez
De handgetekende aantrekkingskracht en foto maken het thema van dit blog persoonlijk en komen overeen met de naam van de website - de webmaster zelf. Dit is een persoonlijke blog van een creatief persoon, en de header communiceert dat perfect.
De volledige navigatie bevindt zich in de koptekst, omdat het een beperkte navigatie is en er meer nadruk op kan hebben.
5. Naldz Graphics
Deze header biedt een geweldig logo en effectief gebruik van content in de header. Het grootste deel van de kop is het logo of de blognaam en dat maakt het gemakkelijk te onthouden.
Het oog wordt dan naar de navigatie geleid, waar de lezer de blog eens en toen dieper kan graven, of op zijn minst een idee krijgt van waar de blog over gaat. Navigatie en categorieën zijn een geweldige manier om nieuwe lezers te vertellen waar de blog over gaat, als ze goed zijn gedefinieerd.
Een grafische afbeelding aan de rechterkant helpt om de sfeer van de blog in te stellen en leidt ook naar het aantal abonnees en de RSS-link. Met een blog met een matige tot hoge feedtelling, is het een goed idee om die telling in de koptekst weer te geven, omdat deze op een bepaalde manier de inhoud van de blog valideert en deze geloofwaardig maakt.
Er is ook extra content aan de bovenkant, op een traditionele plek voor dit soort content, zodat het gemakkelijk kan worden gevonden.
6. Pro Blog ontwerp
De twee contrasterende groene elementen in deze koptekst doen meer dan denken. De meesten zien het logo met de groene kleur pop eerst links, waar ze de titel van de blog en de kop lezen. Dit is weer een geweldige kop die nieuwe lezers vertelt hoe dit blog hen kan helpen.
Vervolgens worden grote extra grote tabs scherpgesteld met 1) hun overduidelijke grootte en 2) die andere pop van groene kleur. Het andere groene tabblad vertelt de lezer dat dit niet alleen een blog is die je kan helpen een beter blogontwerp te maken, maar het heeft ook blogontwerpdiensten te bieden. Daarboven sociale media-iconen waar de lezer kennis van kan nemen voor latere actie.
7. Octwelve
Deze geïllustreerde creatieve kop geeft de sfeer voor de blog vrij snel weer. De illustratie is van de webmaster en geeft de blog een persoonlijke benadering. We beginnen een idee te krijgen over de inhoud van de blog, nog voordat deze is gepresenteerd.
Dit ontwerp plaatst een kleine inleidende zin recht in de kop, die definieert wat precies deze blog is. De hoofdnavigatie bevindt zich direct onder het logo, dus het wordt bijna onmiddellijk opgemerkt. Er zijn ook andere details in de header die leuk zijn, en de toeschouwer ertoe brengen langer naar de header te kijken.
8. Markeer Forrester
Deze leuke, eigenzinnige en creatieve kop geeft een sfeer en is uniek genoeg om echt je aandacht te trekken.
De kijker op het eerste gezicht onderzoekt meteen de koptekst en de fijne details en het verhaal dat het bevat. Daarin komen het logo en de slogan, waar het beeld erachter komt waar de blog over gaat.
Als je klaar bent geniet je van de koptekst, kunnen ze de navigatie bovenaan en sociale bladwijzers naar rechts zien. De kop leidt ook mooi naar de inhoud, waardoor de bezoeker naar beneden scrolt en meer bekijkt.
9. Cult-Foo
Dit is gewoon een mooie kop die dagelijks de aandacht van veel lezers trekt. De sfeer is ingesteld als een creatief en inspirerend thema en trekt precies het juiste publiek aan. Het logo in deze kop is de "bron" van de rest van de koptekst - een vak dat naar de rest van het ontwerp leidt.
De zoekbalk bevindt zich vlak onder die voor gemakkelijke toegang en de twee inhoudsgebieden zijn rechts gedefinieerd.
De navigatie is echter heel cool aan deze header. Het heeft meer het gevoel van een tagwolk, waarbij de grotere categorieën de grotere tekst zijn. Op deze manier zien een nieuwe lezer de tagcloud eerst de grootste items.
In ruil daarvoor maken ze een verbinding met deze woorden en de inhoud van de blogs. Nu heeft de inhoud op de blog het meeste van wat nu het meest gedenkwaardig is over de inhoud ervan. Zorg ervoor dat u de liveversie van deze site bekijkt: het header-tagwolkgedeelte dat daadwerkelijk is verplaatst met het scrollen van de gebruiker, met een decoratieve en toch onopvallende rand.
10. Vectips
Deze header is eerder minimalistisch, wat meer nadruk legt op de stukjes inhoud die het bevat. Het logo is decoratief en omlijnd in een contrasterende kleur, waardoor het een gedenkwaardig geheel is.
Het wordt gevolgd door een tag-regel die deelt waar de blog over gaat en vervolgens een eenvoudige navigatie die dit verder definieert. De navigatie is geweldig omdat het afzonderlijke pictogrammen heeft om aandacht te vestigen op elk daarvan terwijl de lezer eroverheen springt.
De leuke illustratie aan de rechterkant bepaalt de sfeer en leidt naar de navigatie bovenin.
11. Deeltijd bericht
In tegenstelling tot Vectips, heeft deze header veel te maken. Het logo in de linkerbovenhoek bevat een slogan en leidt vervolgens het oog naar navigatie. Voordat je echter door de navigatie bladert, blijft de koptekst de manier waarop de website nieuwe bezoekers kan helpen, en hieronder staat meer navigatie. Via deze hiërarchie heeft de lezer zojuist een goed overzicht gekregen van hoe door de website te navigeren.
De illustratie aan de rechterkant leidt de kijker om kennis te nemen van de RSS-feed en vervolgens wordt het oog verder geleid om de Facebook-fanpagina van het bedrijf te promoten.
12. TutCandy
Het grootste kenmerk van de TutCandy-header is zijn creatieve, kleurrijke en gedetailleerde beeldtaal. Daarmee bepaalt het de sfeer en creëert het geloofwaardigheid voor een blog zoals deze. De naam is verweven in de kleurrijke illustratie en kan worden beschouwd als het logo.
Rechts is er een slogan die uitlegt wat de blog is en hoe deze verschilt: "Only the Tastiest Design Tutorials." Ondanks dat het vooral een eenvoudig en leuk woordspel is, zijn er een paar trefwoorden die de lezer treffen om een positief oordeel vellen. "Only" - het is uniek, origineel en uniek.
Het beantwoordt de vraag "Hoe is deze blog anders dan andere?". "Tastiest" - de slogan had "Tasty Design Tutorials" kunnen zijn. Dat klinkt niet alleen een beetje raar, maar het betekent ook geen voorrang op andere ontwerphandleidingen of andere zelfstudieblogs.
Hierboven vindt u ook navigatie met betrekking tot de blog en een zoekbalk aan de rechterkant. Direct hieronder is de inhoud gedefinieerd en georganiseerd, waardoor de lezer dieper in de blog graaft.
13. Yoast
Deze blog biedt geweldige inhoud in de kop. Met het unieke draadframe kan de header afbeeldingen en voldoende inhoud bevatten om verbinding te maken met een nieuwe lezer. Het karakter en de illustratie achter hem is een van de eerste dingen die een nieuwe bezoeker zal opvallen en ze maken een goede call door het karakter naar links te laten wijzen naar de koptekst.
Nadat het oog is geleid naar de inhoud van de koptekst, zien ze het logo en manieren om zich te abonneren op of zich te verbinden met de blog. Het leest dan net als een normale bit van "over pagina" inhoud, behalve het recht op de voorpagina, wat betekent dat niet alleen lezers die geïnteresseerd genoeg zijn om naar de over-pagina te gaan die persoonlijke verbinding maken - in plaats daarvan doen alle nieuwe lezers het. De inhoud legt uit waar de blog over gaat en geeft vervolgens een aantal populaire en aanbevolen inhoud weer.
Onder de illustratie rechts, wordt de RSS-feed opnieuw weergegeven, maar nu met een herkenbare afbeelding. Let op hoe dit tweede feeddisplay rechts wordt weergegeven, nadat de lezer net enkele inhoudstitels, een beetje over informatie en nadat ze al een verbinding met de blog hebben gemaakt, heeft voltooid.
14. Dat Indie Dude
Het personage in deze koptekst geeft, net als alle andere koppen met personages, een persoonlijk tintje en fungeert als een geweldige introductie tot de blog. Het is het eerste wat een nieuwe lezer zal opvallen, en de hoge kwaliteit ervan, evenals de ontwerpkenmerken eromheen, geven een statement over de stijl van deze ontwerper en wat hij van hem mag verwachten.
Aan de linkerkant is het logo, dat verder leidt naar de slogan met uitleg over de inhoud op de blog. Het oog wordt opnieuw geleid naar een stukje content dat de persoonlijkheid van de blog deelt.
15. Ozon3
Het thema van deze header is uniek, en in die zin creëert het een gedenkwaardig webontwerp - een echt geweldige eerste indruk. Na het waarderen van de illustratie wordt het oog geleid naar het logo voor het onthouden van het merk en vervolgens rechtstreeks naar de primaire navigatie en vervolgens naar de inhoud.
De eerste keer dat kijkers zien dat deze blog zich concentreert op een webontwerpportfolio, ontdekken ze dit nadat ze het werk van de ontwerper echt in de kop hebben bekeken.
Ondanks zijn eenvoud is deze koptekst erg effectief in termen van visuele hiërarchie en vormt deze een enorme verklaring voor kijkers.
16. nDesign Studio
Deze kleurrijke kop is de belangrijkste attractie van dit webdesign en het logo vertelt de bezoeker dat het een ontwerpstudio is.
De verbazingwekkende header valideert de vaardigheden van de ontwerper en zijn merk. De navigatie, feeds en zoekbalk zijn allemaal erg verweven met de header, waardoor ze een van de eerste opvallende elementen zijn.
De hoofdnavigatie heeft de vorm van tabbladen en wordt voor het eerst herkend als onderdeel van de koptekst. Omdat het in de vorm van tabbladen is, lijkt het ook verbonden te zijn met de inhoud, waardoor de aandacht van de bezoeker wordt gevestigd op de belangrijke inhoud van de blog.
17. Web Designer Wall
Dit is weer een geweldige blog van Nick La van nDesign Studio, en we zien een vergelijkbare techniek: een verbazingwekkende grote achtergrond / header, waarmee de talenten en expertise van de ontwerper worden gevalideerd. Het logo is hier groter en biedt een slogan die de naam van de blog verbindt met zijn doel.
De rest van de inhoud in de kop is de eerste navigatie, contactpersoon / RSS en de zoekbalk. Ze zijn allemaal op dezelfde manier versierd als de header en verbinden ze.
Deze elementen hebben echter ook vergelijkbare kenmerken als de inhoud (duidelijker achtergrond, papierachtige textuur), zodat ze ook het gevoel hebben dat ze deel uitmaken van de inhoud. Dit gedeelte van de koptekst verbindt de inleidende kop met het inhoudsgebied.
18. Ma.tt
Er lijkt een ultieme webontwerpregel te zijn om geen headers van meer dan 200-250 pixels te maken. Dit is een geweldige regel die om verschillende redenen moet worden gevolgd, maar deze koptekst laat zien hoe je die regel effectief kunt overtreden.
Door in eerste instantie geen inhoud te tonen, gebruikt Matt zijn ontwerp om de grootste indruk te maken bij de eerste kijker. De elegante details en creatieve manieren creëren een onvergetelijke eerste indruk.
Het logo is groot en aangezien de website een naam is, neemt deze de positie van een persoonlijke blog in. De RSS-feed staat ook in de linkerbovenhoek en vertelt de kijker dat het vanaf het begin inderdaad een blog is. Ten slotte is de navigatie wat als laatste wordt gezien en dit lokt de bezoeker uit om verder te gaan op de blog.
19. Pixel Resort
De gedetailleerde illustratiestijl van deze header maakt het leuk, maar toch schoon en professioneel. Het is zelfs geanimeerd terwijl de scène dag en nacht doorloopt en de bezoeker eraan herinnert om terug te blijven kijken naar de koptekst, die het logo (merk) en de navigatie bevat. Deze methode kan gemakkelijk meer activiteit in de blog promoten.
Onder de navigatie die op de voorgrond wordt geplaatst, is er subnavigatie met een pijl die het verbindt met de rest van de kop. Het helpt bij het verder definiëren van categorieën en helpt de lezer de inhoud te vinden die hem / haar het meest interesseert.
20. Webdesigner Depot
Ahh, ja - de blog die u momenteel bekijkt. Of u nu voor het eerst op bezoek bent, of Webdesigner Depot al lang aan het lezen bent, de kop is zeker uw aandacht.
Het mooie van deze koptekst is dat deze niet alleen een kop is met een creatieve aantrekkingskracht, maar dat de elementen daarin een koptekst zijn met een creatieve aantrekkingskracht gericht op computers of het web. De laptopillustraties, de "www." En andere stukjes technologie brengen de doelgroep specifieker.
De header heeft echt niet veel te bieden qua inhoud, behalve een zwevende link terug naar de startpagina. Omdat het echter zo complex is, kunnen extra functies het ontwerp overbelasten en het te rommelig maken.
Deze header is echter perfect: de sfeer bepalen, de kijker inspireren en het is kort genoeg om de kijker naar de rest van de inhoud te leiden.
Afsluiten
Als we deze twintig voorbeelden overzien, kunnen we hopelijk veel beter de vragenkado's in het begin van dit artikel definiëren en elke webontwerper helpen om meer aandacht te besteden aan de blogkoppen.
Inhoud die in een koptekst kan worden opgenomen, kan sterk variëren van blog tot blog en het is belangrijk om rekening te houden met de doelen van de blog, het thema en wat een eerste bezoeker zou willen wanneer hij de blog bezoekt.
Exclusief geschreven voor WDD door Kayla Knight .
Deel gerust uw eigen tips voor het ontwerp van kopbalken, evenals eventuele aanvullende voorbeelden.