Die Seitennavigation ist wohl der wichtigste Aspekt einer ordnungsgemäß erstellten Website. Wie einfach Ihre Besucher von Seite zu Seite reisen können, wirkt sich auf die Emotionen und die Benutzeroberfläche Ihrer Website aus.
Große Webdesigner halten immer eine Überraschung an jeder Ecke bereit, und Navigationsmenüs können diese großartige Gelegenheit bieten. Von ganzseitigen Links zu Eckpunkten habe ich einige großartige Beispiele für ungewöhnliche Website-Navigation gezeigt. Hoffentlich können diese Ideen zu einer Flut von Kreativität in sich selbst und in zukünftige Projekte führen.
Einige fantastische Animationen
Als Adobe (Macromedia) Flash das Web beherrschte, war es nicht ungewöhnlich, seltsame Navigationsanimationen zu sehen. Diese wurden jedoch auf der Strecke geblieben, als sich in den letzten 2000er Jahren HTML / XHTML-Standards entwickelten. Seitdem haben wir die Unterstützung für HTML5- und CSS3-Effekte dramatisch gesteigert sowie die vollständige Browserunterstützung für JavaScript und vor allem jQuery.
Die Jungs von jQuery haben benutzerdefinierte Webanimationen zum Kinderspiel gemacht. Jeder, der die Grundlagen des Skripts versteht, kann eine großartige Website rund um das Thema erstellen jQuery-Bibliothek und kommen mit durchweg positivem Feedback heraus. Im Folgenden habe ich ein Bildschirmfoto von Cooper Design aufgenommen, das eine brillante Überraschung für die Navigation bietet.
Wenn Sie auf die oberen Links klicken, werden Sie durch den jQuery-Effekt horizontal über die Seite geflogen. Alternativ wird ein Untermenü mit Kategorien geöffnet, die auf Ihrer Titelseite basieren. Wenn Sie zwischen diesen Optionen wählen, werden Seiteneffekte auch vertikal scrollen!
Ihre Website ist ein Puzzle-Board mit Animationen, das die Leistungsfähigkeit des Webdesigns heute auf beeindruckende Weise demonstriert. Alternativ können Sie vertikal scrollen und zwischen Seiten links / rechts wechseln, indem Sie nebeneinander auf die Spalten klicken.
Eine andere Site Janette D. Council verfügt über eine einzigartige Navigation, die ihre Portfolioelemente basierend auf Abfragedaten neu anordnet. Standardmäßig werden alle Projekte angezeigt. Sie können jedoch Druck, Logo und Illustrationsarbeit individuell festlegen.
Außerdem werden ihre Bilder und Website-Informationen auf derselben Seite angezeigt. Das bedeutet, wenn Sie volle JavaScript-Unterstützung ausführen, müssen Sie Ihren Browser niemals neu laden! Eine weitere Überprüfung ihres Codes zeigt, dass es für Google keine alternativen Seiten zum Crawlen gibt. Dies ist nicht ganz schlecht, da alle Seiteninformationen streng in einer Datei gespeichert sind!
Ganzseitige Übernahme
Wenn Sie an eine ungewöhnliche Seitennavigation denken, müssen diese nächsten Beispiele die Trophäe mit nach Hause nehmen. heartshapedwork ist anscheinend ein vollständiges Portfolio, das über WordPress läuft. Beim Betreten ihrer Homepage werden Sie feststellen, dass große horizontale Balken die Seite hinunterlaufen. Diese zeigen alle große Hover-Effekte und führen zu externen Artikeln und Portfolio-Aufnahmen.
Sie werden feststellen, dass für jede Leiste der Projekttitel in fetter Schrift mit Subtext angezeigt wird, der die Art der entwickelten Arbeit enthält. Dazu gehören Websites, Illustrationen, Handys und mehr. Ihr Portfolio ist umfassend und macht eigentlich Spaß, durchzublättern.
Ein weiteres gutes Beispiel ist die Work Life Balance Center-Website. Das Zentrum wurde 1991 gegründet und hat in dieser Zeit einige Aktualisierungen seiner Website erhalten. Derzeit laufen auf Flash die gesamten Navigationsfunktionen, indem das aktuell fokussierte Navigationsobjekt vergrößert wird.
Beim Durchsuchen werden Sie daher auf große Balken aufmerksam, die sich auf einzelne Seiten und Unterseiten mit Links beziehen. Diese Verknüpfungen führen nicht zu einem bestimmten Punkt, sondern ziehen Sie einfach durch das Flash-Layout. Interessanterweise wurde dieser Effekt bereits auf der Website von Cooper gesehen, die alle mit jQuery erstellt wurde.
Grip Limited ist möglicherweise ein weiterer Inbegriff der Vollbildnavigation. Beim Laden der Site werden Sie bemerken, dass sich Balken entfalten, um neue Informationen und Seitenlinks anzuzeigen. Sie können durch die Kopfzeilen auf jeder Leiste klicken, um den Inhalt zu reduzieren und mehr Bildschirmfläche anzuzeigen.
Vielleicht nicht die beste Nutzung der Navigation, obwohl sie absolut einzigartig ist. Ganz oben gibt es eine Bar mit dem Titel Menü öffnen das lässt noch mehr Links vor deinem Gesicht. Dazu gehören Kernseiten der Unternehmen und Links zu Fallstudien.
Undeutliche Designs
Wenn Sie wirklich anfangen, das Web zu untersuchen, zeichnen sich viele Portfolios als einfach arkane aus. Yuna Kim verfügt über ein persönliches Portfolio, das wirklich ein Eigenleben annimmt. Sie hat die gesamte Navigation durch die Positionierung von jQuery und CSS erstellt.
Für jedes Portfolioelement hat sie ein Symbol zur Darstellung der Projektarbeit angegeben. Platz für digitales Arbeiten, Dreieck für Branding und Circle für Druck. Wenn Sie nach unten scrollen, werden Sie feststellen, dass jede Projektverknüpfung eine farbenfrohe Form ist, die ihre Arbeit kennzeichnet.
Außerdem wird die Navigation in der Überschrift nach unten verschoben, wenn Sie sich durch die Top-Links bewegen. Die drei Optionen Hallo, Tweets, und Kontakte zeigt verschiedene Inhalte an, je nachdem, wo Sie sich befinden. Genauer gesagt, Tweets und Kontakte enthalten die gleichen Informationen: Ihr aktuelles Update zu Twitter sowie E-Mail und Telefonkontakt. hallo wird eine kurze Einführung in Yuna Kim und ihre Website geben. Ziemlich cooles Zeug!
Big Kid ist ein Blog mit WordPress, das einzelne Inhaltsblöcke anzeigt. Sie können sich ihre Website ansehen, um zu sehen, was ich meine. Die Navigation ist nicht ungewöhnlich, obwohl sie für ein Blog-Layout recht ungewöhnlich ist. Bei vielen Beiträgen handelt es sich um Portfolio-Updates, die Sie sortieren können.
Was mir wirklich gefällt, ist die Individualität, die mit ihrem Layout verbunden ist. Es ist fast die einzigartigste Verwendung von Blockmustern, die ich je im Web gesehen habe. Aus der Sicht der Benutzererfahrung ist es sehr einfach, durch alles zu scrollen und die Projektarbeit nach persönlichen Interessen zu sortieren. Es ist auch eine sehr leichte Website, die schnell in vielen Browsern geladen werden kann, die ich ausprobiert habe (einschließlich Internet Explorer und Safari für Windows).
Site Gallery
Da es so viele komische und ungewöhnliche Navigationsstile gibt, die ich abdecken sollte, habe ich eine kleine Galerie mit meinen persönlichen Favoriten zusammengestellt.Diese Websites bieten merkwürdige Stile, die ich sonst nirgendwo im Web gefunden habe.
Die Popularität des unhandlichen Website-Designs ist in den letzten Jahren dramatisch gestiegen. Seltsame und ungewöhnliche Seitenlayouts und die Berücksichtigung der richtigen Benutzeroberfläche haben einige großartige Projekte hervorgerufen. Wenn Sie ähnliche Designs kennen, bieten Sie Ihre Ideen in der folgenden Diskussion an.
Amore
Amore bietet einen bunten Hintergrund. Schnell zu laden ist die Seitennavigation direkt bei der Ausrichtung in der Mitte unten. Wenn Sie sich von jedem Block bewegen, wird der Bereich erweitert und enthält Informationstext über die Seite. Alle Informationen werden in einem Lightbox-Fenster geöffnet und ersparen sich das erneute Laden jeder Seitenansicht.
Bio-Gitter
Michael McDonald ist der Schöpfer von Organic Grid, alles über Flash gebaut. Die Anwendung benötigt etwas Zeit, um langsamere Verbindungen zu laden, aber ich denke, Sie werden seinen Designstil wirklich zu schätzen wissen. Jeder Navigationsbereich wird als horizontale Leiste angezeigt, mit der Sie zu einer ganzseitigen Portfolioanzeige gelangen. Hier gibt es eine Menge Arbeit zu bieten, und die verbesserten visuellen Elemente sprechen das UX-Design hervorragend an.
TinyTeam
Was mir an TinyTeam am besten gefällt, ist ihre Kreativität beim Aufbau der Website. Es gibt keine zusätzlichen Grafiken oder auffälligen Illustrationen, und der blaue Hintergrund ist wunderbar, um Ablenkungen zu begrenzen. Eine andere über Flash gebaute Site, die zeigt, wie einzigartig ein Seitenmenü sein kann. Durch Klicken auf das mittlere Feld werden neue Optionen zum Durchsuchen des Unternehmensportfolios geöffnet.
LoveBento
Auf den ersten Blick ist LoveBento nicht einfach zu sehen. Es gibt viel zu konsumierenden Inhalt und keine direkte Navigation. Rechts oben finden Sie Dropdown-Felder, die eigentlichen Elemente befinden sich jedoch auf der linken Seite. Unter dem Firmenlogo finden Sie eine einzigartige Darstellung von Bildern, die als Link-Hover dargestellt werden. Zusätzlich gibt es rechts unten nummerierte Links zum Manövrieren zwischen Seiten.
Lucuma
Hier haben wir eine weitere erfolgreiche Nutzung des horizontalen Bildlaufs gefunden. Ihre Effekte werden in der jQuery-Bibliothek erstellt. Lucuma hat auch Links unter seinem Kerninhaltsbereich, der XHTML- und CSS-Validierung bietet. Wenn Sie hier Portfolios für das Web entwerfen, bedeutet das wirklich Geschäft!
Andreas Smetana
Das Showcase von Andreas Photography bringt das Wort ungewöhnlich in den Vordergrund. Sobald die Seite vollständig geladen ist, erhalten Sie eine Benachrichtigung mit Informationen zum Durchsuchen der Miniaturbildgalerie. Mit dem Mausrad oder den Pfeiltasten können Sie zwischen den vielen Fotokategorien navigieren. In der unteren linken Ecke befindet sich eine weitere kleine Gruppe von Menü-Links, die auf der Seite der jeweiligen Seite geöffnet werden. Ziemlich ordentlich!
cypher13 Design Studio
Hier kommen wir zu einem anderen Designstudio mit einem entsprechenden Portfolio in Schwarz-Weiß-Motiven. Das Layout wurde mit HTML / CSS erstellt und verwendet Animationseffekte von jQuery, um zwischen Portfolioelementen zu wechseln. Das Tolle daran ist, wie elegant jede Bewegung wird. Sie fühlen sich anmutig angeboten, während Sie durch ihr Portfolio blättern. Es ist möglich, Elemente nach Kunden und Kategorien zu sortieren oder die Suchleiste zu nutzen, um die Ergebnisse in Echtzeit anzuzeigen.
Studio-Ausgabe
Studio Output bringt eine neue Funktion in ihre Portfolio-Anzeige. Die Startseite bietet eine schöne Collage aus Projektbildern, auf die Sie klicken können, um weitere Informationen in einem Leuchtkasten-Effekt anzuzeigen. Sie bieten viele Beispielbilder und zeigen, wenn möglich, auch verwandte Projekte an. Hier habe ich ein Stück von Spongebob-Artworks und -Grafiken aus ihrem Portfolio geschnitten.
Duane King
Das Portfolio von Duane King ist ein weiteres hervorragendes Beispiel für die Tastaturunterstützung. Nach dem Laden auf der Startseite können Sie mit den Pfeiltasten zwischen den Segmenten nach links und rechts blättern. Sie können auf ein Projekt klicken, um das Bild zu erweitern und etwas mehr Informationen anzuzeigen. Dies ist auch ein weiteres Beispiel, bei dem Portfolioelemente nicht auf eine neue Seite geladen werden, wodurch die jQuery-Bibliothek und die vorgestellten Plugins wirklich genutzt werden.
Sideshow Press
Was ich an Sideshow Press wirklich mag, ist die Verwendung einer Raute (#) zwischen den Seiten. Dies bedeutet für Suchmaschinen, dass alle neuen Inhalte nicht auf eine neue Seite geladen werden, sondern dynamisch über JavaScript gesteuert werden. In diesem Fall betrachten wir eine Flash-Anwendung, aber deshalb funktioniert die Technik so gut. Die Seitennavigation bietet einige bunte Animationseffekte für den Hover-Status. Jeder Seitenübergang zeigt einen gleitenden Effekt, der einzigartig und perfekt zusammengestellt ist.
Fazit
Ich hoffe, Sie haben diese Beispiele für ungewöhnliche Navigationstechniken genossen und Sie dazu inspiriert, Ihre eigenen einzigartigen Experimente zu erstellen.
Wenn Sie irgendwelche verrückten Navigationsmenüs kennen, die wir vermisst haben, hinterlassen Sie einen Kommentar mit einem Link, damit wir es ausprobieren können!