Episode 4

Design : le poids des mots, le poids des images

14 octobre 2021 | écrit par : Julia

Le jour où nous avons découvert qu’un site pouvait être éco-conçu ET attractif visuellement

“Je me suis réconciliée avec l'éco-conception grâce à ce projet”

Le top 3 des outils pour optimiser sa DA :

A La Netscouade, Julia est aussi connue pour la qualité de ses créas que pour son caractère bien trempé ; et au début, quand on lui parlait d’éco-conception, pour elle c’était très simple, ça voulait dire moche et sans créa. Pas d’image, pas d’animation, que du texte : c’est vrai que vu comme ça, ça ne donne pas envie. Et pourtant…

Le premier préjugé à combattre, ça a été de se dire qu’un site éco-conçu devait forcément ressembler à ça : https://solar.lowtechmagazine.com/, ça : https://lowtechlab.org/fr ou ça https://gauthierroussilhe.com/. Bien sûr ces sites sont emblématiques de l’éco-conception web, mais leur "look and feel" traduit un positionnement radical qui ne peut correspondre à tous les projets / clients. En d’autres termes, on peut tout à fait s’éloigner de ce type d’esthétique sans renoncer pour autant à mettre en place une DA plus sobre et moins consommatrice de ressources sur son site. 

Alors concrètement, éco-designer un site, ça consiste en quoi ? Selon nous, ce sont surtout des choix à faire, pour privilégier ce qui est utile et se passer du superflu.

  • Les images en elles-mêmes sont utiles, parce qu’elles apportent du rythme, fluidifient la lecture, créent de la chaleur et de la proximité… il n’est donc pas question de les bannir de nos sites, mais de les sélectionner soigneusement (adieu les photos d’illustration issues de banques d’images interchangeables d’une page à l’autre), et aussi de les traiter pour les rendre plus légères : pour ce site par exemple, nous avons traité toutes nos photos en bichromie, pour réduire leur poids mais aussi apporter de la force à notre identité visuelle avec des codes couleurs très marqués ;
  • Côté typo, on oublie les fonts propriétaires pour privilégier les polices systèmes, plus légères, et/ou les plus lisibles (Google fonts ou autre typo designée pour le web). On essaiera aussi d’utiliser le moins de graisses possibles, à la fois pour alléger le chargement et pour amener de la cohérence, en rationalisant les styles de texte et niveaux de titres. Pour ce site, nous avons choisi la Roboto.
  • Les couleurs enfin : là aussi, moins il y en a et mieux c’est, sans pour autant être condamné au noir et blanc. Choisir 2 ou 3 couleurs majeures, qui constitueront la base de l’identité visuelle du site, garantit non seulement légèreté mais aussi lisibilité et cohérence de l’ensemble. 

La bonne nouvelle donc, c’est qu’éviter les fioritures, effets de style gratuits ou autres illustrations “pour faire joli” permet non seulement de réduire le poids des pages, mais aussi de leur faire gagner en clarté et en accessibilité. A Julia maintenant d'exprimer son talent sur ce terrain de jeu !

Et sinon...