Blog-Header: 20 tolle Beispiele und Best Practices

Der Header ist wahrscheinlich das Erste, was ein neuer Besucher auf einem Blog sieht, also 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 hinsichtlich ihrer Verwendung unterscheiden und daher kann der Inhalt des Website-Headers und seine Darstellung stark variieren.

Speziell für einen Blog gibt es jedoch Best Practices, die dem Leser helfen können, sich durch den Blog zurechtzufinden und sich besser einzubinden.

Genau das wird dieser Artikel bewirken. Wir helfen Ihnen bei der Definition Was sollte Teil eines Blog-Headers sein und wie kann man es letztendlich umsetzen?und dann schauen wir uns zwanzig tolle Beispiele an, die genau das tun.

Um zu bestimmen, wie ein Blog-Header gestaltet sein sollte und was darin enthalten ist, müssen wir ein paar Fragen zum Blog stellen:

  • Welche Stimmung muss geschaffen werden, um die richtige Zielgruppe anzusprechen?
  • Wie kann der erste Eindruck im Header vermitteln, worum es im Blog geht?
  • Wie kann der Header des Blogs den ersten Eindruck vermitteln, „Ich bin anders als die anderen.“
  • Welche Inhalte müssen sofort erkennbar sein, um bessere Aktionen zu erzielen? (Anklicken von Links, Abonnieren usw.)

Lassen Sie uns etwas tiefer graben …

Welche Stimmung muss geschaffen werden, um die richtige Zielgruppe anzusprechen?

Wenn ein Besucher zum ersten Mal eine Website betritt, bestimmt er als Erstes den Blog “Persönlichkeit” – und ob es das Richtige für sie ist oder nicht.

Dies ist für das Blog-Design unerlässlich, denn Blogs benötigen die richtige Zielgruppe, um erfolgreich zu sein.

Beispiel: Bei Inhalten aus der Kreativbranche sollte ein Blog-Design einen kreativen Header haben, um Neulinge zu beeindrucken und zu inspirieren. Ein eher technischer oder geschäftlicher Blog wünscht sich einen geradlinigen, hochwertigen Header, der sowohl ästhetisch ansprechend als auch recht dezent ist.

Wie kann der erste Eindruck im Header vermitteln, worum es im Blog geht?

Wir haben einen Teil davon abgedeckt, indem wir die Gesamtstimmung entwickelt haben, die der Header erzeugen soll, aber ein Header kann noch mehr tun, um dem neuen Leser zu verdeutlichen, worum es in diesem Blog geht.

Der erste Eindruck offenbart die Persönlichkeit des Blogs, aber worum geht es genau? Man könnte einen Slogan mit einem Logo hinzufügen, das dies aussagt, oder einen kleinen Absatz/Satz einfügen, der dem Leser erklärt, worum es bei diesem Blog geht und für wen er gedacht ist.

Wie kann der Header des Blogs den ersten Eindruck vermitteln: „Ich bin anders als die anderen“?

Anders ausgedrückt: „Wie soll dieser Blog in Erinnerung bleiben?

Wenn es zu jedem anderen Blog im Internet passt, ist das überhaupt kein gutes Blog-Thema. Aus diesem Grund ist die Kopfzeile ein erstklassiger Ort für das Logo, den Slogan und jedes andere Branding.

Das Gesamtbild und die Inhalte, die auf den ersten Blick präsentiert werden, bleiben hängen, wenn sie gut genug präsentiert werden.

Welche Inhalte müssen sofort erkennbar sein, um bessere Aktionen zu erzielen? (Anklicken von Links, Abonnieren usw.)

Der Header sollte vom Inhalt her insgesamt einfach sein, es können jedoch einige Formen von Inhalt vorhanden sein, um den Aufruf zum Handeln zu unterstützen. Nachdem ein neuer Leser den ersten Eindruck des Blogs beurteilt und sich entschieden hat, zu bleiben, beginnt er mit der Suche nach Inhalten und Orientierungspunkten.

