Listen

77 schicke und praktische Navigationsmenüs

2. April 2009
von

Usability ist eine zentrale Bedingung jeder Website, eine sinnvolle und intuitive Navigation ist der Schlüssel zum Erfolg. Die Navigation bestimmt, welche Teile der Website ein Besucher anklickt und wie er sich auf der Website bewegt. Ohne ein vernünftiges Navigationsmenü sind die interessantesten Inhalte nutzlos. Menüs müssen so einfach sein, dass ein Benutzer sie intuitiv versteht. Gleichzeitig müssen aber auch alle nötigen Elemente vorhanden sein, um den Besucher durch die Website zu führen. Und dazu kommt dann noch eine Prise Kreativität und Design.

Im Anschluss finden Sie 50 ausgezeichnete Navigationsmenüs, darunter Design-Lösungen auf Basis von CSS, Menüs mit CSS und Javascript sowie Flashdesigns. Alle haben Sie jedoch eines gemeinsam, sie sind anwenderfreundlich, gleichzeitig kreativ gestaltet und lassen sich stilistisch hervorragend in die jeweilige Website einbinden.

1. CSS Menüs

Loodo
Ein farbenfrohes Menü, das sich perfekt einpasst.

Screenshot

Acko
Steven Wittens Menü erscheint in einer ungewöhnlichen Perspektive.

Screenshot

Web Design Ledger
Web Design Ledger hat ein hervorragendes Menü; seine Größe ist praktisch, stört aber nie die Inhalte.

Screenshot

UX Booth
UX Booth nutzt eine elegante Box unterhalb der Navigation für weitere Erläuterungen.

Screenshot

Nopokographics
Senkrechte Menüs werden selten benutzt. Aus einem einfachen Grund: sie sich schwieriger zu benutzen. Wie auch immer, einige Designer riskieren den ungewöhnlichen Ansatz. Nopoko Graphics verwendetet Pfeil und Hover-Effekt in seinem vertikalen Menü..

Screenshot

Icon Designer
Diese Website verwendet ein großes, auf einem Bild basiertes, Menü für die Startseite. Die Aufmerksamkeit des Nutzers wird unmittelbar darauf gelenkt.

Screenshot

Cosmicsoda
Dieses große Menü ist auffällig und nutzt einen leichten Hover-Effekt, um die einzelnen Elemente herauszustellen.

Screenshot

Designsensory
Eine intuitive Drop-Down-Navigation, die geschickt zwei Farben verwendet, um den aktiven oder passiven Zustand der Menü-Elemente zu kommunizieren.

Screenshot

Smallstone
Smallstone, ein U.S. Musiklabel, zeigt seine Navigation in Form einer so genannten Space Echo Roland SE-201.

Screenshot

TNVacation
Ein ziemlich schwierig zu findendes, aber schickes Drop-Down Menü.

Screenshot

Clearleft
Clearleft nutzt ein paar Zettel für die Navigation.

Screenshot

45royale
Eine einfache, saubere und schöne Navigation mit einem schicken Hover-Effekt.

Screenshot

Design Intellection
Ein hervorragendes Beispiel für eine Block-Navigation, die zeigt, wie man in einer eigentlich simplen Navigation auffällige Effekte benutzt.

Screenshot

Ronnypries.de
Eine Navigation muss nicht wie ein traditionelles Menü aussehen. Ronny Pries benutzt einen Grundriss, um seine Besucher durch seine Site zu führen.

Screenshot

Jiri Tvrdek
Jiri Tvrdek zeigt die Navigationsmöglichkeiten als Blätter an einem Baum. Kreativ, ungewöhnlich und mit Wiedererkennnungswert.

Screenshot

Water’s Edge Media
Patricia Abbott verwendet Wäscheklammern.

Screenshot

Matt Dempsey
Auch Matt Dempsey hebt seine Navigation hervor.

Screenshot

Cognigen
Der gewählte Menüpunkt wird eingedrückt – das ist eindeutig.

Screenshot

District Solutions
Senkrechte Reiter sind selten zu sehen. Sie können aber gut ausschauen!

