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.

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

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

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

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

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.

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

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

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

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

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

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

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

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.

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

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

Matt Dempsey
Auch Matt Dempsey hebt seine Navigation hervor.

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

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

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

Jeff Sarmiento
Warum nicht zur Abwechslung einmal etwas Schiefes

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

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

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

Bonfiremedia
Manchmal is Typography schon genug…

Artgeex
Lebendige Typography in Gebrauch.

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

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

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

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

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

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

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

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

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

2. CSS Menus With JavaScript

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

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

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

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

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

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

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.

Abduzeedo
Auch bei Abduzeedo gibt es einen jQuery-Slider.

3. Flash Menüs

Iipvapi
Schiefe Flash-Navi einer indischen Webdesign-Agentur.

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.

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

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

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

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

NickAD
Diese einzigartige Website dreht sich um die benutzerfrundliche Navigation.

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

4. Hochgradig benutzbare Navigationen

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

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

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

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

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

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

DVEIN
Noch ein exzellentes Flash-Portfolio.

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

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

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

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

Benjamin David
Ein kreatives Menü mit Flash.

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

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

Marius Roosendaal
Noch ein benutzerfreundliches Akkordeon-Menü.

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.

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.

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

Mediocore
Mediocore hat ein außergewöhnliches Portfolio.

6. Benutzerfreundliche Sidebars

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

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

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

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

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

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

GABBO DESIGN
Noch ein sauberes und gut proportioniertes Menü.

Weitere Quellen

• Pattern Tap Navigation Collection
• 13 Awesome Javascript CSS Menus
• 7 Advanced CSS Menu, A Great Roundup!
• 300+ jQuery, CSS, MooTools and JavaScript navigation menus

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