Notre blog

D For Design – Le full screen est-il mort ?

DND-Bannière-Full-Screen

Oui. Enfin… non. Du moins, pas comme vous l’imaginez.

Par Thomas, UX/UI Designer à l’Agence Dn’D

Bienvenue dans le tout premier article de notre série D for Design.

D for Design vient d’une volonté, celle de créer un rendez-vous permettant aux designers de tous horizons de découvrir de nouveaux points de vue et de nouvelles approches de la créativité, d’éclairer les plus jeunes d’entre nous sur les challenges de nos métiers et d’inviter à la discussion afin d’élargir nos courants de pensées.

L’équipe derrière D for Design est constituée de designers de l’Agence Dn’D spécialisés dans l’UX et l’UI. Dn’D et son pôle Design vous accompagnent dans toutes les étapes essentielles pour une charte graphique réussie et sur mesure. Notre équipe artistique, créative et expérimentée saura vous conseiller sur les meilleures pratiques ergonomiques et sur les tendances du moment pour un site E-Commerce performant, à votre image et dont vous serez fier.

Alors le full screen est-il mort ? Répondre à cette question ne peut pas être aussi simple que oui ou non. Et certains d’entre vous se demandent sûrement déjà, « mais qu’entend Dn’D par full screen ? ». À cette question nous pouvons répondre simplement. RWD (Responsive Web Design).

Responsive Web Design

Là tout le monde sait de quoi nous parlons donc nous n’allons pas vous faire l’affront de vous l’expliquer. En revanche, nous pouvons vous raconter comment il a vu le jour.

Que faisiez-vous le 25 Mai 2010 ? Petit indice, c’était un mardi. Vous ne savez pas ? Nous vous rassurons nous non plus. En revanche ce que nous avons c’est qu’à cette date Ethan Marcotte, un web designer et web développeur américain, publiait l’article « Responsive Web Design » et posait par la même occasion les fondations de cette approche.

Les fondations d’un bâtiment définissent sa prise au sol, qui définit sa structure, qui façonne la façade. Les décisions créatives façonnent littéralement un espace physique, définissant la manière dont les gens se déplacent à l’intérieur de celui-ci pendant des décennies, voire des siècles.

Ethan Marcotte

DND - Café de la Paix - 1990 à aujourd'hui

Café de la Paix depuis Place de l’Opéra dans les années 1900 et de nos jours
(Source : Paris Zigzag)

Dans son raisonnement, Ethan opposait l’architecture qui est conçue pour durer dans le temps, au web qui est beaucoup plus court-termiste du fait de l’évolution rapide des technologies et des usages.

En effet à cette époque, le nombre grandissant de résolution d’écran, l’augmentation de la navigation mobile par rapport à celle sur ordinateur ont poussé Ethan à imaginer un nouveau modèle.

Et c’était dans l’article « A Dao of Web Design » écrit en 2000 par John Allsopp que la solution se trouvait.

Il fallait que le web soit flexible.

La plus grande force du web, je crois, est souvent considérée comme une limitation, comme un défaut. La nature du web est d’être flexible, et notre rôle en tant que designers et développeurs devrait être d’embrasser cette flexibilité, et de produire des pages qui, en étant flexibles, sont accessibles à tous.

Ethan Marcotte

DND - Responsive GIF

Crédit photo : Froont

N’en dites pas plus à Ethan. Une grille fluide, une conception réactive et quelques media queries plus tard, le Responsive Web Design était né, et quelques années plus tard, le full screen. Ou plutôt la mode du full screen.

La mode du full screen

La mode du full screen, ou plein écran, consistait à utiliser toute la surface d’affichage pour une photo ou même une vidéo. Peu de contenu y était associé, généralement juste le logo de la marque, une phrase percutante et la navigation, voire même juste un menu burger.

Vous vous en doutez, cette mode n’est pas apparue d’un seul coup. Et c’est intéressant de voir comment le développement du Responsive Web Design à entrainé l’effet de bord qui petit à petit à permis au fullscreen de s’installer dans les design trends que l’on voit fleurir tous les ans.

