Inhalt
- 01. Der Wächter
- 02. Mittel
- 03. Svbtle
- 04. Twitter
- 05. B & O Play
- 06. Apple
- 07. Vimeo
- 08. Google Plus
- 09. Fadenlos
- 10. Platz
- Mochte dies? Lese das!
Wenn Sie eine Website zusammenstellen, kann die Bedeutung Ihres Navigationsdesigns nicht genug betont werden. Einfach ausgedrückt hängt der Erfolg Ihrer Website davon ab, wie benutzerfreundlich sie ist und wie einfach Besucher sie finden, um von einem Abschnitt zum anderen zu navigieren.
Regelmäßige, horizontale Menüs und kleine Dropdown-Felder funktionieren für viele Websites einwandfrei. Das Entwerfen der Navigation kann jedoch zu einer echten Herausforderung für Websites mit einer großen Menge an Inhalten oder für viele verschiedene Kategorien werden, auf die einfach zugegriffen werden muss.
Dies ist ein Problem, mit dem alle Arten von Websites konfrontiert sind, von Web-Apps bis hin zu Zeitungen und Online-Shops. Während es viele Beispiele für Websites gibt, die umständlich und schwer zu navigieren sind, gibt es auch einige sehr sorgfältig ausgearbeitete Beispiele. Wir haben eine Auswahl brillant gestalteter Menüs hervorgehoben, die es den Benutzern hervorragend ermöglichen, reibungslos und einfach zu navigieren oder sich anzumelden und abzumelden. Wir hoffen, dass Sie diese Beispiele als nützliche Inspirationsquelle für Ihr nächstes Site-Design-Projekt finden.
01. Der Wächter
Auf der Website der Guardian-Zeitung gibt es eine große Anzahl verschiedener Kategorien, darunter "Kultur", "Geschäft" und "Reisen". Jede dieser Kategorien verfügt über eine Reihe von Unterkategorien.
Es wurde mit größter Sorgfalt und Aufmerksamkeit darauf geachtet, für jedes dieser Elemente eine Navigation so zu gestalten, dass sie zugänglich und sofort intuitiv ist. Obwohl es so viele verschiedene Unterkategorien gibt, sind sie nie mehr als zwei Klicks von irgendwo auf der Website entfernt.
Jede Kategorie, wie z. B. "Kultur", erhält auch eine eigene Farbe, wobei alles, was dazu gehört, wie "Film" und "Musik", entsprechend gefärbt ist, was dazu beiträgt, die Kategorien gut miteinander zu verknüpfen.
02. Mittel
Medium ist die neue Publishing-Plattform von Evan Williams, der auch Blogger und Twitter erstellt hat. Der Fokus jeder Seite liegt auf dem Inhalt und er hat unglaublich hart gearbeitet, um alle Ablenkungen zu beseitigen. Sogar das Menü ist hinter dem Logo in der oberen linken Ecke versteckt. Wenn Sie den Mauszeiger über das Logo bewegen, wird das Menü angezeigt, das ordentlich versteckt ist.
Eine weitere clevere Funktion des Mediums-Menüs wird angezeigt, wenn das Browserfenster klein ist. Anstatt das Logo (mit dem dahinter verborgenen Menü) über dem Text zu überlappen, verschwindet es einfach und wird erst wieder angezeigt, wenn Sie zum oberen Rand der Seite scrollen.
03. Svbtle
Svbtle ist die Kreation von Dustin Curtis und bezeichnet sich selbst als eine neue Art von Magazin. Es vereint geschickt ein wunderschön gestaltetes Blog-CMS mit einer kuratierten Auswahl einiger der besten Beiträge.
Curtis ist berühmt dafür, schöne Benutzererlebnisse zu schaffen und eine scharfe, etwas obsessive Liebe zum Detail zu haben. Manchmal sind die Verbesserungen, die er vornimmt, so subtil, dass Sie sie vielleicht nicht bemerken, aber wenn sie auftauchen, verbessern sie definitiv die Benutzererfahrung.
Das Menü von Svbtle ist ein gutes Beispiel dafür: Wenn Sie mit der Maus über das Dropdown-Symbol fahren, wird das Menü wie erwartet erweitert. Wenn Sie den Cursor jedoch vom Menü wegbewegen, bleibt er ein oder zwei Sekunden lang an Ort und Stelle - gerade lange genug, um den Cursor zurück zu bewegen, wenn Sie ihn versehentlich etwas zu weit bewegt haben. Das scheint zwar einfach zu sein, aber die Tatsache, dass er über Codierung nachgedacht hat, die zeigt, wie viel Leidenschaft und Liebe zum Detail in seine Arbeit geflossen ist.
04. Twitter
Twitter umgeht das oben genannte Problem, indem das Dropdown-Menü aktiviert bleibt. Der Nachteil hierbei ist, dass Sie auf das Einstellungssymbol klicken müssen, um das Menü zu aktivieren. Wenn es aktiviert wurde und nur durch Bewegen des Mauszeigers geöffnet blieb, wird es ständig unbeholfen aktiviert. Sobald es ausgewählt ist, bleibt es bis zum Schließen erhalten. Clevererweise werden auch bestimmte Aktionen getrennt, z. B. "Hilfe" und "Tastaturkürzel". Durch Gruppieren verwandter Abschnitte kann es einfacher sein, das Gesuchte zu finden.
05. B & O Play
B & O Play, Teil des Audiospezialisten Bang & Olufsen, bietet eine Reihe von Produkten an, die Sie möglicherweise nicht allein anhand ihres Namens erkennen können, die Sie jedoch möglicherweise anhand ihres Aussehens erkennen können. Zum Beispiel ist das A8 ein sehr deutlich gestaltetes Lautsprecherdock, das völlig anders aussieht als das A9, aber es wäre leicht, die beiden anhand ihres Namens zu verwechseln.
Um dem entgegenzuwirken und die Navigation für Browser viel intuitiver und nützlicher zu gestalten, erhält das Menü unter "Produkte" viel zusätzlichen Leerraum mit einer einfachen Darstellung der einzelnen Produkte. Während dieser Ansatz bei B & O Play nicht für jede Site geeignet ist (insbesondere für eine mit einer breiten Produktpalette), ist er eine großartige Idee, die fehlerfrei umgesetzt wurde.
06. Apple
Apple ist weltweit führend im Bereich Design und es ist keine Überraschung, dass seine Website so schön gestaltet ist wie ihre Produkte. Die Hauptnavigation, wie B & O Play, zeigt jedes Produkt zusammen mit einer lustigen, gleitenden Animation für jedes Produkt, wenn auf einen neuen Abschnitt geklickt wird (für diejenigen von uns mit modernen Browsern).
Wenn Sie jedes Produkt in der Navigation mit hochdetaillierten Bildern in hoher Qualität anzeigen, können Sie sich leicht fortbewegen, ohne darüber nachdenken zu müssen.
07. Vimeo
Video-Sharing-Site Vimeo hat sich dafür entschieden, etwas mehr Beschreibung in seine Navigation aufzunehmen. Wenn Sie den Mauszeiger über "Erstellen" oder "Ansehen" bewegen, werden eine Reihe anderer Optionen angezeigt, z. B. "Videoschule". Da viele Leute mit der Videoschule von Vimeo nicht vertraut sind, haben sie eine kleine Überschrift mit dem Titel "Erfahren Sie, wie Sie bessere Videos erstellen" hinzugefügt, die schnell und prägnant erklärt, was passieren wird, bevor Sie klicken.
08. Google Plus
Google Plus, der Rivale des Suchriesen für Facebook, verfügt über eine wunderschön gestaltete Navigation, die vertikal auf der linken Seite des Browsers verläuft. Das vertikale Menü hilft dabei, Platz für den wichtigen Header freizugeben und gleichzeitig jeden Abschnitt leicht zugänglich zu machen.
Jedes der Symbole kann auch durch Ziehen und Ablegen angepasst werden. Wenn Sie also mehr ein Fan von Spielen als von Fotos sind, können Sie die Navigation nach Ihren Wünschen neu anordnen.
09. Fadenlos
Threadless, das Crowdsourcing-T-Shirt-Unternehmen, das von Designern und Kunstliebhabern geliebt wird, verwendet in seiner Navigation große, mutige Grafiken.
Das gesamte Konzept hinter Threadless ist ziemlich spezialisiert und hat einige ziemlich unterschiedliche Benutzergruppen. Es gibt diejenigen, die da sind, um ihre Kunstwerke einzureichen, andere sind möglicherweise da, um für ihre Lieblingsdesigns zu stimmen, während andere ein Teil der Community sein, kommende Kunstwerke überprüfen und mit anderen sprechen möchten, während andere möglicherweise nur zum Einkaufen da sind .
Sie haben jeden dieser Anwendungsfälle sorgfältig geprüft und jeden Abschnitt in "Make", "Pick", "Play" und "Shop" gruppiert. Wenn Sie dann mit der Maus über diese Optionen fahren, erhalten Sie unter jedem Abschnitt wunderschön gestaltete Optionen.
10. Platz
Squarespace ist eine Hosting- und CMS-Plattform, mit der Benutzer ihre eigenen Websites bequem starten können. Die Website verwendet große, führende Bilder für den Header, aber sie haben so viele Abschnitte auf der Website, dass die Aufnahme in eine Dropdown-Navigation die Bilder verdeckt und sie überladen erscheinen lässt.
Ihre Lösung besteht darin, in der oberen rechten Ecke eine kleine Menüoption einzufügen. Durch Klicken auf die Schaltfläche wird ein Bedienfeld herausgeschoben, in dem die gesamte Site verschoben wird, um eine vertikale Navigation anzuzeigen. Das Schöne an dieser Methode ist, dass sie den Bildern nicht im Wege steht und viel Platz bietet, um selbst die umfangreichsten Navigationsoptionen einzuschließen.
Wörter: Alex Black
Alex schreibt für PrintExpress.co.uk. In seiner Freizeit studiert er gerne Web- und Printdesign und lernt das Codieren. Sie können ihm unter @iamalexblack folgen.
Mochte dies? Lese das!
- So erstellen Sie eine App
- Geniale Auswahl an Wordpress-Tutorials
- Erstellen Sie mit diesen Pro-Tipps ein perfektes Moodboard
Gibt es Beispiele für durchdacht gestaltete, wunderschön gestaltete und elegante Menüoptionen, die in unserer Zusammenfassung enthalten sein sollten? Wir würden gerne hören, was Sie in den Kommentaren gefunden haben.
