Pourquoi Mona Lisa est-elle si jolie ?

Si la création d’une interface est une activité plutôt gratifiante et satisfaisante, il faut bien reconnaître que sous le feu de l’intégration, le designer peut parfois, souvent, être déçu du résultat. Pourquoi ? Parce que la maquette figée tout d’un coup s’intègre (mal) dans un contexte technique différent. La taille des écrans. Entre le mobile first, et l’iMac 27″ qui claque des pixels en veux tu en voilà, tout est pété. À qui la faute ? Il est assez drôle de jeter l’opprobre sur l’intégrateur, lui reprocher son manque de poésie. Pourtant, il me semble, que le seul, l’unique responsable soit le designer, qui, démarrant son ouvrage la tête dans le guidon, ne s’est pas posé les bonnes questions pourtant essentielles. Au même titre que Léonard de Vinci qui choisi son format de toile avant de talocher Mona Lisa, excusez du peu, j’assume la comparaison, le designer, doit lui aussi se poser la bonne question du format de toile.  Si Léo Vinci avait été footballeur, il aurait sans doute beuglé : « Mais cadre bordel, cadre ».

Haro sur le designer, jetons-lui donc des caillasses et considérons les cas suivants :

 

Brain Traffic

Site peu intéressant graphiquement. Banal. Le conteneur principal est limité à environ 980 pixels, tandis que quelques blocs horizontaux s’étendent sur toute la largeur disponible de l’écran. Histoire de meubler, quelques motifs graphiques assez peu intéressants viennent meubler. C’est propre, c’est pas foufou mais ça ronronne sur toutes les résolutions.

 

Stripe

Alors, ici c’est clairement plus intéressant. Le conteneur principal, ainsi que la nav sont également fixes (1080px). Toutefois, les différentes configuration d’écran ont été imaginées et magnifiées. D’imposants éléments graphiques remplissent la page et font écho au contenu éditorial. On ne meuble pas, on dynamise et on fluidifie la lecture. Il est également intéressant de noter que le designer ne s’est pas donné la peine de remplir toute la hauteur de sa page. Ce n’est pas nécessaire, l’utilisateur à imprimé le haut de la page dans sa rétine (c’est scientifiquement prouvé, je t’jure), et il peut scroller une page qui devient banale  tout en se disant « wow c’est beau ».

 

Tuam Children

Ici aussi c’est beau.  Pourtant le parti pris est différent. Clairement les grands écrans sont moyennement pris en compte mais ce n’est pas grave, parce qu’un large blanc tournant joue en faveur du contenu.  Un conteneur de texte limité à 650 px, et de large visuels guère plus large que 1280 px. Les images, animées, noir et blanc, et un texte noir parfaitement justifié. Sur desktop et tablette, rien à ajouter. Sur mobile, l’absence des marges blanche font défaut. Dommage.

 

Anchor et Orbit

Minimal. Bon sang que j’aime ça ! Trois fois rien et ça fonctionne. L’interface n’est pas transcendante, elle ne va pas changer la face du monde mais elle respecte l’utilisateur. Elle est sensible, et les aplats de couleurs remplissent toute la largeur. Le texte est aéré, la typo classe. Comme bien souvent nous avons un conteneur texte fixe, centré. Au scroll, Anchor et Orbit perd de sa superbe, et ça devient un peu le bwoadel quand même. Si si.
À noter la présence du logo dans le jumbo puis sa disparition lorsque l’utilisateur défile sa page. C’est malin, seul un léger filet de navigation reste fixe en haut de page.

 

Deezer

Loin d’être beau, Deezer gère malgré tout assez joliment les différents cas de figure du desktop au mobile. De larges visuels, dans le jumbo ou bien dans la descente de la page viennent animer l’ensemble. À noter, les différents paliers permettant à l’image du jumbo de rester centrée. Nous évitons ainsi les mauvais découpages :

  • 320 – 768 / mobile
  • 768 – 1140 / tablette et laptop
  • 1140 et plus / desktop

 

Réseau Coop

Chez réseau Coop on s’étale, on s’affale même. Toute la largeur de l’écran est utilisée. Pas de compromis. Et cela fonctionne plutôt pas mal. En effet, la homepage est constituée de briques, le tout en flottaison. Pas de place perdue…….

 

Protest

Du bon gros visuel pleine balle, avec une grille extensible. Il nous faut reconnaître que oui, ça fonctionne assez bien. Toujours dangereuses ces extensions de grille. Tout d’un coup les contenus se trouvent espacés de deux ou trois océans, et la lecture devient pénible. Protest a bien géré la chose parce que les médias se mettent à l’échelle de la fenêtre. J’agrandi mon navigateur, mon image s’agrandie également. Et puis, si l’écran est trop petit, les blocs de réassurances dégagent. L’organisation autour de grands blocs permet de réussir le pari du fullwith extensible. Bravo.

 

De ces constatations, il serait dommage d’en conclure une règle définitive. Faut-il contraindre, faut il étendre nos interfaces ? Il est certainement inconfortable de voir des créas s’étirer, se tordre, mais pour qui sait le gérer avec élégance, c’est aussi la démonstration d’une qualité de travail. Le sourire de Mona Lisa ne serait rien si De Vinci ne s’était pas donné la peine de peindre un arrière-plan que peu de personne ne remarquent.