Screenshot

Jayme Blackmon
Jayme Blackmon: Häkchen fürs gewählte Thema.

Screenshot

Jeff Sarmiento
Warum nicht zur Abwechslung einmal etwas Schiefes

Screenshot

Studioracket
Eine wirklich ungewöhnliche Navigation, die eine Art Mindmap benutzt. Davon abgesehen ist hier alles handgezeichnet.

Screenshot

Cultured Code
Subtil aber dennoch deutlich. Die kluge Farbwahl und ein feiner Hover-Effekt kommen noch hinzu.

Screenshot

Nando Designer
Dieser portugisische Designer verwendet ein Stück Papier und Handschrift.

Screenshot

Bonfiremedia
Manchmal is Typography schon genug…

Screenshot

Artgeex
Lebendige Typography in Gebrauch.

Screenshot

Gloobs
Dieser Designer integriert eine Briefmarke in der Kontakt-Option.

Screenshot

South Creative
Diese Website benutzt übergroße Buttons und einen klasse Hover-Effekt.

Screenshot

Mac Rabbit
Noch ein Beispiel für ein großes, aufgeräumtes Menü. Die Icons helfen bei der Zuordnung.

Screenshot

RapidWeaver
Dieses Menü hat ein sauberes und glattes Layout. Dazu kommt ein prima Untermenü mit Transparenz-Effekten.

Screenshot

DFW UPA
Icons verstärken die Menüpunkte und betonen die jeweiligen Optionen.

Screenshot

Revolution Driving Tuition
Eine Website im Grunge-Stil mit passendem Menü.

Screenshot

Duarte Pires
Auch, wenn die Icons nicht perfekt passen, sie sind eine hübsche Idee. Die Folge-Seiten verwenden dasselbe Bild, allerdings vertikal.

Screenshot

Valetin Agachi
Diese Navigation hat einen ziemlich einmaligen Stil, der ausgewählte Punkte betont.

Screenshot

Tutorial9
Tutorial9 erfuhr erst kürzlich ein Re-Design, das mit einem gut benutzbaren und sehr organisierten Menü aufwarten konnte.

Screenshot

2. CSS Menus With JavaScript

Agami Creative
Designer nutzen manchmal Tooltipps in der Navigation. Hier in einer ungewöhnlichen Kombination.

Screenshot

Whitehouse.gov
Ein perfektes Beispiel für den Umgang mit großen Mengen an Content.

Screenshot

AppStorm
Ein jQuery-Effect wird in einem Drop-Down Menü eingesetzt.

Screenshot

Eric Johansson
Eric Johansson, ein Designer aus Schweden, verwendet schmale, senkrechte Blöcke und Bilder für seine Navigation.

Screenshot

Coda
Dieses bequem gelegene Menü zeigt und einen sehr schönen Hover-Effekt.

Screenshot

Dragon Interactive
Dragon Interactive nennt ein farbenfrohes Menü sein eigen, das mit jQuery effektvoll umgesetzt wurde.

Screenshot

Bern
Diese Navigation mag ich besonders. Mir gefällt, wie sich das Menü in den Grunge-Stil der Website einpasst. Außerdem ist ein weiterer jQuery Drop-Down-Effekt zu bewundern.

Screenshot

Abduzeedo
Auch bei Abduzeedo gibt es einen jQuery-Slider.

Screenshot

3. Flash Menüs

Iipvapi
Schiefe Flash-Navi einer indischen Webdesign-Agentur.

Screenshot

Not Forgotten: The Movie
Website aus dem Bereich der Unterhaltung nutzen häufig Flash. mit ungewöhnlichen Navigationen gewinnt man die Aufmerksamkeit des Besuchers. Dieses Beispiel setzt auf Spielkarten.

Screenshot

Nick Tones
Nick Tones präsentiert uns eine dynamische, farbenfrohe und doch irgendwie gut benutztbare Navigation.

Screenshot

woonky.ideas
Dieses Beispiel aus Argentinien verteilt CDs und Bücher auf einem Tisch, jedes Element steht für die eine Menüoption.

Screenshot

