J'ai refait tout mon site avec l'IA

(ou je t'explique aussi pourquoi j'ai quitté Podia pour la partie site)

J’ai refait tout mon site avec l’IA.

Et je veux te montrer :

• ce que ça m’a permis de faire

• ce que j’ai appris en le faisant

• et comment tu peux t’en inspirer si tu as envie de reprendre la main sur ton propre site, même si tu n’es pas développeur.

Parce que ce n’est pas juste une histoire de “regardez, j’ai fait un joli site avec Claude”. Ça, c’est facile, ça se fait en un prompt.

Le vrai sujet, c’est plutôt : comment est-ce qu’on fait un site avec l’IA qui nous correspond vraiment ?

Le résultat

Le site est ici : mariedrouvin.com

Je suis partie de Podia, que j’utilisais depuis des années, pour reconstruire mon site de zéro. Je voulais un endroit plus léger, plus libre, plus vivant, qui me donne plus de possibilités de faire les choses comme MOI j’ai envie, plutôt que comme la plateforme a décidé.

Le site actuel me permet de :

• présenter mes offres simplement

• ajouter des notifications sur la page d’accueil depuis un simple fichier texte - pour annoncer mes dernières vidéos ou articles

• changer facilement la couleur d’accent, les polices ou le fond pour me permettre de faire des changements sans devoir TOUT refaire

• avoir un site complètement accessible

• garder quelque chose de très léger et rapide pour le référencement et l’expérience utilisateur

Le problème de départ

Mais si mon site ressemble à ça, j’ai un peu galéré au début. Parce que mon objectif de départ était mauvais.

Je voulais faire un site qui fasse “wow”. Un site qui impressione.

Ça a l’air noble comme intention, surtout quand, comme moi, on parle d’enchanter le web, de créer des espaces plus vivants, plus surprenants, plus personnels. Mais en pratique, “faire wow” est un très mauvais objectif.

D’abord parce que c’est flou.

Ensuite parce que ça met une pression énorme sur un truc qui doit surtout servir à quelque chose.

Et surtout parce que ça pousse à créer pour l’effet, pas pour l’usage.

Résultat : je suis passée par plusieurs versions. Que je vais te montrer pour te montrer les erreurs que j’ai commencé par faire.

La première était blanche, très néon, avec plein de petits effets fun. Chaque page avait son gadget :

• une illustration qui changeait au scroll

• un easter egg avec des emojis

• des cartes Substack

• des micro-interactions partout

Et je vais être claire : je me suis énormément amusée.

Mais quand j’ai essayé de rendre le tout plus accessible, d’ajouter un mode sombre, de faire tenir toutes les pages ensemble... En fait, c’était compliqué. Et soudain, le site avait une vibe très “startup de 2019”.

Ce qui n’était pas exactement l’ambiance recherchée.

Donc j’ai recommencé.

La deuxième version était beaucoup plus proche de mon univers : papeterie vintage, fiches Bristol, tableau en liège, couleurs plus organiques, mode sombre plus travaillé.

Franchement, elle était belle. J’étais HYPER fière de moi.

Mais... elle était trop compliquée à maintenir.

À chaque nouvelle page, je devais vérifier les blocs, les couleurs, les contrastes, les comportements en mode sombre. J’avais même commencé à créer une sorte de menu de composants pour que l’IA comprenne comment les blocs devaient se comporter.

Et ça m’a fait comprendre un truc assez simple : Un site que je vais utiliser tout le temps ne peut pas dépendre d’un système que je n’ai pas envie de toucher.

Je redoutais déjà de casser des trucs en y ajoutant d’autres composants. J’avais presque peur d’ajouter des trucs dessus, ce qui n’est pas du tout l’objectif.

Donc je me suis lancée dans la version finale. Avec les bons reflexes.

Visite guidée du nouveau site

La page d’accueil, je l’ai voulue hyper simple. C’est par là que j’ai commencé à travailler sur le design : les couleurs, l’atmosphère, le fond, le mode sombre...

Ensuite j’ai fait une page que j’appelle une page de vente.

J’ai commencé par celle de l’audit. J’avais déjà tout le contenu, entre les versions précédentes. Je lui ai demandé un truc très simple, inspiré d’un Google Doc. Il m’a fait ça.

Ensuite je lui ai demandé de transformer cette page en modèle, et toutes les autres pages de vente suivent le même système. Elles sont un peu différentes les unes des autres - parfois il faut un truc visuellement différent - mais c’est vraiment l’IA qui a créé ça en autonomie une fois qu’il a le contexte et une grosse partie du texte. Juste quelques retouches ici et là post-production de mon côté.

Ensuite j’ai ajouté deux choses différentes.

Une galerie - j’avais travaillé sur un truc similaire pour la page d’accueil de la V2, et j’aimais bcp. Un endroit sympa pour faire vivre le site visuellement, mais, on va pas se mentir, sans utilité propre.

Juste pour mon plaisir lol

Et un outil beaucoup plus utilitaire : les notifications, pour annoncer une nouvelle vidéo, un nouvel article, etc. Je les ai pensées comme les notifications d’un ordinateur - c’est tout le thème de cette version. Quand je dis à l’IA d’en ajouter une, elle sait exactement où et garde la liste à jour.

En fait, ça marche même directement depuis un fichier texte que je met à jour quand j’ai une annonce à faire - si ça t’intéresse, dis-le en commentaire, je ferai une vidéo sur ce set-up.

Et voilà !

Si t’as envie de mettre les mains dedans et de créer ton propre site avec l’IA : j’ai fait un dossier gratuit, le Dossier Site IA, qui te donne les bases - comment on démarre, comment on crée, comment on met ça en ligne.

Tu peux le télécharger gratuitement ici.

---