Les tendances du Webdesign

 

LE

WEB

 

 

DESIGN

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

DÉFINITIONS

 

Le webdesign est l’association des mots « web » et « design » (« toile » et « dessiner ») qui sont deux domaines de création technique et artistique.

Le World Wide Web, communément appelé le Web, est un système hypertexte public fonctionnant sur Internet. Le Web permet de consulter, avec un navigateur, des pages accessibles sur des sites.

Le design, ou design graphique dans notre cas, est une discipline qui consiste à créer et utiliser des éléments graphiques (dessins, caractères typographiques, photos, couleurs, etc.) pour élaborer un objet de communication. Le graphisme a pour but de mettre en avant de l’information sous la forme de contenus visuels afin d’attirer et de mieux la faire comprendre.

Le webdesign consiste donc à transmettre de l’information sur le support internet. Le webdesigner est normalement la personne en charge de la conception de sites web au sein d’une agence de création. Il travaille notamment sur l’arborescence et la navigation du site, sur le respect ou la création de la charte graphique, sur l’univers graphique et visuel et s’assure des qualités d’ergonomie et d’usabilité du site. On peut le considérer comme un architecte web.

QUEL EST L’OBJECTIF DU WEB DESIGN ?

 

Le Web design doit remplir plusieurs objectifs.

 

1/ Mettre en place une esthétique

Équilibre des espaces et des textes, cohérence des couleurs et de la typographie, pertinence de l’iconographie, hiérarchisation de l’information).

2/ Améliorer l’expérience utilisateur

Transmettre des informations et créer des sensations visuelles, auditives et des émotions qui permettent à l’utilisateur de vivre une expérience interactive.

3/ Renforcer l’ergonomie

L’ergonomie d’un site sera renforcée par son graphisme afin d’en améliorer son utilisation. L’emploi d’icônes ou de boutons d’actions renvoient de manières intuitives à des fonctions du site et en facilitent l’interaction avec l’utilisateur. De même le choix des couleurs, de typographies, et de tailles de polices permettent la hiérarchisation de l’information et garantissent un meilleur flux entre l’interface et l’internaute.

4/ Donner de la valeur ajoutée

La qualité et les finitions d’une interface bien structurée graphiquement transmet une impression positive et un sentiment de fiabilité. L’être humain est très sensible à l’apparence : c’est en se basant uniquement sur le contenant (web design) et non le contenu que l’utilisateur décide dès les 5 premières secondes de continuer sa navigation, ou pas.

Ainsi, la fiabilité de la forme (le contenant) a un impact immédiat sur la fiabilité du fond (le contenu). Soigner le webdesign, notamment sur la page d’accueil, transmet une image professionnelle qui rassure l’internaute et capte sa confiance.

5/ Transmettre le message

Dans la stratégie marketing, une entreprise définie un message (publicité) que le design doit communiquer clairement.

 

 

HISTORIQUE DU WEB DESIGN

 

                

 

Voyez l’évolution du web design en temps réel : evolutionoftheweb.com

 

A partir de 1992, le design web évolue. Le web design est alors influencé par l’évolution des langages, les tendances graphiques, la technologie (navigateurs, moteur de recherches et systèmes d’exploitation), la politiques et les normes et le matériel (vitesse de connexion, taille des écrans etc.). Du gif au flash en passant par le html, faisons un retour sur les modes adulées puis souvent délaissées par les web designers.

 

1992 – 1995

 

1992 : Naissance du HTML (puis 1993/1994 Mosaic puis Netscape)

1994 : W3C

1995 : Naissance des tableaux (pour le code, imbrication de tableaux)

1995 : Java script

 

Au départ, les premiers designs Web ne possédaient pas de grille graphique, le contenu s’étendait sur une seule colonne : les sites web ressemblaient à des pages de traitement de texte basiques, sans mise en page. Puis, l’apparition des sites web à plusieurs colonnes va permettre le développement du web design dans la mise ne page et la navigation. En fait, le design était pensé en fonction de ce que permettait le HTML. Au milieu des années 90, les tables deviennent l’outil par excellence de mise en page et offrent la possibilité de créer des designs à plusieurs colonnes. L’apparition du Java va dynamiser le html mais aussi faire apparaitre les pop-ups.

 

1996 – 1999

 

1996 : Le Flash (1996 – 2007 : Apple signera son arrêt de mort en le rendant incompatible avec son iPhone)

1998 : CSS + PHP3

1998 : naissance de Google

 