Gotmilk
Wirklich originell – dieser Designer setzt auf eine Art Band. Auch den Hover-Effekt sollte man gesehen haben. Herausragend!

Screenshot

Spectra Visual Newsreader
Ein schönes und wirklich farbenfrohes Menü mit gelungener Usability.

Screenshot

NickAD
Diese einzigartige Website dreht sich um die benutzerfrundliche Navigation.

Screenshot

Sensi Soft
Dieser spannende Portfolio verfügt über eine durchdachte und bequeme Navigation.

Screenshot

4. Hochgradig benutzbare Navigationen

tap tap tap
Diese Website zeigt ein prima Layout und ein Menü mit großartigen Effekten.

Screenshot

Apple
Apple darf nicht fehlen. Hier ist nicht nur das Menü aufregend.

Screenshot

Alex Buga
Der Benutzer sieht eine sehr gut layoutete Navigation mit Slider.

Screenshot

CREASENSO
Der Inhalt dieser Portfolio-Website wurde auf einfache Weise organisiert.

Screenshot

polargold
Dieses aufregende flashbasierte Menü nutzt einen Akkordeon-Effekt. Die riesigen Lettern heben die Wichtigkeit des Menüs hervor..

Screenshot

Colourpixel
Colourpixel verwendet ein interessantes Layout für sein Portfolio.

Screenshot

DVEIN
Noch ein exzellentes Flash-Portfolio.

Screenshot

Alexandru Cohaniuc
Dieses Portfolio ist recht bekannt für sein wunderschönes Layout. Ein Akkordeon-Effekt hilft dem Besucher bei der Navigation.

Screenshot

Porsche Canada
Die Website von Porsche Kanada hat eine besonders nutzerfreundliche Navigation mit vielen Untermenüpunkten.

Screenshot

Jeremy Levine Design
Dieses Architektur-Portfolio hat ein einzigartiges Layout, das dem Benutzer ein schnelles Browsen ermöglicht.

Screenshot

Firstborn
Firstborn, ein bekanntes Designstudio, verwendet eine scrollbare, horizontale Navigation für das Portfolio.

Screenshot

Benjamin David
Ein kreatives Menü mit Flash.

Screenshot

Thibaud’s Portfolio
Noch ein spannendes Portfolio mit einer kreativen Navi. Dieses hier zeigt flash-basierte Farbmuster.

Screenshot

Jason Reed Web Design
Akkordeons sind hilfreich, wenn es darum geht, viele Menüpunkte auf geringem Platz unterzubringen.

Screenshot

Marius Roosendaal
Noch ein benutzerfreundliches Akkordeon-Menü.

Screenshot

5. Senkrechte Navigationen

Danny Blackman
Danny Blackmans Website wird häufig als eines der besseren Portfolios angesehen. Zum Teil auch wegen des aufregenden vertikalen Layouts.

Screenshot

Tomas Pojeta
Diese Website stellt ein weiteres Portfolio dar, das eine vertikale Navigation nutzt, mit denen der Besucher zwischen den Sektionen hin und her springt.

Screenshot

volll
Volll uses a vertical layout with a beautiful illustrated landscape background.

Screenshot

Mediocore
Mediocore hat ein außergewöhnliches Portfolio.

Screenshot

6. Benutzerfreundliche Sidebars

FreelanceSwitch
FreelanceSwitch organisiert seine Artikel über ein tolles Menü.

Screenshot

Fubiz
Hier gibt es eine herausragende Sidebar. Slide-Effekte werden benutzt, um mehr Inhalte in geringem Platz zu unterzubringen.

Screenshot

Checkout
Diese fantastische Website sollte man gesehen haben. Das außerordentlich aufgeräumte Menü im Stile einer Liste verwendet auch noch schicke Icons.

Screenshot

Ruby Tuesday
Auch Ruby Tuesday hat eine schicke Website. Das Menü in der Seitenleiste zeigt auffällige Icons und weiche Hover-Effekte.

Screenshot

Concentric Studio
Ein einfaches, fast minimalistisches Menü mit Sliding-Effekten.