Wenn Kategorien sofort vorhanden sind, wird der Betrachter sie durchsehen und Bereiche finden, die sie interessieren. Wenn ein Suchfeld oder ein RSS-Feed vorhanden ist, kann es sein, dass sie sich nicht sofort abonnieren oder eine Suche durchführen, aber sie haben sich unbewusst die Platzierung des Feldes und den Ort, an dem es in Zukunft zu finden ist, notiert.

Die Optionen variieren viel darüber hinaus, aber grundsätzlich Jeder in der Kopfzeile platzierte Inhalt ist der erste Eindruck für den InhaltEs sollte also das Wichtigste und gut gestaltet sein.

Werfen wir nun einen Blick auf einige großartige Blog-Header und diskutieren dann deren Vorteile.

1. Tutorial9

Tutorial9 bietet nahezu alle oben besprochenen Vorteile. Das Logo und der Slogan zeigen sofort, worum es in dem Blog geht und wie es dem Leser helfen kann.

Die Hauptnavigationselemente befinden sich auf großen, auffälligen Registerkarten mit integrierten Symbolen, die ins Auge fallen. Dies führt den Benutzer sofort zum Inhalt und regt ihn dazu an, tiefer in den Blog einzutauchen.

Lesen:  HR-Software: Warum sie für den Gesundheitssektor unverzichtbar ist

Das Hintergrunddesign ist kreativ und thematisiert sogar künstlerisches Schaffen – genau das, wofür die Tutorials gedacht sind. Darüber hinaus befinden sich auf der rechten Seite wichtige Inhalte, darunter der RSS-Feed, das Suchformular, die Seiten des Blogs und mehr.

2. Wohndesign-Suche

Dieser Header nutzt eine großartige visuelle Hierarchie, um den Punkt zu verdeutlichen. Der Titel des Blogs reicht fast aus, um dem Leser zu sagen, worum es geht, und er regt zum Verweilen und genaueren Sehen an, worum es geht.

Der Blick wird dann zur ersten Navigation geführt, wo die About-Seite sowie die Kontaktseite deutlich vermerkt sind. Die Bilder rechts 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 den Blick nach unten zu einer aussagekräftigeren Phrase für den Blog.

3. Blog-Design-Blog

Die bemerkenswertesten Merkmale dieses Headers sind das Logo und der Slogan. Die spezifische Zielgruppe dieses Blogs macht ihn einzigartiger, und indem er auf den ersten Blick erklärt, worum es in dem Blog geht, erkennt ein neuer Leser dies und ist überzeugt, dass er sich von anderen unterscheidet.

Etwas weiter unten und in kleinerem Text finden Sie die Anzahl der Leser und den Link zum RSS-Feed sowie die Hauptnavigation, um tiefer in das Thema des Blogs oder in den Inhalt selbst einzutauchen.

4. Kevin John Gomez

Durch den handgezeichneten Appell und das Foto wirkt das Thema dieses Blogs persönlich und passt zum Namen der Website – dem Webmaster selbst. Dies ist ein persönlicher Blog einer kreativen Person, und der Header kommuniziert dies perfekt.

Die vollständige Navigation befindet sich in der Kopfzeile, da es sich um eine eingeschränkte Navigation handelt und diese stärker hervorgehoben werden kann.

5. Naldz-Grafiken

Dieser Header bietet ein tolles Logo und eine effektive Nutzung des Inhalts im Header. Der größte Teil der Kopfzeile besteht aus dem Logo bzw. dem Blognamen und ist daher leicht zu merken.

Der Blick wird dann auf die Navigation gelenkt, wo der Leser sofort tiefer in den Blog eintauchen oder sich zumindest eine Vorstellung davon machen kann, worum es in dem Blog geht. Navigation und Kategorien sind eine gute Möglichkeit, neuen Lesern zu sagen, worum es in dem Blog geht, wenn sie gut definiert sind.

