Éco-design graphique,
pour un futur responsable

Print



Un éco-logo se fait en affinant les contours du logo et/ou en limitant les aplats de couleurs dans sa conception. Cela permet une diminution de l’utilisation d’encre lors de son impression sur divers supports.

Exemples de logos revisités par Sylvain Boyer
Plus d’informations



Une éco-font se distinguent par sa capacité à minimiser la consommation d’encre lors de l’impression en raison de sa finesse et de son étroitesse.

Sélection d'éco-fonts :

· Typographies standards (-30% d’encre que Arial):
- Century Gothic
- Garamond
- Times New Roman

· Typographies écoresponsables ( ≈ 30% d’encre que les polices standards):
- Ryman Eco
- Spranq

· Logiciel :
- Ecofont (exclusivement sur Windows) > intègre des petits trous à l’intérieurs des caractères typographiques réduisant ≈ 50% d’encre à l’impression



Une éco-couleur limite l’utilisation d’encre à l’impression en ne dépassant pas 100% de sa valeur CMJN.

Guide des éco-couleurs par Sylvain Boyer
Plus d’informations

FUN FACT
La couleur noire poussée à 85% de taux d’encrage est identique à l’impression qu’un noir poussé à 100%



Il est possible de diminuer le taux d’encrage en jouant avec la méthode de tramage des couleurs. Le tramage désigne un maillage de points qui permet de reproduire un aplat de couleur.

Guide de L’ÉCO-ENCRAGE par Citéo, p.8

L’utilisation d’espaces blancs. Ces espaces sont dépourvus d’éléments imprimés permettant une économie de ressources d’encre ainsi qu’une nouvelle perspective artistique axée sur la gestion efficace de l’espace dans la conception graphique.



Le papier recyclé est fabriqué à partir de papier post-consommation et de fibre vierge (fibre obtenu à partir de copeaux de bois).

· Papiers 100% recyclés d’origine française :
- Recytal Matt
- O natural print
- Everbal et Evercolor
- Pollen Natura
- Bengali

· Papiers 100% recyclés non français :
- Shiro Eco
- Cycles Offset
- TecnoPure

Les papiers éco-conçus fabriqués à partir de déchets agro-industriels.

· Papier éco-conçu d’origine française :
- Bagasse, papier fabriqué avec de la bagasse, issu de la transformation des cannes à sucre.

· Papiers éco-conçus non français :
- Curious Matter, papier fabriqué à partir d’amidon d’épluchure de pomme de terre
- Extract, papier fabriqué grâce aux gobelets jetables
- Refit, papier fabriqué à partir de laine et coton.



L’industrie du papier possède des labels, permettant de certifier une démarche environnementale.

- écolabel PEFC (Programme de Reconnaissance des Certifications Forestières) et FSC (Forest Steward Council) qui certifient une gestion durable des forêts.

- écolabel APUR (Association des Producteurs et Utilisateurs de papiers Recyclés) qui indique une fabrication réalisée par entre 50% et 100% de fibres recyclées.

- écolabel Européen, qui indique une fabrication réalisée avec minimum 70% de fibres recyclées ou 50% de fibres vierge issues de forêt durablement gérée.

- écolabel NF Environnement, qui assure la performance environnementale d’un produit.
- écolabel Ange Bleu, qui garantit le respect de l’environnement tout au long du cycle de vie du papier.

Comprendre les logos et labels environnementaux pour les papiers - CITEO



Les imprimeurs s’engageant à réduire leurs impacts de production sont distingués par la marque Imprim’Vert, qui certifie certains critères environnementaux tel que la conformité à la réglementation pour l’élimination des déchets dangereux d’imprimerie, la protection du stockage des produits nocifs, l’exclusion de l’utilisation de produits toxiques…

Plus d’informations

Web



Un éco-logo sur le Web se matérialise par un petit format, c’est-à-dire l’utilisation d’un logo icône plutôt qu’un logotype. Cela offre plusieurs avantages tels que la réduction des échanges réseau, du temps de chargement des pages, de l’espace initial occupé par le logo et un gain d’espace dédié au contenu. Il est préférable de choisir le format SVG pour le logo.

Rebranding d’Atos par Royalties



· Les typographies variables :L’utilisation de typographies variables permet de diminuer le nombre à télécharger côté utilisateur et diminuer les échanges réseau, et le temps de chargement des pages
Rebranding d’Atos par Royalties

· Les typographies standards :Les typographies standards, étant directement incluses dans tous les ordinateurs, ne requièrent pas d’être téléchargées par l’utilisateur pour être visibles.
Liste des polices système

Techniques d’optimisation des typographies



Le mode sombre utilise le noir comme couleur principale de l’interface. Son efficacité dépend du type d’écran utilisé : les écrans OLED et AMOLED consomment moins d’énergie car les pixels sont éteints, tandis que les écrans LCD dépensent de l’énergie pour afficher les nuances claires et sombres d’un pixe. Ainsi, le mode sombre peut prolonger la durée de vie des appareils électroniques en économisant leurs performances.



Le Digital Report annuel de 2022 met en évidence la division des parts de connexion au web des différents supports numériques. Le téléphone représente 59%, tandis que l’utilisation d’un ordinateur, portable ou fixe, représente seulement 37%. Il est donc plus intéressant de bien penser la version mobile de son site plutôt que la version ordinateur puisque cette dernière est finalement moins consultée.

Étude : le mobile représente 60 % du trafic web - Blog du Modérateur



Un design simpliste permet de créer un site exclusivement en HTML et CSS. En se concentrant sur ces langages, on évite l’intégration de bibliothèques comme JavaScript ou Python, ce qui signifie moins de téléchargements et moins de consommation énergétique.



L’optimisation du parcours utilisateur vise à réduire le nombre d’étapes requises pour accéder à une information, en se concentrant sur le parcours optimal. Cela permet d’éliminer les éléments superflus, de réduire les actions nécessaires, d’améliorer les temps de réponse…



Un site au défilement infini génère continuellement des requêtes pour pré-charger un nombre X d’éléments en continu, consommant constamment de la bande passante et d’énergie. Un site avec une pagination définie charge une seule fois tous les éléments nécessaires, évitant ainsi une consommation d’énergie permanente pour charger les éléments suivants.



L’utilisation d’une illustration au format SVG réduit son poids de 75% par rapport aux formats JPEG ou PNG, ce qui optimise l’énergie lors du chargement des pages. Il est également avantageux d’éliminer les métadonnées des fichiers SVG avec des outils tels que Compressor.io, SVGO ou SVG Cleaner, afin de réduire le poids du fichier jusqu’à 75%.



· Privilégier le format SVG quand cela est possible

· Choisir le bon format :
- S’il est possible de dégrader l’image : formats .jpeg, .avif ou .webp.
- Si l’image doit être en parti transparente : format .png.

· Comprendre les gains de poids en fonction du format :
Une image au format .avif est 20% moins lourde qu’au format .webp, tandis que ce dernier format est 30% moins lourd que les formats .jpeg ou .png.

.svg<.avif<.webp<.jpeg/.png

Pour aller plus loin