EDUPRO
Application Éducative Mobile
Guide de Design & Spécifications Figma
Version 1.0
11/02/2026
1. Introduction
1.1 À propos d'EduPro
EduPro est une application mobile éducative conçue pour démocratiser l'accès à une
éducation de qualité. Avec un design professionnel et sobre, l'application vise à offrir
une expérience d'apprentissage intuitive et engageante pour tous les utilisateurs.
1.2 Objectifs du Design
• Créer une interface claire et professionnelle
• Faciliter la navigation et l'accès au contenu éducatif
• Assurer une excellente accessibilité
• Maintenir la cohérence visuelle sur toutes les plateformes
1.3 Public Cible
Étudiants, professionnels en formation continue, autodidactes de tous âges souhaitant
acquérir de nouvelles compétences via une plateforme mobile accessible.
2. Identité Visuelle
2.1 Logo et Nom
Nom de l'application : EduPro
Tagline : Apprendre. Progresser. Réussir.
Icône : Toque de graduation stylisée en bleu professionnel
2.2 Palette de Couleurs
La palette reflète le professionnalisme et inspire la confiance :
Couleur Hex Usage
Primary Blue #2C5AA0 Boutons principaux, titres, liens, icônes
principales
Dark Blue #1E3A5F En-têtes, textes importants, arrière-plans
sombres
Light Blue #4A90E2 Liens secondaires, éléments interactifs,
highlights
Success Green #27AE60 Messages de succès, validation, progression,
badges
Warning Orange #F39C12 Alertes, avertissements, badges importants
Text Dark #2D3436 Texte principal, contenu
Text Light #636E72 Texte secondaire, descriptions, métadonnées
Background #F8F9FA Fond d'écran, fond de cartes, sections
Border #DFE6E9 Bordures, séparateurs, contours
2.3 Typographie
Police principale : Inter (Google Fonts)
Police de fallback : Arial, system-ui
Style Taille Poids Usage
H1 - Titre Principal 32px Bold (700) Titres de pages principales
H2 - Sous-titre 24px Semibold Sections principales, catégories
(600)
H3 - Titre de carte 18px Semibold Titres de cartes, modules de
(600) cours
Body - Texte 16px Regular Contenu principal, descriptions
principal (400)
Caption - Légende 14px Regular Légendes, métadonnées, labels
(400)
Small - Petit texte 12px Regular Notes, timestamps, annotations
(400)
3. Spécifications des Écrans
3.1 Écran 1 : Onboarding (Accueil)
Objectif : Présenter l'application et ses valeurs aux nouveaux utilisateurs.
Composants clés :
• Illustration principale engageante et professionnelle
• Titre accrocheur (H1 - 32px Bold)
• Description concise (Body - 16px Regular)
• Pagination dots (3 slides recommandées)
• Bouton CTA principal : 'Commencer' (hauteur 48px)
• Lien 'Passer' en haut à droite (Caption - 14px)
Interactions :
• Swipe horizontal pour naviguer entre les slides
• Tap sur 'Commencer' pour aller à l'écran de connexion
• Tap sur 'Passer' pour accéder directement à l'écran de connexion
3.2 Écran 2 : Connexion / Inscription
Objectif : Permettre aux utilisateurs de s'authentifier ou de créer un compte.
Composants clés :
• Logo de l'application centré en haut
• Champ Email (hauteur 48px, border radius 8px)
• Champ Mot de passe avec icône de visibilité
• Bouton 'Se connecter' (Primary Blue, hauteur 48px)
• Lien 'Mot de passe oublié ?' (Light Blue)
• Divider avec texte 'OU'
• Boutons de connexion sociale (Google, Facebook)
• Lien 'Créer un compte' en bas
Validation :
• Validation en temps réel du format email
• Indicateur de force du mot de passe
• Messages d'erreur contextuels sous les champs
3.3 Écran 3 : Tableau de Bord Principal
Objectif : Vue d'ensemble de l'apprentissage et accès rapide aux cours.
Composants clés :
• Header personnalisé avec nom de l'utilisateur
• Icône de notifications en haut à droite
• Cartes de statistiques (2 cartes : Cours actifs, Progression)
• Section 'Reprendre' avec dernier cours en cours
• Barre de progression visuelle
• Section 'Cours recommandés' avec cartes horizontales scrollables
• Bottom navigation bar (Accueil, Cours, Progrès, Profil)
Interactions :
• Tap sur une carte de cours pour ouvrir les détails
• Pull to refresh pour actualiser les données
• Scroll horizontal sur les cours recommandés
3.4 Écran 4 : Profil Utilisateur
Objectif : Gérer les informations personnelles et accéder aux paramètres.
Composants clés :
• Header avec fond coloré (Primary Blue)
• Avatar centré (éditable au tap)
• Nom et email de l'utilisateur
• Statistiques résumées (Nombre de cours, Temps d'apprentissage, Badges)
• Liste de menus avec icônes :
• - Informations personnelles
• - Mes badges et récompenses
• - Statistiques détaillées
• - Mes cours favoris
• - Paramètres
• Option 'Se déconnecter' en bas
4. Bibliothèque de Composants
4.1 Boutons
Tous les boutons ont une hauteur de 48px et un border-radius de 8px.
Type Style Usage
Primary Background: Primary Blue, Actions principales
Text: White
Secondary Background: White, Border: Actions secondaires
Primary Blue 2px
Text Background: None, Text: Light Liens, actions tertiaires
Blue
4.2 Champs de Saisie
Hauteur : 48px
Border-radius : 8px
Background : #F8F9FA
Border : 1px solid #DFE6E9
Focus : Border 2px solid #2C5AA0
Error : Border 2px solid #E74C3C
4.3 Cartes
Background : White (#FFFFFF)
Border-radius : 12px
Shadow : 0px 2px 8px rgba(0, 0, 0, 0.08)
Padding : 16px
4.4 Icônes
Taille par défaut : 24x24px
Petites icônes : 16x16px
Style : Outline ou Filled selon le contexte
5. Navigation & Interactions
5.1 Bottom Navigation Bar
Hauteur : 64px
Background : White avec shadow en haut
4 onglets : Accueil, Cours, Progrès, Profil
• État actif : Icône Primary Blue + Label Bold
• État inactif : Icône Text Light + Label Regular
5.2 Gestes et Interactions
• Swipe horizontal : Navigation entre slides
• Pull to refresh : Actualiser le contenu
• Tap : Sélection standard
• Long press : Options contextuelles
• Scroll vertical : Parcourir les listes
5.3 États et Feedback
• Loading : Spinner centré ou skeleton screens
• Success : Toast vert avec icône check
• Error : Toast rouge avec message explicite
• Empty state : Illustration + message encourageant
• Disabled : Opacité à 40%
5.4 Animations
• Transitions entre écrans : Slide horizontal de 250ms
• Apparition de cartes : Fade + Scale de 200ms
• Boutons : Scale à 0.95 au tap
• Chargement : Rotation continue du spinner
6. Accessibilité & Standards
6.1 Contraste
• Ratio minimum 4.5:1 pour le texte normal
• Ratio minimum 3:1 pour le texte large (>= 18px)
• Tester avec des outils comme WebAIM Contrast Checker
6.2 Taille Tactile
Tous les éléments interactifs doivent avoir une taille minimale de 44x44px
conformément aux directives WCAG.
6.3 Labels et Alternatives
• Textes alternatifs pour toutes les images
• Labels accessibles pour les icônes
• Support des lecteurs d'écran
6.4 Scaling et Flexibilité
• Support du scaling système jusqu'à 200%
• Layouts responsives et adaptatifs
7. Guide d'Implémentation Figma
7.1 Structure du Fichier Figma
Pages recommandées :
• Cover (Page de couverture)
• Design System (Couleurs, typographie, composants)
• Screens (Les 4 écrans principaux)
• Flows (Parcours utilisateur)
• Prototype (Interactions et animations)
7.2 Styles à Créer
Color Styles :
• Primary/Blue, Secondary/Dark Blue, Accent/Light Blue
• Success/Green, Warning/Orange
• Text/Dark, Text/Light, Background, Border
Text Styles :
• Heading/H1, Heading/H2, Heading/H3
• Body/Regular, Caption/Regular, Small/Regular
Effect Styles :
• Card Shadow (0px 2px 8px rgba(0,0,0,0.08))
• Nav Shadow (0px -2px 8px rgba(0,0,0,0.06))
7.3 Composants à Créer
• Button (Primary, Secondary, Text) avec variantes
• Input Field (Normal, Focus, Error, Disabled)
• Card (avec variantes de contenu)
• Navigation Item (Active, Inactive)
• Progress Bar
• Badge/Tag
• Toast (Success, Error, Info)
7.4 Grille et Espacement
Système d'espacement basé sur 8px :
• 4px, 8px, 16px, 24px, 32px, 40px, 48px
Marges de page : 16px
Espacement entre cartes : 16px
7.5 Auto Layout
Utiliser Auto Layout pour tous les composants répétitifs (listes, grilles de cartes,
navigation) afin de faciliter les ajustements et maintenir la cohérence.
7.6 Prototype
• Créer les liens entre écrans
• Définir les transitions (Smart Animate recommandé)
• Ajouter les overlays pour les modales et toasts
• Tester le prototype sur différentes tailles d'écran
8. Checklist de Validation
8.1 Design System
• ☐ Palette de couleurs complète avec styles Figma
• ☐ Échelle typographique définie avec text styles
• ☐ Composants de base créés et documentés
• ☐ Effects et shadows standardisés
8.2 Écrans
• ☐ Les 4 écrans principaux sont complétés
• ☐ Tous les états sont représentés (normal, hover, disabled, error)
• ☐ Responsive design vérifié pour différentes tailles
• ☐ Contenu réaliste utilisé (pas de Lorem Ipsum)
8.3 Prototype
• ☐ Parcours utilisateur complet prototypé
• ☐ Transitions fluides entre écrans
• ☐ Interactions testées sur mobile
8.4 Accessibilité
• ☐ Contraste des couleurs vérifié
• ☐ Tailles tactiles minimales respectées
• ☐ Labels accessibles ajoutés
8.5 Documentation
• ☐ Annotations ajoutées pour les développeurs
• ☐ Specs de spacing documentées
• ☐ Guide d'utilisation des composants créé
9. Ressources et Prochaines Étapes
9.1 Ressources Utiles
• Material Design Guidelines : [Link]
• Human Interface Guidelines (iOS) : [Link]
• WCAG Accessibility Guidelines : [Link]
• Figma Best Practices : [Link]
• Inter Font : [Link]
9.2 Prochaines Étapes
• Créer le fichier Figma avec le design system complet
• Designer les 4 écrans principaux en haute fidélité
• Créer le prototype interactif
• Tester l'accessibilité et le contraste
• Partager avec l'équipe de développement
• Itérer basé sur les retours utilisateurs
--- Fin du Document ---