Eine Grafik auf der rechten Seite hilft, die Stimmung des Blogs zu bestimmen und lenkt den Blick auch auf die Anzahl der Abonnenten und den RSS-Link. Bei einem Blog mit einer mittleren bis hohen Feed-Anzahl ist es eine gute Idee, diese Anzahl in der Kopfzeile anzuzeigen, da dies in gewisser Weise den Inhalt des Blogs bestätigt und ihm Glaubwürdigkeit verleiht.

Darüber hinaus befinden sich zusätzliche Inhalte an einem für diese Art von Inhalten üblichen Ort, sodass sie leicht gefunden werden können.

6. Professionelles Blog-Design

Die beiden kontrastierenden grünen Elemente in dieser Kopfzeile bewirken mehr, als man denkt. Die meisten sehen zuerst das Logo mit dem grünen Farbtupfer links, wo sie den Titel des Blogs und die Überschrift lesen. Dies ist eine weitere großartige Überschrift, die neuen Lesern zeigt, wie dieser Blog ihnen helfen kann.

Dann werden große, übergroße Tabs mit 1) ihrer offensichtlichen Größe und 2) dem anderen grünen Farbtupfer in den Fokus gerückt. Der andere grüne Reiter sagt dem Leser, dass es sich nicht nur um einen Blog handelt, der Ihnen dabei helfen kann, ein besseres Blog-Design zu erstellen, sondern dass er auch Blog-Design-Dienste anbietet. Darüber hinaus Social-Media-Symbole, die der Leser für spätere Aktionen zur Kenntnis nehmen kann.

7. Okt. zwölf

Dieser illustrierte kreative Header sorgt ziemlich schnell für Stimmung für den Blog. Die Illustration zeigt den Webmaster und verleiht dem Blog eine persönliche Note. Wir beginnen, uns ein Bild über den Inhalt des Blogs zu machen, bevor dieser überhaupt präsentiert wird.

Bei diesem Design wird direkt in der Kopfzeile ein kleiner Einleitungssatz eingefügt, der definiert, worum es sich bei diesem Blog genau handelt. Die Hauptnavigation befindet sich direkt unter dem Logo und fällt daher sofort auf. Es gibt auch andere Details in der Kopfzeile, die Spaß machen und den Betrachter dazu verleiten, sich die Kopfzeile länger anzusehen.

8. Mark Forrester

Dieser lustige, skurrile und kreative Header sorgt für Stimmung und ist einzigartig genug, um Ihre Aufmerksamkeit zu erregen.

Auf den ersten Blick erkennt der Betrachter sofort den Header und seine feinen Details sowie die Geschichte, die er präsentiert. Darin enthalten sind das Logo und der Slogan, durch die der Betrachter erfährt, worum es in dem Blog geht.

Wenn sie mit dem Betrachten der Kopfzeile fertig sind, können sie oben die Navigation und rechts soziale Lesezeichen sehen. Der Header führt auch gut in den Inhalt hinein und verleitet den Besucher dazu, nach unten zu scrollen und sich mehr anzusehen.

9. Kult-Foo

Dies ist einfach eine schöne Überschrift, die täglich die Aufmerksamkeit vieler Leser auf sich zieht. Die Stimmung wird als kreatives und inspirierendes Thema gesetzt und zieht genau das richtige Publikum an. Das Logo in dieser Kopfzeile ist die „Quelle“ für den Rest der Kopfzeile – ein Kasten, der in den Rest des Designs führt.

Lesen:  So erstellen und ändern Sie Listen in Microsoft Word

Die Suchleiste befindet sich direkt darunter, um den Zugriff zu erleichtern, und die beiden Inhaltsbereiche werden auf der rechten Seite definiert.

