Nouvelles tendances du graphisme web 

L'évolution des technologies, des services proposés sur Internet, et le passage au « web 2.0 » se sont accompagnés d'une évolution des standards du web design, une sorte de nouvelle école, probablement influencée à la fois par la simplicité et la légèreté de Google, et le look zen de Mac OS et de l'univers Apple en général. 

Cette nouvelle tendance graphique, dite simplement « graphisme web 2.0 » a évolué rapidement et a imposé des codes qui sont maintenant quasiment incontournables. 

Le web design n'a jamais été aussi bon et percutant, mais arrive paradoxalement à une limite, qu'il faudra savoir dépasser car tous les sites commencent à se ressembler, et qu'il devient de plus en plus difficile de différencier un graphisme d'un autre.

Globalement, le web design va vers une simplification du contenu et de la mise en page, de façon à focaliser l'attention de l'internaute vers les éléments les plus importants. En fait, on pourrait même aller jusqu'à dire que seuls les éléments vitaux sont conservés, et que tout le reste est soit totalement éliminé, soit au moins relégué hors de la page d'accueil, dans des pages de sous-niveaux.

Il convient donc de guider l'œil de l'internaute vers quelques éléments bien distincts, et de laisser respirer le reste du layout, en laissant apparaître la couleur de fond (bien souvent blanc ou gris pâle, mais parfois nettement plus sombre, selon l'effet désiré). Un vieux principe de web design préconisait de conserver au moins 60% d'espace blanc dans une page, pour ne pas gêner la lisibilité (alors qu'on estime cette même surface à 40% dans l'édition papier). Cette règle est plus que jamais d'actualité, et peut-être même faut-il revoir le pourcentage légèrement à la hausse.


C'est comme en musique : c'est le silence qui fait ressortir la note suivante. Pour le web design, c'est la façon dont vous organisez les espaces vides qui va faire ressortir les éléments de contenu.

Mieux l'espace vide est structuré, mieux vous guidez l'internaute vers les informations que vous souhaitez qu'il lise. Il est d'ailleurs probable que ce soit une des raisons du succès de Google, à ses débuts : là où Altavista et Yahoo proposaient des pages fourmillant de contenu, avec le champ de recherche en haut dans un coin, Google était très clair. Un titre aux couleurs pimpantes et un champ Rechercher. Pour le reste : du blanc. Et encore aujourd'hui, malgré la quantité de services proposés, l'interface reste d'une simplicité modèle (presque du minimalisme).


Comment créer la simplicité ? Il est amusant de constater à quel point certains designs s'inspirent (consciemment ou non) de l'univers de l'enfance et des jouets pour y parvenir. Réduire le nombre de points d'ancrage de l'information (quelques blocs de contenu bien visibles, répartis sur très peu de colonnes : on est loin de la structure des anciens sites portails qui affichaient sans complexe cinq ou six colonnes, sur 800 pixels de large), grossir les titres, les liens, les pictogrammes, et dynamiser à l'aide de couleurs très vives et contrastées. Certains designs rappellent ainsi les bons vieux jouets pour bébés avec leurs gros boutons, leurs grosses inscriptions et leurs couleurs primaires bien tranchées.


Pourquoi les codes visuels des jouets pour enfants ? Simplement parce qu'ils sont les plus simples, les plus attrayants, et qu'ils sont pensés pour amener directement les jeunes enfants à utiliser les objets comme ils doivent l'être.

Toujours dans cette optique de simplification, il faut noter que la navigation n'est presque plus jamais éclatée, comme c'était le cas avant, avec un menu horizontal en haut de page, un menu vertical sur la gauche, et parfois même un menu sur la droite. La navigation est contextuelle : le menu contenant les principales rubriques est placé en haut de page, horizontalement, et les noms des rubriques sont simples, de préférence courts, mais sans laisser de place à l'ambiguïté.

En entrant dans l'une des rubriques, occasionnellement, un menu de navigation peut apparaître sur la gauche. Là aussi, la simplicité est maîtresse : liens de couleurs vives, avec souvent un background coloré au passage de la souris, et noms des liens courts.

Voyons un peu plus en détail les différents éléments entrant dans la composition de cette nouvelle école de web design.

L'esprit de simplicité et légèreté, ainsi que ce côté attrayant et flashy propre au design des jouets enfantins, est construit tout d'abord, nous l'avons vu, par l'organisation des éléments de contenu au sein d'un espace vide qui les met en valeur.


Les couleurs et les formes jouent évidemment un rôle crucial dans la construction de ce type de graphisme. Des couleurs brillantes et contrastées attirent l'œil, et doivent agir comme un chemin balisé pour le parcours de l'internaute. Guidez-le. Divisez la page avec de grands aplats de couleurs franches, pas nécessairement criardes (bien que le rose fuschia, par exemple, soit fréquemment utilisé) : Apple, encore elle, joue avec des nuances de gris, blanc et noir sur son site https://www.apple.com/, et cela fonctionne très bien.

L'important étant de conserver une cohérence visuelle : si le blanc est votre couleur de fond, le mauve clair votre couleur d'aplat principale, vous pouvez vous permettre une troisième couleur pour trancher dans les deux autres (jaune brillant, par exemple), mais essayez de ne pas dépasser ce stade. Trop de couleurs saturées, et le site devient illisible, l'œil ne sait plus où s'accrocher. L'effet ne fonctionne qu'utilisé avec parcimonie.


Maintenant, il est important de donner du relief à vos aplats. Les dégradés sont à utiliser avec précautions et mesure, mais ils fonctionnent bien. Sélectionnez votre couleur de base, choisissez une variante plus sombre (diminuez la luminosité dans le nuancier), et placez la dans votre palette. Reprenez votre couleur de base, choisissez une variante plus lumineuse et placez la dans votre palette. Puis tracez vos dégradés sur de grandes surfaces à partir de ces deux nuances (vous pouvez jouer avec la vitesse de transition, ou utiliser des dégradés circulaires pour créer des effets de lumière). Parfois le changement de couleur se voit à peine, mais il suffit quand même à donner du relief.

Un effet intéressant qui peut obtenu par l'utilisation judicieuse des dégradés, c'est la simulation de la radiosité. Dans la réalité, ce phénomène est la réflexion secondaire d'un objet sur un autre. Ce phénomène peut être imité dans une interface web simplement en dégradant depuis la couleur d'un encart vers la couleur de l'encart qui le jouxte. On a alors l'impression que l'un diffuse sa lumière sur l'autre.

Ce type de procédé n'est pas gratuit, il participe d'une caractéristique très présente dans les meilleurs web designs actuels : des effets « réalistes », qui cherchent à imiter des matières réelles pour faire appel au sens tactile, donner l'impression qu'on peut « toucher » certaines parties, et renforcer l'attractivité générale. Cela fonctionne particulièrement bien, à condition comme toujours, d'utiliser cela avec modération.

L'effet le plus utilisé est l'ombre portée, pour séparer des blocs de contenu. C'est une bonne idée de dissiper l'ombre vers l'une ou l'autre des extrémités du bloc, pour donner l'impression qu'il s'agit d'un sticker ou d'un carré de papier posé sur le fond et qui se décolle. L'effet est très esthétique à condition de ne pas en abuser. Il est aussi important de conserver une source lumineuse cohérente sur tout le site : décidez d'où vient la lumière (il peut y avoir plusieurs sources lumineuses, cela permet même d'adoucir les contrastes et de donner un aspect plus « poli ») et tenez-vous y sur toutes vos pages.