DND - D for Design

Source : Awwwards – Crédit photo : Vimeo

Rapide rétrospective :

  • 2010 – On peut voir de plus en plus de sites web utiliser de grandes images pour attirer les utilisateurs et créer une expérience immersive. Mais cette pratique est encore très niche car bien que l’ADSL soit largement déployée, le poids des images est encore trop important par rapport à leur résolution.
  • 2011 – On annonce la mort du fold, vous savez la ligne de flottaison, car la trop grande diversité de taille et de résolution d’écran le rend difficile à placer.
  • 2012 – Le Responsive Web Design se démocratise et de plus en plus de sites adoptent cette approche.
  • 2013 – Poussé par l’augmentation de la navigation mobile, le Responsive Web Design devient mainstream. Avec la possibilité d’utiliser l’intégralité de l’écran, les designers y voient l’opportunité de créer une expérience cinématographique.
  • 2014 – Le Responsive Web Design est maintenant la norme. Les temps de chargement n’ont jamais été aussi courts et l’accès à des visuels haute définition est devenu plus abordable financièrement.
  • C’est finalement en 2015 et grâce à la combinaison de tous ces éléments que la mode du full screen a pu s’imposer. Mais comme pour toutes les modes, cela va parfois trop loin et le public se lasse.

 
Alors vous nous direz c’est intéressant de savoir d’où vient cette mode et comment elle s’est développée, mais ça ne répond pas à la question :

Le full screen est-il mort ?

Oui.
Par rapport à ce qu’il était en 2015, le full screen est mort. Aujourd’hui il est rare de voir un site montrant une photo ou une vidéo sur l’intégralité de la surface affichable. Même si certaines marques le font encore comme Samsung ou Adidas, la plupart des grandes entreprises internationales n’utilisent plus cette façon de se montrer.

DND - évolution home page Nike

Évolution de la home page Nike de 2015 à 2021.

Mais tout comme le fold n’est pas mort, le full screen est lui aussi toujours vivant. Il a su évoluer à travers les années pour prendre une nouvelle forme. Si nous revenons à la naissance du RWD (Responsive Web Design), Ethan Marcotte citait ceci en introduction :

Le contrôle que les designers connaissent dans le support imprimé, et qu’ils souhaitent souvent dans le support web, est simplement fonction de la limitation de la page imprimée. Nous devrions accepter le fait que le web n’a pas les mêmes contraintes, et concevoir pour cette flexibilité.

John Allsopp

Et c’est exactement ce que les designers ont fait.

Années après années, ils ont su s’adapter aux nouvelles possibilités que leur offraient le médium web. Au début, les sirènes du full screen ont fait plonger tout le monde dans cette mode. Jusqu’à aller trop loin en perdant l’utilisateur dans des sites trop conceptuels où l’interactivité était sacrifiée sur l’autel de l’immersion .

Mais aujourd’hui l’expertise des designers à utiliser cette importante surface d’affichage est devenue une opportunité. Tout d’abord pour replacer l’utilisateur au centre et enrichir son expérience, mais aussi un formidable terrain d’expression artistique pour les marques.

Conclusion

Finalement le cœur du problème n’est pas la mode du full screen en tant que telle car à son époque elle a constitué une réelle évolution de nos mises en page comme l’ont pu être également les sliders ou les masonry.

Le vrai sujet ici, c’est le concept même de mode, de tendances et à quel point elles peuvent constituer un piège pour les créati·fs·ves.

Alors comment les concepts de mode et de tendances peuvent constituer un piège pour les créati·fs·ves ? Pour répondre à cette question, rendez-vous dans le deuxième numéro de D for Design – Le piège des tendances !

Nous espérons que cet article a été intéressant pour vous et qu’il a nourri votre curiosité.

L’Agence Dn’D se tient à votre disposition pour vous accompagner dans le conseil, la conception, le design UX/UI et la maintenance de vos sites E-Commerce. N’hésitez pas à nous contacter via le formulaire ci-dessous !

Un projet ?

Contactez-nous !



Laisser un commentaire

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