Top-Webnavigationstrends
Im vergangenen Jahr haben wir viel Wachstum und Neues gesehen Trends in der Welt des Webdesigns . In diesem Artikel werde ich mich auf die Navigation auf Websites konzentrieren und die Muster, die Webdesigner übernommen haben, um Menschen dabei zu helfen, sich auf ihren Websites zurechtzufinden. Diese Navi-Trends funktionieren alle gut für eine Vielzahl von Arten von Websites und sich anpassendes Webdesign Es gibt also viel Abwechslung, um Ideen für Ihr nächstes Designprojekt zu finden.
01. Klebrige Navigationsleisten
Die Navigation soll Benutzern helfen, von Punkt A zu allen anderen Punkten auf einer Site zu gelangen. Wenn Sie das Navigationsmenü an einem festen Ort halten, können Benutzer von überall auf der Seite aus auf der Site navigieren. Viele Websites halten ihre Hauptnavigation am oberen Bildschirmrand fest, während der Benutzer nach unten scrollt, um Inhalte zu erkunden.
Dies ist dank CSS und einfacher geworden jQuery-Plugins Viele Website-Themen sind jetzt standardmäßig mit einer klebrigen Navigationsleiste ausgestattet, und dieser Trend zeigt keine Anzeichen dafür, dass Sie irgendwohin gehen. Konsistente Navigation und Benutzerfreundlichkeit sind beide wichtig, aber die feste Navigationsleiste ist auch praktisch für mobile Benutzer, bei denen die Site natürlich länger und dünner ist.
Wie solltest du es benutzen?
Wenn Sie eine Website mit vielen Navigationselementen haben, ist es eine gute Idee, diese beizubehalten. Dies ist eine todsichere Möglichkeit, Besucher länger auf der Website zu halten und die Gesamtzahl der Seitenaufrufe zu erhöhen.
Stellen Sie jedoch sicher, dass die Navigationsleiste nicht zu viel Platz beansprucht. Es sollte nicht so groß sein, dass es große Teile des Seiteninhalts blockiert. Die Seite für US Magazine Um dieses Problem zu umgehen, wird die Größe der Navigationsleiste beim Scrollen nach unten verkleinert, wodurch sie weniger aufdringlich wird. Solange der Benutzer den Seiteninhalt noch nutzen kann, wird er wahrscheinlich von einer allgemein zugänglichen festen Navigation profitieren.
02. Mega-Menüs
Das Mega-Menü wurde mit der Zunahme von Blogs im Magazinstil populär gemacht. Sie unterscheiden sich von normalen Dropdown-Listen, da diese Mega-Menüs nicht nur vertikal nach unten fließen, sondern sich auch erweitern und normalerweise mehrere Inhaltsspalten enthalten. Diese Technik funktioniert gut, wenn sie mit Bedacht eingesetzt wird, ist jedoch nicht für jede Website geeignet. Tatsächlich ist es nur dann nützlich, wenn Sie über genügend Inhalte verfügen, um ein Mega-Menü zu rechtfertigen.
Warum sie benutzen?
Besucher können sich ein Bild von Ihrem Blog oder Ihrer Website machen, indem sie verwandte Inhalte durchblättern. Wenn Sie mehr Inhalte in einem Mega-Menü bereitstellen können, warum dann nicht?
Dieser Trend funktioniert auf Mobilgeräten nicht, da auf dem Bildschirm kein Platz vorhanden ist. Aber viele Leute surfen immer noch auf Desktops und Laptops im Internet, sodass ein breites Publikum das Mega-Menü unterstützt.
03. Universelle Navigation
Einige Unternehmen arbeiten mit oder besitzen mehrere Marken und bieten eine universelle Navigation über eine gesamte Website. Disney zum Beispiel besitzt Themenparks, erstellt Spiele und produziert Filme zusammen mit TV-Shows. Es ist sinnvoll, diese universelle Navigation unabhängig von der Marke auf jeder Seite beizubehalten, um auf andere Disney-Produkte aufmerksam zu machen.
Und dieser Trend gilt nicht nur für Konglomerate oder Holdinggesellschaften. Es wird manchmal in Netzwerken von Websites verwendet, z New York Media . Ein weiteres gutes Beispiel ist in der Kopfzeile von Maischbar , die auf alle internationalen Websites der Marke verweist.
Warum das benutzen?
Wenn Sie mit einem größeren Netzwerk von Produkten oder Marken arbeiten, kann es hilfreich sein, alle miteinander zu verknüpfen, um eine kohärente Markenidentität zu schaffen. Eine universelle Navigation kann Besucher über das gesamte Netzwerk führen, um unterschiedliche Zielgruppen zu befragen.
04. Vertikale Gleitnavigation
Immer mehr Websites übernehmen den vertikalen Navigationstrend, und wenn er funktioniert, funktioniert er wirklich gut. Es ist besonders beliebt bei Portfolios oder Kreativagenturen, die die Grenzen des traditionellen Webdesigns überschreiten.
Das obige Beispiel von AWARD ist ein fantastischer Fall, bei dem die vertikale Navigation verwendet wird, während sie jederzeit sichtbar bleibt. Symbole werden von der Seite verlinkt, sodass Sie auf ein Symbol anstelle des Hamburger-Symbols klicken können. Es ist ein experimenteller Ansatz für das Navigationsdesign, kann jedoch auf kreativ orientierten Websites verwendet werden.
Warum das benutzen?
Probieren Sie diese Technik nur aus, wenn Sie ein Vollbild-Layout verwenden, das sich von einem herkömmlichen Rasterdesign entfernt.
Eine funktionierende vertikale Navigation ist nicht einfach von Grund auf neu zu erstellen, und es ist schwierig, sie in reaktionsschnellen Designs zum Laufen zu bringen. Wenn Sie jedoch neugierig auf Experimente sind und neue Ideen ausprobieren möchten, können vertikale Navigationsgeräte eine erfrischende Wendung sein.
05. Global versteckte Menüs
Jeder Webdesigner sollte über Hamburger-Symbole und deren Verwendung im Responsive Design Bescheid wissen. Da die Menschen jedoch mit dem Hamburger-Symbol und dessen Bedeutung vertraut werden, halten immer mehr Websites die Navigation jederzeit verborgen.
Dies mag seltsam erscheinen, da es dem Besucher nicht hilft, Links schnell zu finden. Es räumt jedoch Platz auf dem Bildschirm auf, indem die Navigation nicht mehr sichtbar ist. Da waren verschiedene Studien Dies weist darauf hin, dass die meisten Benutzer mit versteckten Menüs zu kämpfen haben. Dieser Trend kann sich jedoch ändern, wenn mehr Menschen Smartphones verwenden und sich mit der Bedeutung des Hamburger-Symbols vertraut machen.
Warum sie benutzen?
Das beste Szenario für ein global verstecktes Menü ist ein technisch versiertes Publikum. Diese Besucher erkennen das Hamburger-Symbol und wissen, dass es 'hier klicken für Menü' bedeutet. Wenn Sie also ein Tech-Blog entwerfen oder eine digitale B2B-Agentur erstellen, kann dies funktionieren. Wenn nicht, denken Sie lange und gründlich nach, bevor Sie diesen Ansatz wählen, und stellen Sie sicher, dass Sie die Benutzerfreundlichkeit nicht zugunsten des Stils opfern.
06. Responsive Subnav-Menüs
Beim Entwerfen einer Website kann der Umgang mit der mobilen Navigation nicht vermieden werden. Es ist beliebt und es ist hier, um zu bleiben. Designer verstecken häufig einige Navigationslinks auf Mobilgeräten, damit das Menü auf kleinen Bildschirmen besser passt.
Viele Websites folgen jedoch einem neuen Trend, alle Navigationselemente mithilfe von Dropdown-Menüs beizubehalten. Dies erfordert normalerweise ein Hamburger Navi mit Umschalt-Symbolen für Link-Dropdowns.
Diese Technik wird nur auf mobilen Bildschirmen oder in kleinen Browserfenstern angezeigt. Zum Beispiel, Politisch Die mobile Website verwendet kleine Pluszeichen (+), um neben jedem Link ein Untermenü anzuzeigen.
Warum sie benutzen?
Besucher sollten Zugriff auf Ihre gesamte Website haben, unabhängig davon, welches Gerät sie verwenden. Wenn Sie die Untermenüs beibehalten, können Sie den Besuchern bessere Möglichkeiten zum Stöbern bieten.
Stellen Sie einfach sicher, dass jedes Untermenü eindeutig mit einem Symbol, einer Farbänderung oder etwas Visuellem gekennzeichnet ist. Besucher sollten wissen, ob das Klicken / Tippen auf einen Link ein Menü öffnet oder sie auf eine neue Seite bringt.
07. Top Story Karussells
Dieser Trend wird in Blogs und auf hochvolumigen Nachrichtenseiten immer beliebter. Viele dieser größeren Websites können täglich Dutzende - wenn nicht Hunderte - neuer Artikel veröffentlichen.
Durch Hinzufügen eines einfachen Karussells oben auf der Seite können Besucher die neuesten Artikel lesen. Diese Geschichten können dynamisch kuratiert oder aktualisiert werden und mit Miniaturansichten oder was auch immer Sie möchten gestaltet werden. Sie können im Grunde ein anderes Beispiel sehen jeder Vogue-Artikel .
Warum sie benutzen?
Wenn Sie ein Blog mit hohem Inhaltsvolumen entwerfen, kann dieser Trend Wunder für die Benutzererfahrung bewirken. Besucher können sich über aktuelle Geschichten informieren und die durchschnittliche Gesamtzeit vor Ort erhöhen, indem Besucher dazu ermutigt werden, mehr als eine Geschichte pro Besuch zu erkunden. Die meisten Blogs, die viele Inhalte veröffentlichen, möchten die Besucherbindung erhöhen, und das Artikelkarussell ist eine hervorragende Möglichkeit, dies zu tun.
08. Inhaltsverzeichnis
Google scheint Langform-Inhalte zu lieben und veranlasst Autoren, längere Leitfäden zu praktisch allem zu veröffentlichen. Dies funktioniert hervorragend für Webinhalte, kann jedoch das Leseerlebnis beeinträchtigen. Zur Vereinfachung habe ich festgestellt, dass in längeren Artikeln mit definierten Abschnitten mehr Inhaltsverzeichnisfelder hinzugefügt werden. Das bemerkenswerteste Beispiel ist Wikipedia , das seit seiner Einführung ein ToC verwendet.
Warum sie benutzen?
Der Hauptgrund für die Verwendung eines Inhaltsverzeichnisses besteht darin, die Benutzererfahrung zu verbessern. Längere Artikel werden zur Norm und es kann einschüchternd sein, auf einem Artikel mit mehr als 5.000 Wörtern zu landen. Ein ToC reduziert diesen Einschüchterungsfaktor. Sie sind auch in SERP-Rankings nützlich, da Google sie anbieten kann Links springen basierend auf einem Inhaltsverzeichnis. Dies ist ein Win-Win-Ansatz.
09. Eckkappen mit allen Kappen
Dies ist ein subtiler Navigationstrend, der sich jedoch in den letzten Jahren rasant verbreitet hat. Es scheint, als ob jedes Startup und professionelle Unternehmen den All-Caps-Textstil verwendet, um eine Navigation zu erstellen, die sich intuitiv und symmetrisch anfühlt.
Diese Navis folgen normalerweise sehr ähnlichen Stilen:
- Alle Kappen
- Kleiner Schriftzug
- Serifenlose Schriftarten
- Zusätzlicher horizontaler Abstand
- Weißer oder sehr heller Farbton
Immer wenn ich eine solche Navigation sehe, ist dies fast ein willkommenes Ereignis. Dieser Designtrend ist zum Markenzeichen für eine saubere, klare und professionell aussehende Navigation geworden.
Warum sie benutzen?
Ein All-Caps-Navigationsmenü sieht einfach professionell aus. Es ist subtil und dennoch spürbar und vermittelt dem Benutzer ein Gefühl des Vertrauens. Wenn Sie ein Startup oder eine Unternehmenswebsite entwerfen, ist dieser Trend wahrscheinlich der beste Designstil für Ihre Navigation. Seien Sie jedoch vorsichtig: Sie möchten nicht mit einer Website enden, die seelenlos ist oder mit der aller anderen identisch aussieht.
10. Einzelseitige Punktnavigation
Der Aufstieg einseitiger Websites hat viele neue Trends ins Rampenlicht gerückt. Eine davon ist die Punktnavigation: Eine Reihe kreisförmiger Symbole auf der linken oder rechten Seite des Bildschirms. Jeder dieser Punkte repräsentiert einen anderen Abschnitt der Site. Da das Layout eine lange Seite umfasst, werden diese Links hervorgehoben, um die aktuelle Position des Benutzers anzuzeigen. Ich mag den Einfallsreichtum dieses Trends sehr, aber es gibt ein Fragezeichen darüber, ob die Leute verstehen, wofür diese Punkte stehen oder wie man sie verwendet.
Warum das benutzen?
Wenn Sie ein einzelnes Seitenlayout entwerfen, empfehle ich die Verwendung einer klebrigen Navigationsleiste oben auf der Seite. Auf diese Weise können Sie leichter erkennen, was jede Folie darstellt und welche Informationen sich auf der Seite befinden.
Wenn Sie jedoch keine Top-Navigation verwenden können (oder möchten), sind diese Punktfunktionen das nächstbeste. Oder noch besser: beides kombinieren! Es ist möglich, ein Top-Navi mit Textlinks und Punktnavigationssymbolen zu haben. Oder fügen Sie sogar Text neben die Punkte ein. Es gibt viele Optionen zur Auswahl, und alle können gut funktionieren.
Zum Thema passende Artikel:
- Die besten Farbwerkzeuge für Webdesigner
- Wie reaktionsschnelles Webdesign die Welt verändert hat
- Neue Fähigkeiten im UX-Design
