Hibakes est une boulangerie entièrement en ligne qui fait des livraisons sur demande et des événements au Québec. La boulangerie était complètement gérée à partir du compte Instagram. L’entreprise roulait depuis quelques années sans site web, mais les demandes commençaient à monter, d’où vient le besoin d’une méthode de promotion plus haut de gamme.
Mandat et objectif
Doter la boulangerie, gérée jusque-là à partir de son compte Instagram, d’une méthode de promotion plus haut de gamme : un site web qui reprend son identité visuelle existante.
Rôle et responsabilités
Raffinement de l’identité visuelle pour le web, design et conception du site, collecte des images et des informations avec la propriétaire, programmation avec des agents IA et mise en ligne sur Firebase.
Crédits
Contrat client. L’identité visuelle existait déjà comme inspiration à suivre, mais je l’ai raffinée pour que ce soit davantage approprié à un site web. Les images et le logo sont tous fournis par Hibakes. Le design et la conception du site sont faits par moi.
Utilisation d’IA
J’ai utilisé Claude Code pour programmer et déboguer le site et automatiser sa mise en ligne, et une IA pour l’idéation et le moodboard du design système ; j’ai aussi utilisé Claude Code pour intégrer cette fiche, rédigée dans ma maquette Figma, au portfolio. Ma contribution personnelle comprend le raffinement de l’identité visuelle, la direction visuelle, la collecte des contenus avec la propriétaire, mes templates de prompts et de dossier de projet IA, la validation et la mise en ligne.
Étapes de production
-
Étape 1 : Familiarisation avec l’image de marque
J’ai d’abord exploré l’identité visuelle existante de la boulangerie pour m’assurer que le site correspond à ce qui existe déjà. Le but était que la cliente conserve un style visuel uni.
-
Étape 2 : Création d’un design système propre au site web
J’ai fourni ses images et son logo, ainsi que des images Pinterest avec le style recherché à une intelligence artificielle en expliquant en détail le visuel recherché jusqu’à obtenir le style désiré. Cette étape me permet d’avoir un très grand niveau de contrôle sur le style visuel, étant donné que la programmation se fait grâce à l’IA. Cette étape vaut la peine d’être refaite plusieurs fois si nécessaire, car elle affectera toute la structure du site.
-
Étape 3 : Collecte d’images et d’informations pertinentes
J’ai communiqué étroitement avec la propriétaire pour m’assurer que les visuels et les informations étaient conformes à ses besoins. Les images m’ont guidée dans l’élaboration des différentes sections et pages.
-
Étape 4 : Ingénierie de prompts adéquats au besoin
En me servant d’un template de prompt que je me suis créé pour la création de nouveaux sites web, d’un template de dossier de projet IA qui contient tous les skills et toutes les instructions nécessaires pour que le projet réponde aux standards de l’industrie, ainsi que de toutes les informations et de tous les visuels récoltés dans les étapes précédentes, j’ai créé le site au complet en me servant d’agents IA, incluant le débogage. Ces templates me permettent d’éviter qu’une erreur se reproduise plusieurs fois, car je la corrige dans mon système.
-
Étape 5 : Mise en ligne
Lorsqu’il a été complété, j’ai mis le site en ligne à l’aide de l’outil Firebase avec un processus automatisé pour ne pas devoir refaire des étapes manuellement. Je choisis Firebase, car cela rend l’ajout de futurs outils backend beaucoup plus simple étant donné que c’est dans le même système.
Technologies
-
Le site est entièrement statique et est réalisé entièrement en code, sans l’utilisation d’un CMS.
-
Un seul fichier JavaScript, sans framework, gère les interactions de la page.
-
Le site est hébergé sur Firebase Hosting et mis en ligne avec un processus automatisé, ce qui simplifie l’ajout futur d’outils backend.
-
La programmation et le débogage ont été réalisés avec l’agent Claude Code, à partir de mes templates de prompts et d’instructions.
-
Toutes les commandes passent par un message direct sur le compte Instagram de la boulangerie, @hibakes.co.
Défis
Un des défis de ce projet était de créer quelque chose qui ressemblait assez à un style qui existait déjà, mais de l’adapter en version site web. Je voulais aussi mettre beaucoup d’emphase sur les animations et rendre le site très dynamique et interactif, pour garder l’image « Fun » de la marque. J’avais une idée très spécifique de comment je voulais le faire, et c’était un défi de trouver les bonnes technologies et de le décrire clairement à l’IA.
Solutions
J’ai fourni à l’IA les images, le logo et des références visuelles en décrivant en détail le visuel recherché, et j’ai repris le design système jusqu’à obtenir le style désiré. J’ai ensuite créé le site avec des agents IA à partir de mon template de prompt et de mon dossier de projet IA, qui contiennent les instructions pour répondre aux standards de l’industrie.
Résultat final
Un site statique en ligne, hibakes.web.app, mis en ligne avec un processus automatisé ; les commandes passent par un message direct sur le compte Instagram de la boulangerie.