Ein Website-Header entscheidet über die User-Experience (UX), das Branding und vieles mehr. Damit Website-Besucher bleiben, benötigst du einen Header, der deine Nutzer wortwörtlich umhaut – einen „Wow-Header“. Und das nicht nur auf der Startseite. Wir haben sieben Tricks und Techniken, die euch dabei helfen sollen, einen Wow-Header zu gestalten.

Hero-Images waren 2017 einer der großen Trends im Webdesign. Sie füllen prominent den Screen und sollen beim Nutzer einen Wow-Effekt auslösen. Bilder sind mehr als nur schicke Fotos, sie sind mit die stärksten Waffen eines Designers. Sie drücken Emotionen aus, erzählen Geschichten, fesseln den Benutzer und können zu bestimmten Aktionen verleiten.

Ein Bild alleine ist ein guter Ansatz, aber um das beste aus dem Gesamtbild zu machen, benötigt es weitere Elemente – wie zum Beispiel eine aussagekräftige Headline in typografisch auffallender Schrift und ein Call-to-Action-Button. Natürlich sollten das Logo, Menü und die Suche an richtiger Stelle nicht fehlen.

Worauf du bei der Auswahl von Hero-Images achten musst, erklären wir in einem Extra-Artikel.

Es gibt keinen Grund, den Header und die Navigationselemente voneinander zu trennen – sie sind häufig ein Part desselben visuellen Konzepts. Egal, ob es sich um eine Navigation handelt, die sich über den ganzen Headerbereich streckt oder etwas, das aus dem Hamburger-Icon aufpoppt, eine Navigation sollte immer ein Part vom Header-Konzept sein.

Und wenn wir schon bei der Navigation sind, wie wäre es mit einer Sticky-Navigation? Der Header ist schnell weggescrollt, die Navigation sollte aber immer auf dem einfachsten und schnellsten Weg erreichbar sein. Übrigens: Ein Hamburger-Menü funktioniert nicht nur in mobiler Version.

Nur überwältigende Bilder reichen nicht aus. Was soll die Botschaft des Headers an die Websitebesucher sein? Erzählt der Header, was zu tun oder zu erwarten ist? Oder wo der Nutzer klicken soll? Ist es eine Botschaft, die einfach zu verstehen ist? Insgesamt sollten mehrere kombinierte Elemente einen Gesamteffekt mit einer prägnanten Nachricht darstellen.

Große Schriften sind gut für die Gewichtung des Headers. Sie können den Blick der Websitebesucher abfangen, bevor er sich auf den eigentlichen Content der Website stürzt. Die Stile der Typografie können variieren, dennoch sollten ein paar Grundregeln beachtet werden: Die Startseite lässt mehr Freiraum – hier können Fonts dramatischer, verspielter oder extremer sein, besonders im Header. Auf Unterseiten sollte ein einheitlicher, ruhiger Rhythmus verfolgt werden, der den Nutzer nicht vom Wesentlichen ablenkt.

Menschen lesen online anders als offline. Ein guter Roman wird Wort für Wort gelesen – online nicht. Hier lesen Menschen bis zu 25 Prozent langsamer und sind ungeduldiger. Was unter anderem daran liegt, dass sie mit einer unglaubliche Menge an Informationen konfrontiert werden. Daher hat man das Leseverhalten in drei verschiedene Muster eingeteilt:

• F-Pattern: Das sogenannte F-Muster oder F-Pattern spiegelt das gängige Betrachtungsmuster der meisten Internetnutzer wider. Denn ein durchschnittlicher User fährt in Form eines „F“ über den Text.
• Das Gutenberg-Diagramm: Bei diesem Muster bewegt sich das Auge von oben links nach unten rechts und geht dabei durch das Zentrum der Seite. So erhält die obere rechte Ecke und ganz besonders die untere linke Ecke weniger Aufmerksamkeit.
• Das Z-Muster: Die Augen schauen von oben links nach oben rechts und bewegen sich dann diagonal nach links unten, bevor die Bewegung wiederholt wird.

Elemente – besonders die Key-Elemente – sollten in den „heißen Zonen“ platziert werden, sodass die Wahrscheinlichkeit einer User-Interaktion hoch ist.

Ist der Website-Header interaktiv? Hat er klickbare Elemente, die das Nutzer-Engagement anreizen? Ein Header ist der beste Platz einer Website, um einen Call-to-Action-Button oder einfachere interaktive Elemente wie eine E-Mail-Abfrage zu platzieren. Aber bitte nicht übertreiben, denn das lenkt zu sehr von anderen Botschaften im Header ab. Eine einfache, prägnante Call-to-Action-Form ist effektiv und ausreichend.

Nicht sicher, wie du vorgehen sollst? Hier sind 8 Wege, um mit Call-to-Action mehr aus deinem Blog zu holen. Weitere Inspirationen findest du in diesem Artikel über Call-to-Action-Buttons.

All die oben aufgelisteten Elemente in einen Header zu verpacken, scheint für manche gar nicht so einfach zu sein. Zumindest nicht, wenn am Ende nicht nur ein schicker, sondern auch funktionierender Header herauskommen soll.

Der Trick ist eine einfache Abstufung der Ebenen. Der beste Header – der einfach „wow“ ist – sieht einfach aus. Er verfolgt die Regeln der Design-Theorie und verwendet ein einziges dominantes Element, um mit Design-Techniken den Benutzer zu verführen und am Ende das gewünschte Ziel zu erreichen.

Mit einer Abstufung der Ebenen wird nicht nur ein visueller Platz für Elemente geschaffen, sie ermöglicht dem Nutzer auch einen visuellen Fokus. So weiß er, wo er anfängt, seine Aufmerksamkeit dem Design zu widmen und welche Elemente vielleicht weniger relevant sind.

Einen perfekten Header zu gestalten, der das gewünschte Ziel optimal erreicht, funktioniert oft nicht beim ersten Versuch. Mehrere Versionen und häufiges Testen sind nötig, um den Benutzer bereits beim ersten Blick abzuholen.

Häufig liegt der Fokus im Design-Prozess beim Header der Startseite – der Header für Unterseiten wird dann oft vernachlässigt. Dabei gelangen die wenigsten Nutzer durch das Eintippen der URL auf eine Website, sondern kommen über Suchmaschinen und gelangen direkt auf eine Landingpage oder Unterseite.

Es ist wichtig, an beide Header-Typen unabhängig sowie auch gemeinsam zu denken, damit eine Design-Harmonie und ein einheitliches visuelles Gesamtbild entsteht.