Springe zum Hauptinhalt

14 tolle Website-Header für Ihre Inspiration

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

In der Vergangenheit bezog sich ein "Header" im Webdesign auf den allgegenwärtigen Streifen am oberen Rand von Websites, der das Logo, die Navigationsleiste und vielleicht Kontaktdetails und eine Suchleiste enthielt. Heutzutage bezieht sich ein "Header" häufiger auf den gesamten Bereich oberhalb des Falzes auf der Startseite.

Es sei denn, jemand hat Ihre Website über einen in sozialen Medien geteilten Blog-Beitrag oder über eine Empfehlung auf einer anderen Website gefunden, die Chancen stehen gut, dass er sie über die Seite von Willkommen betritt. Und das Erste, was sie sehen werden, ist, dass erstklassige Immobilien freigelegt werden.

Ich habe bereits darüber geschrieben, wie Besucher besser auf die vorhersehbare Platzierung bestimmter Elemente auf Ihrer Website (wie Logo und CTA) reagieren. Indem Sie eine Website so gestalten, dass sie ihren Erwartungen entspricht und ihre Benutzerfreundlichkeit verbessert wird, indem die Erfahrung ein wenig vorhersehbarer wird, können Sie die Klick- und Konversionsraten effektiv verbessern.

Denken Sie nun an diesen Kopfzeilenraum auf der Homepage.

Quickbooks-Kopfzeile
Was genau ist heutzutage ein "Header"?

Die meisten Menschen verlassen sich auf Homepages, um ihnen ein umfassendes Bild davon zu vermitteln, worum es bei einem Unternehmen oder einer Website geht.

Sicher, Ihr Homepage-Header-Design kann einzigartig für Ihre Marke sein, aber die Elemente darin sollten es wirklich nicht sein. Besucher erwarten, dass Scrollen nicht notwendig ist, um herauszufinden, was eine Website für sie tut. Im Wesentlichen sollte Ihr Header eine 10-Sekunden-Geschichte sein, die Ihren Besuchern den Wert der Site beweist.

Was werden Sie also mit diesem Raum tun, um das Interesse Ihrer Besucher zu wecken?

Lassen Sie uns über einige der Trends im Header-Design sprechen, was Sie tun können, um diese gut sichtbaren Immobilien zu nutzen, und werfen wir einen Blick auf einige coole Header-Beispiele.

Anmerkungen: Nicht alle der unten aufgeführten Beispiel-Sites verwenden WordPress, aber sie können mit WordPress erstellt werden.

14 Header-Webdesigns

Es ist nicht so, dass Ihre Besucher ihre Möglichkeit ignorieren, auf einer Seite nach unten zu scrollen oder per Klick zu browsen, um mehr über die Marke hinter einer Website zu erfahren. Aber warum sollten sie das tun?

In der Kopfzeile ist genug Platz, um eine prägnante Nachricht bereitzustellen, die ihnen alles sagt, was sie wissen müssen. Und wenn 50 Wörter oder weniger nicht ausreichen, wird die Unordnung oder das Design den Rest der Geschichte vermitteln.

In erster Linie kann der Header der Startseite den ersten Eindruck Ihrer Besucher prägen oder zerstören, weshalb es so wichtig ist, diesen Abschnitt zu treffen.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Wenn Sie Schwierigkeiten haben, einen guten Start für Ihre Website zu finden, finden Sie möglicherweise Inspiration in den folgenden Header-Designs.

1. Übergroßes Heldenbild

Kreative Cleverbird-Website.
Einige Header, wie der von Cleverbird Creative, sind riesig.

Dank des modularen Stils des responsiven Site-Designs sind die meisten Designs jetzt in separate Blöcke und Abschnitte unterteilt. Dieser Designstil eignet sich gut für die Heldenbilder in voller Breite, die so viele Websites bevölkern.

Nehmen Sie zum Beispiel die Website von Cleverbird Creative. Es verwendet ein einzigartiges und auffallendes Bild, das über einfachen Text gelegt wird, um die Besucher willkommen zu heißen. Unverkennbar, wonach sie hier suchen: Schönheit leicht gemacht. Außerdem schadet es nicht, Wonder Woman zu haben.

2. Rutschige Bilder

Beispiel für ein scrollendes Bild.
Mmm… Eis…

Ich glaube, vor nicht allzu langer Zeit haben viele von uns den Slider als brauchbares Designelement in Frage gestellt. Viele Designer haben jedoch großartige Arbeit geleistet, indem sie es in den Kopfzeilen verwendet haben. Es gibt gleitende Bilder, die automatisch von einem schönen hochauflösenden Bild zum anderen scrollen, und es gibt Bilder wie Peters, die Besucher bitten, die Kontrolle über dieses Erlebnis selbst zu übernehmen.

3. Transformative Parallaxenbildgebung

