10 sites effectuant une navigation verticale à droite
La majorité des menus de navigation Web circulent horizontalement sur la page. Cela vient d'une histoire de moniteurs traditionnels étant plus large que plus grande.
Mais avec un tel écran, les sites Web peuvent désormais utiliser des menus de navigation verticaux. Et beaucoup d'entre eux ont l'air fantastique.
Ces 10 exemples de menus verticaux sont parfaits pour étudier le style de conception unique et la facilité d'utilisation.
1. Pépinières Petersham
Sur le Pépinières Petersham site Web, vous trouverez une navigation verticale imbriquée. Cette technique n'est pas quelque chose que vous trouverez très souvent, mais elle fonctionne bien sur ce site.
Chaque lien de navigation principal utilise une icône en arrière-plan pour transmettre les liens visuellement. Et les deux premiers liens ouvrent des sous-menus alignés à côté du menu principal. Celles-ci remplacent les menus déroulants que vous voyez généralement sur les menus horizontaux.
Ce site est réactif donc à des tailles plus petites ces liens disparaissent derrière un menu de hamburger. Cela crée une division raisonnable entre les utilisateurs de bureau disposant de suffisamment d'espace pour les liens verticaux et les utilisateurs mobiles qui réussissent mieux avec une barre de navigation horizontale.
2. Restaurant Arbor
Un autre exemple très unique est Arbor Restaurant qui a une navigation verticale propre avec beaucoup d'espace entre les liens. Le contenu apparaît dans un conteneur coulissant qui s'aligne également verticalement à côté de la navigation.
Ce style de contenu est assez unique. La plupart des sites de navigation verticale maintiennent leur contenu aligné sur la page principale, mais dans ce cas, vous pouvez afficher / masquer facilement le contenu. Il ajoute un certain style à la navigation verticale, ce qui permet au contenu de la page de suivre son mouvement.
3. Smokey Bones
Smokey Bones a deux choses à faire: de la nourriture géniale et un site Web génial.
Chaque page utilise la longue navigation verticale fixée sur le côté gauche. Ceci est un aliment de base pour la plupart des sites Web, car la majorité des lecteurs occidentaux consomment du contenu de gauche à droite, et le coin supérieur gauche est le lieu traditionnel pour un logo de site.
Une fonctionnalité supplémentaire que j'aime est le menu déroulant qui répertorie tous les plats du restaurant. Si vous cliquez sur le lien "menu", vous verrez que cela fonctionne également comme un sous-menu ajouté verticalement. Certainement une bonne idée qui fonctionne bien pour un petit restaurant.
4. Mammoth Media
Lorsque vous avez moins de contenu, vous pouvez vous en sortir avec des choix de navigation plus originaux. Mammouth Média est un bon exemple qui ne compte que cinq pages principales sur leur site, plus un blog.
Un aspect spécifique de cette navigation est la fonctionnalité de liste déroulante masquée. Si vous cliquez sur le lien "Travailler", vous obtiendrez 2 liens alternatifs sur lesquels vous pourrez cliquer. Ils apparaissent sous le lien principal et jouent donc le rôle d'une liste déroulante plus petite.
Même sur mobile, cette navigation suit un style similaire. C'est la preuve que lorsque vous n'avez pas trop de liens, vous pouvez vraiment pousser la créativité.
5. Amazon
Tout le monde et leur grand-mère connaissent Amazon. Le détaillant en ligne a une sélection incroyable, mais ils ont aussi un design fantastique avec liens de navigation verticale sur les pages de recherche de produits.
Amazon a des dizaines de catégories pour chaque terme de recherche. Cela signifie qu'ils ont besoin d'un moyen de présenter des fonctionnalités de recherche raffinées sans surcharger la page. Les navigations verticales prennent tout leur sens car elles peuvent se ranger sur le côté tout en étant totalement accessibles.
Si vous concevez un type de nav de filtrage similaire, je vous recommande d’étudier la stratégie d’Amazon. Ils ont optimisé leur site sans fin, il y a donc de bonnes raisons de croire que leurs liens de tri verticaux fonctionnent bien.
6. Corum
Corum's site Web a une autre navigation verticale propre, avec des fonctionnalités très simples. Des liens en majuscules, du texte en noir, des styles de survol clair et un fort contraste avec la page principale.
C'est l'un des aspects les plus importants lors de la conception de la navigation verticale. Vous souhaitez généralement créer une forte division entre la barre de navigation verticale et le contenu de la page. Dans ce cas, il est fait en utilisant une couleur de fond plus claire avec le logo Corum près du haut.
Et les utilisateurs mobiles réactifs obtiennent plutôt un menu déroulant qui fonctionne bien comme alternative aux écrans plus longs que plus larges.
7. Nua Bikes
L'une des meilleures façons d'utiliser une navigation verticale consiste à utiliser une seule mise en page. Sites d'information comme Nua Bikes ne nécessite pas toujours des dizaines de pages pleines de contenu.
Ainsi, avec un menu de navigation vertical, il est beaucoup plus facile de parcourir le contenu sur un coup de tête en utilisant des animations et des zones de pages personnalisées. Dans ce cas, la navigation Nua Bikes se fond dans la page car elle est directement liée à tout le contenu de cette page.
8. Michael Ngo
Un autre site qui suit la tendance de navigation verticale d'une seule page est Le portfolio de Michael Ngo .
Il a une image d'en-tête captivante qui attire immédiatement votre attention et vous attire. Mais le contenu est la partie la plus intéressante car elle fonctionne à travers 3 liens différents: accueil, travail et contact.
Les liens de navigation ont aussi leurs propres sous-titres pour que vous puissiez voir ce qu'ils font même d'un coup d'œil.
Une chose à noter est la façon dont la navigation reste fixe tout en faisant défiler la page. Cela permet de garder tous les liens accessibles depuis n'importe quel point crucial dans un menu vertical plus petit.
9. Medienstadt.koeln
Le site allemand Medienstadt.koeln La navigation verticale est très différente. Leur nav reste toujours caché derrière un menu de hamburgers, mais il couvre toujours toute la hauteur de l'écran.
Il comprend également plus de liens que la navigation horizontale supérieure typique. Cela a du sens mais peut être déroutant pour certains visiteurs.
Ce que j'aime le plus dans le style vertical, c'est comment il reste caché même sur les ordinateurs de bureau jusqu'à ce que vous en ayez besoin.
Certes, il y a des débats sur problèmes de découvrabilité avec des menus hamburger. Mais je pense que cette icône est rapidement reconnue et que cette conception est un excellent exemple de navigation verticale cachée en action.
10. Le système Metrick
L'agence de publicité Système Metrick garde leur navigation simple et précise. Il suit le style vertical mais il est également très différent de tous les autres dans cet article.
J'aime la liste déroulante cachée qui ne montre que les liens supplémentaires quand un lien principal est cliqué. Leur lien "journal" est un bon exemple. De nouveaux liens apparaissent sur le côté et apparaissent en un seul clic.
Les utilisateurs mobiles obtiennent une expérience similaire, sauf que ces liens de sous-menus apparaissent sous le lien principal. Mais cette navigation est si petite qu'elle peut fonctionner à peu près toutes les tailles d'écran.
Le bouclage
La navigation verticale fonctionne mieux sur les sites qui dépendent d'un espace d'écran supplémentaire. Celles-ci comprennent généralement des sites de portefeuille, des restaurants, des petites entreprises et des magasins de commerce électronique.
Mais quel que soit le site, vous pouvez toujours essayer d'ajouter une navigation verticale à votre conception. Et j'espère que ces exemples peuvent vous aider à démarrer avec quelques idées géniales pour la conception de wireframing et de maquette.