Header sind für den Erfolg deiner Website von entscheidender Bedeutung. Sie erleichtern die Navigation, machen deine Marke sichtbar und maximieren das Engagement über CTAs. Erfahre, wie du Website-Header richtig gestaltest, um deine Website und deine Marke aufzuwerten.
Wenn du eine Website zum ersten, zweiten oder sogar zehnten Mal besuchst, was ist das Erste, was du siehst? Für viele von uns ist es der Header. Einer der Gründe dafür ist, dass unsere Augen von Natur aus auf den obersten Teil der Seite gerichtet sind. Es ist wie beim Ansehen eines Films oder beim Lesen eines Zeitungsartikels. Man möchte ganz am Anfang der Geschichte beginnen, nicht in der Mitte. Und seien wir mal ehrlich, als Designer*innen und als Verbraucher*innen kann man anhand des Headers viel über eine Website herausfinden. Dort findet man das Branding der Website. Du erhältst einen umfassenden Überblick über den Inhalt. Vielleicht findest du dort auch einen Call-to-Action und zusätzliche Informationen zum Unternehmen, um nur einige zu nennen.
Auch wenn der Header nur wenig Platz einnimmt, ist er doch einer der wichtigsten Teile der Website und wird als solcher wahrscheinlich mehr Beachtung finden als die meisten Inhalte der Website. Wie kannst du ihn also so gestalten, dass er möglichst viel Aufmerksamkeit erhält? Zunächst einmal solltest du nicht das grundlegende Header-design verwenden, das von deinem WordPress-Theme oder -Vorlage bereitgestellt wird. Es ist zwar ein guter Ausgangspunkt, aber es gibt noch so viel mehr zu bedenken, wenn es darum geht, was man einbindet, wie man es anordnet und wie man es für die ultimative Benutzerfreundlichkeit gestaltet.
In diesem Beitrag findest du einige tolle Beispiele für Website-Header und Tipps für deren Erstellung. Egal, ob du hier nach Design-Inspiration oder Hilfe bei der Erstellung des perfekten Website-Headers suchst.
Was ist ein Website-Header?
Der Website-Header ist der obere Teil einer Website, in dem sich das Logo, die Navigation und manchmal andere Informationen, Links und Schaltflächen befinden.
Der Header ist ein wertvoller Teil jeder Website, denn:
• Er dient als Heimat für das Markenlogo (und ist möglicherweise der einzige Ort, an dem Besucher es sehen)
• Vermittelt dem Besucher einen ersten Eindruck von der Website
• Er dient als Inhaltsverzeichnis für die Website
• Er erleichtert das Erkunden der Website mit einem Klick oder einer Suchanfrage
• Bietet zusätzliche Informationen über das Unternehmen, Kontaktmöglichkeiten und mehr
Obwohl der Header von Website zu Website einen ähnlichen Zweck erfüllt, gibt es verschiedene Arten von Headern, die du erstellen kannst. Es hängt alles von der Art der Website ab, die du erstellst, vom Stil der Marke und davon, wie viele Informationen du dort unterbringen willst.
Arten von Website-Kopfzeilen
1. Einzeilige Header mit linksbündigem Logo
Dieser Header auf der The Dog Bar-Website ist das häufigste Design eines Website-Header:
Das Logo befindet sich ganz links auf dem Bildschirm und das Navigationsmenü, das E-Commerce-Symbol und der CTA befinden sich ganz rechts.
2. Mobil-optimierter Header mit Hamburger-Menü
HubSpot zeigt uns, wie der typische Header einer mobilen Website aussieht:
Auch hier befindet sich das Logo ganz links. In diesem Fall sind jedoch die Navigation und andere Links unter einem Hamburger-Symbol versteckt.
3. Hybride Kopfzeile Desktop/Mobil
Da die Grenzen zwischen Desktop und Handy immer mehr verschwimmen, ist es nicht verwunderlich, dass Websites wie YOTEL ein hybrides Header-Design verwenden:
Er sieht aus wie der typische einzeilige Header. Ein Hamburger-Menü-Symbol enthält jedoch zusätzliche Navigationslinks für Desktop-Besucher.
4. Kopfzeile mit Mega-Menü
Websites mit vielen Inhalten können es sich nicht immer leisten, auszuwählen, welche Kategorien oder Seiten es in die Kopfzeile schaffen. Deshalb gibt es ein Mega-Menü wie das auf der Website von Digital Agency Network:
Unter dem Menü der obersten Ebene „Agenturen“ sehen wir eine Liste von Agenturstandorten, geordnet nach Standort und wahrscheinlich auch nach Beliebtheit oder Größe. Unter dem Top-Level-Menü „Feed“ sehen wir eine ähnliche, wenn auch nicht identische Mega-Menü-Struktur:
Der Feed ist in die Kategorien Nachrichten, Fallstudien und Blog unterteilt. Darüber hinaus enthält dieses Menü einige auffällige „Featured Posts“ auf der rechten Seite.
Übrigens, wenn du ein solches Menü erstellen möchtest, kannst du dies ganz einfach mit Elementor und JetMenu tun.
5. Vertikale Kopfzeile linksbündig
Das mit einem Michelin-Stern ausgezeichnete Restaurant The Inn at Little Washington verwendet eine links ausgerichtete Seitenleiste, um seinen Header zu speichern:
Dieses vertikale Header-Design ist eine beliebte Wahl bei Gastgewerben und andere dienstleistungsorientierte Unternehmen.
6. Header mit einer Hilfsleiste
Viele Websites entscheiden sich dafür eine Hilfsleiste oben im Header anzubringen. Beispielweise Subway:
Dies ist nützlich für Unternehmen, die Standort, Kontakt, Erreichbarkeit, soziale Medien und andere Unternehmensinformationen oder Links anbieten möchten, die nicht ohne weiteres in das Hauptmenü passen.
7. Header mit einer Benachrichtigungsleiste
Einige Websites fügen eine Werbe- oder Benachrichtigungsleiste in den Header ein. Dieses Beispiel von Urban Outfitters zeigt uns, wie man sowohl eine Werbe- als auch eine Benachrichtigungsleiste einfügen kann:
Werbeleisten können zwar unter der Kopfzeile erscheinen, doch ist es üblicher, sie darüber zu platzieren und sie mit einem „X“ in der rechten Ecke zu kennzeichnen.
8. Header mit Multi-Site-Navigation
Websites, die zu einer Familie von Websites gehören – was im Einzelhandel üblich ist – können eine zusätzliche Leiste über dem Header mit Quick-Links zu ihren anderen Geschäften hinzufügen, wie es Gap tut:
Anstatt eine separate Leiste für die Multi-Site-Navigation zu erstellen, erscheinen diese Links innerhalb der Hilfsleiste von Gap.
Anstatt eine separate Leiste für die Multi-Site-Navigation zu erstellen, erscheinen diese Links innerhalb der Hilfsleiste von Gap.
Was sollte ein Website-Header enthalten?
Schauen wir uns an, was genau in den Header einer Website gehört.
• Ein Logo – Du möchtest einen Wiedererkennungswert für deine Marke schaffen? Dann sollte das Logo das allererste sein, was Besucher auf deiner Website sehen.
• Links zur Navigation– Die Navigation sollte dazu beitragen, dass deine Besucher besser verstehen, was sich auf der Website befindet und wie die einzelnen Seiten zueinander in Beziehung stehen. Wenn sie sich leicht einen Überblick verschaffen können, werden sie sich sicherer fühlen, wenn sie die Website erkunden. Je nach Größe deiner Website musst du entscheiden, wie viele und welche Arten von Navigationen du benötigst.
• CTA – Jede Website hat eine Aktion oder ein Ziel, zu dem die Besucher geführt werden sollen. Während die Website auffällige Handlungsaufrufe auf allen Seiten enthält, ist es eine gute Idee, den CTA auch in der Kopfzeile zu platzieren, damit er den Besuchern im Gedächtnis bleibt. Dein CTA sollte am rechten Ende des Headers platziert werden. Dieser auffällige Link sorgt nicht nur für ein visuelles Gleichgewicht im Header, sondern dient auch als hilfreiche Abkürzung. Dies erklärt sich aus dem Designprinzip des Serienpositionseffekts, der besagt, dass Menschen sich an die ersten und letzten Elemente einer Serie besser erinnern als an die anderen.
• Suchleiste – Websites mit umfangreichen Inhaltsarchiven oder Produktbeständen profitieren enorm von einer Suchleiste im Header. Allerdings ist es wichtig zu beachten, dass die Suchleiste nicht nur durch ein Lupen-Symbol dargestellt wird. Denn auch wenn das Lupen-Symbol für viele gut erkennbar ist, sollte man nicht davon ausgehen, dass jeder weiß, was es bedeutet. Es ist deshalb ratsam die Lupe ebenfalls mit dem Wort „Suche“ zu kombinieren.
• Ecommerce – Websites mit E-Commerce-Funktionen sollten immer E-Commerce-Elemente entweder in der Hauptkopfzeile oder in der Hilfsleiste haben. Hier sehen Sie, wie Sephora das macht:
In der Ecke ganz rechts befinden sich drei E-Commerce-Elemente:
• Anmeldung/Konto (Persona-Symbol)
• Wunschzettel (Herz-Symbol)
• Warenkorb (Einkaufstaschen-Symbol)
In vielen Fällen werden diese E-Commerce-Links nur durch Symbole dargestellt. Wenn du jedoch unsicher bist, ob die von dir entworfenen Icons leicht erkennbar dann kombiniere sie am besten mit einem Label.
Bewährte Methoden für die Gestaltung von Website-Headern
Der Header ist ein vertrauter Teil einer Website. Auch wenn du ihn individuell gestalten möchtest, solltest du dich nicht zu weit von den etablierten Normen entfernen.
Hier sind einige Tipps, wie du das richtige Gleichgewicht findest:
1. Weißraum sinnvoll nutzen
Wir konzentrieren uns oft darauf, wie wir den Weißraum nutzen können, um das Design und den Inhalt der Seite zu verbessern. Aber auch bei der Gestaltung von Headern ist Weißraum ein wertvolles Gut.
Schauen wir uns an, wie sich Weißraum auf den BBC-Header ausgewirkt hat:
Zunächst einmal gibt es viel Platz zwischen der Anmeldeschaltfläche und der Navigation. So kann das Logo gut zur Geltung kommen. Neben dem Logo können sich die Besucher einloggen, um ihr Erlebnis zu optimieren.
Als Nächstes folgt die Navigation mit neun gleichmäßig verteilten Links, die durch feine Trennlinien voneinander abgegrenzt sind. Es gibt zwar viele Kategorien zur Auswahl, aber die Abstände helfen den Besuchern, sich auf jede einzelne zu konzentrieren.
Dann hat man den Platz in der Suchleiste. Dieser ist für praktische Zwecke nützlich. Durch die Gestaltung einer breiten Suchleiste wird es für die Benutzer einfacher, sie zu finden und zu benutzen.
Diese Designentscheidung ist auch deshalb so klug, weil sie die Aufmerksamkeit der Besucher auf den großen weißen Block am Ende der schwarzen Leiste lenkt. Die Suchleiste spielt im Grunde die Rolle des CTA.
2. Erstelle ein benutzerdefiniertes Header-Design für Mobilgeräte
Im Allgemeinen empfiehlt Google, dass die mobile und die Desktop-Version einer Website denselben Inhalt enthalten. Dem widerspreche ich nicht. Die Kopfzeile auf dem Desktop sollte dasselbe Logo, dieselben Links und Informationen enthalten wie die auf dem Handy.
Die Art und Weise, wie sie gestaltet sind, sollte jedoch unterschiedlich sein.
Nehmen wir Chick-fil-A als Beispiel. So sieht der Desktop-Header aus, wenn die Unternavigation geöffnet wurde:
Es gibt vier Navigationslinks auf oberster Ebene. Wenn einer von ihnen geöffnet wird, erscheint eine Unternavigation als horizontale Reihe darunter. Dabei spielt es keine Rolle, ob es 4 oder 14 Links sind. Diese Navigation passt nicht in die Kopfzeile einer mobilen Website. Deshalb baut die Mobile Version ein Hamburger Hamburger-Symbol ein, welches sich in der linken Ecke öffnet und eine vertikale Kopfzeile in voller Größe frei gibt.
Es handelt sich um denselben Header-Inhalt wie auf dem Desktop, nur mit einer mobilfreundlicheren Darstellung.
3. Halte den Header übersichtlich und gut strukturiert
Es gibt eine Reihe von Gründen, warum jemand den Header einer Website nutzt. Anstatt die Benutzer dazu zu bringen, innezuhalten und ihre Optionen abzuwägen, solltest du die Kopfzeile so organisieren, dass die Benutzer genau das finden, wonach sie suchen – und das auch noch schnell.
Werfen wir einen Blick darauf, wie Asana dies tut:
Das Asana-Logo befindet sich in der linken Ecke des Headers. Direkt daneben befindet sich die Navigation. Der äquidistante Abstand zwischen dem Logo und allen Navigationslinks deutet darauf hin, dass das Logo (d.h. der Home-Link) und die Navigation als ein Ganzes betrachtet werden sollten. Dies beruht auf dem Designprinzip, das als Gesetz der gemeinsamen Region bezeichnet wird. Auf der rechten Seite befinden sich das Symbol für die Sprachumschaltung, „Contact Sales“, „Log In“ sowie der CTA „Try for free“. Es ist ein Sammelsurium von Optionen, aber es macht Sinn, dass sie am anderen Ende des Headers untergebracht werden.
Dies ist nicht die einzige Möglichkeit, wie Asana den Inhalt der Kopfzeile gut organisiert. So sieht die „Warum Asana?“-Unternavigation aus:
Das Mega-Menü ist so formatiert, wie man eine Webseite formatieren würde. Die Struktur sieht wie folgt aus:
• H2-Tag: Warum Asana?
• H3-Tags: ÜBERSICHT, FUNKTIONEN, ALLE PLÄNE
• H4-Tags: Fettgedruckte Überschriften unter den H3-Tags
Die bunten Symbole sind hier nicht wirklich nötig. Die Navigationsstruktur und die Art und Weise, wie sie in der Dropdown-Liste angeordnet ist, machen es unglaublich einfach, den Inhalt der Überschriften zu durchschauen.
Übrigens kannst du diese Idee der Ordnung und Hierarchie auch bei der Gestaltung zusätzlicher Leisten für die Kopfzeile anwenden. Hier ist ein gutes Beispiel von der Website des East Bay Inn:
Die Hauptkopfzeile ist die größte und hellste von allen. Auch die Schriftarten sind dicker und größer als bei den anderen. Auf diese Weise wird das Hauptaugenmerk auf die Kopfzeile gelenkt und die Besucher können bei Bedarf auf die anderen Banner verweisen, um zusätzliche Informationen zu erhalten.
4. Wähle einfache Schriftarten, die leicht zu lesen sind
Die Kopfzeile ist nicht der richtige Ort, um bei der Wahl der Schriftart kreativ zu werden. Außer für das Logo natürlich.
Nehmen Sie zum Beispiel Dribbble:
Die handgeschriebene Schrift ist eine gute Wahl für das Logo. Sie ist einzigartig, einprägsam und sagt viel über den handwerklichen Charakter der Arbeiten auf der Website aus. Allerdings ist eine handgeschriebene Schrift – oder jede andere stark stilisierte Schrift, um ehrlich zu sein – in einem so kleinen Bereich wie der Kopfzeile nur schwer zu lesen. Wähle daher am besten eine Serifen- oder serifenlose Webschrift für deine Textlinks und Informationen.
Zwei weitere Dinge sind zu beachten:
- Achte bei der Größe auf ein Minimum von 16 Pixeln – das gilt sowohl für die Hauptkopfzeile als auch für alle angehängten Balken.
- Was die Farbe betrifft, so solltest du auf den Farbkontrast achten. Das Verhältnis zwischen Schrift und Hintergrund sollte mindestens 4,5:1 betragen. Dies gilt sowohl für den Header als auch für alle sekundären Informationen, die ihn umgeben.
Wenn du einen vollständig benutzerdefinierten Header erstellst, kannst du dir diese Schriftarten im Stileditor von Elementor einstellen. Wenn du die Typografie und die Farben einfach vom Rest deiner Website übernehmen möchtest, stelle einfach sicher, dass sie in den globalen Einstellungen genau so definiert sind, wie du sie brauchst.
5. Verwende visuelle Elemente sparsam
Wenn du visuelle Elemente wie Icons, Bilder und Videos in der Navigation verwendest, solltest du einen guten Grund dafür haben.
Wie wir in einigen Beispielen oben gesehen haben, können Icons für Website-Kopfzeilenelemente wie die Suchleiste, den Warenkorb, den Standortfinder, die Sprachumschaltung und so weiter nützlich sein. Sei jedoch vorsichtig bei der Verwendung von Symbolen, die ungewöhnlich sind oder mehrdeutig interpretiert werden können.
Bei Bildern und Videos solltest du besser auf diese sperrigen Elemente verzichten. Wenn du ohnehin schon damit zu kämpfen hast, dass deine Website so schnell wie möglich lädt, ist das Hinzufügen von Bilddateien zu deinem Header (abgesehen vom Logo natürlich) wahrscheinlich nicht die beste Idee.
Es gibt jedoch einige Anwendungsfälle, in denen Bilder die Ladegeschwindigkeit des Headers und insbesondere der Navigation verbessern können.
Hier ist ein wirklich tolles Beispiel von MINI USA:
Natürlich hätte MINI auch einfach die Namen der einzelnen Modelle auflisten können. Aber die begleitenden Bilder machen die Auswahl eines der Modelle viel einfacher. Eine Sache, die man allerdings vermeiden sollte, sind Videos. Videos sind zum Anschauen gedacht, und die Kopfzeile ist einfach nicht der ideale Ort für längere Beiträge (selbst wenn sie nur 30 Sekunden lang sind).
6. Füge Animationen nur in der Navigation ein
Animationen müssen nicht immer übertrieben sein, um effektiv zu sein. Kleine Animationen, die zum Beispiel in der Navigation eingesetzt werden, können die Aufmerksamkeit und das Engagement verbessern, wenn sie richtig eingesetzt werden. Es ist am besten, Animationen in kleinen Dosen zu verwenden, um die ausgewählte Seite zum Leben zu erwecken.
7. „Make it Stick“
Wenn du nicht gerade Webseiten mit sehr wenig Inhalt entwirfst, ist es wahrscheinlich eine gute Idee, deiner Website einen Sticky Header hinzuzufügen. Lange einseitige Websites sowie Websites mit langen Feeds (wie Nachrichten- und E-Commerce-Websites) würden definitiv von einem solchen profitieren. Auf diese Weise haben die Besucher*innen die Kopfzeile immer in Reichweite, egal wie weit unten auf der Seite sie sich befinden.
NNG hat einige nützliche Tipps für die Gestaltung von Sticky Headern:
• Verkleinere sie, wenn der Besucher mit dem Scrollen beginnt.
• Schaffe einen starken Kontrast zwischen dem Header und dem Inhalt, damit die Besucher*innen wissen, wo die eine endet und die andere beginnt.
• Halte Animationen klein.
8. Berücksichtige das Verhältnis von Header zu Inhalt bei der Verwendung einer vertikalen Navigation
NNG hat einige wirklich großartige Dinge über vertikale Navigationen zu sagen:
• Du kannst so viele Links hinzufügen, wie du brauchst, ohne dass sie den Header überfüllen.
• Du kannst die Seiten deiner Website problemlos skalieren, ohne das Design des Headers ernsthaft zu beeinträchtigen.
• Sie sind leichter zu überblicken, da die Besucher daran gewöhnt sind, auf der linken Seite der Website nach unten zu schauen.
• Die Nutzer*innen sind an die vertikale Navigation gewöhnt, da sie viel Zeit in den sozialen Medien und in Webanwendungen verbringen.
• Eine vertikale Navigation sorgt für ein einheitliches Erlebnis auf Desktop und Mobilgeräten.
Aber es gibt auch ein Platzproblem, über das man nachdenken muss.
Der horizontale Header ist in der Regel so konzipiert, dass er schmal ist. Trotzdem schrumpfen viele Sticky Header, wenn Besucher die Seite nach unten scrollen, so dass sie nicht viel Platz einnehmen.
Navigationsleisten im Stil einer Seitenleiste haben diesen Luxus nicht, es sei denn, sie sind so konzipiert, dass sie nur sichtbar werden, wenn jemand auf das Hamburger-Menü-Symbol klickt.
Wenn es dir gelingt, dein Sticky Sidebar-Menü kompakt genug zu gestalten, kannst du verhindern, dass es zu einer Störung der Benutzererfahrung wird.
9. Mache die Kopfzeile nur dann transparent, wenn es Sinn macht
Bei transparenten Kopfzeilen sind die Elemente noch vorhanden – das Logo, die Navigation, der CTA und so weiter – aber es gibt keinen festen Hintergrund dahinter. Wie du dir vorstellen kannst, kann dies bei einigen Websites eine schwierige Designentscheidung sein.
Einer der Hauptgründe dafür ist, dass Text sehr schwer zu lesen sein kann, wenn er vor einem unruhigen Hintergrund oder einem Hintergrund mit geringem Farbkontrast erscheint. Wenn der Header also nicht vollständig aus dem Blickfeld des Besuchers verschwindet, wenn er scrollt, besteht die Gefahr, dass die Navigation und der übrige Text unleserlich werden, wenn der Besucher über bestimmte Teile scrollt.
Übersetzt von Sarah van der Linden
von Website Freiburg
Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/website-header-design