Die Anakin Design Studio-Website.

Parallax ist seit geraumer Zeit ein Merkmal des modernen Webdesigns. Obwohl die Verwendung von Parallax-Effekten vor einigen Jahren als "heiß" galt, ist sie immer noch beliebt und der Header hat sich als der perfekte Ort erwiesen, um diese Art von visueller "Illusion" auf Webdesigns anzuwenden. Was Sie jedoch in letzter Zeit sehen werden, ist, dass die Designer ihrer Parallax-Schriftrolle eine transformative Note verleihen, die die Besucher wahrscheinlich mit dem unerwarteten Ergebnis der Schriftrolle überraschen wird. Genau das hat Anakin Design Studio mit seinem Header gemacht.

4. Videohintergründe

Beispiel für Videohintergrund.
Die Brave People-Website leistet hervorragende Arbeit beim Einbinden von Videos.

Der Videohintergrund ist ein weiterer neuer Trend, der wirklich am besten funktioniert, wenn er auf den Homepage-Header angewendet wird. Dieser von Brave People macht einen großartigen Job, um den Ton für ihre Website anzugeben und zeigt verschiedene Clips.

5. Versteckte Navigation

Der Header des Canals-Beispiels.
Der Header der Kanäle ist super modern und die Navigation ist schwer zu erkennen.

Obwohl argumentiert werden kann, dass das Hamburger-Menü zu Websites gehört, die auf mobilen Geräten angezeigt werden (wie ursprünglich beabsichtigt), gibt es einiges darüber zu sagen, was diese Art von Navigationsminimalismus dafür tut. Der Standort Canals ist ein gutes Beispiel. Durch das Aufräumen der Navigation wird Ihre Aufmerksamkeit sofort auf die aufregenden Grafiken gelenkt.

6. Markenmaskottchen

Beispiel für einen Maskottchen-Header.
Wie Tony der Tiger über Maskottchen-Header sagen würde: „Sie sind großartig!

Wenn die Kopfzeile der perfekte Ort ist, um Ihre Website den Besuchern zu präsentieren, gibt es keinen besseren Weg, sie zu starten, als ihnen die „Charaktere“ vorzustellen, die sie auf dem Weg treffen werden? Wenn Ihre Website ein Markenmaskottchen verwendet, wie dies auf der Frosted Flakes-Website von Kellogg der Fall ist, ist jetzt die Zeit und der Ort, sie zu präsentieren.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

7. Auffällige Typografie

Beispiel einer Slack-Website.
Eine starke Typografie kann Ihre Inhalte wirklich zum Glänzen bringen.

Es gibt viel, was Sie tun können, um Ihrer Website-Typografie ein Facelifting zu verpassen. Trotzdem geht es manchmal nicht darum, die schickste Kursivschrift auszuwählen, um den Leuten ins Gesicht zu werfen. Wenn Sie sich das obige Slack-Beispiel ansehen, werden Sie feststellen, dass alles von der Schriftgröße abhängt. Die von ihnen gewählte Typografie ist nichts Besonderes, aber sie ist so sauber und knackig. Das macht ihn zusammen mit der Größe des Hauptposts so auffällig.

8. Inhalt zuerst

Beispiel für eine Glamour-Homepage.
Die Glamour-Homepage ist unter anderem Content First.

Für Websites, deren Hauptziel es ist, Besuchern große Mengen an Inhalten zu liefern (denken Sie an jede große Nachrichtenseite oder ein Blog), ist eine inhaltsorientierte Strategie für den Header am sinnvollsten. Es hat wirklich keinen Sinn, hier kleine Worte zu machen. Die Leute sind auf Ihre Website gekommen, um Ihre Inhalte zu lesen. Sie müssen sich nicht mit dem Weiterlesen auf der Startseite verzetteln, sodass Sie wie bei Glamour direkt darauf springen können.

9. Produkte zuerst

Beispiel einer Apple-Website.
Währenddessen konzentriert sich Apple auf sein neuestes großes Produkt.

In diesem Zusammenhang müssen E-Commerce-Sites sich nicht die Mühe machen, den Header zu verwenden, um eine einprägsame Überschrift zu schreiben oder ein Erklärvideo über das Unternehmen bereitzustellen. Besucher wissen, warum sie auf die Website gekommen sind, sodass Sie direkt eintauchen können. Im Gegensatz zu Inhaltsanbietern können Produkthändler diese erstklassigen Immobilien jedoch nutzen, um ihre meistverkauften Produkte oder ihre neuesten Veröffentlichungen zu präsentieren, um Besucher anzuziehen, genau wie Apple es tut.

10. CTA Front-and-Center

Der Everywhereist lädt Besucher ein, auf seinen fett gedruckten CTA zu klicken.

