Design | Premiers pas vers une démarche d’éco-conception !

Design | Premiers pas vers une démarche d’éco-conception !

Il y a quelques semaines, nous avons mené un webinar dédié à l’éco-conception web et c’était un vrai succès ! Pourquoi ? Tout simplement parce que la protection de l’environnement est un sujet de plus en plus important, et que nous, designers d’interfaces, pouvons agir à notre échelle !

On a donc décidé de vous écrire un petit récap de nos recommandations livrées lors de ce webinar ! Quels sont les leviers qui existent pour créer un site eco-friendly ? Comment créer des choses pour rendre votre site moins gourmand en énergie ? Les réponses, c’est ici, c’est maintenant, et surtout c’est cadeau, alors faites-en bon usage 😉

1/ Simplifier visuellement les interfaces

L’une des premières choses que l’on peut faire pour rendre le design de son site plus “green” est tout simplement d’améliorer l’UX. Eh oui, si vous ne le saviez pas, faire de l’UX c’est aussi participer à la lutte contre la consommation d’énergie ! Pourquoi ? 

Pour la simple et bonne raison qu’un site web bien conçu, c’est-à-dire avec une bonne navigation permet d’éviter les allers-retours inutiles sur les pages web et ainsi de réduire la consommation d’énergie !

En clair, créer un site web avec une bonne expérience utilisateur, c’est déjà faire un pas vers l’éco-conception. Alors surtout, pensez-y lors de la création ou l’optimisation de votre site 😉

Petit exemple avec Re_ Grocery, un site sans fioritures graphiques, sans animations, qui présente uniquement des visuels simples, des temps de chargements rapides ainsi qu’une architecture d’information efficace !

2/ Alléger les images

Vous n’avez plus le réflexe de compresser vos images ? Quel dommage ! Parce que ce petit geste simple permet de  réduire la consommation d’énergie. 

Eh oui, c’est pourquoi il est très important de penser à alléger vos images et d’utiliser les bons formats, formats qui sont aujourd’hui bien plus performants qu’autrefois : WEBP, AVIF, etc. 

Et surtout, sachez qu’il existe de nombreux outils pour faire ce travail 😉

Voici un exemple dont nous vous avions déjà parlé sur nos réseaux : le site Organic Basics qui possède deux versions. Une version de site normale et une version optimisée sur laquelle il n’y a plus aucun visuels produits.

Les seules images que l’on peut observer sont au format SVG. Et pour voir à quoi ressemble réellement tel tee-shirt ou tel pantalon, il vous suffit de cliquer sur le produit en question ou alors de retourner sur la première version de site… Un peu extrême ? C’est vrai, mais en vérité, il s’agit là d’une expérimentation qui a pour objectif de montrer ce que l’on est capable de faire ! Et commencer par intégrer des images au format SVG, ce n’est pas si compliqué.

3/ Diminuer le nombre de couleurs

Et si on parlait couleurs maintenant ? La première chose que l’on peut vous conseiller est tout simplement de proposer des sites web en “dark mode”. Et même si le fond noir ne s’adapte pas forcément pour tous les types de sites, cette fonctionnalité permet de consommer beaucoup moins d’énergie. 

Exemple avec le mode dark de Google Maps qui permet de réduire de 63% la consommation d’énergie d’un écran. 

Et si vous ne le saviez pas… Sachez qu’il y a des couleurs qui consomment plus d’énergie que d’autres ! Eh oui ! C’est le cas de la couleur bleu par exemple. Pour en savoir plus sur ce sujet, on vous conseille de lire le super bouquin de Tom Greenwood, Sustainable Web Design 😉

4/ Mieux utiliser les animations et vidéos

Alors, la vidéo, parlons-en… Bien évidemment, c’est ce qui consomme le plus d’énergie ! Si vous passez 1h sur YouTube à regarder des vidéos, sachez que 10kg de CO2 sont émis. Et dieu sait que sur YouTube, on en passe des heures à regarder des vidéos.

Pour y remédier, il y a plusieurs solutions :

• Éviter les vidéos en fond d’écran
• Réduire la taille des vidéos
• Éviter les vidéos qui se lancent toutes seules
• Ou tout simplement… réduire le nombre de vidéos !

Pour les animations, c’est pareil. Moins il y en a, mieux c’est pour notre planète 😉

Vous avez désormais en main quelques clés pour rendre votre site plus “green” et moins gourmand en énergie, mais sachez qu’il en existe d’autres…. Pour en savoir plus, c’est très simple, il vous suffit de cliquer ici 👇