Étude de cas · produit digital
altaydagistan.com
Concevoir une plateforme digitale complète, de l’interface au système
Un environnement éditorial sur mesure, pensé comme un produit
010203hero-cms-general-ui01 Une expérience publique et son outil de publication, conçus ensemble.
Pour refondre mon site, je ne voulais pas simplement produire un nouveau portfolio plus rapide ou remplacer WordPress par une technologie plus récente. Je voulais réunir dans un même système une direction artistique exigeante, une expérience fluide, une gestion de contenu rapide, une architecture robuste, des outils de conversion, un multilingue propre, un SEO maîtrisé et une véritable intégration de l’IA.
J’ai conçu et développé cette plateforme de bout en bout : son identité visuelle, ses interfaces publiques, son CMS, ses modèles de contenu, ses API, son architecture frontend, ses outils de publication, ses analytics et ses workflows IA.
Le résultat est un produit digital entièrement sur mesure, construit autour de mes usages et capable d’évoluer avec eux.
01 / Expérience
Concevoir l’expérience avant de choisir les outils
La technologie n’était pas le point de départ. Je voulais d’abord définir la qualité d’expérience que le système devait offrir, aussi bien au visiteur qu’à son utilisateur côté administration.
Côté public, le site devait soutenir une direction artistique forte, des compositions éditoriales ambitieuses, du mouvement, de grands visuels et des contenus riches sans sacrifier la rapidité.
Côté administration, je voulais un environnement immédiat et agréable à utiliser, où les fonctions courantes restent accessibles sans dépendre d’une accumulation de plugins ou de couches intermédiaires.
L’architecture devait aussi pouvoir accueillir de nouveaux contenus, de nouvelles langues, des outils d’analyse et des agents IA sans imposer une reconstruction quelques mois plus tard.
- Soutenir une direction artistique forte
- Rendre l’administration immédiate
- Structurer portfolio, services et contenus
- Intégrer les fonctions de conversion
- Maîtriser multilingue, SEO et déploiement
- Relier analytics et agents IA
02 / Architecture
Deux applications, un seul produit
Le CMS sur mesure en PHP et MySQL constitue le centre opérationnel du système. Il gère contenus, médias, traductions, formulaires, demandes commerciales, SEO, téléchargements et accès protégés. Astro utilise ces données pour générer le site public sous forme statique.
- AdministrerCMSPHP / MySQL
- ExposerJSONAPI de contenu
- ComposerAstroFrontend + SCSS
- GénérerStatiquePages optimisées
- LivrerProductionSite autonome
Une fois construit, le frontend n’a pas besoin du CMS pour afficher normalement ses pages éditoriales. Les visiteurs reçoivent directement une version pré-générée du site, tandis que le CMS reste une application riche et spécialisée.
03 / Modèle éditorial
Modéliser le contenu plutôt que remplir des pages
Une grande partie du travail a porté sur la structure du contenu. Une page, un article ou un projet possède son propre modèle, ses états de publication et ses relations.
Un projet de portfolio peut réunir des informations client, une galerie ordonnée, des vidéos, des métadonnées, des catégories, des traductions et des champs propres à certains types de projets. Le CMS organise ces éléments sans les réduire à un grand champ de texte.
010203cms-portfolio-listcms-project-editor04 / Multilingue
Intégrer le multilingue au modèle de données
Une page ou un projet reste une seule entité à laquelle viennent s’ajouter ses contenus localisés. Le CMS permet de travailler sur les différentes versions, d’identifier les traductions manquantes et de visualiser la couverture linguistique globale.
cms-translation-tabsVoir+ Traduirecms-translation-coverage05 / Champs
Structurer la souplesse sans construire un page builder universel
Deux systèmes complémentaires permettent de conserver de la souplesse sans complexifier le modèle global.
Templates
Des ensembles de champs définis une fois puis attribués à plusieurs projets.
Champs propres à une page
Une réponse à un besoin ponctuel sans alourdir tous les autres contenus.
altay_platform_case_studyTexteTexteTexteNombrecms-template-fields06 / Conversion
Faire du site un outil de conversion
Le site ne devait pas rester un simple portfolio à consulter. Les fonctions de contact, de devis, de téléchargement et d’accès protégé font partie du produit et peuvent évoluer avec les besoins commerciaux.
Formulaires et demandes de devis
Un constructeur de formulaires, une validation des données, des notifications, une protection antispam et une interface de gestion des soumissions sont intégrés au CMS.
Texte½E-mail½Sélection1/1Zone de texte1/1cms-form-buildercms-form-submissions-demoTarifs protégés
Les données sensibles restent dynamiques et ne sont jamais intégrées au build statique. Elles sont chargées seulement après validation d’un accès autorisé.
Cette grille tarifaire est disponible sur invitation.
Voir les tarifs← Revenirfrontend-pricing-unlockcms-pricing-configTéléchargements sécurisés
Les ressources privées restent hors de la racine publique du serveur. Les accès sont générés par des liens signés, directement ou après qualification d’un lead.
cms-download-manager07 / Product design
Construire le CMS comme une véritable interface produit
L’administration est une interface de travail à part entière. Ses modèles, sa navigation, ses états et sa hiérarchie d’actions visent à réduire le nombre d’étapes nécessaires pour publier ou modifier une information.
special_pagePubliéservicePubliéspecial_page Protégécms-admin-widealtay_platform_case_studyValeurs techniques en monospace08 / Direction artistique
Faire de la direction artistique une infrastructure du produit
Le site devait pouvoir accueillir des univers visuels très différents sans perdre sa propre signature. J’ai donc conçu la direction artistique comme une grammaire : des principes communs pour hiérarchiser, rythmer, contraster et mettre en mouvement, avec assez de latitude pour que chaque page raconte son sujet.
Cette continuité part de Figma, se traduit en composants Astro et reste lisible du grand écran au mobile. Le système évite ainsi deux écueils : une interface uniforme qui efface les projets, ou une succession d’écrans spectaculaires mais sans cohérence d’ensemble.
- 01Expression éditoriale
La composition s’adapte au récit, aux images et au niveau d’information de chaque page.
- 02Cohérence systémique
Les mêmes règles de hiérarchie, de contraste et de rythme créent une continuité sans imposer un modèle unique.
- 03Adaptation native
Le responsive recompose les priorités ; il ne se contente pas de réduire une maquette pensée pour le desktop.
Donner un rôle à chaque voix
au premier regard.
Une lecture plus calme développe le propos, tandis que les repères courts structurent les informations techniques.
SYSTÈME · ÉDITION · INTERFACELes contrastes de voix organisent le regard avant même que l’utilisateur commence à lire.
Attribuer une intention à chaque signal
La couleur soutient le sens et l’interaction ; elle n’est jamais ajoutée comme simple décoration.
Créer du rythme sans rigidifier la mise en page
Les proportions, les respirations et les regroupements construisent une cadence reconnaissable, même lorsque la composition change.
Conserver l’intention, recomposer le format
- Hiérarchie préservée
- Image recontextualisée
- Action toujours accessible
Des décisions reliées de Figma au navigateur
La bibliothèque de conception sert de référence, mais la preuve du système se trouve dans son comportement réel : composants fluides, états cohérents, images respectées et compositions capables de changer de densité sans perdre leur identité.
frontend-portfolio-grid09 / Interactions
Composer librement sans sacrifier la fluidité
Le système visuel ne standardise pas toutes les pages de la même manière. Il fournit les fondations nécessaires pour composer de grands visuels, du mouvement et des interactions spécifiques, avec des comportements partagés et une alternative visible sans JavaScript.
Un composant portfolio et son retour visuel au survol.
Découvrir ce projetfrontend-project-interactionfrontend-mobile-menu10 / Performance
La performance comme qualité d’expérience
La performance faisait partie du cahier des charges du design. Astro produit des pages statiques, le pipeline d’images génère les formats adaptés aux différents écrans, les polices sont auto-hébergées et les dépendances côté navigateur restent limitées.
11 / Visibilité
Un SEO intégré au système de publication
Les contenus disposent de leurs propres métadonnées, canonical, contrôles d’indexation et informations sociales. Astro génère les données structurées, le sitemap, robots.txt et les sorties techniques correspondantes. Les environnements hors production sont automatiquement protégés contre l’indexation.
cms-seo-editor<title>altaydagistan.com : CMS sur mesure et frontend Astro</title><link rel="canonical" href="…" /><meta property="og:type" content="website" />12 / IA native
Faire de l’IA une couche native du système
Je ne voulais pas limiter les agents IA à des interventions ponctuelles qui imposent de fournir des fichiers et de réexpliquer constamment le projet. Le CMS génère donc automatiquement un contexte structuré décrivant pages, projets, routes, statuts, langues, traductions et présence des principales informations SEO.
{
"route": "/portfolio-design/…/",
"locale": "fr",
"status": "published",
"seo": { "title": true, "description": true }
}Quelles pages n’ont pas encore de traduction anglaise ?
Quelles landing pages n’ont pas de meta description ?
Quelle est la structure actuelle du portfolio ?
Un environnement local au centre du workflow
Les agents travaillent directement sur le projet avec leurs instructions, l’état actuel du CMS et les données réellement nécessaires. Le local devient un environnement opérationnel associant code, contenu, versioning, analytics et IA, avec une frontière claire entre données publiques, privées et informations de développement.
13 / Analytics
Mesurer les actions qui comptent réellement
Matomo auto-hébergé mesure la fréquentation et les événements utiles : ouverture d’un projet, clic sur un CTA, contact par email, téléchargement ou soumission réussie. Une intégration en lecture seule transforme ensuite ces données en rapports locaux bornés et assainis pour les agents IA.
Données de démonstration · agrégées et anonymisées
"summary": {
"visits": 742,
"pageviews": 1684,
"bounceRate": 0.47,
"events": [
{ "name": "portfolio_project_open", "count": 53 },
{ "name": "contact_form_submit", "count": 11 }
]
}Exemple de rapport assaini à des fins de démonstration. Les valeurs illustrent uniquement le format de données transmis aux agents IA.
Quelles pages attirent du trafic sans générer suffisamment d’actions de contact ?
Quels canaux amènent des visiteurs intéressés par les services proposés ?
14 / Évolution
Prévoir l’évolution autant que le lancement
Les checkpoints Git, sauvegardes MySQL et migrations créent des points de restauration avant les opérations sensibles. Le code reste versionné indépendamment du contenu et les déploiements sont déclenchés manuellement : publier une nouvelle version demeure une décision explicite.
- 01Git checkpoint
- 02MySQL backup
- 03Schema sync
- 04Content sync
- 05Astro build
- 06Rsync upload
- 07CDN purge
- Checkpoint Gitvalidé
- Sauvegarde MySQLvalidée
- Build Astrovalidé
- Synchronisationvalidée
deploy-progress15 / Sécurité
Traiter la sécurité comme une propriété du produit
Même principalement destiné à mon propre usage, le CMS est construit comme une véritable application. Requêtes préparées, protection CSRF, sessions sécurisées, mots de passe bcrypt, authentification à deux facteurs, limitation des tentatives, Turnstile, honeypots et CORS contrôlé restent des fondations discrètes du produit.
Saisissez le code temporaire généré par votre application.
cms-login-2fa16 / Le système
Un système cohérent de la création à l’analyse
La direction artistique
Elle définit le langage visuel et la qualité éditoriale du frontend.
Le design system
Il transforme cette direction en règles et composants réutilisables.
Le CMS
Il organise le contenu selon les besoins réels du site.
Astro
Il transforme ce contenu en une expérience publique statique et performante.
Les fonctions de conversion
Elles relient les contenus aux demandes de contact, de devis et de téléchargement.
Matomo
Il mesure les comportements et les actions utiles.
La couche IA locale
Elle permet d’interroger la structure et les performances du produit.
Git, sauvegardes et déploiement
Ils sécurisent l’évolution du code, du contenu et du schéma.
Conclusion
Concevoir une plateforme capable d’évoluer
Le principal résultat de ce travail n’est ni le CMS seul, ni le frontend seul. C’est l’environnement qui les relie : suffisamment structuré pour rester robuste, suffisamment ouvert pour évoluer et suffisamment flexible pour soutenir des besoins éditoriaux et artistiques qui ne rentrent pas toujours dans les modèles standards du web.
Cette plateforme me permet de concevoir des contenus plus librement, de publier plus rapidement, de suivre leur efficacité, de travailler avec des agents IA depuis mon environnement local et de faire évoluer les fonctions du site sans perdre la maîtrise de son architecture.
Le projet réunit plusieurs dimensions de mon métier souvent présentées séparément : direction artistique, UX/UI, développement, conception de systèmes, stratégie de contenu, conversion et automatisation.
Le site n’est plus seulement le support sur lequel je présente mon travail. Il est devenu lui-même un produit que j’ai conçu.
Une expérience claire, crédible et rapide.
Directeur artistique & Web DesignerAltay DagistanPortfolio frontend-final-responsive