Période du « M’as-tu vu ». L’apparition du Flash, symbole de liberté, autorise toutes les formes, toutes les polices, toutes les animations. À travers tous les sites consultés on ne parle que d’un envahissement de « GIF animés », « applet Java », balises typographiques telles que marquee et blink. Le constat, beaucoup d’interfaces Web n’étaient qu’éléments dansants partout sur la page ce qui donnait souvent des sites pleins de gadgets, mais sans contenu. Puis l’arrivée du CSS avec des feuilles de code en cascade permettra de séparer le contenu et sa mise en forme. Le PHP, Hypertext Preprocessor , langage de programmation libre permettant désormais de produire du web design dynamique gagne en popularité grâce au PHP3.

 

2000 – 2005

 

2000 : Deuxième version de Javascript, supportée par la quasi-totalité des navigateurs en 2002

2000 : Internet explorer devient le premier navigateur web (97%)

 

Bien que née quelques années plus tôt, c’est au début du millénaire que la technologie CSS sera réellement utilisée. Elle permettra aux designers de penser autrement leur grille graphique et de mettre à jour les éléments plus efficacement. En utilisant CSS, le design des éléments d’une page (arrière-plan, couleurs, taille du texte etc.) peut désormais être défini dans une feuille de style séparée de la page HTML. La navigation redevient en texte, elle qui était sur la majorité des sites, écrasée en images.

 

Tendances :

  • La navigation à l’aide de menu déroulant ;
  • La montée du JavaScript pour la mise en page et l’animation d’éléments graphiques ;
  • Ergonomie et homogénéité de l’emplacement des éléments graphiques pour faciliter la lecture à l’écran.

 

2005 – 2009 : Web 2.0

 

2006 : Apparition des réseaux et médias sociaux, annoncent le Web 2.0

2007 : Grilles et Frameworks

 

La conception graphique se centre sur l’utilisateur : c’est le Web 2.0. Grâce aux blogs et développement des réseaux sociaux / communauté, l’utilisateur devient acteur et fourni du contenu. Les techniques sont simples et permettent de reproduire les effets les plus populaires. Puis, les grilles et les colonnes répondent au besoin de s’adapter aux écrans. Les frameworks tels que Boostrap industrialisent le développement en standardisant certains éléments (navigation, boutons, formulaires…).

À la fin des années 2000, la conception de sites Web commence à se tourner vers le contenu interactif dans les applications Web. Avec le web 2.0 les designers font un usage intensif du javascript asynchrone pour lisser les transitions de contenu et le développement d’applications. En design web, on met désormais plus l’accent sur la publication de contenu que la simple vente de produits.

 

Tendances :

  • L’espace blanc, nouvelle tendance sobre et élégante (Apple lance la tendance épurée).
  • Années du Skeuomorphisme : effets photographiques, de dégradés et de réflexions

 

2009 – 2012 : le mobile web

 

2009 : l’accès mobile à Internet dépasse pour la première fois l’accès ordinateur

2010 : Le Responsive Webdesign

2010 : Le flat

Depuis 2009, de plus en plus de sites Web sont aussi pensés en versions mobiles alternatives. C’est le responsive design. L’idée est de proposer les mêmes contenus en adaptant l’affichage aux écrans. Les sites mobiles contiennent l’essentiel du site Web habituel, qui fournit des contenus phares aux utilisateurs et des fonctionnalités mobiles formatées pour être affichées sur leur appareil. La navigation est minimale et réduite aux zones les plus importantes du site. L’essor des Smartphones et des tablettes contribue à la popularité du « mobile web ».

 

Tendances :

  • Les grandes icônes : tendance venue de la popularité des icônes de Mac OS X.
  • Flat Design : la simplification des éléments graphiques correspond à la volonté d’une meilleure hiérarchie visuelle et de concentrer l’effort sur la qualité du contenu.
  • Les barres latérales : Après l’explosion massive des menus horizontaux dans l’en-tête des sites web, les designers se tournent tranquillement vers de nouvelles barres verticales pour porter le menu de navigation principal et le logo.

 

Depuis 2012

 

2012 : WebGL

2014 : HTML5, CSS3

2014 :  Le Material design

2014 : Google glass et Apple Watch

 

De nouveau support mobile apparaissent (Google glass et Apple Watch), c’est la création de nouveaux champs d’application et nouvelles interfaces. Les tendances des dernières années tendent à faire évoluer le web de manière commune. Ces tendances poussent le niveau général de compétences toujours un peu plus loin.

L’apparition d’interface de 3D dynamique intégrée et supportée démocratisé par le WebGL ouvre d’autant plus le champ de création Web. Le WebGL est une interface de programmation de 3D dynamique pour les pages et applications HTML5. Aussi, le HTML 5 gagne en popularité en tant qu’alternative efficace au flash ou aux lourdes images graphiques et au développement d’applications.

 

