22 großartige Beispiele für die Navigation auf Websites

Die Schaffung eines effektiven Website-Navigationssystems ist ein wesentlicher Bestandteil der Gewährleistung der Benutzerfreundlichkeit und des Erfolgs eines Webdesigns. Eine gute Navigation sollte intuitiv und benutzerfreundlich sein und vor allem Ihren Besuchern helfen, den gewünschten Inhalt schnell und unkompliziert zu finden.

Aus diesem Grund tendiert die Website-Navigation dazu, sich in Richtung eines homogenisierten Standards zu irren, der die aktuellen Best Practices übernimmt. Das Hauptmenü für eine Site befindet sich entweder links oder oben in einem Design, wo Benutzer es voraussichtlich finden.

Dieser Ansatz bietet offensichtliche Vorteile, nicht zuletzt die Tatsache, dass Ihre Besucher sofort verstehen, wie Sie Ihre Navigation verwenden.



Anspruchsvolle Annahmen

Gutes Design bedeutet jedoch, Annahmen herauszufordern und gleichzeitig die Kriterien einer benutzerfreundlichen und verständlichen Navigationsstruktur zu erfüllen. Daher haben wir unten 10 unserer bevorzugten Alternativen zum Standardansatz für die Website-Navigation zusammengestellt.

MacBook Pro 15-Zoll-Fall am besten kaufen

Diese Websites verfolgen nicht den offensichtlichen Ansatz und können daher als einprägsamer angesehen werden. Schauen Sie sich unsere Auswahl an und lassen Sie uns in den Kommentaren wissen, ob Sie in den Kommentaren unten ein gutes Beispiel für ungewöhnliche Website-Navigation gefunden haben ...

  • Lesen Sie alle unsere Webdesign-Beiträge Hier

01. Nimbletank

In dem

Im Bereich 'Tweets' werfen Sie die Karten beim Lesen weg. Versuch es. Es macht Spaß!

Mit einem guten Navigationssystem erhalten Sie schnell und einfach die Informationen, die Sie benötigen. Eine großartige Navigation bringt Sie zum Lächeln, während Sie es tun. Genau das ist der in London ansässige freiberufliche Kreativentwickler Daniel Puhe und das Team der Agentur für mobile Websites Nimbletank haben sich etwas ausgedacht.

Diese Agenturseite bietet eine interaktive und unterhaltsame Erfahrung mit 360-Grad-Bewegung und alter Schule Tetris Spielreferenzen. Die Website bietet eine multifunktionale Reise durch das Angebot der Agentur und richtet sich an Touch-Geräte, funktioniert aber auch auf dem Desktop, wo sich in der Ecke eine Schaltfläche zum Drehen befindet, die die Drehung eines iPad nachahmt.

02. LBVD

Der fette, schwarze Franklin Gothic-Text dient als Navigation zu Modulen und mehr

Der fette, schwarze Franklin Gothic-Text dient als Navigation zu Modulen und mehr

Die Website der Kreativagentur LBVD lädt die Benutzer zum Klicken ein. Der fette, schwarze Franklin Gothic-Text dient als Navigation zu Modulen und weiteren Informationen. 'Wir wollten sicherstellen, dass wir uns von anderen Agenturseiten abheben und eine einfache Erkundung unserer Arbeit und Philosophie ermöglichen', sagt Creative Director Steve Saari. 'Mit allem auf einer einzigen Bildlaufseite wurde es entwickelt, um die Entdeckung zu fördern und letztendlich (wir hoffen es trotzdem) die Neugierigen zu belohnen.'

Die Werbebuchungen wurden sehr sorgfältig entworfen, um dem von ihnen erstellten Größenänderungsalgorithmus zu entsprechen. Lassen Sie sich nicht von der großen Menge an Text täuschen: Mit eingeworfenen Bildern, hellen Farbtupfern und einigen angenehmen Layout-Überraschungen bei der Größenänderung des Bildschirms wird die Website nie langweilig.

03. Datenerhebungen

Ungewöhnliche Navi-Technik funktioniert gut

Ungewöhnliche Navi-Technik funktioniert gut

Dataveyes ist ein Start-up, das interaktive Datenvisualisierung entwickelt. Das übersichtliche Design der Website verwendet ein reduziertes Popup-Menü am linken Rand des Fensters, um die Bewegung zwischen farbigen Abschnitten zu ermöglichen, die der Navigation entsprechen.

04. Big Apple Hot Dogs

Minimales kartenbasiertes Design ist sauber und lecker ...

Minimales kartenbasiertes Design ist sauber und lecker ...

Diese skurrile Website für ein Hot-Dog-Unternehmen in London verwendet eine minimale Navigation, um eine saubere, einfache Oberfläche zu erstellen, die den Inhalt und das Produkt präsentiert.

