Dès la fin des années 1980, en voulant créer une base de données pour les chercheurs du CERN leur permettant de trouver et d’échanger des informations rapidement, Tim Berners-Lee et son équipe ont inventé ce qu’on appelle aujourd’hui le World Wide Web (“WorldWideWeb: Proposal for a HyperText Project” – 12 novembre 1990) en utilisant le concept d’hypertexte, fondement du Web. Ce concept a été inventé dans les années 1960 par le sociologue américain Ted Nelson dans son projet Xanadu (projet original de l’hypertexte), dans lequel il imagine “une machine qui permettrait de stocker des données et de les mettre à disposition de tous, partout”.

Les premières interfaces web

Les premières interfaces web n’étaient constituées que de texte et de liens hypertexte (ce qu’on appelle le HTML : Hypertext Markup Language). Il faut comprendre qu’au départ, le but du web était de mettre à disposition des milliers de documents liés entre eux. On ne pensait pas encore à la construction d’une interface web graphique. Vous pouvez voir ci-dessous un exemple du premier site web mis en ligne par le CERN :

Il faudra attendre le 11 novembre 1993 pour connaître le premier navigateur web doté d’une interface graphique : Mosaic 1.0 conçu et développé par deux étudiants de l’Université de l’Illinois.

Cette même année, on voit apparaître le concept de “landing page” introduit pour la première fois par MTV sur son site web. Cette page mettait sûrement plusieurs dizaines de secondes pour charger mais cela marque tout de même le début de l’utilisation des images sur le web.

La naissance du W3C : des standards à appliquer

En 1994 est né le W3C : le World Wide Web Consortium. Cet organisme international à but non lucratif, fondé par Tim Berners-Lee, a été créé dans le but d’uniformiser le contenu sur le web en mettant en place des standards à appliquer concernant les langages à utiliser ou encore les mises en formes préconisées.

La même année sort le navigateur Netscape venu concurrencer Mosaic. Beaucoup plus riche en termes de fonctionnalités graphiques, Netscape a littéralement écrasé son concurrent. En effet, c’est Netscape qui a introduit notamment les GIF (“format d’images numériques permettant de créer des images animées” – Le Robert), la mise en forme du texte mais surtout la première manière de mettre en forme une page web : les tableaux. Cette manière de construire les interfaces a été adoptée par la majorité des sites web dès 1995. Vous pouvez voir deux exemples ci-dessous :

1995, le début du contenu interactif

Cette année-là sort également le langage de programmation Javascript. Ceci marque le début du contenu interactif sur le web qui n’était jusque là que statique.

Entre 1996 et 1999, le langage CSS (Cascading Style Sheet – Feuilles de style en cascade) a été développé par le W3C. Cette nouveauté constitue un grand changement dans la manière de coder une page web puisque l’on va maintenant pouvoir séparer le style du contenu textuel (HTML). C’est ce qui a posé les bases du webdesign que l’on connaît aujourd’hui.

A ce moment-là, les images avec des bordures arrondies sont très tendance (même s’il n’est pas encore possible de le faire avec le langage CSS), l’utilisation des tableaux est devenue un standard, on utilise Javascript et Flash pour des animations de page et on peut même voir le début de contenus imitant la 3D.

Dans la même période, Google est arrivé sur le marché en 1998. Ce n’était pas le premier moteur de recherche sur Internet mais grâce à son interface épurée (on repense à la loi de simplicité de la théorie de la Gestalt) et la pertinence des résultats proposés, il a su s’imposer notamment face à ALIWEB, étant graphiquement tout le contraire, c’est-à-dire ayant une page web chargée en termes de contenus (beaucoup d’options pour la recherche, des liens absolument partout) :

2000, l’arrivée de nouveaux formats

En 2000, le W3C annonce un premier jet de CSS3. Encore utilisé aujourd’hui et toujours en voie de standardisation, ce nouveau niveau de CSS simplifie le précédent et dispose d’encore plus de fonctionnalités graphiques, comme l’ajout de polices de caractères spéciales ou encore le fait de pouvoir arrondir les bordures.

Un an après, le W3C nous présente le format SVG (Scalable Vector Graphics – Image vectorielle) : c’est le premier format d’image vectoriel destiné au web. Il est écrit en langage XML et permet d’avoir de grandes images non pixellisées sans être trop lourdes pour les sites.

2003, l’ère du blogging et des sites dynamiques

En 2003 arrive l’ère du blogging et des sites dynamiques. Cette année-là, le CMS (Content Managing System – Système de gestion de contenus) WordPress a été créé. Grande révolution dans l’édition de contenus sur le web car il n’est plus nécessaire de savoir coder pour créer un site. De plus, on commence à voir apparaître des sites où l’on peut avoir un compte personnel, rester connecter avec ses amis et partager des contenus.