Das wirklich Coole an diesem Header ist jedoch die Navigation. Es erinnert eher an eine Tag-Cloud, wobei die größeren Kategorien den größeren Text darstellen. Auf diese Weise sieht ein neuer Leser, sobald er die Schlagwortwolke sieht, zuerst die größten Elemente.

Im Gegenzug stellen sie eine Verbindung zwischen diesen Worten und dem Inhalt des Blogs her. Jetzt haben die im Blog vorgestellten Inhalte den größten Teil dessen, was an ihrem Inhalt derzeit denkwürdigsten ist. Schauen Sie sich unbedingt die Live-Version dieser Website an: Der Header-Tag-Cloud-Bereich bewegt sich tatsächlich mit dem Scrollen des Benutzers, mit einem dekorativen und dennoch unauffälligen Rand.

10. Vectips

Dieser Header ist eher minimalistisch gehalten, wodurch der Schwerpunkt stärker auf den darin enthaltenen Inhalt liegt. Das Logo ist dekorativ und in einer Kontrastfarbe umrandet, was es einprägsam macht.

Es folgt ein Slogan, der erklärt, worum es in dem Blog geht, und dann eine einfache Navigation, die dies weiter definiert. Die Navigation ist großartig, da sie über individuelle Symbole verfügt, die die Aufmerksamkeit auf jedes einzelne Symbol lenken, während der Leser darüber hinwegfliegt.

Die lustige Illustration auf der rechten Seite sorgt für Stimmung und lenkt den Blick auf die Navigation oben.

11. Teilzeitstelle

Im Gegensatz zu Vectips ist in diesem Header einiges los. Das Logo oben links enthält einen Slogan und leitet den Blick dann zur Navigation. Bevor Sie jedoch durch die Navigation klicken, erfahren Sie in der Kopfzeile weiter, wie die Website ihren neuen Besuchern helfen kann, und darunter finden Sie weitere Navigationsmöglichkeiten. Durch diese Hierarchie erhält der Leser einen guten Überblick darüber, wie er auf der Website navigiert.

Die Abbildung auf der rechten Seite führt den Betrachter dann dazu, den RSS-Feed zur Kenntnis zu nehmen, und dann wird der Blick weiter nach rechts gelenkt, um für die Facebook-Fanpage des Unternehmens zu werben.

12. TutCandy

Das größte Merkmal des TutCandy-Headers sind seine kreativen, farbenfrohen und detaillierten Bilder. Damit schafft es Stimmung und schafft Glaubwürdigkeit für einen Blog wie diesen. Der Name ist in die farbenfrohe Illustration eingebunden und kann als Logo betrachtet werden.

Auf der rechten Seite befindet sich ein Slogan, der erklärt, worum es bei dem Blog geht und was ihn von anderen unterscheidet: „Nur die leckersten Design-Tutorials.“ Obwohl es sich in erster Linie um ein einfaches und unterhaltsames Wortspiel handelt, gibt es ein paar Schlüsselwörter, die beim Leser auffallen und ein positives Urteil hervorrufen. „Nur“ – es ist einzigartig, originell, einzigartig.

Es beantwortet die Frage „Wie unterscheidet sich dieser Blog von anderen?“ Frage. „Tastiest“ – der Slogan hätte „Tasty Design Tutorials“ lauten können. Das klingt nicht nur etwas seltsam, sondern bedeutet auch keinen Vorrang gegenüber anderen Design-Tutorials oder anderen Tutorial-Blogs.

Oben gibt es auch eine Navigation zum Blog und rechts eine Suchleiste. Direkt darunter wird der Inhalt definiert und organisiert, sodass der Leser tiefer in den Blog eintauchen kann.

13. Hefe

Dieser Blog bietet großartige Inhalte im Header. Das einzigartige Wireframe ermöglicht es, dass der Header Grafiken und ausreichend Inhalt enthält, um eine Verbindung mit einem neuen Leser herzustellen. Der Charakter und die Illustration dahinter sind eines der ersten Dinge, die einem neuen Besucher auffallen, und er trifft eine gute Entscheidung, wenn er den Charakter auf den Inhalt der Kopfzeile auf der linken Seite zeigt.

