Fullscreen menu

Tendance web design : Fullscreen Menu

Petit à petit, l’expérience du web mobile fait son chemin jusqu’à nos écrans d’ordinateur. La méthode de création des interfaces web change, l’approche “mobile first” se fait sentir. Cette nouvelle façon de concevoir offre de nouvelles perceptives aux web designers.

Cet article est un guest-post rédigé par Maxime Siméon. 

L’héritage du mobile first

La navigation est le nerf de la guerre en web design. Il y a beaucoup de recherche et d’innovation à ce niveau. Le menu de Google Nexus en est un bon exemple.

Lorsqu’une solution intéressante émerge, il a des chances pour qu’elle devienne une source d’inspiration, voir une tendance. Je pense en avoir décelé une : le menu en plein écran (ou fullscreen menu in English).

L’héritage du design mobile laisse plus de place au contenu, le menu passe au second plan même sur les versions “desktop”. L’utilisation de l’icône “burger”, appelée aussi “navicon” (très marrante à animer), est devenu un standard pour afficher et masquer la navigation.

C’est fou ce que l’on peut faire avec seulement trois petits traits !

Sur les grands écrans, il est presque courant de voir un menu qui s’affiche à gauche ou à droite (comme Squarespace); cela fait toujours son petit effet. Cette technique a évolué, l’espace du menu limité sur un côté s’étend pour prendre désormais tout l’écran!

Le menu plein écran

Cette tendance du Fullscreen Menu a plusieurs avantages. La structure de la page web s’allège, il y a plus de place pour le contenu et également pour le menu. On peut ainsi travailler la mise en page de l’un et de l’autre indépendamment. Un gain de liberté appréciable pour nous les designers.

Assez de bavardage, passons à l’image.

Square

Fullscreen

Huge

Fullscreen

Hughes Leahy Karlovic

Fullscreen

Reach Partners

Fullscreen

Brooklyn Bridge Park

Fullscreen

Serge Thoraval

Fullscreen

Techniquement, il n’est pas très compliqué de réaliser une telle navigation (voici un petit tuto — merci Arnaud).

Ces menus semblent bien apprécier Javascript. Peut être même trop, cf. l’exemple suivant :

Mobee

Fullscreen menu

N’oubliez donc pas de faire une alternative sans JS et pensez à l’accessibilité (c’est indispensable).

Ce système de navigation peut être adapté pour un nombre restreint de liens. Dans le cas contraire, il faut presque développer un nouveau site pour le menu (inception!? Un site dans un site!).

Portfolio by Pavel Proshin


Plasticbionic

Rien que pour le plaisir

Vous en voulez encore ?! Voilà d’autres exemples de sites web avec un fullscreen menu.

Not Complex


Gaétan Pautler


Southpaw


Ekwip


Threadslike

Alors heureux(se) ?

  • Que pensez-vous de ces grands menus ?
  • Avez-vous d’autres exemples intéressants ?

20 commentaires

Laisser un commentaire :

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*