Webdesign-Trends: Kreative Navigationen

Die Webseiten-Navigation optisch ansprechend und benutzerfreundlich zu gestalten, ist wohl eine der größten Herausforderungen im Webdesign. Daher habe ich mich auf die Suche nach innovativen und kreativen Lösungen für die Navigation einer Webseite gemacht und die folgende Sammlung zusammen gestellt.

Digitalmash

Webdesign-Trends Navigationen
Die Navigation auf der Webseite Digitalmash von Grafikdesigner Rob Morris ist eine schlichte, farbenfrohe Textnavigation. Auf der Startseite werden die Überschriften der neusten Artikel aufgelistet, bei Maus-Hover werden die Links farbig eingeblendet.

Bit Byte Bit

Webdesign-Trends Navigationen
Das Portfolio Bit Byte Bit des Webentwicklers Mike Stephens kann über eine minimalistisch gestaltete Filterfunktion sortiert werden. Die Arbeiten der unterschiedlichen Kategorien werden dann mit Hilfe von JavaScript neu eingeblendet.

Manufacture d’Essai

Webdesign-Trends Navigationen
Das Menü auf der Webseite Manufacture d’Essai wird erst über einen Öffnen-Button am rechten Webseiten-Rand sichtbar. Beeindruckend ist auch die Überlappung von Überschriften und Texten mit den großen Fotografien im Bildhintergrund.

Tedx Portland

Webdesign-Trends Navigationen
Die Single-Page Tedx Portland kann über ein schlichtes Header-MEnü navigiert werden. Ein besonderer Effekt der Webseite ist außerdem die Animation des Schriftzuges XRD.

Girlfriend

Webdesign-Trends Navigationen
Die Navigation auf der Webseite Girlfriend ist sehr reduziert und funktioniert lediglich über zwei Buttons in der oberen schwarzen Header-Leiste. Interessant ist auch der beschreibende Text zu den Projekten im Portfolio gelöst. Dieser wird bei jedem neuen Projekt dezent eingeblendet.

Unfold

Webdesign-Trends Navigationen
Bei der Single-Page Unfold ändern die Menüpunkte je nach Hintergrund die Farbe. Das Menü bleibt immer feststehend am oberen, rechten Rand der Webseite.

Stephen Vernon Clarke

Webdesign-Trends Navigationen
Auf der Webseite des Fotografen Stephen Vernon Clarke ist die Navigation kreisförmig und mit minimalistischen Icons umgesetzt. Erst bei Hover werden die Texte Home, About etc. sichtbar.

Hundert Grad Kommunikation

Webdesign-Trends Navigationen
Die Seitennavigation bei Hundert Grad Kommunikation ist über eine linksbündige Leiste gelöst. Die Navigation sowie Unterpunkte werden animiert eingeblendet.

Chitwood & Hobbs

Webdesign-Trends Navigationen
Überarbeitet wurde die Navigation auf der sehr modern umgesetzten Webseite Chitwood & Hobbs. Hier sind die Navi-Punkte horizontal und vertikal in einem Balken angeordnet. Bei Hover über „Choose a Sport“ werden weitere Menüpunkte eingeblendet.

Yuna Kim

Webdesign-Trends Navigationen
Die Webseite von Yuna Kim ist sehr schön minimalistisch gestaltet. Die Navigation ist mit reduzierten geometrischen Icons, farblicher Unterteilung und aufklappbaren, animierten Menüs gelöst.

Camp David Film

Webdesign-Trends Navigationen
Die rechtsbündige, feststehende Navigation auf der Webseite Camp David Film ist in Stil eines Tab-Menüs gestaltet. Bei Hover kommen zur weiteren Unterteilung verschiedene Link-Farben zum Einsatz.

SURROUND

Webdesign-Trends Navigationen
Die Navigation auf der Webseite SURROUND ist extravagant und kreativ gestaltet. Neben einer schlichten Hauptnavigation kann man sich durch die verschiedenen, untereinander angeordneten Projekte klicken. Diese klappen beim Anklicken auf und können dann horizontal gescrollt werden.

Major Tom

Webdesign-Trends Navigationen
Die Webseite Major Tom ist experimentell wie ein Puzzle aus mehreren Quadraten angelegt. Bei Anwählen eines Projektes oder Menüpunktes slidet das Feld auf, die übrigen Felder faden in den Hintergrund.

