In diesem Artikel zeige ich Dir 13 coole Header-Effekte für Webseiten, die beim Scrollen animiert werden.
Aber zunächst einmal klären wir die Basics: Was beinhaltet ein Header eigentlich?
Das unterscheidet sich natürlich von Fall zu Fall, aber i.d.R. befinden sich mindestens das Logo des Anbieters und die Navigation einer Website im Header–Bereich. So versteht der User direkt, wo er gelandet ist und ist idealerweise in der Lage, sich zu orientieren bzw. über die Seite zu navigieren.
Häufig finden befinden sich im Header noch weitere Elemente, z.B.:
- eine Suchfunktion
- eine Call-to-Action (bspw. als Button, klickbare Telefonnummer oder sonstige Kontaktmöglichkeiten)
- Shop-Funktionen (wie bspw. der Warenkorb)
- Social-Media-Verlinkungen. Social-Media-Verlinkungen
- Trust-Elemente (z.B. Zertifikate oder Auszeichnungen, die für Deinen User direkt ersichtlich sein sollen)
Vorteile von fixierten Headern:
Gerade, weil sich i.d.R. wichtige Elemente im Header-Bereich befinden, wird häufig mit fixierten Headern gearbeitet, die beim Scrollen also nicht verschwinden, sondern stets im Viewport verankert sind. Auf diese Weise bleibt Dein Logo bzw. Deine Marke immer für den User sichtbar und die Funktionen der Navigation stets für ihn erreichbar.
Nachfolgend habe ich Dir 13 Beispiele für spannende Header-Effekte herausgesucht und meine persönliche Pro- und Contra-Liste erstellt. Schau Dir die Seiten gerne direkt „live“ an – dazu musst Du einfach nur das entsprechende Bild anklicken.
1. FHOKE
Pro:
- Clean und übersichtlich
- Gute Lesbarkeit der Navigation
Contra:
- Höhe
- Knallige Farbe des Header wenn man scrollt (zieht die Aufmerksamkeit auf sich und lenkt vom Wesentlichen ab)
2. I Shot Him
- Höhe
- Gute Lesbarkeit
- Schöner Effekt beim Scrollen und Mouseover
Contra:
- Header auf erstem Blick nicht sichtbar
- Knallige Farbe (zieht die Aufmerksamkeit auf sich und lenkt vom Wesentlichen ab)
3. Playground Inc.
Pro:
- Sehr kompakter Header
- Dezent und auf den ersten Blick gut zu erkennen
- Scrollt man nach unten, verschwindet die Navigation und das Logo bleibt stehen – somit nimmt er keinen Platz vom sichtbaren Bereich des Browser-Fensters weg
- Schöne schnelle Animation bei Mouseover
Contra:
- Möchte man die auf eine Unterseite wechseln, so muss man erst mit dem Mauszeiger über das Logo gehen, damit sich die Navigation öffnen
Du möchtest wissen, wie du unter Berücksichtigung von Dringlichkeit, Exklusivität, Mehrwert, Relevanz und mehr Deine Call-to-Actions verbessern kannst? Darüber hinaus interessieren Dich Tipps zum Thema A/B-Tests? Dann schau Dir dieses Video an!
4. Red Antler
Pro:
- Clean und übersichtlich
- Gute Lesbarkeit
- Fixiert
- Höhe verringert sich beim Scrollen
Contra:
- Nichts
5. Seed Spot
Pro:
- Clean und übersichtlich
- Gute Lesbarkeit
- Fixiert
- Höhe verringert sich beim Scrollen
- Transparenter Hintergrund, das Bild dahinter ist noch sichtbar
Contra:
- Nichts
6. Karma
Pro:
- Fixiert
- Höhe verringert sich beim Scrollen
- Call-to-Action im Header
Contra:
- Logo und Navigation beim Startbildschirm schlecht zu erkennen durch die Menge an Elementen
- Header ist erst beim Scrollen als solcher zu erkennen
7. Ditto
Pro:
- Fixiert
- Sehr schmal
- Clean und übersichtlich
- Schöne Mouseover-Effekte und Dropdown-Menüs
Contra:
- Kleine Schriftgröße (schlechte Lesbarkeit)
8. Derek Boateng
Pro:
- Fixiert
- Clean und übersichtlich
- Höhe verringert sich beim Scrollen, aber…
Contra:
- Höhe (Header nimmt 1/3 des Sichtbereiches ein)
9. Daniel Filler
Pro:
- Großes Logo und gut lesbarer Text
- Clean und übersichtlich
- Höhe verringert sich beim Scrollen
- Möglichkeit, jederzeit über den Pfeil (Button) zum Anfang der Seite zu gelangen
Contra:
- Navigationspunkte wechseln die Platzierung beim Scrollen (Verwirrungspotential)
10. Something Splendid
Pro:
- Großes Logo mit Beschreibung
- Clean und übersichtlich (auf der Seite „Work“)
- Besondere Anordnung
- Höhe verringert sich beim Scrollen
Contra:
- Nach dem Scrollen immer noch zu hoch
- Logoplatzierung auf der rechten Seiten
- Auf den Unterseiten mit Bild hinterlegt – dadurch ist der Text schlecht lesbar
11. Freelancelift
Pro:
- Clean und übersichtlich
- Besondere Anordnung
- Höhe verringert sich beim Scrollen
Contra:
- Drei verschiedene Header-Ansichten
- Beim Scrollen verschwinden Logo und Login-Möglichkeit (werden erst beim Hochscrollen wieder eingeblendet)
12. Michael Heinsen
Pro:
- Clean und übersichtlich
- Fixiert
- Ebene der Navigation immer sichtbar
- Header-Menü lässt sich per Klick schließen
- Navigationshinweis
Contra:
- Lesbarkeit der Navigation
13. Lexware Landingpage
Bei dieser Webseite handelt es sich um eine Onepage Landing Page. Wir finden zwei Navigationen: Eine wie gewohnt oben am Bildschirmrand und eine auf der rechten Seite. Beide sind fixiert und beim Scrollen immer sichtbar. Die Navigationspunkte dienen als Sprungmarken. Man gelangt per Klick auf einen Navigationspunkt zum entsprechenden Bereich auf der Seite. Scrollt man nach unten wird jeder Navigationspunkt markiert, sobald wir den Bereich erreicht haben. Das Besondere hier: Die Art der Markierung. Diese ist ein Pfeil, der den Fortschritt darstellt. Das Ziel hier ist klar – TESTEN!
Pro:
- Clean und übersichtlich
- Fixiert
- Fortschritts-Optik
- Auffällige Call-to-Action im Header
Contra:
- 2 Navigationen – hier könnte man gut auf die Navigation rechts verzichten
Fazit
Wenn Du sie richtig und durchdacht einsetzt, sind animierte Header eine gute Möglichkeit, die Usability Deiner Seite zu verbessern.
Hier (www.tympanus.net/on-scroll-header-effects) findest Du noch weitere Beispiele für animierte Header und kannst Dir auch direkt die entsprechenden CSS-Daten herunterladen, um Deiner Webseite ein bisschen mehr Leben einzuhauchen.
Viel Spaß!
