Étude de cas

2025

Alchimiste Créations

Site studio freelance — clarifier l’offre, structurer le discours et faciliter la prise de contact

Product DesignFront-endUI/UXArchitectureNext.js 16React 19TypeScriptTailwind CSS v4ZodReact Hook FormVitest

Resume

Contexte du projet

Alchimiste Créations est mon site studio. Le projet devait répondre à une question simple : comment présenter une offre web de manière claire, crédible et professionnelle, sans tomber dans les codes génériques du site freelance.

•Positionnement plus net que la majorité des sites portfolio/freelance génériques.

•Parcours clair de la promesse jusqu’au contact.

•Base éditoriale centralisée et maintenable.

•Refactor poussé sur l’architecture, le design system et la qualité globale.

Vision

Intention produit

Transformer un site vitrine en outil de compréhension et de décision : une offre lisible, un parcours rassurant, et une base technique propre à faire évoluer.

Objectifs

Rendre l’offre immédiatement compréhensible.
Structurer un parcours marketing simple : services, process, portfolio, contact.
Installer une direction visuelle sobre mais identifiable.
Construire une base maintenable, testable et crédible en contexte pro.

Defis

Éviter l’effet “site freelance interchangeable”.
Donner du relief à l’offre sans surcharger la page.
Garder une navigation fluide sur mobile comme desktop.
Faire cohabiter image de marque, SEO, accessibilité et maintenabilité.

Solutions

Architecture App Router claire avec pages marketing séparées et contenu centralisé.
Sections courtes, scannables et orientées décision.
Formulaire contact validé côté client et API dédiée côté serveur.
Styles fondation extraits dans un vrai dossier /styles avec tokens, composants et utilitaires.

Impact

Points forts

Positionnement plus net que la majorité des sites portfolio/freelance génériques.

Parcours clair de la promesse jusqu’au contact.

Base éditoriale centralisée et maintenable.

Refactor poussé sur l’architecture, le design system et la qualité globale.

Decisions

Séparer UI, layout, marketing, content, application et infrastructure au lieu de tout laisser dans des composants de page.
Faire du contenu une vraie source de vérité plutôt que du texte dispersé dans l’UI.
Limiter les animations à des zones utiles pour préserver la lisibilité.
Consolider la couche styles en plusieurs fichiers spécialisés.

Principes

Chaque section doit répondre à une question concrète.
La clarté prime sur l’effet.
Le contenu guide la structure avant le décor.
Le design doit soutenir la crédibilité, pas l’enrober artificiellement.

UX

Lecture rapide du message principal et des offres.
CTA cohérents à travers le parcours.
Structure responsive pensée pour le scan mobile.
Contenu éditorial resserré pour limiter le bruit.

UI

Direction visuelle sobre avec hiérarchie typographique forte.
Design system simple mais réel : boutons, pills, sections, surfaces.
Fondations CSS séparées pour éviter le fichier global monolithique.
Animations discrètes et ciblées.

Suite

Ajouter des cas client réels et un portfolio enrichi.
Pousser les tests end-to-end sur les parcours critiques.
Mesurer plus finement les performances per-route.

Qualite

Testing & fiabilite

Le projet intègre une base de tests pragmatique : validations unitaires, contrôles structurels, smoke checks et build de production.

Tests unitaires sur les zones sensibles (metadata, architecture, validation contact).
Contrôles de structure et accessibilité sur les écrans clés.
Build et lint intégrés au flux de vérification.

Technique

Architecture

Projet modulaire App Router avec séparation explicite entre routing, contenu, UI, logique métier et styles globaux.

Points cles

Routing marketing + route API contact.
Contenu éditorial découpé par zone du site.
Fondations CSS extraites dans /styles.
Tests unitaires et smoke checks déjà présents.

publicRoutes

/
/services
/portfolio
/portfolio/[slug]
/a-propos
/contact

quality

Lint
TypeScript strict
Vitest
Smoke tests
Sitemap
Robots
Metadata par page

Galerie

Captures & détails d'interface.

Une lecture visuelle du projet : écrans clés, rythme, hiérarchie, composants et choix de mise en page.

Envie d'un échange ? Je peux vous présenter ce projet comme en entretien : choix techniques, performance, accessibilité.

Voir la démo Voir le code

Contexte du projet

•Positionnement plus net que la majorité des sites portfolio/freelance génériques.

•Parcours clair de la promesse jusqu’au contact.

•Base éditoriale centralisée et maintenable.

•Refactor poussé sur l’architecture, le design system et la qualité globale.

Testing & fiabilite

Le projet intègre une base de tests pragmatique : validations unitaires, contrôles structurels, smoke checks et build de production.

Tests unitaires sur les zones sensibles (metadata, architecture, validation contact).
Contrôles de structure et accessibilité sur les écrans clés.
Build et lint intégrés au flux de vérification.

Architecture

Projet modulaire App Router avec séparation explicite entre routing, contenu, UI, logique métier et styles globaux.

Points cles

Routing marketing + route API contact.
Contenu éditorial découpé par zone du site.
Fondations CSS extraites dans /styles.
Tests unitaires et smoke checks déjà présents.

publicRoutes

/
/services
/portfolio
/portfolio/[slug]
/a-propos
/contact

quality

Lint
TypeScript strict
Vitest
Smoke tests
Sitemap
Robots
Metadata par page