Portfolio À Propos & Contact CV

Système de design & choix visuels

L'identité de FitJourney a été pensée pour l'usage réel — chaque couleur, chaque composant sert la lisibilité et la performance en conditions d'effort.

Design System Presentation

Palette de couleurs

#09090B
Background — Fond des écrans, réduit la fatigue visuelle
#111113
Surface / Cartes — Cartes d'exercices et conteneurs
#22C55E
Accent principal — Actions clés, validation, progression
#52B788
Accent secondaire — États hover, variantes boutons
#FFFFFF
Texte principal — Titres et texte sur fond sombre
#9A9A9A
Texte secondaire — Labels, données précédentes

Typographie — Inter

Display 1 Bold

22px · Bold
Titres principaux

Display 2 Bold

20px · Bold
Titres sections

Display 3 Bold

18px · Bold
Sous-titres

Heading 1 Bold

14px · SemiBold
Noms exercices

Body — Sets · Reps · Kg

14px · Regular
Données tableau

Body Small — Labels secondaires

10px · Regular
Infos contextuelles

Inter a été choisi pour sa lisibilité optimale sur écran, sa clarté en petit corps et sa cohérence dans les tableaux de données — essentiel pour une utilisation en conditions d'effort.

Composants clés

3
Workouts

KPI Card

Affiche une métrique clé. Vert accent pour l'importance.

Message motivant

Insight Box

Feedback personnalisé basé sur la progression.

Progress Circle

Visualise les objectifs et la progression.

Button Primary

Bouton d'action principal. Fond sombre, survol vert.

DESIGN SYSTEM

Composants & états interactifs

Chaque composant suit des règles claires d'interaction pour rendre l'action évidente, réduire l'hésitation et renforcer la confiance de l'utilisateur pendant l'effort.

🎯
Objectif

Créer un système cohérent et prévisible qui guide l'utilisateur, donne du feedback immédiat et l'aide à agir plus vite.

1. Feedback immédiat

L'utilisateur comprend instantanément l'état de son action.

Contrôle d'entraînement

Démarrer, mettre en pause, reprendre.

DEFAULT RUNNING PAUSED
Start Pause Resume
Le vert signale une action en cours ou disponible.
État de complétion

Valider l'action et visualiser le résultat.

IN PROGRESS COMPLETED
Finished states
Validation claire = confiance utilisateur renforcée.
2. Validation avant action

Les CTAs deviennent disponibles uniquement quand les conditions sont remplies.

Bouton principal

Encourage l'action, réduit les erreurs.

DEFAULT ACTIVE
Let's Go states
Un seul CTA principal par écran pour éviter la confusion.
Création de séance

CTA activé uniquement quand des exercices sont sélectionnés.

DISABLED ACTIVE
Create Workout states
Empêche les actions non intentionnelles.
3. Sélection & Focus

Les états sélectionnés renforcent la hiérarchie et réduisent la charge cognitive.

Sélection d'exercice

Exercice sélectionné dans la liste.

DEFAULT SELECTED
Exercise card states
Contraste + coche = compréhension immédiate.
Filtre / Navigation

Filtre actif dans la navigation par niveau.

DEFAULT SELECTED
Filter tag states
État actif visible sans ambiguïté.
Principes du système
Action claire
Une action principale par écran. Le vert attire l'attention sur ce qui compte.
Feedback immédiat
Chaque action donne un retour visuel instantané pour guider l'utilisateur.
Structure cohérente
Composants réutilisables, états standardisés pour une expérience prévisible.
Lisibilité en effort
Contraste élevé, tailles de touch optimisées pour un usage rapide et sans friction.
⭐ Chaque décision visuelle sert un seul objectif : permettre à l'utilisateur d'agir sans réfléchir — même en plein effort.

Évolution du design

Low-Fi
Low-Fi
Structure & flux
Mid-Fi
Mid-Fi
Hiérarchie & layout
High-Fi
Hi-Fi V1
Première itération
Hi-Fi V02
Hi-Fi V2
Première itération affinée
Hi-Fi V03
Hi-Fi V3
Version intégrée & testée
Hi-Fi V04
Hi-Fi V4
Version finalisée & optimisée
Explication & structure des parcours · Hiérarchie claire et information organisée · Tests utilisateurs & itérations · Version finalisée & optimisée ·

Principes de design

🌙

Dark UI

Réduction de la fatigue visuelle en salle. Cohérence avec l'environnement fitness.

Vert = Action & Validation

Le vert signale systématiquement une action réussie ou un bouton principal.

Cartes = Structure

Chaque exercice dans sa carte. Séparation visuelle nette pour une lecture rapide.

Hiérarchie stricte

Action principale toujours évidente. Pas d'ambiguïté sur quoi faire ensuite.

⭐ Chaque décision visuelle sert un seul objectif : permettre à l'utilisateur d'agir sans réfléchir — même en plein effort.

Découvrir plus ?

Explore les autres parties du projet ou retourne à l'overview.

Voir Dashboard Design Voir les Résultats →