




PROJET
Bioanalogie Inc.
Refonte complète du site : identité, structure, contenu et design.
Conception d’un site intuitif, cohérent et profondément aligné avec l’univers symbolique de la Bioanalogie.
L’objectif était de moderniser un site vieillissant tout en respectant l’essence de l’enseignement de Jean-Philippe Brébion.
Le projet a inclus la refonte graphique, la réorganisation complète de l’architecture de l’information, ainsi qu’une amélioration significative de l’expérience utilisateur.
Résultat : un site clair, inspirant et structuré, capable d’accueillir un large public tout en valorisant la profondeur de l’approche enseignée.
Client
Jean-Philippe Brébion – Fondateur de la Bioanalogie Inc.
Rôle
Web designer & UI/UX designer, rédacteur SEO
Scope
• Architecture de l’information
• Adaptation et réécriture de contenus
• Optimisation SEO (Yoast)
• Design responsive
• Création d’illustrations, pictogrammes et visuels personnalisés
• Intégration sous WordPress
Tools
WordPress, Photoshop, Illustartor
YEAR
Décembre 2024 – juin 2025
Ancien site web Bioanalogie
Le site bioanalogie.com, consacré à l’enseignement de Jean-Philippe Brébion, avait besoin d’une refonte complète tant sur le plan technique que graphique et éditorial.
Refonte du site web Bioanalogie.com
L’objectif était de moderniser un site vieillissant tout en respectant l’essence de l’enseignement de Jean-Philippe Brébion.
Contexte et objectifs
-
Design daté, peu lisible.
-
Arborescence confuse, manque de structuration.
-
Visuels incohérents, esthétiquement peu harmonisés.
-
Problèmes d’accessibilité, de lisibilité et de navigation.
-
Contenus pédagogiques denses mais mal hiérarchisés.
-
Absence d’un parcours utilisateur clair pour accéder aux Clés de Naissance, Formations, Articles, etc.
Défis principaux
-
Moderniser un site dense sans perdre la richesse du contenu.
-
Créer une interface claire malgré la complexité des concepts abordés.
-
Adapter le message à un public non technophile (souvent 45-65 ans).
-
Travailler en collaboration avec une équipe dispersée.
-
Facilité de gestion du contenu/mise en page du site par le client.
Résultats
-
Identité visuelle unifiée.
-
Expérience utilisateur grandement améliorée (responsive, parcours simplifiés).
-
Structuration logique des contenus.
-
Arborescence claire centrée sur l’utilisateur.
-
Mise en avant les produits principales de Bioanalogie.
-
Visibilité SEO optimisée.
-
Retour très positif de l’équipe et des utilisateurs.
Couleurs
Une identité visuelle moderne et cohérente, pensée pour instaurer un climat de confiance et de simplicité.
Une palette de couleurs soigneusement définie pour améliorer la clarté, la lisibilité et l’expérience utilisateur.
#003069
#2E649D
#E1EDF9
#DDB975
#FCD68E
#F1E5D1
Typographie
Merriweather Sans a été spécialement conçue pour la lecture à l’écran, avec des formes de lettres ouvertes, des courbes fluides et un espacement généreux. Elle offre une large compatibilité avec les navigateurs ainsi qu’un temps de chargement rapide, un élément essentiel pour l’expérience utilisateur.
This font is particularly well-suited for a target audience aged 45 to 65, thanks to its clear shapes, open counters, and generous spacing, which make reading easier—even in cases of visual fatigue or early presbyopia.
Merriweather Sans
Cette typographie est particulièrement adaptée à une audience cible âgée de 45 à 65 ans, grâce à ses formes claires, ses contre formes ouvertes et son espacement généreux, qui facilitent la lecture — même en cas de fatigue visuelle ou de début de presbytie.
Merriweather Sans Bold
ABCDEFGHIJKLMNO
PQRSTUVWXYZ
abcdefghijklmnopq
rstuvwxyz
0123456789
!@#$%^&*()
Merriweather Sans Regular
ABCDEFGHIJKLMNO
PQRSTUVWXYZ
abcdefghijklmnopq
rstuvwxyz
0123456789
!@#$%^&*()
Tous les styles ont été préparés dans WordPress afin de permettre un développement rapide et un contrôle optimal du design.
H 1 : 40 px
H 2 : 36 px
H 3 : 30 px
H 4 : 24 px
H 5 : 18 px
Paragraphe 1 : 18 px
Paragraphe 2 : 16 px
Paragraphe 3 : 14 px
Texte de bouton : 16 px
Navigation fluide et intuitive
La réorganisation complète de l’architecture de l’information, ainsi qu’une amélioration significative de l’expérience utilisateur.












































