🌿 Eco-conception et visuel : un duo impossible ?

Quand on imagine un site éco-conçu, il nous vient à l’esprit un site sobre et minimaliste. Mais cela peut être aussi fun et coloré. Alors aujourd’hui, je vais répondre à l’idée reçue suivante : Eco-conception et créativité visuelle, est-ce vraiment un duo impossible ?

‍

Un site éco-conçu peut-il être attractif ?

De la contrainte, naît la créativité ! 

‍

L’éco-conception numérique s’inscrit dans une démarche de communication responsable mais n’a pas à être ennuyante ou uniforme pour autant. Les contraintes de l’éco-conception permettent d’être créatifs d’autres manières  et n’empêchent pas de communiquer des messages de façon impactante.

‍

Et si vous n’en n’êtes pas convaincu vous trouverez de nombreux exemples d’identité visuelle et de sites éco-conçus créatifs sur l’annuaire de Green the web.

Mais alors comment être créatifs tout en ayant un faible impact environnemental ? Rentrons un peu plus dans le détail.

‍

Des sites éco-conçus créatifs et visuels

Pleins de stratégies et d’arbitrages différents existent selon les besoins du site et le domaine d’activités. 
En voici quelques-unes.

‍

Utiliser le CSS et les typographies

Pleins d’éléments graphiques peuvent être créés en CSS (comme cet entrelacement de cercles colorés que j’avais réalisé pour l’agence de design A Demain).

L’avantage d’utiliser cette stratégie, c’est qu’on limite le poids de la page ainsi que le nombre de requêtes (chaque image chargée génère une nouvelle requête au serveur, là où on peut charger juste une feuille de style CSS pour styliser de nombreux éléments visuels du site).

‍

💡 CSS (Cascading Style Sheets) : Tout comme le HTML, le CSS est l’un des langages de base du web. Ce langage permet de définir le design, l’apparence d’une page web.

‍

On peut aussi s’appuyer sur les symboles des polices de caractères (un guillemet grossi peut devenir graphique, une flèche et bien d’autres…) ou encore faire des choix de typographies différenciants et originaux (en hébergeant les fichiers de typographies et en limitant bien évidemment le nombre de typo et de graisses utilisées).

‍

S’appuyer sur un choix de couleurs forts

Une autre stratégie est de miser sur un choix de couleurs forts et marquants pour rendre le site attractif malgré un nombre limité d’images. Couleurs vives, univers fun et colorés, monochrome, plein de possibilités existent ! 

‍

Avoir recours à l'illustration

Une autre piste est l’utilisation d’illustrations vectorielles plutôt que l’usage systématique de photos. Un univers visuel basé sur de l’illustration peut être également un point différenciant pour votre marque ou entreprise. 
C’est donc quelque chose à avoir à l’esprit au moment de la création de l’identité visuelle. 

En termes de format, l’export en SVG est à privilégier puisqu’il est modifiable et d’un poids très faible.

‍

Repenser son rapport aux images : optimisation et choix 

Selon HTTP Archive, le poids médian des pages est d’environ 2Mo et les images représentent à elles seules environ 45% du poids de la page. Dans ce contexte, il est essentiel de revoir notre rapport aux images et d’être plus responsable dans notre usage de celles-ci.

‍

Mais pour certains secteurs d'activité, comme le tourisme, l’image est au cœur des stratégies de communication. Cela a, par exemple, été une problématique pour la création de l'identité et du site web que j’ai réalisé pour les Gîtes de Vézelay.

‍

Alors comment garder de l’attractivité tout en réduisant et améliorant l’usage des photos ?

• Avoir un budget d’images par page : je m’explique, l’idée est de se limiter à un certain nombre d'images par page et d’arbitrer ensemble au cas par cas (As-t’on vraiment besoin de cette image ou celle-ci est-elle plus importante ?)

‍

• Optimiser ses images pour réduire leur poids : une grande image, comme un bandeau, ne doit pas dépasser une taille de fichier de 140/150 Ko, avec une largeur d’image de 900/1000 pixels. La plupart des autres images ne doivent pas dépasser 50/60 Ko. 

‍

• Choisir le bon format de fichier : la conversion au format WebP permet de réduire le poids d'un fichier de 25 à 30 % par rapport aux formats d’images traditionnels (JPEG, PNG et GIF). De plus, ce format prend en charge la transparence et les animations.

‍

• Charger uniquement les images à la demande de l'utilisateur : on retarde le chargement des images pour qu’elles soient chargées au scroll (chargement différé) ou on propose un lien pour que l’utilisateur puisse voir plus d’images si il le souhaite. 

‍

⚙️Cas pratique :
Proposer des images à la demande de l’utilisateur, c’est l’une des solutions que nous avons choisis pour les Gîtes de Vézelay.

En pratique, un lien permet d’afficher plus d’images pour l’un des gîtes (qui est un grand gîte et comporte de nombreuses pièces). Si l’utilisateur est intéressé par le gîte, il est normal qu’il ait besoin de plus d’images pour se projeter. En revanche, si l’utilisateur trouve que le gîte ne répond pas à ses besoins, ces images ne seront donc pas chargées et affichées.

‍

De la même façon, on limite l’usage de la vidéo et on évite tout ce qui est lecture automatique : c’est à l’utilisateur de manifester son envie de voir le contenu.

‍

Pour finir

Vous l’aurez compris, l'éco-conception, si elle nécessite de la réflexion, nous laisse toujours un large terrain d’exploration visuelle ! 

‍

L’éco-conception permet aussi d’innover et d’avoir des idées nouvelles. La standardisation du web a poussé à l’utilisation systématique de photos brutes, en haute définition : appel direct à des banques d’images comme Unsplash, photo pleine page, carrousel dès le début de la page d’accueil (soit dit en passant pas recommandé en termes de conversion), sites immersifs, animations, recours massif à la vidéo … 

‍

Si l’on veut un numérique plus responsable, il est nécessaire repenser nos façons de communiquer en faisant évoluer notre langage visuel et nos habitudes. Eco-conception et créativité c’est un combo gagnant pour les designers, les clients et les utilisateurs !

‍

En bonus

• Lien vers l’annuaire des bonnes pratiques de Green the web pour pleins d’autres exemples de sites éco-conçu créatifs

• Le tuto complet pour optimiser ses images pour le web

• Ma recommandation d’outil pour optimiser ses images :  Squoosh App (très simple d’utilisation et très complet

• Pourquoi utiliser le format WebP : 5 avantages au format WebP  

‍