D'autres effets d'ombres permettent de donner un relief au site par rapport au fond du navigateur.  

Viennent ensuite les incontournables effets de reflets et de surfaces laquées. Comme pour beaucoup d'éléments constitutifs de cette vague « web 2.0 », ceux-ci trouvent sans doute leur origine dans les interfaces zen, propres et efficaces d'Apple (on note une forte similarité avec les fameux boutons et fenêtres aqua, qui sont d'ailleurs largement repris dans beaucoup de sites web).

Ce sont effets très simples à réaliser, et qui peuvent rapidement donner vie à un graphisme un peu plat. Il en existe deux grandes sortes : les effets de « surface laquée », et les réflexions sur une surface plane. Pour créer une surface laquée, il suffit de récupérer la sélection d'un calque si possible rectangulaire (Ctrl + clic sur la vignette du calque), et d'utiliser l'outil Ellipse de sélection (Elliptical Marquee Tool) en mode Intersection pour n'en conserver que la section supérieure. Remplissez ensuite avec un dégradé vertical du blanc vers transparent, en faisant dépasser les extrémités de la zone de sélection. Testez ensuite divers modes de fusion. Parfois le mode « Normal » suffit, parfois « Superposition » ou « Lumière tamisée » donnent de meilleurs résultats.

Pour les reflets sur une surface plane, c'est encore plus simple : faites une copie du calque qui doit se refléter (Ctrl + J) et renversez-le verticalement (Edit / Transform / Flip vertical). Déplacez-le pour le placer juste sous le « véritable » objet et ajoutez-lui un masque de fusion, sur lequel il vous suffira de tracer un dégradé vertical du noir vers le blanc pour masquer le bas du reflet. Diminuez ensuite son opacité, selon la réflectivité de la surface.

Au niveau des formes employées, on reste dans le très simple : carrés, rectangles à bords arrondis, parfois ronds ou étoiles à nombreuses branches courtes (notamment pour cette manie très web 2.0 de dessiner des stickers dont un bout se décolle ; encore un aspect tactile attrayant, mais sans doute trop utilisé). Une dernière tendance qui commence à se faire plus rare, c'est celle des rayures plus ou moins larges dans les fonds ou sur certaines parties à mettre en valeur.
L'ajout de rayures peut donner selon les cas un aspect institutionnel haut de gamme ou plutôt kawaï acidulé, mais comme tous les gimmicks facilement reproductibles, il a été trop utilisé à toutes les sauces pour continuer de fonctionner aussi bien aujourd'hui.

Simplification ! Revenons juste un instant aux codes des jouets pour enfants. Il ne s'agit que d'une comparaison, mais elle est utile pour comprendre le pourquoi de certaines tendances de ce graphisme dit web 2.0, et pourquoi pas imaginer d'autres pistes.

Peu d'éléments, et de grande taille, pour canaliser le trajet de l'internaute dans la page. Les titres sont souvent assez gros, dans des polices bâtons ou arrondies très lisibles (exit les polices manuscrit). Vous avez dégagé de la place en simplifiant l'interface, il s'agit maintenant d'en profiter pour faire ressortir les informations vitales. La taille des polices permet ensuite, logiquement, de différencier les informations de différents niveaux d'importance.

Il y a beaucoup d'effets intéressants à appliquer sur une police de caractère, pour la faire ressortir d'une composition de webdesign (tellement de possibilités, à vrai dire, que cela pourrait faire l'objet d'un livre entier). Les plus répandus, dans tendance actuelle, sont le jeu sur la graisse, à l'intérieur d'une même unité de sens, et toutes les inventions possibles sur la texture et la matière, pour faire un maximum appel au sens tactile tout en restant simple (travail complexe !). Bien gérés, c'est-à-dire appliqués avec mesure et aux bons endroits, ces effets sont susceptibles d'apporter un certain standing au site, de poser une zone de contenu, et de faire la différence entre un site au look amateur et un site professionnel.

Il est évidemment toujours possible de jouer avec la lumière (en quelques secondes, l'option de fusion Glow out, combinée avec un Stroke de 1 ou 2 pixels, permet de créer des effets de néon très convaincants et esthétiques) ou le lissage façon plastique laqué (probablement initié par Apple, encore eux).

Le design du site étant déjà coloré, simple et attrayant, il serait inutile et dommage de le bombarder d'images et d'icônes qui pourraient en brouiller le propos.
La tendance actuelle est aux en-têtes clairement définies, bien distinctes du reste de la page, souvent avec un fond de couleur dégradé (et les effets de lumière ou de plastique laqué), un photomontage dynamique ou une création graphique sous Illustrator, toujours relativement simple, et en utilisant des dégradés pour rendre les volumes.
Cette zone de titre doit capter l'attention et poser l'ambiance générale du site ; c'est elle qui en montre l'univers en premier. Elle est souvent très épaisse.

Le menu de navigation se pose en général juste sous cette zone d'entête, après le logo et le nom de la société, et peut servir de transition avec le reste de la page (effet d'ombre, par exemple).

L'utilisation des icônes doit être judicieusement pensée : la tendance est aux pictogrammes de plus en plus gros. Là encore, il est inutile d'en placer devant chaque bloc de contenu ou sur chaque bouton, juste pour essayer de donner un look « web 2.0 » au site. Pensez simplicité. Si un pictogramme n'est pas strictement nécessaire pour apporter ou compléter une information, demandez-vous s'il est strictement nécessaire à la composition.

Chaque pictogramme doit avoir un sens, parfois métaphorique, mais en tout cas clairement décelable. Le principe est de guider vos visiteurs de la façon la plus efficace. Posez-vous la question : parfois, un simple mot peut fonctionner largement mieux qu'une image, même si elle est très jolie (et n'oubliez pas que vous avez des centaines de possibilités pour faire graphiquement ressortir une typo).

Mais utilisés judicieusement, dans des éléments de navigation, dans des encarts publicitaires ou dans des blocs de contenu, les pictogrammes peuvent littéralement donner vie à un site.

L'utilisation de toutes ces techniques donne des résultats efficaces et percutants en terme de communication et d'ergonomie. En revanche, il faut prendre garde à ne pas céder à la facilité en appliquant systématiquement les mêmes éléments sur tous ses sites, sans leur donner de véritable sens (ce qui donne parfois des résultats curieux, et arrivent parfois à faire ressembler votre design plus à un bâton de sucre d'orge qu'à un moteur de recherche ou un portail communautaire).

Utilisez ces éléments avec parcimonie, combinez-les, et soyez inventifs pour vous démarquer. Cela devient un enjeu crucial.