{"id":25892,"date":"2023-06-08T10:30:00","date_gmt":"2023-06-08T08:30:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=25892"},"modified":"2023-06-08T10:30:03","modified_gmt":"2023-06-08T08:30:03","slug":"inspiration-web-design-sites-avec-menus-verticaux","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/inspiration-web-design-sites-avec-menus-verticaux\/","title":{"rendered":"Web design : 10 sites avec menus verticaux"},"content":{"rendered":"

Horizontal, vertical ou sticky\u2026 le menu de navigation<\/a> d\u2019un site web garantit la bonne circulation du visiteur sur l\u2019ensemble de votre site. Tomb\u00e9s en d\u00e9su\u00e9tude ces derni\u00e8res ann\u00e9es au profit des menus horizontaux, les menus verticaux semblent aujourd\u2019hui redevenir tr\u00e8s tendances.<\/p>\n

Aux pr\u00e9mices de la conception Web, les menus int\u00e9gr\u00e9s \u00e0 la barre lat\u00e9rale \u00e9taient les plus couramment exploit\u00e9s. Modernis\u00e9s, ils se parent d\u00e9sormais d\u2019ic\u00f4nes<\/a> et effets d’animation<\/a> leur permettant d\u2019appara\u00eetre et dispara\u00eetre en fonction des besoins du visiteur.<\/p>\n

Voici 10 sites avec menus verticaux originaux et parfaitement ma\u00eetris\u00e9s pour inspirer votre web design.<\/p>\n

1. Rogue Studio<\/h2>\n
\"menu
Par Rogue Studio<\/a><\/figcaption><\/figure>\n

Le site propose une barre de navigation verticale tr\u00e8s tendance qui reste coll\u00e9e en \u00ab sticky \u00bb au rebord de la fen\u00eatre. Gr\u00e2ce \u00e0 un tr\u00e8s petit nombre de pages, le texte se pr\u00e9sente lui aussi \u00e0 la verticale.<\/p>\n

\u00c0 lire aussi : L’importance du design pour votre entreprise<\/a><\/p><\/blockquote>\n

2. DAMN GOOD Beauty<\/h2>\n
\"\"
DAMN GOOD Beauty<\/a>, par le webdesigner australien raakcreative.<\/figcaption><\/figure>\n

La seconde barre de navigation du site s\u2019installe \u00e0 droite de la fen\u00eatre, dans le sens vertical. Le titre \u00ab Our brands \u00bb et l\u2019ic\u00f4ne, permettent \u00e0 l\u2019utilisateur d\u2019en appr\u00e9hender l\u2019usage d\u2019un seul coup d\u2019\u0153il. Le clic permet de d\u00e9ployer son contenu et d\u2019acc\u00e9der aux URL.<\/p>\n

3. The Rocks<\/h2>\n
\"menu
The rocks<\/a> par le webdesigner australien Adrenalin.<\/figcaption><\/figure>\n

La barre de navigation verticale du site The Rocks se r\u00e9tracte \u00e9l\u00e9gamment au scroll de l\u2019utilisateur. Une fois referm\u00e9e, elle utilise les codes de la navigation mobile pour \u00eatre parfaitement comprise.<\/p>\n

4. DZANGA-SANGHA<\/h2>\n
\"menu
DZANGA-SANGHA<\/a> par le webdesigner allemand B\u00fcro des Pr\u00e4sidenten.<\/figcaption><\/figure>\n

O\u00f9 qu\u2019il se trouve sur le site, le visiteur acc\u00e8de au menu vertical fixe et \u00e0 son contenu. L\u00e0 encore, le menu utilise les codes de la navigation mobile ce qui permet d\u2019en comprendre imm\u00e9diatement le sens.<\/p>\n

5. MIWANGO<\/h2>\n

\"miwango<\/p>\n

\"miwango
MIWANGO<\/a> par le webdesigner Ta\u00efwanais Ironman Design.<\/figcaption><\/figure>\n

Particuli\u00e8rement originale, la navigation verticale (install\u00e9e \u00e0 droite de la fen\u00eatre) se d\u00e9ploie de mani\u00e8re \u00e0 remplir int\u00e9gralement l\u2019espace. Utilisant sobrement les codes de la navigation mobile lorsqu\u2019il est repli\u00e9, le menu d\u00e9ploie des tr\u00e9sors de cr\u00e9ativit\u00e9 une fois que l\u2019utilisateur a cliqu\u00e9 dessus.<\/p>\n

6. Canada ICI<\/h2>\n
\"menu
Canada ICI<\/a> par le webdesigner canadien Overhaul.<\/figcaption><\/figure>\n

Simple et \u00e9pur\u00e9e, la barre de navigation verticale du site est accessible en permanence \u00e0 l\u2019utilisateur, et reprend les codes de la navigation mobile.<\/p>\n

7. SALON SONA<\/h2>\n
\"menu
SALON SONA<\/a> par le webdesigner slovaque Art4web.co.<\/figcaption><\/figure>\n

Plus classique, mais tr\u00e8s efficace et contemporaine, la navigation du site est \u00e0 la fois verticale et sticky. Elle s\u2019int\u00e8gre ainsi parfaitement \u00e0 l\u2019animation parallaxe<\/a> du site.<\/p>\n

8. The Conference<\/h2>\n
\"\"
par The Conference<\/a><\/figcaption><\/figure>\n

Le site s\u2019offre un menu vertical sur la droite ainsi qu’une navigation d\u00e9roulante tr\u00e8s bien pens\u00e9s. Gr\u00e2ce \u00e0 une ic\u00f4ne en forme de menu burger, The Conference un menu vertical simple mais tr\u00e8s efficace.<\/p>\n

9. Natreve<\/h2>\n

\"natreve<\/p>\n

\"webdesign
Natreve<\/a> par le webdesigner am\u00e9ricain Pattern.<\/figcaption><\/figure>\n

\u00c0 premi\u00e8re vue, la navigation du site semble horizontale et fixe. Mais au clic, on d\u00e9couvre un menu vertical tr\u00e8s original qui occupe toute la fen\u00eatre et permet une succession d\u2019animations accessibles au survol de la souris.<\/p>\n

\u00c0 lire aussi : Print et web design : les 12 diff\u00e9rences<\/a><\/p><\/blockquote>\n

10. F1 Australian Grand Prix<\/h2>\n

\"\"<\/p>\n

\"\"
F1 Australian Grand Prix<\/a> par le webdesigner australien Carter Digital.<\/figcaption><\/figure>\n

Le site propose un menu de navigation fixe agr\u00e9ment\u00e9 d\u2019ic\u00f4nes. Au clic, le menu se d\u00e9ploie afin de permettre au visiteur d\u2019acc\u00e9der aux sous-cat\u00e9gories du site et \u00e0 leurs pages.<\/p>\n

\u00c0 lire aussi : Web design : comment cr\u00e9er un guide de style UX ?<\/a><\/p><\/blockquote>\n

Les barres de menus verticales, une tendance de l\u2019UX design<\/h2>\n

Toutes les interfaces web font l\u2019objet de mille attentions, afin que leur confection offre la meilleure exp\u00e9rience possible \u00e0 leurs utilisateurs. Bien \u00e9videmment, les tendances de navigation elles aussi \u00e9voluent afin de participer \u00e0 cette exp\u00e9rience la plus favorable possible.<\/p>\n

La navigation d\u2019un site Web ne change pratiquement jamais, puisqu\u2019elle pr\u00e9sente toujours les m\u00eames \u00e9l\u00e9ments (ou \u00e0 peu pr\u00e8s). Ce manque d\u2019\u00e9volution est pourtant totalement logique. En effet, une navigation instable, trop \u00ab folle \u00bb, risque de diminuer drastiquement son efficacit\u00e9. Pour \u00eatre efficace, elle doit se cantonner \u00e0 des \u00e9l\u00e9ments reconnus au premier coup d\u2019\u0153il, et donc utilisables imm\u00e9diatement par le visiteur. La nouveaut\u00e9 est donc toujours limit\u00e9e pour les menus de navigation, afin de ne pas d\u00e9t\u00e9riorer cette exp\u00e9rience utilisateur.<\/p>\n

L\u2019une des approches actuellement abord\u00e9es par les web designers s\u2019attache \u00e0 cr\u00e9er une barre de navigation verticale mais tr\u00e8s \u00e9troite, qui peut ainsi rester coll\u00e9e en \u00ab sticky \u00bb au rebord de la fen\u00eatre. Le texte se pr\u00e9sente \u00e0 la verticale afin de gagner un maximum de place, et ainsi proposer une nouvelle alternative graphique \u00e0 la barre de navigation, d\u00e9sormais plus compacte, minimale et \u00e9l\u00e9gante.<\/p>\n