Juillet 2024 | UPCYCLING DE SITE | Refonte totale
Studio Floriane : comment repenser un site comme un outil stratégique (pas juste une simple vitrine) pour gagner en crédibilité, en autonomie… et en performance (+63 pts mobile) ?
Studio Floriane — studio graphique éco-responsable.
Reprendre le contrôle de son site… et en faire un vrai levier (aligné, autonome et performant)
01
Prise de contact
Quand Floriane m’a contactée, son site ne reflétait plus ni son expertise… ni ses engagements.
Mais surtout, elle n’en avait pas le contrôle. Chaque modification dépendait d’un prestataire.
Et comme beaucoup de graphistes… créer pour soi était devenu compliqué. Difficile de prendre du recul. Difficile d’appliquer sa propre direction artistique.
02
Constat
Elle avait besoin d’un regard extérieur pour amener plus de clarté, de cohérence… et un vrai positionnement premium. Sans compter une version mobile peu optimisée, alors même que son audience vient majoritairement d’Instagram.
On a donc fait un choix :
- ne pas bricoler l’existant
- ne pas empiler des tas d’ajustements
03
Proposition
Repenser le site en profondeur, avec une approche claire :
- autonomie et prise en main de son site (FORMATION à la gestion de son site WordPress en toute autonomie)
- et construire un site (enfin) aligné, accessible et éco-responsable avec une expérience mobile (enfin) agréable.
04
Résultat
Un site plus fluide, plus cohérent, plus engagé…et surtout, un site qu’elle maîtrise enfin en toute autonomie.
En bref
Client : Studio Floriane, studio graphique éco-responsable par Floriane Brault
Secteur : Design graphique engagé / accompagnement de créateur·rice·s engagé·e·s
Ce qui a été fait : UPCYCLING de site
- refonte complète
- migration et configuration WordPress
- direction créative web responsable et accessible
- optimisation mobile, performance, SEO, accessibilité et éco-conception
- option formation à la gestion de son site de manière durable en toute autonomie
Contexte et besoin
Floriane, fondatrice du Studio Floriane, accompagne des créateur·rice·s engagé·e·s avec une approche graphique éco-responsable. Mais au moment de me contacter, son site ne suivait plus.
Elle ressentait :
- un décalage entre son niveau d’expertise… et l’image renvoyée par son site
- une forte dépendance technique, l’empêchant de faire évoluer son site librement
- une difficulté à concevoir pour elle-même, malgré son métier de graphiste
- une expérience mobile peu fluide, freinant clairement son audience principale
Objectifs du projet
L’objectif principal était de :
Permettre à Floriane de reprendre totalement la main sur son site (sans dépendre d’un prestataire)
Créer un site aligné avec son positionnement, ses valeurs éco-responsables et son niveau d’expertise
“Je ne sais même pas par où commencer tant mon avis sur Coralie est positif ! Travailler avec elle a été une expérience au-delà de mes attentes. WordPress c'était un monde obscur pour moi. Et grâce à elle, c'est devenu presque un jeu d'enfant !”
Floriane Brault, Fondatrice de Studio Floriane
Offrir une expérience mobile fluide et efficace, adaptée à son audience issue d’Instagram
Transformer son site en un véritable levier de crédibilité et de conversion
Mon approche
Pour y répondre, je n’ai pas simplement “refait un site”. Je l’ai conçu comme un véritable outil stratégique, pensé pour être à la fois clair, autonome et durable. Concrètement, j’ai structuré mon accompagnement en plusieurs 6 étapes clés.
Structuration stratégique du site
Clarification de l’architecture et des parcours utilisateurs pour poser des bases solides et éviter l’effet “site bricolé”.
Clarification des contenus
Simplification et restructuration des messages pour rendre l’offre plus lisible, plus impactante… et plus facile à convertir.
Direction créative web responsable
Adaptation de son identité graphique au web : plus accessible, plus cohérente, tout en renforçant son positionnement engagé et premium.
Conception & intégration WordPress
Refonte complète du site avec un outil simple à prendre en main, pour garantir une vraie autonomie au quotidien.
Optimisation globale
(mobile, performance, accessibilité, éco-conception)
Un site pensé mobile-first, allégé techniquement, et optimisé pour être rapide, accessible… et plus respectueux de son impact.
Formation & accompagnement à l’autonomie
Transmission des bonnes pratiques et suivi post-lancement pour permettre à Floriane de gérer son site en toute confiance, sans dépendance.
Résultats obtenus
Le projet a permis à Studio Floriane de :
Performance
Améliorer drastiquement ses performances : de 34 à 97/100 sur mobile (+63 points) et de 90 à 98 sur desktop.
SEO
Atteindre un score SEO technique optimal : de 83 à 100/100.
Accessibilité
Renforcer l’accessibilité du site : de 90 à 94/100 grâce à une adaptation fine de la charte graphique au web.
Éco-responsabilité
Réduire son empreinte carbone de 22% (de 0,37g à 0,29g CO2 par page vue) et passer d’une note C à B.
Les scores présentés ci-dessus représentent une moyenne globale pour l'ensemble des pages du site. Ils ont été calculé avant la refonte puis après la mise en ligne du site (septembre 2025). La performance, le SEO et l'accessibilité ont été calculé avec Page Speed Insights et l'aspect écologique avec Eco-Index et Website Carbon. Si tu veux connaître ma méthode de calcul tu peux lire mes articles ou demande un diagnostic gratuit en cliquant sur le bouton vert en bas à droite de l'écran.
Mais surtout, le projet a permis à Studio Floriane de :
- passer d’un site subi… à un site totalement maîtrisé en interne (autonomie ++ au quotidien)
- se sentir enfin alignée et légitime pour partager son site sans hésitation
- offrir une expérience mobile fluide, adaptée à une audience majoritairement issue d’Instagram
- gagner un temps précieux dans la gestion et les mises à jour de son site
Guide de style web
Éthique, éco-responsable et accessible.
Un coup d'oeil sur la page d'accueil
Performante, éco-responsable et accessible.
01
Accessibilité
Studio Floriane avait déjà sa propre identité de marque : logo, submarks, couleurs, typographies. Je suis donc parti de sa 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 à ces normes d'accessibilité web.
Livrable : Guide de style web et accessible (visible plus haut)
02
Mise en page
Ce n'est pas parce qu'un site est éthique et éco-responsable qu'il doit être vide et fade. Il est tout a fait possible de jouer avec la mise en page et d'y apporter de la couleur. J'ai notamment apporté du dynamisme à sa structure de page en ajoutant des zones en léger "biais", j'ai également joué avec les submarks (éléments graphiques de la marque, comme des tampons) pour apporter un côté destructuré et personnel, unique. Tout n'a pas besoin d'être linéaire, ce n'est qu'une question de dosage.
Livrable : Maquettes graphiques
03
Traitement des images et référencement naturel (SEO)
Les images ont toutes été optimisé 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 de 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.
Astuce éco-responsable
Pour limiter encore plus l'impact de chaque image, il y a quelques astuces à connaître. En voici une.
Là où tu penses qu'il y a 6 images importées sur le site, il y a en réalité 2 images l'une à côté de l'autre. En effet, il est moins lourd d'importer 2 images légères que 6 petites images légères car chaque image ajouté sur ton site génère aussi du poids au niveau de son stockage dans ta base de données par exemple.
En plus, cela simplifie l'affichage sur mobile et entraîne une meilleure expérience pour l'utilisateur·rice car au lieu d'afficher chaque image l'une en dessous de l'autre, l'utilisateur·rice verra une grille de 6 images (3 colonnes x2 lignes).
TÉMOIGNAGES
Iels m'ont fait confiance
EXTRAIT
Une collaboration simple, fluide et un résultat qui dépasse largement mes attentes.
Elle a construit mon site presque en repartant d'une page blanche, tout en l’optimisant pour réduire son impact carbone et garantir une accessibilité pour toutes et tous. Aujourd’hui, mon site reflète qui je suis et incarne mon identité visuelle sans détours.
"Une collaboration simple, fluide et un résultat qui dépasse largement mes attentes.
J’étais bloqué avec mon ancien site : aucun accès, aucune autonomie, aucune possibilité d’évolution. L’idée de créer un site moi-même me donnait des sueurs froides, et WordPress me semblait aussi obscur qu’un sous-bois en pleine nuit.
Dès mon premier échange avec Coralie, j’ai senti que c’était avec elle que j’avais envie de travailler. Son sourire, ses conseils, sa bienveillance, son professionnalisme… tout sonnait juste. Ce qui m’a surtout convaincu : son engagement éthique et sa vision de l’éco-conception, qui résonnent avec mes valeurs. J’ai adoré sa précision, sa disponibilité et sa façon de transformer une idée encore floue en un site web clair et harmonieux.
Elle a construit mon site presque en repartant d'une page blanche, tout en l’optimisant pour réduire son impact carbone et garantir une accessibilité pour toutes et tous. Aujourd’hui, mon site reflète qui je suis et incarne mon identité visuelle sans détours.
Je recommande Coralie à 100 %, pour une création, une refonte, optimisation ou tout projet web qui demande rigueur, sensibilité et éthique."
Et si tu reprenais (vraiment) le contrôle de ton site ?
Aujourd’hui, ton site peut être bien plus qu’une simple vitrine. Il peut devenir un outil clair, crédible… et que tu maîtrises à 100%. Comme Floriane, tu peux :
gagner en autonomie au quotidien
avoir un site aligné avec ton niveau d'expertise et tes engagements
et t’appuyer dessus pour développer ton activité (sans dépendance)
Tu veux upcycler ton site, sans repartir de zéro ni le subir ? On en discute ?
Si tu te reconnais dans l'histoire du site du Studio Floriane, tu devrais également adorer découvrir celui-ci...
Margoo
comment aligner un site avec ses engagements éco-responsables (-76% d’impact carbone) sans sacrifier la performance (+11,5 pts) et sans refonte totale ?
DIAGNOSTIC OFFERT
Un regard d'experte sur ton site, gratuitement
Je t'offre un mini-audit express de ton site existant : empreinte carbone, accessibilité, performance. Tu repars avec des pistes concrètes, sans jugement, pour passer à l'action comme bon te semble.
DIAGNOSTIC GRATUIT
Connaissez-vous l'empreinte carbone de votre site ?
La plupart des sites web émettent beaucoup plus de CO2 qu'on ne le pense. Faites une demande de diagnostic gratuit et découvrez comment passer à l'action.
Résultats envoyés sous 48h · Sans engagement