ap-o.com

Webdesign-Trends Navigationen
Auf der Single-Page ap-o.com kann man sich über die in allen vier Ecken des Browserfensters sitzenden Menüpunkte durch navigieren. Die Navigation erfolgt sowohl von oben nach unten, als auch (bei den einzelnen Projekten) von links nach rechts. Die einzelnen Menüpunkte sind mit reduzierten Pixel-Icons umgesetzt.

JR/Group

Webdesign-Trends Navigationen
Eine weitere experimentelle Umsetzung ist die Navigation der JR/Group. Hier sliden Untermenüpunkte und Inhalte aus einem rechtsbündig angelegten Navigationselement. Je nach Menüpunkt passt sich auch das Bildschirmfüllende Hintergrundbild an.

Six

Webdesign-Trends Navigationen
Sehr reduziert ist die Navigation auf der Webseite von Six. Die Menüpunkte inklusive weiterer Untermenüs werden erst bei Hover sichtbar.

Brandon W. Oxendine

Webdesign-Trends Navigationen
Das Menü der 4. Webseiten-Version von Brandon W. Oxendine ist ebenfalls reduziert und graphisch durch ein schlichtes Feld unterhalb eines Kontaktfeldes gelöst. Weitere Menüpunkte werden erst beim Anklicken sichtbar.

Blitz

Webdesign-Trends Navigationen
Die Navigation auf der Webseite Blitz blendet sich erst bei Hover über das Webseiten-Logo ein. Es slidet eine linksbündige Menüleiste ins Bild. Die Möglichkeit zum Einblenden der Navigation ist durch ein schlichtes Plus-Zeichen gekennzeichnet.

iconwerk

Webdesign-Trends Navigationen
Als Beispiel, dass man im Webdesign auch komplett ohne Navigation auskommen kann, ist die Webseite iconwerk. Die Webseite besteht lediglich aus Projektbildern, einem Infotext, sowie reduzierten Kontaktmöglichkeiten.

Wie gefallen dir die vorgestellten Lösungen, die Navigation auf einer Webseite umzusetzen? Kennst du weitere Webseiten, die eine besonders gute und innovative Umsetzung des Navigationselements haben? Über dein Feedback und weitere Webseiten-Tipps freue ich mich sehr!

