La petite boucle

Le client :

La petite boucle est une association amiénoise qui collecte du toner et des cartouches d’encre vides à l’aide de son vélo triporteur. Ces déchets collectés sont ensuite revalorisés.

Le client avait besoin d’un site vitrine pour présenter son activité parfaitement ancrée dans le développement durable. Il souhaitait également proposer certaines fonctionnalités comme un agenda ainsi qu’une carte interactive montrant ces actions.

Eco-conçu…

Une première contrainte

Le choix du « one page », les besoins exprimés par le client et son budget m’ont contraint à utiliser des plugins qui activent jQuery. Certes, jQuery c’est pratique (c’était pratique). Mais pour de nombreuses raisons sur lesquelles je reviendrai, je souhaite dorénavant m’en passer. J’utilise un thème WordPress qui ne l’active pas, pas plus que fontAwsome d’ailleurs. Je cherche donc à utiliser des plugins qui font de même.

Mais, encore une fois, choix graphiques, temps et budget limités… et c’est parti pour des formulaires, des galeries, des agendas qui activent jQuery (et tentent de s’immiscer partout).

Ceci dit j’ai limité la casse en optimisant le reste : images au poil, sprite, choix des autres plugins (bien codés et générant le moins de requêtes possible) et création du code le plus performant possible pour les animations JS… en ayant recours à une autre librairie JS (même deux en fait). C’est ma :

Seconde entorse

J’apprécie les animations au scroll. Mon client aussi. J’aime jouer avec tweenmax et scollmagic. Comme chacun, n’est-ce pas? Mais cette fois, j’ai tâché d’être moins dispendieux qu’a l’occasion de mes précédentes tentatives.

Le code, tantôt DRY tantôt KISS en fonction son éco-efficience et de sa performance permet une navigation moderne, ponctuée de déclenchements au scroll mais néanmoins relativement sobre énergiquement (si j’avais fait la même page avec un constructeur de page je ne vous parlerais même pas de la facture d’électricité des utilisateurs).

Bon, TweenMax bien ou pas? C’est une requête http supplémentaire non négligeable, mais ça permet un rendu des animations COMPLEXES plus performantes qu’en CSS. Cela étant, pour un simple effet de hover rien ne vaut le pur CSS. Je ne m’en prive pas par ailleurs.

 

Une consommation numérique assumée pour en réduire une autre plus importante

En créant ce site il s’agit de rendre attractive une activité qui vise à éviter le gaspillage de nos ressources. Cette promotion consomme des ressources. Mon but est de trouver une limite raisonnable à cette consommation pour valoriser le message. Une relation  électrique / éthique en somme. 

C’est là tout l’enjeu d’une communication éco-responsable. Une bonne maîtrise du numérique peut globalement améliorer notre empreinte écologique.

Cela passe en premier lieu par le design. Responsable, le webdesigner doit, selon moi, prendre en compte l’impact écologique de ses choix graphiques dès les premières étapes de son travail.

 

 

Le design, donc :

Conformément aux souhaits du client j’ai fait le choix d’une interface épurée correspondant aux standards actuels du material design afin que la forme ne prenne pas le dessus sur le contenu.

J’ai travaillé à partir des couleurs du logo en les déclinant dans le registre des couleurs du toner.

Les animations et les carrés, en contrepoint, rappelant l’idée de cycle qui est au coeur de l’activité de mon client : recyclage et bicyclette.

Voici les maquettes mobile et ordinateur conçues avec Adobe XD.


Le site est en ligne et consultable, cependant il est toujours en phase d’actualisation de contenu.

Laisser un commentaire