Un an après est introduit CSS Sprite. C’est une nouvelle manière de mettre en forme une page web concernant l’optimisation du poids des images. Le principe est que l’on regroupe plusieurs petites images dans une seule image et l’on utilise une propriété de CSS pour choisir quelle image afficher. Cette manière de coder permet d’économiser de la bande passante car on effectue moins de requêtes HTTP (permettant de charger l’image) ce qui a grandement augmenté l’utilisation des images dans les interfaces web puisque le poids de celles-ci a été considérablement réduit.

2007, finis les tableaux !

Quelques années plus tard, on assiste à un tournant majeur dans la conception des interfaces web : l’introduction de “CSS Grid Layout” en 2007 et de “CSS Flexbox” en 2009 du W3C venant marquer la fin de l’utilisation des tableaux. En effet, avec ces nouveautés, il a été possible de construire des interfaces avec des mises en formes plus complexes et donc plus personnalisées.

En 2009, on voit également pour la première fois un concept d’interface web se rapprochant d’un design minimaliste. Celui du géant de l’industrie agro-alimentaire Coca-Cola :

Dans les années qui suivent, on voit naître le “Responsive Web Design” (RWD) avec les “Media Queries”. Suite à l’apparition des terminaux mobiles, il a fallu créer des interfaces graphiques dédiées. Avant le RWD, il fallait créer un autre site web en plus du site pour ordinateur. Grâce au RWD, on peut créer un seul site et indiquer plusieurs affichages en fonction de la taille de l’écran.

En parallèle en 2010, Google lance son service d’hébergement gratuit de polices d’écritures Google Fonts qui introduit le concept de typographie stylisée dans le web design.

Depuis 2012, de nouveaux éléments de webdesign

Depuis 2012, lorsque Microsoft développe Windows 8 et lance le concept du “flat design”, ce style est repris sur beaucoup de sites web, encore aujourd’hui. Pour rappel, par opposition au skeuomorphisme, le “flat design” laisse tomber les détails, les ombres ou encore les effets 3D et laisse place à la simplicité, en se concentrant uniquement sur la fonctionnalité (prémices du design minimaliste).

En parallèle, on voit également apparaître les premiers effets de parallax : le fait de créer une illusion 2D en faisant bouger l’élément en arrière plan plus lentement qu’un élément au premier plan. Cela crée un véritable effet de dynamisme sur une page web.

A ce moment-là, en web design, on cherche de plus en plus de dynamisme et d’interactivité. C’est pourquoi 2014 est l’année de la 3D.

On voit de plus en plus d’interfaces utilisant la technologie WebGL, étant assez avancée, afin de créer des rendus en 3D grâce au langage Javascript. Je vous laisse cliquer sur les liens pour afficher directement les sites afin de voir en action les mouvements en 3D.

S’ensuivent les transformations, les transitions et les animations CSS qui amènent un effet de fluidité dans le dynamisme ainsi que des boutons et des menus responsive. Je vous laisse encore une fois cliquer sur les liens afin de visualiser les animations.

A partir de 2016, dans le prolongement du “flat design”, commence l’ère du design minimaliste. Ce nouveau style de design d’interfaces web s’inspire du mouvement de l’art contemporain minimaliste. Comme son nom l’indique, le but est de réduire le nombre d’éléments au minimum, c’est-à-dire se concentrer sur les éléments réellement importants.

On caractérise ce mouvement par le leitmotiv suivant : “Less is more” (Moins, c’est plus). Ce que l’on doit comprendre à travers cet adage, c’est qu’il faut se concentrer sur l’essentiel et renoncer au superflu tout en transmettant le maximum d’informations.

Appliqué au web design, c’est exactement le même principe. Dans le design minimaliste, on retrouve des interfaces simples, épurées, fluides, lisibles, en jouant notamment avec les espaces blancs (on repense aux lois de proximité et de simplicité de la théorie de Gestalt).

Dans cette nouvelle forme de web design, on retrouve deux critères essentiels à respecter :
– L’élégance en terme d’esthétique
– Une meilleure expérience utilisateur grâce à une ergonomie bien travaillée

Depuis 2017, avec la multitude d’outils mis à disposition, on voit toutes sortes d’interfaces web comme le fait d’utiliser la symétrie, des vidéos en arrière-plan, des effets 3D et de profondeur, des polices manuscrites ou encore de casser la mise en forme en grille que l’on connaît depuis 10 ans. Certes, il y a et il y aura toujours des tendances que l’on peut suivre dans le web design. Cependant, il n’y a plus vraiment de règles “prédéfinies” aujourd’hui, les graphistes et les développeurs peuvent totalement laisser libre cours à leur imagination et créer des interfaces web très hétéroclites. Découvrez notamment ce site web immersif : kategora.com.