Nachdem der Blick auf den Header-Inhalt gelenkt wurde, sieht er das Logo und Möglichkeiten, den Blog zu abonnieren oder sich mit ihm zu verbinden. Es liest sich dann wie ein normaler Inhalt einer „Über-Seite“, mit der Ausnahme, dass es direkt auf der Titelseite angezeigt wird, was bedeutet, dass nicht nur Leser, die interessiert genug sind, um die Über-Seite zu besuchen, 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 erneut zu sehen, dieses Mal jedoch mit einer besser erkennbaren Grafik. Beachten Sie, wie diese zweite Feed-Anzeige auf der rechten Seite angezeigt wird, nachdem der Leser gerade einige Inhaltstitel und einige Informationen zu diesem Thema gelesen hat und nachdem er bereits eine Verbindung zum Blog hergestellt hat.

14. Dieser Indie-Typ

Das Zeichen in diesem Header sorgt, wie alle anderen Header mit Zeichen, für eine persönliche Note und dient als toller Einstieg in den Blog. Es ist das Erste, was einem neuen Leser auffällt, und seine hohe Qualität sowie die Designmerkmale, die es umgeben, geben eine Aussage über den Stil dieses Designers und darüber, was man von ihm erwarten kann.

Auf der linken Seite befindet sich das Logo, das den Blick weiter auf den Slogan lenkt, der den Inhalt des Blogs erläutert. Der Blick wird erneut auf einen Inhalt gelenkt, der die Persönlichkeit des Blogs teilt.

Lesen:  Networking: Wie und warum ein Unternehmen nützliche Kontakte knüpfen sollte

15. Ozon3

Das Thema dieses Headers ist einzigartig und in diesem Sinne sorgt es für ein unvergessliches Webdesign – einen wirklich großartigen ersten Eindruck. Nach dem Betrachten der Illustration wird der Blick zum Logo geführt, um sich die Marke einzuprägen, und dann direkt zur Hauptnavigation und dann zum Inhalt.

Erstmalige Betrachter können erkennen, dass sich dieser Blog auf ein Webdesign-Portfolio konzentriert, und sie entdecken dies, nachdem sie sich die Arbeit des Designers im Header wirklich angesehen haben.

Trotz seiner Einfachheit ist dieser Header hinsichtlich der visuellen Hierarchie sehr effektiv und setzt beim Betrachter eine große Aussage.

16. nDesign Studio

Dieser farbenfrohe Header ist die Hauptattraktion dieses Webdesigns und das Logo weist den Besucher darauf hin, dass es sich um ein Designstudio handelt.

Der erstaunliche Header bestätigt die Fähigkeiten des Designers und seine Marke. Auch die Navigation, die Feeds und die Suchleiste sind eng mit der Kopfzeile verknüpft, was sie zu einem der ersten auffälligen Elemente macht.

Die Hauptnavigation erfolgt in Form von Tabs und wird zunächst als Teil der Kopfzeile erkannt. Da es jedoch in Form von Registerkarten vorliegt, scheint es auch mit dem Inhalt verbunden zu sein und den Blick des Besuchers auf den wichtigen Inhalt des Blogs zu lenken.

17. Webdesigner-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 Fachwissen des Designers bestätigt. Das Logo ist hier größer und stellt einen Slogan dar, der den Namen des Blogs mit seinem Zweck verbindet.

Der restliche Inhalt in der Kopfzeile besteht aus der anfänglichen Navigation, dem Kontakt/RSS und der Suchleiste. Sie sind alle ähnlich dekoriert wie die Kopfzeile und verbinden sie.

