Cabinet de psychologie

Contexte

Expliquer un sujet peu familier sans surcharger et aider le visiteur à reconnaître des situations qu’il connaît. Le site relie l’offre du cabinet à un produit numérique distinct sur Telegram.

L’enjeu

Associer une image chargée d’émotion à une description précise de l’étape suivante. L’auto-bilan doit être perçu comme un outil d’observation de soi, jamais comme un substitut à une consultation ou à un diagnostic médical.

Nos choix

1. Une seule entrée principale

   Le premier écran contient une offre courte, un bouton pour l’auto-bilan gratuit et une précision sur le format. Le visiteur sait d’avance que la suite s’ouvre dans Telegram.

2. Un enchaînement plutôt qu’une pile de blocs

   Des situations familières, la page passe à quatre schémas indicatifs, explique les étapes de l’auto-bilan, présente le cabinet et répond aux questions.

3. Des images qui portent le sujet

   Une pièce avec une fenêtre ouverte et une cage, un oiseau, une plume et des illustrations d’objets en volume racontent une seule histoire visuelle. Quatre pictogrammes aident à distinguer les schémas.

4. Le même parcours sur tous les écrans

   Les appels à l’action répétés mènent à un seul parcours. Sur petit écran, la grille devient une suite verticale et la grande typographie s’adapte à la largeur.

Notre réalisation

1. Structure et textes

   Nous avons construit un enchaînement allant de l’offre principale et des situations familières aux quatre profils, aux étapes du questionnaire, à la présentation du cabinet et aux questions fréquentes. Chaque bloc prépare le suivant.

2. Direction visuelle

   Nous avons développé un ton éditorial apaisé : grands titres à empattements, surfaces neutres et chaudes, espacements généreux. La version actuelle ajoute la pièce, l’oiseau et des images en volume pour les schémas.

3. Intégration responsive

   Nous avons réalisé le site en HTML, CSS et JavaScript. Sur petit écran, les contenus s’empilent verticalement et l’appel principal reste visible ; titres et espacements s’adaptent à la largeur.

4. Lien vers le produit et lancement

   Nous avons mis en place des passages cohérents vers Telegram et lancé le site. Il présente l’offre, tandis que le questionnaire, les résultats personnels, les paiements et les rendez-vous se poursuivent dans MindType, développé à part.

Système visuel

La version actuelle associe un fond clair et chaud à un texte bleu nuit et à un accent terracotta adouci. Onest sert la lecture et l’interface, Cormorant les titres, et Bodoni le chiffre expressif du premier écran.

Texte courant

Onest 400 · 16 px / 1.6

Premier titre sur ordinateur

Cormorant 300 · clamp(66 px, 6.8vw, 106 px) / 0.88

Interlettrage du titre

−0.068em

Sous-titre

Onest 400 · 18 px / 1,7 ; 490 px maximum

Pour un viewport de 1180 px

H1 : 80,24 px ; interligne : 70,61 px

Titres de section

Cormorant 300 · clamp(34 px, 4vw, 52 px) / 1.15

Parcours et contenus

Une situation familière → les quatre schémas expliqués → la présentation du court questionnaire → la suite sur Telegram. Les informations sur les consultations restent un parcours à part : rien n’oblige à passer le questionnaire avant de prendre contact.

Promotion

Nous avons optimisé le site pour le référencement, configuré les comptes Yandex Direct et Google Ads, puis lancé la publicité et la promotion dans les moteurs de recherche.

Le résultat

Un site clés en main pour un cabinet de psychologie est en ligne. Structure, textes, système visuel et intégration responsive fonctionnent ensemble, et les liens vers Telegram prolongent le parcours dans MindType. Le site et le bot sont deux parties liées d’un même projet, chacune décrite dans sa propre étude de cas.

Outils et réalisation

HTML · CSS · JavaScript sans framework · animations CSS/JS sur mesure · liens profonds Telegram