2025 | UPCYCLING DE SITE | Refonte totale

Rejouons Solidaire : comment leur site invisible et peu crédible est devenu top 10 Google en 3 mois et génère désormais des opportunités ?

Rejouons Solidaire - réseau n.1 en France de l’économie circulaire et solidaire du jouet.

Adapté à son audience

Avoir un outil lisible, crédible et aligné avec leur mission.

01

Rejouons Solidaire venait de revoir son identité visuelle : nouveau logo, illustrations, couleurs, typographies. Je suis donc parti de leur nouvelle charte graphique existante pour cette refonte. Néanmoins une charte graphique print est rarement adaptée aux standards du web.

Alors, j'ai légèrement ajusté certains codes graphiques afin de les aligner non-seulement à ses valeurs éco-responsables, mais aussi à ses valeurs humaines en les rendant plus accessibles aux personnes en situation de handicap. L'enjeu dans ces cas-là est surtout d'avoir des typographies assez lisibles et web et de s'assurer du bon contraste de couleurs entre chaque texte et son arrière plan. Tout a donc été testé pour répondre en tout ou partie à ces normes d'accessibilité web.

Les typographies

Je n'ai pas utilisé leur police principale initiale, la Bagor car la licence de cette typographie n'est pas disponible pour le web. Nous l'avons donc remplacé par la Bowlbi One SC qui lui ressemble beaucoup. Cette dernière n'étant pas vraiment accessible, nous l'avons utilisé uniquement par petites touchent. Soit, uniquement sur des mots-clés séparants leurs diverses sections, comme un élément graphique, illustratif, décoratif plus que "lisibles". Autrement dit c'est un peu comme une photo purement décorative, si on arrive pas à la voir/lire, cela ne nous empêchera pas de comprendre le site et les messages clés.

Mais, me diras-tu, en terme d'écologie numérique, la règle c'est plutôt : si c'est purement décoratif, c'est qu'on doit l'enlever, le supprimer, non ?

Oui, dans l'idéal, mais un projet et fait de compromis, de dosage et de stratégie. Ma cliente ne pouvait pas se permettre de ne pas utiliser cette typographie sur son site, alors que c'est sa typographie principale sur le print pour toute sa nouvelle campagne de communication... Dans un soucis de cohérence on a trouvé une alternative pour l'utiliser quand même, mais de façon plus accessible que de l'utiliser dans tous les titres du site.

Les couleurs

Ici aussi, l'enjeu était de taille, puisque leur toute nouvelle charte graphique, comportait énormément de couleurs, très représentatif de l'univers enfantin, mais un peu feu d'artifice une fois appliqué sur un site web. 

Alors on a regardé celles qui était accessibles entre elles et nous avons segmenté les couleurs par typologies de pages. Le vert clair pour représenter les membres, le vert foncé pour les témoignages, le jaune pour leur réseau, le orange pour les mécènes, le rose pour leurs offres d'accompagnements, le bleu pour leurs valeurs et savoir-faire. Un code que nous avons utilisé sur l'ensemble des pages du site pour garder une cohérence globale et asseoir une habitude de lecture, des repères visuelles pour les visiteurs récurrents.

Livrable : Guide de style web et accessible (visible plus haut)

02

Les images ont toutes été optimisées pour le site :

• cadrage des images dans leur taille (dimensions) réelle d'affichage sur le site
• export de chaque image au bon format, notamment en utilisant le format d'images le plus léger pour le web (WebP),
• et enfin compression des ces dernières.

De plus la balise alt de chaque image a été renseigné afin de faciliter la lecture des images du site aux personnes non-voyantes, utilisant des lecteurs d'écrans ou encore en cas de mauvaises connexion internet (et oui, y en a qui habite en zone rurale). Un combo gagnant, puisque cette balise alt, une fois renseignée, favorise aussi le référencement naturel du site.

Livrable : Maquettes graphiques

Pour limiter encore plus l'impact de chaque image, il y a quelques astuces à connaître. En voici une.

Les images en noir et blanc et/ou depixelisé (on enlève certains pixels) génère moins d'énergie lors de leur chargement que leur confrère classique et colorées.

Alors nous avons fait le parti-pris de n'utiliser que des photos en noir et blanc sur le site de Rejouons Solidaire, pour l'alléger à la fois en poids et ainsi réduire son empreinte carbone, mais aussi l'alléger visuellement. En effet, le site étant déjà très coloré il aurait pu entrainer une certaine fatigue visuelle auprès de son audience si les photos étaient restées toutes en couleurs.