Diese Elemente weisen jedoch auch ähnliche Merkmale wie der Inhalt auf (einfacherer Hintergrund, papierähnliche Textur), sodass sie auch den Eindruck erwecken, Teil des Inhalts zu sein. Dieser Abschnitt des Headers verbindet den einleitenden Header mit dem Inhaltsbereich.

18. Ma.tt

Es scheint eine ultimative Webdesign-Regel zu geben, Header nicht über 200–250 Pixel zu erstellen. Dies ist aus vielen verschiedenen Gründen eine gute Regel, aber dieser Titel zeigt, wie man diese Regel effektiv bricht.

Indem Matt zunächst keine Inhalte zeigt, nutzt er sein Design, um beim Erstbetrachter den größten Eindruck zu hinterlassen. Seine eleganten Details und kreativen Wege hinterlassen einen unvergesslichen ersten Eindruck.

Das Logo ist groß und da es sich bei der Website um einen Namen handelt, nimmt sie die Position eines persönlichen Blogs ein. Der RSS-Feed befindet sich ebenfalls oben links und zeigt dem Betrachter von Anfang an, dass es sich tatsächlich um einen Blog handelt. Schließlich ist die Navigation das, was zuletzt gesehen wird und den Besucher dazu anregt, im Blog fortzufahren.

19. Pixel Resort

Der detaillierte Illustrationsstil dieser Kopfzeile macht Spaß und ist dennoch sauber und professionell. Es ist sogar animiert, während die Szene Tag und Nacht abläuft, und erinnert den Besucher daran, immer wieder auf die Kopfzeile zu schauen, die das Logo (die Marke) und die Navigation enthält. Diese Methode kann ganz einfach zu mehr Aktivität im Blog führen.

Unterhalb der in den Vordergrund gerückten Navigation gibt es eine Unternavigation mit einem Pfeil, der sie mit dem Rest der Kopfzeile „verbindet“. Es hilft bei der weiteren Definition von Kategorien und hilft dem Leser, den Inhalt zu finden, der ihn am meisten interessiert.

20. Webdesigner-Depot

Ahh, ja – der Blog, den Sie gerade ansehen. Egal, ob Sie zum ersten Mal hier sind oder Webdesigner Depot schon lange lesen, die Kopfzeile erregt auf jeden Fall Ihre Aufmerksamkeit.

Das Tolle an diesem Header ist, dass es sich nicht nur um einen Header mit kreativem Reiz handelt, sondern die darin enthaltenen Elemente besagen, dass es sich um einen Header mit kreativem Reiz handelt, der sich auf Computer oder das Web konzentriert. Die Laptop-Illustrationen, das „www.“ und andere technische Elemente sprechen die Zielgruppe gezielter an.

Inhaltlich hat der Header eigentlich nicht viel zu bieten, außer einem schwebenden Link zurück zur Startseite. Da es jedoch so komplex ist, können zusätzliche Funktionen das Design überfordern und zu unübersichtlich machen.

Dieser Header ist jedoch einfach perfekt: Er sorgt für Stimmung, inspiriert den Betrachter und ist kurz genug, um den Betrachter zum Rest des Inhalts zu führen.

Zusammenfassung

Hoffentlich kann ein Blick auf diese zwanzig Beispiele vielen dabei helfen, die am Anfang dieses Artikels gestellten Fragen besser zu definieren, und jedem Webdesigner dabei helfen, den Blog-Headern mehr Aufmerksamkeit zu schenken.

Der in einen Header aufzunehmende Inhalt kann von Blog zu Blog sehr unterschiedlich sein. Es ist wichtig, die Ziele des Blogs, das Thema und das, wonach ein Erstbesucher beim Besuch des Blogs suchen würde, im Auge zu behalten.

Exklusiv für WDD geschrieben von Kayla Knight.

Teilen Sie uns gerne Ihre eigenen Tipps für das Header-Design sowie weitere Beispiele mit.

Aktuelle Artikel:

Empfohlen