05. Acko

Cooler 3D-Effekt wird die Geeks beeindrucken!

Cooler 3D-Effekt wird die Geeks beeindrucken!

Diese Portfolio-Site des Designer-Entwicklers Steven Wittens ist ungewöhnlich in ihrer minimalistischen Navigation, vor allem aber in der Art und Weise, wie die Site mit umfangreichen 3D-Effekten, die direkt im Browser gerendert werden, von einem Abschnitt zum nächsten wechselt.

06. La Moulade

Gute Verwendung der Parallaxe auf dieser Agenturseite

Gute Verwendung der Parallaxe auf dieser Agenturseite

Dieses Design für die französische Agentur La Moulade ist ein Beispiel für die wachsende Anzahl von Websites, die die Bildlaufposition der Seite verwenden, um Animationen und Bewegungen zu generieren. Außerdem verfügt es über ein ungewöhnliches Navigations-Widget, das oben schwebt, sowohl zeigt, wo Sie sich befinden, als auch schnell bereitstellt Zugang zu anderen Bereichen.

07. Fracking-Gefahren

Die Site ist eher eine interaktive Infografik

Die Site ist eher eine interaktive Infografik

Dies ist eher eine interaktive Infografik als eine herkömmliche Website und verfügt daher über separate Navigationselemente. Stattdessen wird nur auf das Scrollen zurückgegriffen, um den Besucher durch die Infografik-Reise zu führen.

08. Walk Talk Azoren 2012

Die Kunstseite ermöglicht ein einfaches Scrollen in zwei Dimensionen

Die Kunstseite ermöglicht ein einfaches Scrollen in zwei Dimensionen

Diese Website für ein öffentliches Kunstfestival auf der Insel São Miguel verwendet eine zentrale Navigationsleiste, um Zugriff auf die verschiedenen Teile der Seite zu erhalten. Diese Leiste wird jedoch fast unnötig, da das Bewegen auf der Website gestengesteuert erfolgt. Bewegen Sie den Cursor an den Rand des Fensters, und die Seite wird gescrollt, um neue Inhaltsbereiche anzuzeigen.

09. Bagigia

Die Navigation verwendet ein Reißverschlussmotiv

Die Navigation verwendet ein Reißverschlussmotiv

Obwohl diese Site über eine herkömmliche Navigationsleiste verfügt, kann auf die gesamte Site auch zugegriffen werden, indem Sie einen Reißverschluss am unteren Rand des Fensters bearbeiten, sodass Sie schnell auf verschiedene Teile des Inhalts zugreifen können.

10. Die Produktionsküche

Charmanter illustrativer Stil ist hier perfekt

Charmanter illustrativer Stil ist hier perfekt

Diese Website verwendet einen animierten, illustrativen Stil, um Inhalte zu präsentieren. Das Ungewöhnliche daran ist die Methode, mit der Sie sich auf der Website fortbewegen können, bei der Sie ziehen (anstatt zu scrollen). Wenn Sie genau hinschauen, werden Sie feststellen, dass die Google Maps-API zum Rendern von Kacheln verwendet wird, aus denen der Inhalt besteht. Die Seitennavigation verwendet daher denselben Ansatz wie das Schwenken und Zoomen um normale Karten.

elf. Anet Design

Website-Navigation: Anet Design-Homepage

Bunte, sechseckige Knöpfe ziehen ins Auge

Anet Design bietet einen reichhaltigen, farbenfrohen Ansatz für die Navigation auf Websites. Obwohl sich oben auf der Seite eine traditionelle Menüleiste befindet, wird der Blick sofort auf die Sammlung sechseckiger Schaltflächen gelenkt, die auf der gesamten Website angezeigt werden.

12. Soleil Noir 2012 | Wir glauben an ...

Website-Navigation: Soleil Noir 2012 Homepage

Ein einfacher Satz farbiger Kreise dient als Navigationsleiste

Diese wunderbar skurrile Seite des französischen interaktiven Studios Soleil Noir wurde als Neujahrskarte gestaltet. Es verwendet einen einfachen Satz farbiger Kreise als Website-Navigation sowie einige hervorragende Parallaxen-Bildlaufeffekte.

wie man alle Bilder auf Facebook privat macht

13. Stephen Vernon Clarke

Website-Navigation: Stephen Vernon Clarke Homepage

Eine Zifferblattmetapher spiegelt die Funktionalität einer Kamera wider

Diese einfache Website für einen Fotografen verwendet eine Wählmetapher, um die Website-Navigation zwischen Abschnitten bereitzustellen und die Funktionalität einer Kamera widerzuspiegeln. Die Lösung ist themengerecht und ermöglicht es, dass die Arbeit des Fotografen im Mittelpunkt steht.

