Blog-Header: 20 großartige Beispiele und Best Practices
Der Header ist wahrscheinlich das erste, was ein neuer Besucher auf einem Blog sieht, also ist es der erste Eindruck - aber warum ist ein Blog-Header so viel wichtiger oder zumindest anders als der Header einer einfachen Website?
Blog-Header benötigen mehr Funktionalität. Andere Webdesigns können sich in Bezug auf ihre Verwendung unterscheiden und daher können die Inhalte des Website-Headers und seine Darstellung sehr unterschiedlich sein.
Mit einem Blog speziell, gibt es jedoch Best Practices, die dem Leser helfen können, durch den Blog zu navigieren und sich besser einzubringen.
Genau das wird dieser Artikel tun. Wir helfen Ihnen dabei, zu definieren, was ein Blog-Header sein soll und wie Sie ihn schließlich implementieren können . Dann schauen wir uns 20 großartige Beispiele an, die genau das tun.
Um zu bestimmen, wie ein Blog-Header gestaltet werden soll und was er zu tun hat, müssen wir ein paar Fragen zum Blog stellen:
- Welche Stimmung muss gesetzt werden, um die richtige Zielgruppe zu erreichen?
- Wie kann der erste Eindruck über den Header kommunizieren, worum es im Blog geht?
- Wie kann der Blog-Header den ersten Eindruck vermitteln: "Ich bin anders als die anderen."
- Welche Inhalte müssen sofort erkennbar sein, um bessere Aktionen zu ermöglichen? (Klicken auf Links, Abonnieren usw.)
Lass uns etwas tiefer graben ...
Welche Stimmung muss gesetzt werden, um die richtige Zielgruppe zu erreichen?
Wenn ein Besucher zuerst auf irgendeine Art von Website kommt, ist das erste, was er bestimmt, die "Persönlichkeit" des Blogs - und ob es für sie richtig ist oder nicht.
Dies ist wichtig für das Blog-Design, da Blogs die korrekte Zielgruppe benötigen, um erfolgreich zu sein .
Zum Beispiel: Mit Inhalten in der Kreativbranche sollte ein Blogdesign einen kreativen Header haben, um Neulinge zu beeindrucken und zu inspirieren. Ein eher technischer oder geschäftlicher Blog wird einen geradlinigen High-End-Header haben, der sowohl ästhetisch ansprechend als auch subtil ist.
Wie kann der erste Eindruck über den Header kommunizieren, worum es im Blog geht?
Wir haben einen Teil davon abgedeckt, indem wir die Gesamtstimmung entwickeln, die der Header erzeugen sollte, aber ein Header kann mehr als das, um dem neuen Leser zu verdeutlichen, worum es in diesem Blog geht.
Der erste Eindruck entdeckt die Persönlichkeit des Blogs, aber worum geht es eigentlich? Man könnte eine Slogan mit einem Logo, das es sagt, oder einen kleinen Absatz / Satz enthalten, der dem Leser sagt, was dieser Blog ist und wofür er ist.
Wie kann der Header des Blogs den ersten Eindruck vermitteln: "Ich bin anders als die anderen"?
Eine andere Möglichkeit, dies zu sagen ist: "Wie wird dieses Blog in Erinnerung bleiben? "
Wenn es zu jedem anderen Blog im Internet passt, ist das kein gutes Blog-Thema. Aus diesem Grund ist der Header der ideale Ort für das Logo, den Slogan und jedes andere Branding.
Das Gesamtbild und die auf den ersten Blick dargestellten Inhalte sind, wenn sie gut genug dargestellt werden, auch weiterhin haltbar.
Welche Inhalte müssen sofort erkennbar sein, um bessere Aktionen zu ermöglichen? (Klicken auf Links, Abonnieren usw.)
Der Header sollte inhaltlich insgesamt einfach sein, aber einige Arten von Inhalten können vorhanden sein, um den Handlungsaufruf zu unterstützen. Nachdem ein neuer Leser den ersten Eindruck des Blogs beurteilt hat und sich entscheidet, zu bleiben, werden sie anfangen, nach Inhalten zu suchen und zu navigieren.
Wenn Kategorien sofort vorhanden sind, wird der Betrachter über sie hinwegsehen und Bereiche finden, die sie interessieren. Wenn ein Suchfeld oder ein RSS-Feed vorhanden ist, können sie natürlich nicht direkt abonnieren oder eine Suche durchführen, aber sie haben eine unbewusste Notiz über ihre Platzierung und wo sie in der Zukunft gefunden werden kann.
Die Optionen variieren weit darüber hinaus, aber grundsätzlich ist jeder Inhalt, der in der Kopfzeile platziert wird, der erste Eindruck für den Inhalt , also sollte er der wichtigste und am besten gestaltete sein.
Werfen wir nun einen Blick auf ein paar großartige Blog-Header und diskutieren Sie dann ihre Vorteile.
1. Tutorial9
Tutorial9 bietet nahezu alle oben beschriebenen Vorteile. Das Logo und der Slogan zeigen sofort, worum es in dem Blog geht und wie es dem Leser helfen kann.
Die primären Navigationselemente befinden sich auf riesigen, auffälligen Tabs mit Symbolen, die in das Auge gezeichnet werden. Dies führt den Benutzer sofort zum Inhalt und fördert sie, um tiefer in den Blog einzutauchen.
Das Hintergrunddesign ist kreativ und hat sogar ein Thema künstlerischen Schaffens - genau das, wofür die Tutorials gedacht sind. Darüber hinaus gibt es rechts neben dem RSS-Feed, dem Suchformular, den Seiten des Blogs und weiteren wichtigen Inhalten wichtige Inhalte.
2. Wohndesign finden
Dieser Header verwendet eine große visuelle Hierarchie, um den Punkt zu vermitteln. Der Blog-Titel ist fast genug, um dem Leser zu sagen, worum es geht, und es fördert das Bleiben und im Detail sehen, worum es geht.
Das Auge wird dann zu der ersten Navigationseinheit geführt, wo die ungefähre Seite deutlich notiert wird, ebenso wie die Kontaktseite. Die Bilder auf der rechten Seite sorgen dann für Stimmung und Inspiration für alle, die sich für das Thema dieses Blogs interessieren.
Schließlich führen die Bilder auf der rechten Seite das Auge nach unten zu einer beschreibenden Phrase für den Blog.
3. Blog Design Blog
Die bemerkenswertesten Merkmale dieses Headers sind das Logo und der Slogan. Das spezifische Zielpublikum dieses Blogs macht es einzigartiger, und indem es feststellt, worum es auf dem ersten Blick geht, sieht ein neuer Leser das und ist überzeugt, dass es sich von anderen unterscheidet.
Etwas weiter und in kleinerem Text ist die Anzahl der Leser und der Link zum RSS-Feed sowie die primäre Navigation, um weiter zu vertiefen, worum es in dem Blog geht, oder in den Inhalt selbst.
4. Kevin John Gomez
Der handschriftliche Aufruf und das Foto machen das Thema dieses Blogs persönlich und passen zu dem Namen der Website - dem Webmaster selbst. Dies ist ein persönlicher Blog einer kreativen Person, und der Header kommuniziert das perfekt.
Die vollständige Navigation befindet sich in der Kopfzeile, da es sich um eine eingeschränkte Navigation handelt und mehr Gewicht darauf gelegt werden kann.
5. Naldz-Grafiken
Diese Kopfzeile bietet ein großartiges Logo und eine effektive Nutzung des Inhalts in der Kopfzeile. Der größte Teil der Kopfzeile ist das Logo oder der Blog-Name, und das macht es leicht, sich daran zu erinnern.
Das Auge wird dann zur Navigation geführt, wo der Leser gleich hier und dort tiefer in den Blog eintauchen kann oder zumindest eine Vorstellung davon bekommt, worum es im Blog geht. Navigation und Kategorien sind eine gute Möglichkeit, neuen Lesern zu erzählen, worum es in dem Blog geht, wenn sie klar definiert sind.
Eine Grafik auf der rechten Seite hilft dabei, die Stimmung des Blogs zu beeinflussen, und führt auch auf die Anzahl der Abonnenten und den RSS-Link. Bei einem Blog mit einer moderaten bis hohen Feed-Anzahl ist es eine gute Idee, dies im Header zu zeigen, da es in gewisser Weise den Inhalt des Blogs validiert und ihm Glaubwürdigkeit verleiht.
Es gibt auch zusätzlichen Inhalt an einem traditionellen Ort für diese Art von Inhalt, so dass es leicht gefunden werden kann.
6. Pro Blog Design
Die zwei kontrastierenden grünen Elemente in diesem Header sind mehr als man denkt. Die meisten sehen das Logo mit dem grünen Farbtupfer links oben, wo sie den Titel des Blogs und die Überschrift lesen. Dies ist eine weitere großartige Überschrift, die neuen Lesern erklärt, wie dieser Blog ihnen helfen kann.
Dann werden große übergroße Tabs mit 1) ihrer offensichtlichen Größe und 2) dem anderen Pop der grünen Farbe in den Fokus gelegt. Die andere grüne Registerkarte sagt dem Leser, dass dies nicht nur ein Blog ist, der Ihnen helfen kann, Ihnen ein besseres Blog-Design zu bieten, sondern auch Blog-Design-Services bietet. Darüber hinaus Social Media Icons, die der Leser zur späteren Handlung zur Kenntnis nehmen kann.
7. Oktober
Dieser illustrierte Kreativtitel gibt schnell die Stimmung für den Blog vor. Die Illustration ist vom Webmaster und gibt dem Blog einen persönlichen Ansatz. Wir fangen an, eine Idee über den Inhalt des Blogs zu bekommen, bevor es überhaupt präsentiert wird.
Dieser Entwurf setzt einen kleinen einleitenden Satz direkt in der Überschrift und definiert, was genau dieser Blog ist. Die Hauptnavigation befindet sich direkt unter dem Logo, so dass es fast sofort bemerkt wird. Es gibt auch andere Details innerhalb des Headers, die Spaß machen und den Betrachter dazu bringen, länger auf den Header zu schauen.
8. Mark Forrester
Dieser lustige, skurrile und kreative Header sorgt für Stimmung und ist einzigartig genug, um Ihre Aufmerksamkeit zu erregen.
Der Betrachter auf den ersten Blick untersucht sofort den Kopf und seine feinen Details und die Geschichte, die er präsentiert. In diesem Fall kommt das Logo und der Slogan, wo die Ansicht herausfindet, worum es im Blog geht.
Wenn sie den Header genießen, können sie die Navigation oben und die sozialen Lesezeichen rechts sehen. Der Header führt auch gut in den Inhalt, was den Besucher dazu bringt, nach unten zu scrollen und mehr zu sehen.
9. Kult-Foo
Dies ist nur ein schöner Header, der täglich die Aufmerksamkeit vieler Leser auf sich zieht. Die Stimmung ist als kreatives und inspirierendes Thema gesetzt und zieht genau das richtige Publikum an. Das Logo in diesem Header ist die "Quelle" des Rests des Headers - eine Box, die in den Rest des Designs führt.
Die Suchleiste befindet sich darunter, um den Zugriff zu erleichtern, und die zwei Inhaltsbereiche sind rechts definiert.
Die Navigation ist aber wirklich cool an diesem Header. Es hat eher ein Tag-Cloud-Feeling, wobei die größeren Kategorien der größere Text sind. Sobald ein neuer Leser die Tag-Cloud sieht, werden auf diese Weise zuerst die größten Elemente angezeigt.
Im Gegenzug knüpfen sie eine Verbindung mit diesen Worten und dem Inhalt der Blogs. Jetzt hat der Inhalt, der auf dem Blog vorgestellt wird, den meisten Inhalt dessen, was jetzt am denkwürdigsten ist. Schauen Sie sich unbedingt die Live-Version dieser Seite an: Der Wolkenbereich des Header-Tags bewegt sich tatsächlich mit dem Scrollen des Benutzers, mit einer dekorativen und doch unaufdringlichen Grenze.
10. Vectips
Dieser Header ist eher minimalistisch, was mehr Betonung auf die Inhalte legt, die er enthält. Das Logo ist dekorativ und in einer kontrastierenden Farbe umrissen, was es zu einem unvergesslichen Erlebnis macht.
Es folgt eine Tag-Zeile, die teilt, worum es in dem Blog geht, und dann eine einfache Navigation, die das weiter definiert. Die Navigation ist großartig, da es individuelle Icons hat, die die Aufmerksamkeit auf sich lenken, während der Leser über sie gleitet.
Die lustige Illustration auf der rechten Seite stimmt die Stimmung und führt das Auge auf die Navigation nach oben.
11. Teilzeit Post
Im Gegensatz zu Vectips hat dieser Header viel zu tun. Das Logo oben links enthält einen Slogan und führt dann das Auge zur Navigation. Bevor Sie jedoch durch die Navigation klicken, fährt die Überschrift fort, wie die Website ihren neuen Besuchern helfen kann, und darunter befindet sich mehr Navigation. Durch diese Hierarchie hat der Leser gerade einen großartigen Überblick bekommen, wie man durch die Website navigieren kann.
Die Abbildung rechts führt den Betrachter dazu, den RSS-Feed zur Kenntnis zu nehmen, und dann wird das Auge weiter nach rechts gelenkt, um die Facebook-Fanseite des Unternehmens zu bewerben.
12. TutCandy
Das größte Merkmal des TutCandy-Headers ist seine kreative, farbenfrohe und detaillierte Bildsprache. Damit stimmt es die Stimmung und schafft Glaubwürdigkeit für einen Blog wie diesen. Der Name ist in der bunten Illustration verflochten und kann als Logo betrachtet werden.
Auf der rechten Seite gibt es einen Slogan, der erklärt, was der Blog ist und wie er anders ist: "Nur die leckersten Design-Tutorials." Obwohl es in erster Linie ein einfaches und lustiges Wortspiel ist, gibt es ein paar Stichworte, die den Leser beeindrucken Ursache für positives Urteilsvermögen. "Only" - es ist einzigartig, originell, einzigartig.
Es beantwortet die Frage "Wie ist dieser Blog anders als andere?". "Tasty" - der Slogan könnte "Tasty Design Tutorials" gewesen sein. Das klingt nicht nur ein bisschen komisch, aber es hat keinen Vorrang vor anderen Design-Tutorials oder anderen Tutorial-Blogs.
Oben gibt es auch eine Navigation zum Blog und eine Suchleiste auf der rechten Seite. Direkt darunter ist der Inhalt definiert und organisiert, was den Leser dazu bringt, tiefer in den Blog einzutauchen.
13. Yoast
Dieser Blog bietet großartige Inhalte in der Kopfzeile. Der einzigartige Drahtgitterrahmen ermöglicht es dem Header, Grafiken und ausreichenden Inhalt zu enthalten, um eine Verbindung mit einem neuen Lesegerät herzustellen. Der Charakter und die Illustration hinter ihm ist eines der ersten Dinge, die ein neuer Besucher bemerken wird, und sie machen einen guten Ruf, indem sie den Charakter auf den Header-Inhalt auf der linken Seite zeigen lassen.
Nachdem das Auge auf den Header-Inhalt geleitet wurde, sehen sie das Logo und Möglichkeiten, sich mit dem Blog zu verbinden oder sich mit ihm zu verbinden. Es liest sich dann wie ein normales bisschen "über Seite" Inhalt, außer dass es direkt auf der Titelseite angezeigt wird, was bedeutet, dass nicht nur Leser, die daran interessiert sind, auf die About-Seite zu gehen, diese persönliche Verbindung herstellen, sondern alle neuen Leser. Der Inhalt erklärt, worum es in dem Blog geht, und zeigt dann einige beliebte und vorgestellte Inhalte an.
Unterhalb der Abbildung rechts ist der RSS-Feed wieder zu sehen, diesmal jedoch mit einer besser erkennbaren Grafik. Beachten Sie, wie das zweite Feed-Display nach rechts zeigt, nachdem der Leser gerade einige Inhaltstitel, ein paar Informationen gelesen und bereits eine Verbindung mit dem Blog hergestellt hat.
14. Dieser Indie Typ
Der Charakter in dieser Kopfzeile, wie alle anderen Kopfzeilen mit Zeichen, bietet eine persönliche Note und dient als eine gute Einführung in den Blog. Es ist das erste, was ein neuer Leser bemerken wird, und seine hohe Qualität, sowie die Designmerkmale, die ihn umgeben, geben eine Aussage über den Stil dieses Designers und was von ihm zu erwarten ist.
Auf der linken Seite befindet sich das Logo, das den Blick auf den Slogan zum Inhalt des Blogs richtet. Das Auge wird wieder zu einem Stück Inhalt geführt, der die Persönlichkeit des Blogs teilt.
15. Ozon3
Das Thema dieses Headers ist einzigartig und in diesem Sinne schafft es ein denkwürdiges Webdesign - ein wirklich toller erster Eindruck. Nach dem Verständnis der Illustration wird das Auge zu dem Logo zum Auswendiglernen der Marke geführt und führt dann direkt zu der primären Navigation und dann zu dem Inhalt.
Erstmalige Zuschauer können sehen, dass sich dieser Blog auf ein Webdesign-Portfolio konzentriert, und sie entdecken dies, nachdem sie die Arbeit des Designers im Header wirklich gesehen haben.
Trotz seiner Einfachheit ist dieser Header sehr effektiv in Bezug auf die visuelle Hierarchie und setzt eine große Aussage für die Zuschauer.
16. nDesign Studio
Dieser bunte Header ist die Hauptattraktion für dieses Webdesign und das Logo sagt dem Besucher, dass es sich um ein Designstudio handelt.
Der erstaunliche Header bestätigt die Fähigkeiten des Designers und seine Marke. Die Navigation, die Feeds und die Suchleiste sind ebenfalls sehr stark mit dem Header verflochten, was sie zu einem der ersten bemerkbaren Elemente macht.
Die Hauptnavigation hat die Form von Tabs und wird zuerst als Teil des Headers erkannt. Da es sich jedoch um Tabs handelt, scheint es auch mit dem Inhalt verbunden zu sein, was den Besucher auf den wichtigen Inhalt des Blogs aufmerksam macht.
17. Web Designer Wand
Dies ist ein weiterer großartiger Blog von Nick La von nDesign Studio, und wir sehen eine ähnliche Technik: einen erstaunlich großen Hintergrund / Header, der die Talente und das Know-how des Designers bestätigt. Das Logo ist hier größer und bietet einen Slogan, der den Namen des Blogs mit seinem Zweck verbindet.
Der Rest des Inhalts in der Kopfzeile ist die anfängliche Navigation, Kontakt / RSS und die Suchleiste. Sie sind alle auf ähnliche Weise wie der Header dekoriert und verbinden sie.
Diese Elemente haben jedoch ähnliche Eigenschaften wie der Inhalt (einfacherer Hintergrund, papierähnliche Textur), so dass sie sich auch als Teil des Inhalts fühlen. Dieser Abschnitt des Headers verbindet den einleitenden Header mit dem Inhaltsbereich.
18. Ma.tt
Es scheint eine ultimative Webdesign-Regel zu geben, die keine Header über 200-250 Pixel erzeugt. Dies ist eine gute Regel, die aus vielen verschiedenen Gründen zu befolgen ist, aber dieser Header zeigt, wie man diese Regel effektiv bricht.
Indem Matt zunächst keine Inhalte zeigt, nutzt er sein Design, um den ersten Eindruck zu gewinnen. Seine eleganten Details und kreativen Möglichkeiten schaffen einen unvergesslichen ersten Eindruck.
Das Logo ist groß, und da die Website ein Name ist, nimmt sie die Position eines persönlichen Blogs ein. Der RSS-Feed befindet sich ebenfalls oben links und zeigt dem Betrachter, dass es sich in der Tat um einen Blog von Anfang an handelt. Schließlich ist die Navigation, was zuletzt gesehen wird, und dies provoziert den Besucher, durch den Blog fortzufahren.
19. Pixel Resort
Der detaillierte Darstellungsstil dieses Headers macht es unterhaltsam, aber sauber und professionell. Es ist sogar animiert, wenn die Szene Tag und Nacht durchläuft und den Besucher daran erinnert, immer wieder auf den Header zu schauen, der das Logo (Marke) und die Navigation enthält. Diese Methode kann leicht mehr Aktivität im Blog fördern.
Unterhalb der Navigation, die in den Vordergrund gestellt wird, gibt es eine Subnavigation mit einem Pfeil, der sie mit dem Rest der Kopfzeile verbindet. Es hilft, Kategorien weiter zu definieren und hilft dem Leser, den Inhalt zu finden, der ihn am besten interessiert.
20. Webdesigner Depot
Ahh, ja - das Blog, das Sie gerade ansehen. Egal, ob Sie zum ersten Mal im Web sind oder Webdesigner Depot schon lange gelesen haben, die Kopfzeile erhält Ihre Aufmerksamkeit.
Das Tolle an dieser Kopfzeile ist, dass sie nicht nur eine Kopfzeile mit einem kreativen Anreiz ist, sondern dass die Elemente darin eine Kopfzeile mit einer kreativen Anziehungskraft auf Computer oder das Web darstellen. Die Laptop-Illustrationen, das "www.", Und andere technische Elemente bringen die Zielgruppe genauer ins Spiel.
Der Header hat inhaltlich eigentlich nicht viel zu bieten, außer einem schwebenden Link zurück zur Homepage. Da es jedoch so komplex ist, können zusätzliche Funktionen das Design überfordern und es zu unübersichtlich machen.
Diese Kopfzeile ist aber einfach perfekt: Sie stimmt die Stimmung ein, inspiriert den Betrachter und ist kurz genug, um den Betrachter zum Rest des Inhalts zu führen.
Aufwickeln
Wir hoffen, dass wir uns über diese zwanzig Beispiele Gedanken machen können, um die Fragen, die am Anfang dieses Artikels gestellt werden, besser zu definieren und jedem Webdesigner zu helfen, besser auf Blog-Header zu achten.
Inhalte, die in einer Kopfzeile enthalten sein sollen, können von Blog zu Blog stark variieren und es ist wichtig, die Ziele des Blogs, des Themas und die Frage zu berücksichtigen, wonach ein Erstbesucher beim Besuch des Blogs suchen würde.
Geschrieben exklusiv für WDD von Kayla Ritter .
Fühlen Sie sich frei, Ihre eigenen Tipps für Header-Design, sowie alle weiteren Beispiele zu teilen.