Tendances :

  • Les menus fixes : Avec l’avènement des effets de parallaxe et des sites basés sur une page, la navigation devient de plus en plus fixe. Dans ce design, c’est le contenu qui est animé autour d’une navigation fixe. Cette tendance s’inscrit dans une logique d’adaptation aux mobiles et notamment aux tablettes.
  • Les illustrations vectorielles 
  • Parallaxe : Lorsqu’il est utilisé correctement, il peut en résulter une expérience utilisateur riche et engageante à la navigation sans faille.
  • Navigation immersive : optimisation de navigation : le moins de clics possibles, un accès à l’information rapide, évident, efficace.
  • La sobriété : le principe K.I.S.S. (Keep It Simply and Stupid) est le mot d’ordre pour ne pas perdre les utilisateurs dans l’interface, garder un site clair et facile d’utilisation.

 

 

ANALYSE DES TENDANCES

 

 

Les in

 

1 tendance Minimaliste

 

  • Le style suisse (ou style international) version webdesign

Parfois jugée froide et autoritaire, la rigueur du style suisse a fait son grand retour au cours des années 2000. Ce style fonctionnel et esthétique met l’accent sur le dépouillement, la lisibilité et l’objectivité. Les incontournable d’une mise en page style international sont une mise en page asymétrique, l’utilisation de grilles, de polices de caractères sans-serif. La typographie, en plus de son utilisation pour le texte, est le plus souvent l’élément principal et structurant du design. Aussi, on préfère le contraste noir/blanc en aplats et les couleurs primaire ou encore l’utilisation de photographie à l’illustration.

Le style est intéressant avant tout pour son efficacité. « Less is more » : Sobre, élégant il est symbole de modernité et d’universalité. Tout se joue dans la composition et dans la maîtrise de sa mise en page. Cependant, une mauvaise utilisation de ce style peut rendre la composition austère, pauvre et peu engageante.

Exemple : cropmark.lu

Contre-exemple : uglytub.com

 

  • Le flat design

Le flat design, « design plat » en français, est un style graphique sous-genre du courant minimaliste. Il se caractérise par des formes simples, sans textures, ni effets de volumes. Les couleurs, souvent vives sont utilisées en aplats. Il ne propose donc aucun effet 3D, ombragé ou encore aucun élément décoratif et chargé. Le flat est connu pour avoir démocratisé l’illustration vectorielle, souvent géométrique et minimaliste.
L’interface du système d’exploitation Windows 8 est une des premières interfaces à proposer ce flat design. Les boutons sont représentés de manière très simples voir minimalistes, sans effet ombragé ou de décoration.

Le flat design propose moins d’éléments perturbateurs pour le cerveau de l’utilisateur, grâce à sa souplesse dans l’évolution de la charte graphique. De plus, le style est parfaitement en adéquation avec les perspectives d’évolution du web et notamment le responsive design.

Exemple : nikolakeavy.com ; bitlocation.com ( + cf tendance n°2 “Les couleurs fluos”)

 

  • Le material design

AA

AA

AA

AA

Le Material Design est plus qu’une esthétique, qui d’ailleurs se rapproche de l’esthétique du flat avec cependant une épuration moins radicale. C’est un ensemble de règles de design proposées par Google et qui s’appliquent à l’interface graphique des logiciels et applications. Le material design permet une expérience unifiée entre les différentes plates-formes et les différentes tailles d’appareil en intégrant le toucher, la voix, la souris et le clavier comme des méthodes d’interaction fortes.

La notion de hiérarchie entre les éléments est aussi fondamentale. La relations entre les objets, leurs échelles, leurs couleurs créer du sens et focalise l’utilisateur sur une interface, une image, un système. Aussi, le mouvement renforce l’expérience utilisateur est considéré comme le moteur principal. L’accent a donc été mis sur les actions des utilisateurs : l’utilisation du produit web ou mobile doit être fonctionnelle, immédiate et visuelle.

Le material design a cet énorme avantage de résoudre les problématiques du design contemporain (problématiques d’espace, de support, d’interaction, de technologie, d’utilisateurs, etc.). Cependant, le material design est le design de Google, c’est tout à chacun d’en utiliser les principes en sachant s’en détacher.

 

 

ATTENTION au minimalisme à outrance, preuve de manque d’indication. Le minimalisme a toujours été risqué : quand on le maîtrise mal, on peut vite tomber dans l’excès du minimaliste et de faire trop minimaliste sans raison. Minimalisme et simplicité ne sont pas la même chose : un site simple permet d’aller à l’essentiel et réduit la ‘friction’ web. Parfois, trop de minimalisme apporte un manque de clarté et peut entraver l’expérience utilisateur. On ne fait pas minimalisme gratuitement, celui se doit d’avoir une fonction.

 

 

