Respire est une application de méditation pensée pour aider les gens à mieux gérer leur stress, se recentrer, et retrouver un certain équilibre mental au quotidien.
Elle propose des séances guidées et des exercices de respiration ou de relaxation, adaptés selon les besoins et les moments de la journée.
Respire Studio
2025
J’ai imaginé ce projet dans l’idée de concevoir un produit complet autour duquel je pourrais construire un Design System solide.
C’était l’occasion pour moi de travailler à la fois sur l’aspect visuel, la logique de composants réutilisables, la cohérence de l’interface, et toute la structure nécessaire à une application qui pourrait évoluer dans le temps.
Comment créer une interface à la fois claire, cohérente et flexible, dans un univers calme et apaisant comme celui de la méditation ?
L’enjeu était aussi de rendre le design facilement maintenable et réutilisable si plusieurs designers ou développeurs devaient s’en servir plus tard.
J’ai défini l’univers visuel et structuré un Design System dans Figma, en organisant les fichiers, créant des composants modulaires, un user flow, ainsi que quelques guidelines et specs pour m’exercer au handoff développeur.
Le projet m’a permis de poser les bases d’un Design System clair, modulaire et réutilisable, avec une vraie réflexion produit derrière.
L’interface est sobre et fluide, et tous les composants ont été pensés pour pouvoir évoluer facilement.
Ce projet m’a aussi permis de me challenger sur l’organisation, la rigueur, et la clarté dans la façon de transmettre mes intentions à d’autres membres d’une équipe.
Ce moodboard m’a servi de point de départ pour définir l’univers visuel de Respire.
Je voulais créer une ambiance à la fois calme, épurée et accessible, qui invite naturellement à ralentir, respirer et se recentrer.
Pour l’identité visuelle de l’application, j’ai choisi la typographie SF Pro, reconnue pour sa lisibilité et sa flexibilité. Elle prend en charge un large éventail de tailles et de styles, ce qui permet d’avoir une lecture fluide et confortable sur l’ensemble des interfaces.
La couleur principale utilisée est un vert profond (#566422), appliqué aux éléments interactifs clés tels que les boutons d’action, afin d’assurer une hiérarchie visuelle tout en ayant un bon contraste sur fonds clairs.
ui kit
sitemap
Nos cards et CTA intègrent des ombres portées marquées pour renforcer l’aspect ludique de l’interface et mettre en valeur notre style graphique. Cette approche attire l’attention sur les informations importantes et incite notre cible jeune à consulter les contenus.
Des éléments graphiques sont disposés avec parcimonie pour rappeler l’identité MtaTerra et renforcer la cohérence visuelle de notre solution.