14. Wir sind entfaltet

Website-Navigation: Wir sind Unfold Homepage

Cleveres Scrollen funktioniert gut mit einem klebrigen Navigationsmenü oben rechts

Hier verwendet die norwegische Agentur Unfold eine Kombination aus endlosem Scrollen und etwas Parallaxe, um ein ungewöhnliches und effektives Website-Navigationsschema zu erstellen. Die Hauptverknüpfungen zwischen Inhaltsbereichen werden durchgehend oben rechts im Fenster angezeigt. Wenn Sie jedoch den unteren Rand des Designs einer einzelnen Seite erreichen, wird die Seite weiter gescrollt und der obere Rand der Seite wird wieder angezeigt.

fünfzehn. 75B

Website-Navigation: 75B Homepage

Der Inhalt wird aus der Vogelperspektive in der Vorschau angezeigt

Das niederländische Studio 75B verwendet einen Vogelperspektiven-Ansatz für die Website-Navigation und zeigt eine Vorschau des Inhalts auf hoher Ebene. Wenn Sie auf einen der Abschnitte klicken, wird eine horizontale Bildlaufseite in voller Größe angezeigt.

16. Nick Jones

Website-Navigation: Nick Jones Homepage

Ein minimalistischer Ansatz macht alles klar

Gelegentlicher .net-Mitwirkender Nick Jones hat einen einfachen und minimalistischen Ansatz für die Website-Navigation verwendet und ein lineares Menü mit Optionen in der Mitte der Seite angezeigt.

17. Schläger

Website-Navigation: Racket-Homepage

Diese temporäre Site präsentiert den gesamten Inhalt auf einer einzigen Seite

Die australische Agentur Racket hat die traditionelle Idee der Website-Navigation für diese temporäre Website vollständig vermieden und ihren gesamten Inhalt auf einer einfachen Bildlaufseite dargestellt. Dies ist ein grundlegender Ansatz, aber eine effektive Lösung für die Kommunikation der Kerninformationen.

18. Ja

Minimalistische Site hat beim Scrollen einen Flip-Effekt

Minimalistische Site hat beim Scrollen einen Flip-Effekt

Diese Seite ist interessant für ihren minimalistischen Ansatz. Die Hauptnavigation befindet sich im vertikalen Bereich rechts auf der Seite. Das Scrollen durch den Inhalt bietet einen Flip-Effekt, bei dem keine offensichtlichen Bewegungen von Elementen auf der Seite auftreten.

19. Niketo

Die Niketo-Site ist einfach, aber effektiv

Die Niketo-Site ist einfach, aber effektiv

Die Niketo-Website verwendet einen zeitleistenähnlichen Ansatz zum Anzeigen von Inhalten mit einem einfachen, aber effektiven Popup-Menü, mit dem Sie den angezeigten Inhalt filtern können.

wie man einen Hintergrund in Photoshop cc verwischt

zwanzig. Corporate Risk Watch

Website-Navigation: Homepage von Corporate Risk Watch

Eine andere Einstellung im Dropdown-Menü

Diese von der italienischen Agentur Leftloft entworfene Website verwendet einen ungewöhnlichen Ansatz für das Dropdown-Menü. Die anfängliche Navigationsleiste wird oben im Inhaltsbereich angezeigt. Beim Mauszeiger wird die Seite jedoch mit einer Spalte gefüllt, die den Inhalt verdeckt und Navigationsoptionen anzeigt.

einundzwanzig. Yodabaz

Website-Navigation: Yodabaz-Homepage

Diese Flash-Site reduziert die Seite auf attraktive, minimalistische Weise auf ihre Kernelemente

Obwohl Flash-Sites immer seltener werden, gibt es immer noch einige nette Beispiele, die den normalen Ansatz in Frage stellen. Dieses Beispiel aus dem Jahr 2009 reduziert die Seite auf Kernelemente und verfolgt einen minimalistischen Ansatz, wobei die Website-Navigation stolz im Vordergrund steht.

22. Bio-Gitter

Website-Navigation: Organic Grid-Homepage

Auf dieser Flash-Site ist die Navigation der Inhalt

Die Organic Grid-Website verwendet Flash, um ein ganzseitiges Design zu erstellen, bei dem die Navigation der Inhalt ist, und umgekehrt. Auffällig für die Verwendung von Farbe und Klang.

Wörter: Sam Hampton-Smith

Mochte dies? Lese das!

Gibt es Beispiele für die Website-Navigation, die Sie gefunden haben und die in unserer Zusammenfassung enthalten sein sollten? Wir würden gerne hören, was Sie in den Kommentaren gefunden haben.