Vialia — Carnet de voyage
Projet perso • Développement
Application web de carnet de voyage avec une interface inspirée des carnets papier manuscrits. Riche en options de personnalisation (thèmes, typographies, mises en page), Vialia explore la frontière entre l'artisanat et le numérique — un projet personnel qui illustre mon approche UX centrée sur l'émotion et l'appropriation.
Contexte
Vialia est né d'une envie personnelle : je souhaitais partager mes souvenirs avec mes proches et que cela soit agréable à regarder. L'idée était de créer une application qui reproduit le plaisir sensoriel du carnet papier — les textures, les irrégularités, le sentiment d'appropriation — tout en offrant les avantages du numérique.
Défi
Simuler l'esthétique organique du carnet manuscrit dans une interface web sans que cela nuise à l'utilisabilité. Concevoir un système de personnalisation profond (thèmes, polices, mises en page, effets papier) qui reste accessible à des utilisateurs non techniques.
Solution
Design system modulaire basé sur des presets de « styles de carnet » que l'utilisateur peut appliquer en un clic ou personnaliser finement. Utilisation de CSS custom properties pour piloter l'ensemble des variables visuelles dynamiquement depuis l'interface.
Déroulement du projet
Recherche & moodboard
Analyse de carnets de voyage physiques, d'applications existantes et constitution d'un moodboard définissant les directions visuelles possibles.
Architecture UX
Définition des user flows principaux : créer un voyage, ajouter une étape, personnaliser le style, partager ou exporter. Wireframes basse fidélité pour valider les parcours.
Design UI & système de thèmes
Création des 4 thèmes de base sous Figma avec leurs variables associées, conception des composants de saisie (blocs texte, photos, cartes, stickers) et des options de personnalisation.
Développement NextJS
Développement de l'application en NextJS, architecture des composants de carnet, implémentation du moteur de thèmes via CSS custom properties et gestion de l'état avec Context API.
Stack technique
- NextJs
- Figma
Ce qui a été livré
- Application fonctionnelle avec plusieurs thèmes visuels distincts et personnalisables
- Système de personnalisation couvrant typographie, couleurs, textures et mises en page
- Architecture de composants réutilisables et facilement extensible
- Projet personnel démontrant une approche UX centrée sur l'émotion et l'expérience utilisateur