2 Retour aux couleurs fluo : modernité et undergrOund

 

De plus en plus, les réalisations des graphistes ont tendance à présenter des airs de famille. On assiste au retour des couleurs fluos, presque « techno » de la fin du XXe. Le fluo fait son grand retour et est subtilement utilisé pour apporter une touche de couleur et de fraîcheur à votre production graphique. Représentant désormais la modernité, le fluo a aussi ce petit côté underground à l’effet accroche-regards garanti.

Exemples avec : chocolat.insipi.despystudio.co.uk

 

 

3 expériences cinématiques : Le webgl et la gamification

 

A l’image du story-telling, de nouvelles méthodes de communication fondées sur une structure narrative se développent. Intégrant de l’animation, de la vidéo, des jeux ou de l’illustration, cette tendance est utilisée par les graphistes pour améliorer l’expérience utilisateur. Explications.

 

  • Le WebGL

De plus en plus de larges vidéos introduisent les sites web grâce à des animations liminaires ou occupent la totalité du fond d’écran des sites web. Cette tendance devenue populaire se développe avec WebGL. Le WebGL permet les calculs et le rendu 3D à l’aide des processeurs graphiques du terminal informatique (Ordinateur, smartphone, tablette numérique, etc.) Il permet de rendre des animations interactives de sorte à créer une expérience cinématique immersive sur le net. Ces animations sont intégrées aux pages pour les rendre plus vivantes et engager les utilisateurs de manière plus subtile.

Exemples : bigyouth.fr ; wonderlandindustry.com ; clarity.io

 

  • Gaming

Gamifier signifie « appliquer les principes et éléments de design de jeux vidéo dans un autre contexte que celui des jeux vidéo ». L’objectif ici est d’accroître l’engagement utilisateur. Afin de marquer l’esprit de l’utilisateur, on rend le site web comme une plateforme amusante et interactive, un jeu dans lequel l’utilisateur va devoir prendre part et s’investir. On voit également la gamification émerger sur les sites d’apprentissage en ligne, pour les langues étrangères ou sur l’histoire.

Cette tendance est une évolution dans le web design qui profite directement à nous, designer graphique. Elle prouve un intérêt grandissant pour l’expérience utilisateur et une création graphique web plus expérimentale.

Exemple : gemstones.elespacio.net

 

 

4 Nouveaux types de menus

 

La tendance est là, supprimer tout simplement le menu. Plus besoin de dire aux utilisateurs comment naviguer sur un site internet. Ils connaissent le principe du défilement et s’en serviront instinctivement jusqu’à ce qu’ils trouvent l’information qu’ils cherchent. Certains graphistes ont donc choisi de supprimer presque entièrement les menus et de laisser les utilisateurs évoluer librement. Ce qui à son tour, donne plus d’importance au défilement vertical, mais aussi horizontal. Avec le responsive design, le design à des l’impact à « 360 degrés ». Le site devient une plateforme de navigation plus libre qui s’adapte aux multiples appareils, formats, interfaces etc.

Exemples : shiz.co ; flavinsky.com ; ruya.ae

 

Les out

 

 

1 LE LONG SCROLLING

 

Le long scrolling est une tendance amorcée en 2015 mais qui se confirme de plus en plus. Cet effet permet de donner un maximum d’information sur une seule page. L’internaute n’a plus besoin de naviguer entre les différentes catégories du menu et ne se perd plus dans les multiples rubriques du site. Cependant cette tendance peut vite perdre l’utilisateur qui n’en finit pas de scroller pour trouver une information. Loin d’être la plus pratique, cette option peut même parfois s’avérer agaçante et inadaptée, faisant plutôt étalage du site et positionnant l’utilisateur dans un état contemplatif.

 

 

2 Les carrousels

 

S’ils se font bien plus rares de nos jours, on retrouve tout de même des carrousels sur de nombreux sites. Mais pourquoi les carrousels sont-ils à éviter ? Principalement parce que personne ne clique dessus et qu’ils rendent le contenu difficile à trouver pour les internautes. Lorsqu’un internaute cherche un contenu en particulier, il ne peut pas le lire à cause du défilement automatique du carrousel. En bref, les carrousels distraient et perdent l’internaute. Concrètement parlant, cela ne veut pas forcément dire d’oublier totalement les carrousels. Mais il ne faut pas compter sur eux en matière de conversion et éviter un défilement automatique trop rapide.

Exemple : headhunterhairstyling.com

 

 

