Technip Energies

RÔLE : UX / UI • ÉCO-CONCEPTION


Création d’une page d’accueil éco-conçue.

Technip Energies est une entreprise leader en ingénierie et technologies pour la transition énergétique.

Dans le cadre d'un appel d'offres, l’entreprise souhaite développer un site web conciliant compétences techniques et valeurs environnementales.

L'objectif est de concevoir un site éco-conçu, conforme aux normes d'efficacité énergétique et de réduction de l'empreinte carbone, témoignant son engagement envers la préservation de l'environnement.

Maquette desktop de la page d'accueil.

Les bonnes pratiques de l’éco-conception numérique.

Illustration via un bloc texte, des différentes graisses utilisées pour la typographie Arial.

N°1 • La typographie.

💡 Les polices natives sont préinstallées sur nos appareils et ne nécessitent pas de téléchargement depuis un serveur pour être affichées

Dans le cadre de notre démarche d'éco-conception numérique, nous avons favorisé l'utilisation de ces polices natives et la réduction du nombre de typographies.

C’est pourquoi nous avons choisi la typographie Arial pour ce projet, en utilisant que deux graisses différentes.

Illustration des couleurs utilisées.

N°2 • Les couleurs.

Malgré la consommation énergétique élevée de certaines couleurs, notamment le blanc et le bleu 100%, nous avons décidé de les conserver pour préserver la charte graphique chère à Technip Energies.

Aussi, à la différence de certains concurrents qui optent pour un mode sombre afin d’économiser un peu d'énergie, nous avons choisi un fond presque blanc au lieu du noir, évitant ainsi toute association avec la couleur du pétrole, en accord avec notre engagement pour la transition énergétique

Exemple d'une section de la page d'accueil avec une illustration vectorielle à la place d'une image.

N°3 • Les iconographies.

💡 L'utilisation des médias et leur stockage ont un impact sur l'empreinte écologique des sites web.

Pour le réduire, nous avons opté pour un design épuré, limitant l’usage des images pour améliorer le temps de chargement et réduire la consommation globale du site. Nous avons également favorisé l'utilisation d'images vectorielles autant que possible, car elles sont moins énergivores et se chargent plus rapidement que les images en haute définition.

N°4 • L’interface utilisateur.

💡 Les aplats de couleurs, les ombres et les arrondis demandent plus d’énergie et sont moins éco-responsables. Nous avons utilisé des contours gris pour mettre en évidence certains textes et privilégié les flèches vectorielles pour les CTA, réduisant ainsi la consommation énergétique

Nous avons soumis deux propositions à Technip Energies pour illustrer différents niveaux d'éco-conception :

  • Celle de gauche met en avant une approche éco-responsable en limitant l'utilisation de la couleur bleue aux titres et aux touches légères, évitant ainsi les aplats énergivores.

  • Celle de droite conserve davantage les éléments de la charte graphique existante et mise plus particulièrement sur l'utilisation de la couleur bleue.

Comparaison des deux maquettes de la page d'accueil.

Réalisé en 2022 chez Arneo avec Cécile B. (DA).