Screenshot

Barack Obama
US-Präsident Obamas Website verfügt über ein gut proportioniertes, kontrastreiches Menü im Stil einer Liste.

Screenshot

GABBO DESIGN
Noch ein sauberes und gut proportioniertes Menü.

Screenshot

Weitere Quellen

Der Beitrag erschien auf Englisch im Smashing Magazine. Mit freundlicher Genehmigung. ™

Matt Cronin ist selbständiger Web- und Grafikdesigner und Entwickler. Er ist der Schöpfer und Inhaber von Spoonfed Design, einem Designblog mit Tipps, praktischen Anleitungen, Anregungen, Übungen und mehr. Spoonfed Design gehört zum VAEOU Creative Network, einem neuen, noch im Aufbau befindlichen Unternehmen.

15 Kommentare zu „77 schicke und praktische Navigationsmenüs
  1. Armin Gerhardts am 2. April 2009 um 22:44

    Hatten wir das nicht schonmal hier?
    Einige kommen mir doch sehr bekannt vor.

  2. Gee am 2. April 2009 um 23:03

    wie oft wollt ihr noch immer wieder die gleichen themen und inhalte bringen?

  3. fred am 3. April 2009 um 02:23

    übersetzt ihr jetzt nur noch seiten von smashing magazine… schade…

  4. jomam am 3. April 2009 um 09:58

    Nett, wobei einige doch ziemlich am eigentlichen Nutzungskontext vorbeigehen.

  5. [...] ihr hier. Teile und genieße Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte [...]

  6. Thorsten am 3. April 2009 um 11:19

    Hallo,

    nette Zusammensetzung. Die kurzen Beisätze hättet Ihr Euch, meiner Meinung nach, manchmal sparen können, da sie doch sehr nach Versatzstück klangen.

  7. domingos am 3. April 2009 um 11:53

    Das Ärgerlichste sind verschachtelte JavaScript-Pulldowns und Pulldowns, die den Inhalt einer Seite verdecken. Wer wirklich mal etwas gräusliges sehen will, sollte mal eine Stelle bei Monster suchen. Wenn man mit der Maus über die Stelle fährt, werden vollkomen nutzlose Informationen über diese Stelle angezeigt, wobei das entsprechende Feld so groß ist, dass man die darunter liegenden Stellen nicht mehr sehen kann. Nimmt den Mauszeiger weg, bleibt ein Fenster stehen.
    Und wehe, man tippt einen Ort falsch ein, dann wird die normaler Oberfläche per JS eingefroren und es erscheint dein Dialogfenster, man möge doch einen korrekten Ortsnamen eingeben. Die Programmierer haben aber sinnigerweise vergessen, eine MÖglichkeit anzubieten, dieses JS-Fenster wieder auszubleden. Da die Oberfläche eingefroren ist, gibt es keine mÖglichkeit, dort weiterzumachen, wo man aufgehört hat.

  8. [...] 77 schicke und praktische Navigationsmenüs [...]

  9. [...] 77 schicke und praktische Navigationsmenüs Diesen Artikel bookmarken: [...]

  10. [...] eine schicke Sammlung von Navigationsmen

  11. Askold am 18. April 2009 um 14:11

    Ich find die Zusammenstellung gut. Ne gute Übersicht um sich inspirieren zu lassen.

    Ob der Artikel dabei in ähnlicher Weise schon einmal geschrieben wurde, ist mir relativ egal.

  12. [...] müssen nicht immer langweilig und vor allem unpraktisch sein. Der DrWeb Blog zeigt an 77 Beispielen wie man es besser machen kann und auf was man Wert legen sollte. Sind ein [...]

  13. Grün Weiss am 12. Mai 2010 um 12:10

    great menus, thx

  14. [...] 77 schicke und praktische Navigationsmenüs Autor: Matt Cronin Quelle: Dr. Web Magazin [...]

  15. [...] einem unserer nächsten Artikel werden wir detaillierter auf gängige Navigationsstile eingehen. Schauen Sie öfter mal hier rein oder abonnieren Sie unseren Blog um stets „up to [...]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!