13 coole Header-Effekte für Webseiten

Design

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen animiert werden. Manche Header sind am Anfang der Webseite fixiert, andere reagieren auf das Scrollen mit der Maus. Doch sind diese Effekte auch nützlich? Zwar gibt es auch einige nutzer-unfreundliche Header, viele bieten aber neben einer tollen Optik auch einen Mehrwert für User.

 

Diese Elemente sollte oder kann ein Header beinhalten:

    • Logo
    • Navigation
    • Social Media Verlinkungen
    • Suche
    • Call-to-Action
    • Kontaktmöglichkeiten (z.B. Telefonnummer, E-Mail-Adresse)
    • Shop-Funktionen
    • Trust Elemente (z.B. Zertifikate, Auszeichnungen)

 

Vorteile eines fixierten Headers:

    • Das Logo oder die Marke sind immer sichtbar.
    • Die Navigation bleibt immer im sichtbaren Bereich. Somit sind Funktionen der Navigation jederzeit erreichbar.
    • Mit verschiedenen Effekte beim Scrollen lässt sich Content verstecken und wieder einblenden.

 

Nachfolgend findet ihr die 13 Beispiele. Schaut euch die Seiten doch einfach mal „live“ an – dazu müsst ihr einfach nur das entsprechende Bild anklicken.

Am Ende des Beitrags findet ihr außerdem noch den Link zu einer Seite mit vielen weiteren Beispielen und ein sehr gelungenes Beispiel einer Landingpage-Navigation.

 

1. FHOKE

www.fhoke.com

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

www.ishothim.com

 

Pro:

  • 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.

www.playgroundinc.com

 

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 Browserfenters 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 öffnet

 

 

4. Red Antler

www.redantler.com

 

Pro:

  • Clean und übersichtlich
  • Gute Lesbarkeit
  • Fixiert
  • Höhe verringert sich beim Scrollen

Contra:

    • Nichts

 

 

5. Seed Spot

www.seedspot.org

 

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

www.yourkarma.com

 

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

www.ditto.com

 

Pro:

  • Fixiert
  • Sehr schmal
  • Clean und übersichtlich
  • Schöne Mouseover-Effekte und Dropdown-Menüs

Contra:

    • Kleine Schriftgröße

 

 

8. Derek Boateng

www.derekboateng.com

 

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

www.danielfiller.com

 

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 plötzlich an einem anderen Ort, wenn man scrollt

 

 

10. Something Splendid

www.somethingsplendid.com

 

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

www.freelancelift.com

 

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

www.michaelheinsen.de

 

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

www.lexware-vereinsverwaltung.de

 

Bei dieser Webseite handelt es sich um eine Onepage-Landinpage. 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

 

 

Wie in der Einleitung versprochen – weitere Beispiele von animierten Headern könnt ihr unter folgendem Link anschauen:

www.tympanus.net/on-scroll-header-effects

Dort könnt ihr euch auch die entsprechenden CSS-Daten herunterladen und eurer Webseite ein bisschen mehr Leben einhauchen.

Viel Spaß!

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.



Weitere Artikel zu Design

Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen... Mehr lesen »

CSS – das Design der Website Im ersten Teil der HTML Blogserie habe ich... Mehr lesen »


Weitere Artikel von Alexander
Design Landingpages Online Marketing
Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Design Landingpages
Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen... Mehr lesen »

Landingpages Online Marketing
Mit Hilfe von Eye-Tracking Studien können Sie Webseiten analysieren und... Mehr lesen »

Top-Beiträge

Facebook

Bilder posten auf Facebook

Nicht jedes Bild passt in das neue Konzept der Facebook Chronik. Aber wie müssen Bilder jetzt... Mehr lesen »
Design

13 coole Header-Effekte für Webseiten

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen animiert werden. Manche... Mehr lesen »
Facebook

Bilder einfügen in Facebook-Kommentaren – Gut oder schlecht?

Bereits im Juni war es bei Facebook-Profilen schon möglich Kommentare mit Bildern zu versehen. Für... Mehr lesen »
^