10 Kommentare zu “Webdesign-Trends: Kreative Navigationen

  1. So faszinierend einige Beispiele auch sind – meiner Erfahrung nach scheitern viele Besucher an einer Navigation, die von „gelernten“ Konventionen abweicht. Bei einem meiner Projekte besteht das Menü (bzw. der Zugang dazu) nur noch aus einem einzigen Button – „navigate“ – und selbst das bereitet vielen bereits Probleme.

  2. Die Ideen hinter den Navigationen finde ich gut. Allerdings muss bei der Umsetzung auch immer bedacht werden, dass viele Besucher einfache Navigationen gewöhnt sind: Geschriebene Links, Unterseiten tauchen als Dropdown-Liste oder in einem „Balken“ darunter auf.

    Ich selbst bin von solchen Navigationen immer wieder fasziniert – Allerdings sind vor allem Leute, die nicht aus dem Webdesign Bereich kommen, oft festgefahrener auf ihre gewohnte Navigation.

  3. @Frank Limbacher, @Stefan,

    vielen Dank für eure Kommentare und das Feedback zu den Navigations-Inspirationen. Ja, dass stimmt auf jeden Fall. Ich mache auch immer wieder die Erfahrung, dass Besucher die „gängigen“ Lösungen für Navigationselemente auf Webseiten bevorzugen.

    Dennoch gefallen mir kreative oder ungewöhnliche Ansätze auch sehr, sie bringen einen auf neue Ideen für den eigenen Designprozess. Das eine Navigation aber in erster Linie benutzerfreundlich sein muss, ist natürlich klar :-)

    Viele Grüße,
    Manuel

  4. Danke für diese vielfältige Zusammenstellung. Sie beweist: Ohne Pioniergeist geht es in keiner Branche. Immer nur Gewohnheiten bedienen, wird keinen Fortschritt bringen. Spielerisch dazu animieren, mal den Ausweg aus einer Sackgasse zu finden, hält auf beiden Seiten den Geist frisch. Immer nur mit auf der Autobahn ist Stillstand, ist Routine.
    Fast alle haben anfangs über Euren gelben Kommentarbereich gejammert…
    Jan

    • Hallo Jan,

      vielen Dank für dein Feedback zu dein Navi-Inspirationen. Ja, da hast du auf jeden Fall Recht, ein wenig Pioniergeist ist gerade in kreativen Bereichen besonders wichtig und auch immer wieder gefragt :-)

      Wirklich gelungene Navigationselemente auf Webseiten zu schaffen, sehe ich als eine große Herausforderung, gerade wenn Webseiten auch für mobile Geräte optimiert sein sollen. Daher haben mir diese frischen Ideen auch besonders gut gefallen und für neue Inspiration gesorgt.

      Ja, ich erinnere mich auch noch an den ein oder anderen Protest bzgl. der gelben Hintergrundfarbe hier im Kontaktbereich. Oft braucht das Auge bei einer Design-Veränderung oder einem Redesign glaube ich einfach ein paar Tage, bis man sich an die neue Optik gewöhnt hat :-)

      Viele Grüße,
      Manuel

  5. Stefan

    „Die Webseiten-Navigation optisch anspre­chend und benut­zer­freund­lich zu gestalten, ist wohl eine der größten Herausforderungen im Webdesign.“

    Das stimmt Manuel, aber bei den meisten Beispielen wird bestenfalls der erste Aspekt berücksichtigt.
    Ich finde die Navigation ist eines der wichtigsten Elemente einer Website, denn sie sorgt für die Orientierung. Wenn ich mich nicht schnell zurecht finde verlasse ich die Seite umgehend.

    Pioniergeist schön und gut, aber auf einer Landkarte ist Norden oben und Süden unten, sonst kann man sie nicht gebrauchen.
    Der Vergleich zwischen gelben Kommentarbereichen und einer Navigation hinkt meiner Meinung nach.
    Die Navigation von Elmastudio finde ich deutlich besser als die vorgestellten Beispiele. Sie wird keinen Schönheitswettbewerb gewinnen – aber sie ist sehr übersichtlich, und darum geht es bei der Navigation.
    Viele Grüße,

    Stefan

    • Hallo Stefan,

      vielen Dank für deinen Kommentar :-) Das stimmt natürlich, eine Navigation sollte in erster Linie möglichst intuitiv genutzt werden können und somit benutzerfreundlich sein.

      Doch ich denke auch das es hilfreich ist, sich immer wieder kreative, individuelle Designideen und Ansätze anzuschauen oder selbst zu gestalten, um neue und vielleicht sogar noch bessere Lösungen finden zu können. Daher habe ich hier im Artikel viele verschiedene und teils auch ungewöhnliche Ansätze und Ideen für Webseiten-Navigationen zusammen gestellt :-)

      Viele Grüße,
      Manuel

    • Nebenbei, auf mittelalterlichen Landkarten war Osten oben. Dann kam etwas Pioniergeist und jetzt ist Norden oben.

  6. Die Diskussion ob kreative Lösungen oder Standardlösungen besser sind ist sinnlos. Alle haben recht. Denn am Ende bestimmt die Zielgruppe was gut und richtig ist. Ist es eine Kreativagentur mit wenig Inhalt, so sind auch immer wieder kreative Lösungen recht und willkommen. Man will ja schließlich Aufmerksamkeit. Ein Portal, also eine etwas größere Seite mit eienr sehr breit gestreuten Zielgruppe ist mit einer Standardlösung besser bedient.

  7. Hallo Manuel,
    ich als absoluter NEWBIE, zudem noch „uHu“ bin von eurer Webseite restlos begeistert! Habe viele, viele Tipps für mich gefunden und hoffe, sie auch umsetzen zu können (mangels guter Englisch-Kenntnisse oft mehr als mühsam!).
    Total begeistert hat mich das Navigations-Menue vom „Camp David Film“ – dieses Tab-Menue.
    Da mein Traum ein Buch ist, das ich auf meiner Seite umsetzen will (www.bunterlei.de) wäre diese Navigation das absolute I-Tüpfel auf meinem Buch.
    Gibt es dafür eine Anleitung? Auch für Nicht-englisch-Könner?
    Freue mich auf jede Antwort!
    Dolores

Hinterlasse eine Antwort

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