Záhlaví blogu: 20 skvělých příkladů a nejlepších postupů
Hlavička je pravděpodobně první věc, kterou na blogu vidí nový návštěvník, takže je to první dojem - ale proč je záhlaví blogu mnohem důležitější nebo alespoň odlišné od záhlaví základní webové stránky?
Záhlaví blogu vyžaduje další funkce. Jiné návrhy webových stránek se mohou lišit, pokud jde o jejich použití, a proto obsah, který je součástí hlavičky webových stránek a jejich prezentace, se může značně lišit.
S konkrétním blogem však existují nejlepší postupy, které mohou čtenáři pomoci procházet blogy a lépe se zapojit.
To je přesně to, co tento článek udělá. Pomůžeme vám definovat, co by mělo být součástí hlavičky blogu a jak ji konečně provést , a pak se podíváme na dvacet úžasných příkladů, které to dělají.
Chcete-li zjistit, jak má být hlavička blogu navržena a co je třeba do ní vložit, musíme o blogu položit několik otázek:
- Jaká nálada musí být nastavena, aby přilákala správné cílové publikum?
- Jak může první dojem přes záhlaví sdělit, o čem je celý blog?
- Jak může hlavička blogu dát první dojem: "Jsem odlišný od ostatních."
- Jaké obsahy musí být okamžitě viditelné, aby se vytvořila lepší akce? (kliknutím na odkazy, přihlášením atd.)
Pojďme trochu hlouběji ...
Jaká nálada musí být nastavena, aby přilákala správné cílové publikum?
Když návštěvník poprvé přichází na jakýkoli typ webových stránek, první věc, kterou určí, je "osobnost" blogu - a zda je pro ně správné, nebo ne.
To je nezbytné pro návrh blogu, protože blogy vyžadují, aby správné cílové publikum bylo úspěšné .
Například: s obsahem v kreativním průmyslu, blogový design by měl mít kreativní hlavičku, která by inspirovala nováčky. Více technický nebo obchodní blog bude chtít přímočarý, high-end záhlaví, který je jak esteticky přitažlivý, ale přesto poměrně jemný.
Jak může první dojem přes záhlaví sdělit, o čem je celý blog?
Máme část tohoto pokrytí tím, že rozvíjíme celkovou náladu, kterou hlavička by měla vytvářet, ale záhlaví může udělat víc než to, aby objasnilo novému čtenáři, o čem je tento blog.
První dojem objeví osobnost blogu, ale co přesně je to všechno? Jeden by mohl zahrnovat tagline s logem, který to říká, nebo obsahovat malý odstavec / frázi, které čtečce informuje o tom, co je tento blog a pro koho je.
Jak může hlavička blogu dát první dojem: "Jsem odlišný od ostatních"?
Dalším způsobem, jak to uvést, je: "Jak se tento blog bude pamatovat? "
Pokud se bude skládat do všech ostatních blogů na internetu, to vůbec není dobré téma blogu. To je důvod, proč je záhlaví hlavním místem pro logo, tagline a jakoukoli jinou značku.
Celkový vzhled a obsah prezentovaný na první pohled je to, co se bude držet, pokud bude dostatečně prezentováno.
Jaké obsahy musí být okamžitě viditelné, aby se vytvořila lepší akce? (kliknutím na odkazy, přihlášením atd.)
Hlavička by měla být celkově jednoduchá z hlediska obsahu, ale některé formy obsahu mohou být k dispozici, aby pomohly pomoci při jejich výzvě k akci. Poté, co nový čtenář posuzuje počáteční dojem z blogu a rozhodne se zůstat, začnou hledat kusy obsahu a kde se má pohybovat.
Když jsou kategorie okamžitě přítomny, divák se na ně podívá a vyhledá oblasti, které je zajímají. Pokud je k dispozici vyhledávací pole nebo zdroj RSS, nemusí se samozřejmě přihlásit k odběru nebo provést vyhledávání, ale podvědomě si uvědomili její umístění a kde ho najít v budoucnu.
Možnosti se liší mnohem víc, ale v podstatě každý obsah umístěný v hlavičce je prvním zobrazením obsahu , proto by měl být nejdůležitější a dobře navržený.
Podívejme se nyní na pár skvělých záhlaví blogů a pak se seznamte s jejich přínosy.
1. Tutorial9
Tutorial9 obsahuje téměř všechny výhody popsané výše. Logo a tagline okamžitě zobrazují, o čem blog je a jak může pomoci čtenáři.
Hlavní navigační jednotky jsou na obrovských, viditelných záložkách s ikonami, které jsou součástí oka. Toto okamžitě vede uživatele k obsahu a propaguje je, aby se do blogu ponořili hlouběji.
Návrh pozadí je kreativní a má dokonce i téma umělecké tvorby - přesně to, proč jsou výukové programy určeny. Kromě toho je podstatný obsah napravo, včetně RSS kanálu, vyhledávacího formuláře, stránek blogu a dalších.
2. Domácí design Find
Tato hlavička využívá skvělé využití vizuální hierarchie k získání bodu přes. Titul blogu je takřka dost, aby mohl čtenáři říct, o čem to všechno je, a podporuje to, aby se dál a podrobněji seznámil s tím, o co jde.
Oko je pak vedeno k první sadě navigace, kde je jasně uvedena stránka, stejně jako stránka s kontakty. Obrazy vpravo pak nastaví náladu a poskytnou inspiraci pro ty, kteří se zajímají o téma tohoto blogu.
Konečně, obrázky vpravo vedou oko dolů na popisnější frázi pro blog.
3. Blog design blogu
Nejpozoruhodnější funkce této hlavičky jsou logo a tagline. Konkrétní cílové publikum tohoto blogu je o to více jedinečné a tím, že na první pohled uvede, o čem blog je, první vidí nový čtenář a je přesvědčen, že je odlišný od ostatních.
O něco dál, a v menším textu je počet čtenářů a odkaz na RSS kanál, stejně jako primární navigace, aby se dále ponořil do toho, o co blog je, nebo do samotného obsahu.
4. Kevin John Gomez
Ručně kreslená výzva a fotografie dělají téma tohoto blogu pocit osobnosti a odpovídá jménu webové stránky - samotnému webmasterovi. Jedná se o osobní blog tvůrčího člověka a hlavička to dokonale komunikuje.
Kompletní navigace je v záhlaví, neboť je omezená navigace a je schopna klást větší důraz na to.
5. Naldz Graphics
Tato záhlaví poskytuje skvělé logo a efektivní využití obsahu v hlavičce. Největší částí hlavičky je logo nebo název blogu, což usnadňuje zapamatování.
Oko je pak vedeno k navigaci, kde čtenář může hlouběji hloubit do blogu, ať už tam a tam, nebo alespoň získat představu o tom, o čem blog je. Navigace a kategorie jsou skvělým způsobem, jak říct novým čtenářům, o čem blog je, pokud jsou dobře definovány.
Grafika napravo pomáhá nastavit náladu blogu a vede také k počtu odběratelů a odkazu RSS. S blogem, který má průměrný až vysoký počet zdrojů, je dobré ukázat, že počet v záhlaví, protože určitým způsobem ověřuje obsah blogu a dává mu věrohodnost.
K dispozici je také další obsah v horní části, na tradičním místě pro tento typ obsahu, takže lze snadno najít.
6. Pro Blog Design
Dvě kontrastní zelené prvky v tomto záhlaví si mohou myslet více než jeden. Nejvíce vidí logo se zelenou popovou barvou vlevo první, kde četli název blogu a titulku. Je to další skvělý nadpis, který novým čtenářům povídá, jak jim tento blog pomůže.
Poté se rozsvítí velké záložky přesahující 1) jejich zřejmou velikost a 2) jiný pop zelené barvy. Další zelená karta informuje čtenáře, že to není jen blog, který vám pomůže nabídnout lepší návrh blogu, ale nabízí služby blogového designu. Nad to, ikony sociálních médií, které může čtenář vzít na vědomí pro pozdější akci.
7. Očerven
Tento ilustrovaný kreativní záhlaví nastavuje náladu blogu poměrně rychle. Ilustrace je webmastera a dává blogu osobní přístup. Začneme se s nápadem o obsahu blogu ještě předtím, než bude prezentován.
Tento návrh obsahuje malou úvodní větu přímo v záhlaví a definuje, co přesně je tento blog. Hlavní navigace je přímo pod logem, takže je téměř okamžitě zaznamenána. V záhlaví jsou také další detaily, které jsou zábavné, a vedou diváka, že se dívá na záhlaví déle.
8. Značka Forrester
Tato zábavná, nepředvídatelná a kreativní záhlaví nastavuje náladu a je dostatečně unikátní, aby vás opravdu zaujala.
Divák na první pohled okamžitě prozkoumá záhlaví, jemné detaily a příběh, který představuje. V tom se objevuje logo a tagline, kde pohled zjistí, o co jde blog.
Po dokončení užívání záhlaví se zobrazí navigace nahoru a sociální záložky vpravo. Hlavička také přináší do obsahu hezký náhled, který vede návštěvníka k posunu dolů a vyzkoušet si další.
9. Cult-Foo
To je jen krásná hlavička, která zachycuje pozornost mnoha čtenářů denně. Nálada je nastavena jako kreativní a inspirativní téma a přitahuje jen správné publikum. Logo v tomto záhlaví je "zdroj" zbytku hlavičky - pole, které vede do zbytku návrhu.
Pruh pro vyhledávání je přímo pod ním pro usnadnění přístupu a obě oblasti obsahu jsou definovány vpravo.
Navigace je to, co je opravdu skvělé v této záhlaví. Má větší pocit štítku s mraky, přičemž větší kategorie jsou většími texty. Tímto způsobem, jakmile nový čtenář uvidí cloud značky, vidí nejprve největší položky.
Na oplátku vytvářejí spojení s těmito slovy a obsahem blogů. Nyní obsah zobrazený na blogu má co nejvíce co je nejvíce zapamatovatelný o jeho obsahu. Ujistěte se, že jste si prohlédli živou verzi tohoto webu: Oblast hlavičky tagu ve skutečnosti se pohybovala s posunem uživatele, s dekorativní a přesto nenápadnou hranicí.
10. Vectips
Tato hlavička je spíše minimalistická, což kladou větší důraz na bity obsahu, který drží. Logo je ozdobné a načrtnuté v kontrastní barvě, takže je zapamatovatelné.
Následuje řádek značky, který sdílí to, o čem je blog, a pak jednoduchou navigaci, která ji dále definuje. Navigace je skvělá, protože má jednotlivé ikony, které jim přinášejí pozornost, protože čtenář je skáká nad nimi.
Zábavná ilustrace vpravo nastaví náladu a vede oko k navigaci nahoru.
11. Zveřejnění na částečný úvazek
Na rozdíl od Vectipsu se tato hlavička hodně děje. Logo v levém horním rohu obsahuje tagline a pak vede oko k navigaci. Předtím, než kliknete na navigaci, hlavička pokračuje v tom, jak mohou webové stránky pomáhat svým novým návštěvníkům, a pak pod nimi je více navigace. Prostřednictvím této hierarchie čtenář získal skvělý přehled o tom, jak se pohybovat po celé webové stránce.
Obrázek na pravé straně vede diváka, aby vzal na vědomí RSS kanál, a pak oko je veden další právo na podporu Facebook společnosti fanoušek stránky.
12. TutCandy
Největší vlastností hlavičky TutCandy je jeho kreativní, barevné a podrobné snímky. Díky tomu nastavuje náladu a vytváří důvěryhodnost pro takový blog. Jméno je propletené na barevném obrázku a může být považováno za logo.
Napravo je popis, který vysvětluje, co je blog a jak se liší: "Pouze Tasty Design Tutorials." Přes to, že je především jednoduchá a zábavná hra na slova, existuje několik klíčových slov, které zasáhnou čtenáře způsobit pozitivní úsudek. "Pouze" - je to jedinečné, originální, jedinečné.
Odpovídá na otázku "Jak je tento blog odlišný od ostatních?". "Tastiest" - příběh mohl být "Tasty Design Tutorials". Nejen, že to zní trochu divně, ale neznamená to přednost před jinými designovými cvičeními nebo jinými tutoriálními blogy.
Nahoře je také navigace týkající se blogu a vyhledávací lišta napravo. Přímo pod tímto obsahem je obsah definován a organizován, což čtenáře vede k hlouběji do blogu.
13. Nejrychlejší
Tento blog poskytuje skvělý obsah v hlavičce. Jedinečný drátový rámeček umožňuje, aby hlavička obsahovala grafiku a dostatečný obsah pro vytvoření spojení s novou čtečkou. Postava a ilustrace za ním jsou jednou z prvních věcí, které si nový návštěvník všimne, a udělají dobrý volání tím, že mají charakter znaku k hlavičce vlevo.
Po oko je vedeno k obsahu záhlaví, vidí logo a způsoby, jak se přihlásit k blogu. Následně si přečte stejně jako normální obsah "o stránce", s výjimkou toho, co je zobrazeno přímo na titulní stránce, což znamená, že nejen čtenáři, kteří mají dostatek zájem, aby se mohli podívat na stránku, aby se o tom osobně připojili - místo toho všichni noví čtenáři. Obsah vysvětluje, o čem blog je, a poté zobrazí nějaký oblíbený a vyhraný obsah.
Pod obrázkem napravo je RSS kanál znovu uveden, ale tentokrát s více rozpoznatelnou grafikou. Všimněte si, jak se tento druhý informační kanál zobrazuje vpravo, poté, co čtenář právě dokončil přečtení některých obsahových titulů, trochu informací a poté, co již s blogem spojil.
14. Ten Indie Dude
Postava v této hlavičce, stejně jako všechny ostatní hlavičky se znaky, poskytuje osobní dojem a působí jako skvělý úvod do blogu. Je to první věc, kterou si nový čtenář všimne, a jeho vysoká kvalita, stejně jako designové prvky, které ji obklopují, dělají prohlášení o stylu tohoto designéra a co od něj očekávat.
Na levé straně je logo, které dále vede oko k popisu, který vysvětluje obsah zobrazený na blogu. Oko je opět vedeno k obsahu sdílení osobnosti blogu.
15. Ozon3
Téma tohoto záhlaví je jedinečné a v tomto smyslu vytváří nezapomenutelný webový design - skutečně skvělý první dojem. Po zhodnocení ilustrace je oko vedeno k logu pro zapamatování značky a pak přímo vedoucí dolů k primární navigaci, a pak k obsahu.
Diváci mohou poprvé vidět, že tento blog je zaměřen na portfolio webového designu a objevují to po skutečném prohlížení práce designéra na hlavičce.
Navzdory své jednoduchosti je tato hlavička velmi efektivní, pokud jde o vizuální hierarchii, a nastavuje pro diváky obrovské prohlášení.
16. nDesign Studio
Tato barevná hlavička je hlavní atrakcí tohoto webového designu a logo říká návštěvníkovi, že jde o design studio.
Úžasná hlavička potvrzuje dovednosti designéra a jeho značku. Navigace, informační kanály a vyhledávací panel jsou velmi propojeny se záhlavím, což je jeden z prvních nápadných prvků.
Hlavní navigace je ve formě tabulek a nejprve je rozpoznána jako součást záhlaví. Vzhledem k tomu, že je to ve formě tabulek, zdá se, že je také spojeno s obsahem, přinášející oko návštěvníků dolů do důležitého obsahu blogu.
17. Webová stěna designéra
Jedná se o další skvělý blog Nicke nDesign Studio a vidíme podobnou techniku: úžasné velké pozadí / hlavičku, potvrzující talent a odbornost designéra. Logo je zde větší a obsahuje tagy, které spojují jméno blogu s jeho účelem.
Zbytek obsahu v záhlaví je počáteční navigace, kontakt / RSS a vyhledávací panel. Všechny jsou zdobeny podobným způsobem jako záhlaví a spojují je.
Tyto prvky mají také podobné vlastnosti jako obsah (více obyčejné pozadí, papír-jako textury), takže se také cítí, jako by byly součástí obsahu také. Tato část záhlaví spojuje úvodní záhlaví s oblastí obsahu.
18. Ma.tt
Zdá se, že je konečným pravidlem webového designu, aby se záhlaví nepřesahovaly 200-250 pixelů. Toto je skvělé pravidlo, které je třeba dodržovat z mnoha různých důvodů, ale tato záhlaví ukazuje, jak účinně porušovat toto pravidlo.
Tím, že nejprve nezobrazuje žádný obsah, používá Matt svůj design, aby získal největší dojem na první návštěvníky. Jeho elegantní detaily a kreativní způsoby vytvářejí nezapomenutelný první dojem.
Logo je velké a jako webová stránka je jméno, zaujímá postavení osobního blogu. RSS kanál je také vlevo nahoře, říká diváka, že je to skutečně blog od začátku. Konečně, navigace je to, co je vidět naposledy, a to provokuje návštěvníka, aby pokračoval v blogu.
19. Pixel Resort
Podrobný styl ilustrace tohoto záhlaví je zábavný, ale čistý a profesionální. Je dokonce oživena, protože scéna prochází dnem i nocí a připomíná návštěvníkovi, aby se stále díval zpět na hlavičku, která obsahuje logo (značku) a navigaci. Tato metoda může snadno propagovat větší aktivitu v blogu.
Pod navigací, která je umístěna v popředí, je pod navigací se šipkou "připojit" k zbytku záhlaví. Pomáhá dále definovat kategorie a pomáhá čtečce najít obsah, který je nejlépe zajímá.
20. Webdesigner Depot
Aha, ano - blog, který právě prohlížíte. Ať už jste první návštěvník, nebo jste četli Webdesigner Depot dlouho, hlavička vám nejlépe zaujme.
Co je skvělé v této hlavičce, je to, že to není jen hlavička s kreativním odvoláním, ale prvky v ní uvádějí, že jde o hlavičku s kreativním přístupem zaměřeným na počítače nebo na webu. Přenosné ilustrace, "www." A další technologie přinášejí cílovému publiku konkrétněji.
Záhlaví skutečně nemá co nabídnout z hlediska obsahu, s výjimkou odkazu vznášejícího se zpět na domovskou stránku. Vzhledem k tomu, že je tak složité, mohou být všechny další funkce překonány konstrukcí a znemožněny tak, aby byly příliš přeplněné.
Tato hlavička je ale dokonalá: nastavením nálady, inspirací diváka a je dostatečně krátká, že vede diváka ke zbytku obsahu.
Obalování nahoru
Doufejme, že se podíváme na tyto dvacet příkladů, může pomoci mnohem lépe vymezit otázky, které jsou uvedeny na začátku tohoto článku, a pomáhat každému webdesignéři věnovat větší pozornost hlavičkám blogu.
Obsah, který chcete zahrnout do záhlaví, se může značně lišit od blogu k blogu a je důležité mít na paměti cíle blogu, téma a co první návštěvník hledá při návštěvě blogu.
Napsáno výhradně pro WDD Kayla Knightová .
Neváhejte a sdílejte své vlastní tipy pro návrh záhlaví, stejně jako další příklady.