Es kann vorkommen, dass Ihre Website den Besuchern etwas ganz Besonderes bietet, etwas, das Sie herunterladen oder kaufen möchten. Auch wenn dies vielleicht nicht die Hauptattraktion Ihrer Website ist, können Sie den Header vorübergehend oder dauerhaft verwenden, um diesen besonderen Call-to-Action hervorzuheben, wie es der Blogger macht. Everywhereist mit seinem Buch.

11. Lebendige Farben und Texturen

Beispiel von der Stripe-Website.
Ooh… genial…

Eines der schönsten Dinge aus Google Material Design ist unser Bestreben, lebendigere Farben, Ebenen und Farbverläufe im Webdesign zu verwenden. Sie sollten nicht mehr zu Call-to-Action-Buttons verbannt werden, sie können für ganze Blöcke auf der Website verwendet werden, wie es Stripe mit ihrem farbenfrohen, strukturierten Header tut.

12. Animationen

Disney-Website.
Die Website von Disney bietet oft Animationen ihres neuesten Projekts.

Es ist absolut nichts auszusetzen, ein statisches Homepage-Header-Design zu haben, insbesondere wenn Sie den Fokus auf einen CTA oder ein Video lenken möchten. Bitte halten Sie es einfach, damit es keine Ablenkungen gibt, die Besucher daran hindern, die von ihnen gewünschten Maßnahmen zu ergreifen.

Aber für Websites, die eine interessante Möglichkeit suchen, ihre Botschaft mit den Lesern zu teilen, versuchen Sie es mit Animation. Disney verwendet beispielsweise eine kleine Animation, um eine Reihe von Posts im selben Bereich zu teilen, sodass sie nicht überladen oder mit Informationen überladen aussehen.

13. Geometrische Designs

Perspektive Webseite.
Vereinfachter Header aus der Perspective API.

Geometrisches Website-Design ist im Moment sehr wichtig, da es sich gut für die logischen und klaren Linien eignet, die für responsives Design erforderlich sind. Es ist daher nicht verwunderlich, dass immer mehr Websites, wie die Perspective APIs, geometrische Elemente in das Header-Design integrieren. Andere, wie Stripe und WPMU DEV, verwenden diagonale Linien, um eine einzigartige und unerwartete visuelle Landschaft für die Besucher zu schaffen.

14. Experimentell

Der Header von Teamgeek ist seltsam und lustig.

Schließlich kommen wir zu den experimentellen Header-Designs. Der Schlüssel dazu ist normalerweise nicht, dass der Header seltsam seltsam und ungewöhnlich ist. Für Besucher wäre das zu umständlich. Stattdessen sollten Sie sich darauf konzentrieren, einen unerwarteten Effekt zu erzielen, der durch die einfache Bewegung des Headers verursacht wird.

Nehmen Sie zum Beispiel das Teamgeek-Design. Sie können sehen, dass mit dem Logo und der Botschaft in der Mitte der Seite etwas nicht stimmt, aber erst wenn Sie sich darauf einlassen, erkennen Sie, dass darin eine besondere Note steckt.

Pack

Wie Sie sehen, gibt es verschiedene Möglichkeiten, einen Header für eine WordPress-Site zu entwerfen. Wenn Sie sich die obigen Beispiele genau ansehen, werden Sie feststellen, dass die Designer sehr strategisch in Bezug auf den verwendeten Header-Stil und die darin enthaltenen Elemente waren. Wenn es an der Zeit ist, einen Header für Ihr nächstes Website-Projekt zu entwerfen, stellen Sie fest, ob Sie Folgendes benötigen:

  • Logo
  • Traditionell vs. versteckt
  • Hero-Header-Abschnitt vs direkt zum Inhalt
  • Slogan oder Leitbild
  • Kontaktinformation
  • Social-Media-Links
  • Suchleiste
  • Mehrsprachiger Schalter
  • Warenkorb
  • Markenmaskottchen
  • Stock-Fotografie versus tatsächliche Fotografie des Unternehmens, der Personen oder des Produkts
  • Statisches Bild vs. gleitende Bilder vs. Hintergrundvideo
  • Integriertes Werbevideo
  • Call-to-Action-Schaltfläche
  • Kontaktformular
  • Hallo Bar

Möglicherweise finden Sie auch andere Elemente, die zu diesem oberen Kopfzeilenbereich Ihrer Homepage gehören. Es kommt wirklich darauf an, was für Ihre Website am sinnvollsten ist.

Mit anderen Worten, welche Elemente werden die Geschichte Ihrer Marke erzählen, Ihr Publikum von Anfang an informieren und einbeziehen und genug Selbstvertrauen wecken, um es auf Ihre Website zu bringen?

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Anmerkung der Redaktion: Dieser Beitrag wurde auf Genauigkeit und Relevanz aktualisiert. [Ursprünglich veröffentlicht: August 2017 / Überarbeitet: August 2021]