3 L’effet Parallaxe à outrance

 

L’effet Parallaxe est un effet webdesign sublime entre les mains d’un professionnel. L’effet Parallaxe signifie que, lorsqu’un internaute défile une page vers le bas, l’image de fond reste fixe ou défile moins vite que le contenu. Si cet effet visuel est utilisé avec goût et parcimonie, il permet d’ajouter une certaine profondeur de champ sur un site. Mais il est maintenant inclus dans de nombreux thèmes WordPress. En somme, il est utilisé à outrance, partout, pour tout. Avant tout l’utilisation de l’effet parallaxe se doit d’être pertinente : trop présent il peut poser des problèmes d’utilisation significatifs ou même un sentiment de nausée par rapport aux mouvements.

 

 

4 Le menu Hamburger sur ordinateur

 

Le menu Hamburger est le nom que l’on donne à cette icône représentant 3 barres horizontales. En cliquant dessus, l’internaute déroule le menu.

Sur mobile, ce type de menu fait sens : discret, il ne prend pas de place inutilement et les mobinautes le reconnaissent à présent sans problème comme étant le point d’entrée du menu. Il n’y a rien à redire sur cet aspect-ci. En revanche, sur la version du site prévue pour être visitée à partir d’un ordinateur, c’est à é-vi-ter. Beaucoup s’y sont essayé, sans doute dans un désir de design minimaliste et de clarté. Ce type de menu est connu pour :

  • Entraver l’engagement utilisateur
  • Réduire l’accessibilité au contenu

C’est totalement contre-productif en la matière. Les internautes sont ainsi “forcés” de cliquer une fois de plus dès qu’ils veulent atteindre une section du site. On voit ainsi que le menu Hamburger vient inutilement ajouter un clic.

  • Être moins efficace (tant du point de vue de l’utilisateur que de celui du développeur)
  • Manquer de « cachet »

 

 

Les classiques à éviter

 

  • Trop de couleurs/ trop de polices d’écriture sans raison apparente. Exemple avec lingscars.com
  • Mauvaise hiérarchie des informations, pas de grille de mise en page, effet “catalogue”. Exemple avec roverp6cars.comarngren.net
  • Les photos issues de base d’images gratuites. Exemple avec arrestling.com
  • Mauvaise utilisation de l’esthétique des débuts d’internet (clips-arts, gifs à outrance etc.). Exemple avec serene-naturist.com

 

Avis personnel : la tendance à suivre de près

 

Esthétique des années 1990 / 2000

Sobriété radicale -presque austère- ou alors kitsch et esthétique vernaculaire, les années 2000 sont à la mode en 2017.

La mode, un éternel recommencement ? Cela se pourrait… De plus en plus nous observons au seins du design graphique un retour à l’esthétique des années 1990/2000 : les touts débuts du web. La génération d’aujourd’hui se tourne vers ce qu’elle a connu étant enfant ou ado : les années 1990/2000.

Illustration de cette tendance : le retour du gif animé. Un gif peu aisément illustrer un article, une présentation, une infographie avec un visuel animé d’une durée très courte, léger au chargement, et qui tourne en boucle. Il permet ainsi d’avoir l’information directement liée à l’animation, le tout sans être obligé de lancer une vidéo. Plus simple qu’une vidéo, léger au chargement : le gif est un nouveau moyen de présenter ses maquettes ou ses concepts graphiques. Autre tendance : le Word Art. A l’origine petite option « dessin » proposée par Microsoft Word, le Word Art survit, et les graphistes s’y intéressent même. Malgré peut être un pointe de nostalgie aux arômes de culpabilité, le WordArt reste réutiliser pour sa force formelle vernaculaire et amusante, presque moqueuse, comme un « faux » retour à une époque de liberté créatrice où l’esthétique web n’était encore pas tant codifiée qu’aujourd’hui.

Exemple : theissuemagazine.com

 

 

 

EN RESUME

Conseil pour avoir un web design réussit

 

  • Structurez
  • Animez
  • Attisez la curiosité avec des pages liminaire ou cinématiques
  • Insufflez de la vie avec les GIF et le Parallaxe
  • Micro-interactions = méga-engagement
  • Provoquez la police (de caractères)
  • Attirez le regard avec des visuels décomplexés

 

SOURCES :

http://detailformation.com/marketing/20-ans-de-design-web-levolution-et-les-grandes-tendances/

https://choblab.com/web-design/levolution-du-web-design-des-annees-90-a-nos-jours-3500.html

https://choblab.com/web-design/petite-histoire-illustree-du-web-design-9828.html

Leave a Reply

Your email address will not be published. Required fields are marked *