DESIGN + FRONT-END
AVAILABLE FOR WORK
Accessibility
Text size
PROJECT FILE03 / 04
← BACK TO PROJECTS
Refonte webFigmaWordPressBricks Builder

Hypnomelia

Refonte du site web d’un praticien en hypnose, de la maquette Figma à l’intégration sur WordPress avec Bricks Builder.

Hypnomelia

Présentation

Hypnomelia est un projet de refonte du site web d’un praticien en hypnose. Le travail couvre les deux étapes principales du projet : la conception de la maquette dans Figma, puis sa réalisation sur WordPress à l’aide de Bricks Builder, un constructeur de pages.

L’objectif était de donner au site une présentation plus claire et cohérente avec l’activité du praticien, tout en préparant une interface qui puisse être intégrée et gérée dans WordPress.

Le besoin

Le site est le premier point de contact en ligne entre le praticien et les personnes qui souhaitent découvrir l’hypnose et son accompagnement. La refonte devait donc améliorer la présentation de son activité et rendre la consultation du site plus simple.

Avant de passer à l’intégration, il fallait définir une direction visuelle et organiser les contenus dans une maquette. Cela permettait de réfléchir à la structure des pages et à leur apparence avant de les construire dans WordPress.

Conception de la maquette dans Figma

J’ai utilisé Figma pour concevoir la maquette du site. Cette étape a servi à définir la mise en page, la hiérarchie visuelle et l’organisation des différents contenus avant leur intégration.

La maquette a également servi de référence pendant la réalisation : elle permettait de garder un fil conducteur entre le design préparé dans Figma et les pages construites dans WordPress.

Réalisation avec WordPress et Bricks Builder

Une fois la maquette définie, j’ai réalisé le site avec WordPress. La construction des pages a été effectuée avec Bricks Builder, un constructeur visuel qui permet de composer les mises en page directement dans WordPress.

Ce choix relie le travail de conception à une implémentation dans un outil de gestion de site : les éléments de la maquette sont reconstruits sous forme de pages WordPress plutôt que de rester au stade du prototype.

Déroulement du projet

  1. Comprendre le contexte — identifier la nature du site et le présenter comme celui d’un praticien en hypnose.
  2. Concevoir la maquette — organiser les pages et définir leur direction visuelle dans Figma.
  3. Construire les pages — reprendre la maquette dans WordPress avec Bricks Builder.
  4. Comparer le rendu à la maquette — vérifier la cohérence générale entre la conception et le site intégré.

Outils

  • Figma — conception de la maquette.
  • WordPress — plateforme utilisée pour le site.
  • Bricks Builder — construction visuelle des pages dans WordPress.

Résultat

Le projet aboutit à une refonte du site d’Hypnomelia conçue dans Figma puis intégrée sur WordPress avec Bricks Builder. Le site est consultable à l’adresse hypnomelia.fr.