Files

Bertrand Benjamin 0e87a457af Feat: add class page

2025-08-09 11:32:36 +02:00

15 KiB

Raw Blame History

🎨 Design System - Class Dashboard

Guide complet du design et des composants visuels pour la page de présentation de classe
Version : 2.0 - Janvier 2025
Expertise : UI/UX Designer

🎯 Philosophie Design

Le Class Dashboard suit une approche Mobile-First avec une hiérarchie visuelle claire et des micro-interactions soignées. Le design privilégie la lisibilité des données statistiques tout en maintenant une esthétique moderne et accessible.

Principes Directeurs

Clarté de l'information : Hiérarchie visuelle marquée pour les données importantes
Cohérence systémique : Components réutilisables avec variations d'état
Performance visuelle : Animations fluides optimisées pour 60fps
Accessibilité universelle : Contraste élevé, navigation clavier, screen readers
Progressive enhancement : Dégradation gracieuse selon les capacités device

🎨 Design System Global

Palette de Couleurs

Couleurs Primaires

Bleu Principal : #3B82F6 - Actions principales, liens actifs
Indigo Accent : #6366F1 - Gradients hero, éléments premium
Orange Highlight : #F97316 - Métriques principales, call-to-action
Gris Neutre : #6B7280 - Textes secondaires, borders subtiles

Couleurs Sémantiques

Succès (Vert) : #10B981 - Évaluations terminées, excellentes performances
Attention (Jaune) : #F59E0B - En cours, performances moyennes
Erreur (Rouge) : #EF4444 - Non commencées, performances faibles
Information (Bleu) : #3B82F6 - Notifications neutres, help tooltips

Couleurs de Performance

Excellence (>16/20) : Vert saturé #059669
Bon niveau (12-16/20) : Bleu confiance #2563EB
Moyen (8-12/20) : Orange attention #EA580C
Insuffisant (<8/20) : Rouge alerte #DC2626

Typographie

Hiérarchie des Titres

H1 Dashboard : text-3xl font-bold (30px) - Titre principal classe
H2 Sections : text-2xl font-bold (24px) - Domaines, Compétences
H3 Cards : text-lg font-semibold (18px) - Titres de cartes
H4 Metrics : text-xl font-bold (20px) - Valeurs statistiques importantes

Corps de Texte

Body Principal : text-base (16px) - Texte standard lisible
Body Secondaire : text-sm text-gray-600 (14px) - Métadonnées, descriptions
Micro-données : text-xs text-gray-500 (12px) - Labels, unités de mesure
Labels UI : text-sm font-medium (14px) - Formulaires, boutons

Système d'Espacement

Grille de Base

Base unit : 4px (0.25rem)
Spacing scale : 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
TailwindCSS mapping : p-1, p-2, p-3, p-4, p-6, p-8, p-12, p-16

Règles d'Application

Cards padding : p-6 (24px) pour confort de lecture
Grid gaps : gap-6 (24px) entre cards principales, gap-4 (16px) pour contenus
Sections margin : mb-8 (32px) séparation des grandes sections
Micro-spacing : space-y-2 (8px) entre éléments liés

🏗️ Architecture Visuelle

Layout Principal

Structure Hiérarchique

Hero Section (100vw, gradient background)
├── Container max-width centré (1200px desktop)
├── Grid responsive principal
└── Breadcrumb navigation

Statistics Grid (4 colonnes desktop → 1 colonne mobile)
├── Cards principales avec shadow elevation
├── Hover states avec scale léger
└── Loading skeleton structure

Content Sections (2 colonnes desktop → 1 colonne mobile)
├── Domaines dynamiques
├── Compétences adaptatives  
└── Empty states informatifs

Grille Responsive

Desktop (lg+) : grid-cols-4 puis grid-cols-2 pour sections
Tablet (md) : grid-cols-2 puis stack vertical sections
Mobile (sm) : grid-cols-1 stack complet avec optimisations tactiles

Elevation et Profondeur

Système de Shadows

Level 0 : Pas de shadow - éléments intégrés
Level 1 : shadow-sm - Borders légères, separators
Level 2 : shadow-md - Cards au repos, conteneurs
Level 3 : shadow-lg - Cards hover, modals
Level 4 : shadow-xl - Overlays, tooltips flottants

🧩 Composants Principaux

Hero Section

Structure Visuelle

Background gradient : bg-gradient-to-br from-blue-50 to-indigo-100
Corner radius : rounded-xl (12px) pour modernité
Padding responsive : p-6 mobile → p-8 desktop
Content layout : Flexbox justify-between pour distribution

Éléments Constitutifs

Titre classe : Typographie H1 avec text-gray-900 pour contrast élevé
Description : Text secondaire text-gray-600 avec line-height optimisé
Selector trimestre : Form control avec focus states personnalisés

Statistics Cards

Card Container Base

Background : bg-white pure pour lisibilité maximale
Border radius : rounded-xl cohérent avec hero
Shadow : shadow-md au repos, shadow-lg au hover
Padding : p-6 pour breathing room optimal
Transition : transition-all duration-300 pour fluidité

Variantes par Type

Card Quantité :

Layout : Stack vertical avec space-y-3
Metrics display : Flex justify-between pour alignement
Color coding : Vert/Orange/Rouge selon statut
Typography : Labels text-sm, valeurs font-bold

Card Résultats :

Hero metric : Centre avec text-3xl font-bold
Supporting data : Grid 2x2 pour min/max/médiane/écart-type
Color emphasis : Orange pour métrique principale
Micro-data : Nombre d'évaluations en text-xs

Dynamic Cards (Domaines/Compétences)

Layout Structure

Header : Flex justify-between avec titre tronqué si nécessaire
Content area : Métriques avec space-y-2
Footer : Progress bar full-width avec animation

Progress Bar Design

Container : w-full bg-gray-200 rounded-full h-2
Fill bar : Couleur contextuelle, transition-all duration-1000 ease-out
Animation : Width de 0% à target% avec délai séquentiel
Accessibility : Attributes ARIA pour screen readers

Interactive Elements

Trimester Selector

Base style : Form select avec custom styling
Focus state : Ring blue pour accessibilité
Options : Clear labeling avec noms complets trimestres
Mobile optimization : Touch-friendly size (44px minimum)

Loading States

Skeleton cards : animate-pulse bg-gray-200 avec forme cards
Spinners : animate-spin avec couleurs contextuelles
Overlay : Semi-transparent avec pointer-events disabled
Text feedback : Messages informatifs pendant chargement

🎬 Animations et Micro-interactions

Système de Transitions

Durées Standard

Ultra-fast : 150ms - Hover states, focus indicators
Fast : 300ms - Cards transforms, color changes
Normal : 500ms - Layout changes, section updates
Slow : 800ms - Progress bars, number animations
Extra-slow : 1000ms - Page transitions, major state changes

Easing Functions

ease-out : Transitions d'entrée naturelles
ease-in-out : Hover states bidirectionnels
cubic-bezier : Custom curves pour animations complexes

Animation Patterns

Cards Introduction

Stagger animation : Délais de 50ms entre cards (0ms, 50ms, 100ms...)
Transform entrance : translateY(20px) → translateY(0)
Opacity fade : opacity-0 → opacity-1
Duration : 300ms avec ease-out

Number Animations

RequestAnimationFrame : Pour fluidité 60fps
Easing : Cubic ease-out pour décélération naturelle
Precision : Arrondi approprié selon type donnée
Accessibility : Respecte prefers-reduced-motion

Progress Bars

Sequential reveal : Chaque barre après la précédente
Smooth width transition : 0% à valeur cible
Color morphing : Transition couleurs selon performance
Completion feedback : Micro-animation de fin

📱 Design Responsive et Mobile

Breakpoints Strategy

Mobile-First Approach

Base (sm) : 0px - Design pour mobile d'abord
Tablet (md) : 768px - Adaptations pour tablettes
Desktop (lg) : 1024px - Layout multi-colonnes
Wide (xl) : 1280px - Optimisations grands écrans

Mobile Optimizations

Touch Targets

Minimum size : 44px × 44px pour confort tactile
Spacing : 8px minimum entre targets adjacents
Visual feedback : Ripple effects, highlight states
Gestures : Swipe support pour navigation

Content Adaptation

Typography scaling : Tailles adaptées par breakpoint
Grid collapse : 4-col → 2-col → 1-col progressif
Padding reduction : p-6 → p-4 sur petits écrans
Navigation : Collapse/expand patterns

Desktop Enhancements

Hover States

Cards elevation : Shadow-md → shadow-lg
Scale subtle : transform scale(1.02) pour depth
Color intensification : Couleurs légèrement plus saturées
Cursor indicators : Pointer, grab selon interaction

Layout Expansions

Multi-column : Exploitation largeur disponible
Sidebar potential : Space pour navigation secondaire
Modal overlays : Interactions riches avec overlays
Keyboard shortcuts : Support touches rapides

♿ Accessibilité Visuelle

Contraste et Lisibilité

WCAG 2.1 Compliance

AA Level : Ratio 4.5:1 pour texte normal
AAA Level : Ratio 7:1 pour texte critique
Large text : Ratio 3:1 pour text-lg+
UI elements : Ratio 3:1 pour borders, icons

Color Blindness Support

Pas de couleur seule : Information via forme/texte aussi
Patterns distinctifs : Textures, icons pour différenciation
High contrast mode : Adaptation système preferences
Alternative indicators : Icons + couleur pour statuts

Focus visible : Ring blue claire sur tous éléments
Tab order : Logique de lecture naturelle
Skip links : Navigation rapide aux contenus principaux
Keyboard shortcuts : Raccourcis pour actions communes

ARIA labels : Descriptions complètes pour contexts
Live regions : Annonces mises à jour dynamiques
Landmark roles : Structure sémantique claire
Alt texts : Descriptions images/graphiques

Motion et Animation

Prefers-Reduced-Motion

Detection system : @media (prefers-reduced-motion: reduce)
Animation disable : Transitions instantanées si demandé
Alternative feedback : Visual sans animation
Graceful degradation : Fonctionnalités préservées

🔧 Guidelines d'Implémentation

Classes TailwindCSS Recommandées

Structure Cards

Container : bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-all duration-300
Title : text-lg font-semibold text-gray-800 mb-4
Content : space-y-3 pour espacement vertical cohérent
Footer : mt-4 pt-4 border-t border-gray-100 si nécessaire

Typography Hierarchy

Page title : text-3xl font-bold text-gray-900 mb-2
Section headers : text-2xl font-bold text-gray-900 mb-6
Metrics large : text-xl font-bold text-{color}-600
Supporting text : text-sm text-gray-600

Interactive States

Hover cards : hover:scale-105 hover:shadow-lg
Focus elements : focus:ring-2 focus:ring-blue-500 focus:outline-none
Active buttons : active:scale-95 active:bg-{color}-600
Disabled states : disabled:opacity-50 disabled:cursor-not-allowed

Animation Implementation

CSS Transitions

Default : transition-all duration-300 ease-out
Colors only : transition-colors duration-200
Transform only : transition-transform duration-300
Custom timing : transition-[property] duration-[time]

Custom Animations

Fade in up : Entrée cards avec transform + opacity
Pulse : Loading states avec scale animation
Slide : Navigation transitions avec translateX
Bounce : Feedback succès avec scale + elasticity

📊 Métriques de Qualité Design

Performance Visuelle

First Contentful Paint : < 1.8s pour première impression
Largest Contentful Paint : < 2.5s pour contenu principal
Cumulative Layout Shift : < 0.1 pour stabilité visuelle
Animation framerate : 60fps constant pour fluidité

Accessibilité

Color contrast : 100% compliance WCAG AA
Keyboard navigation : Tous éléments accessibles
Screen reader : Contenu 100% navigable
Touch targets : 44px minimum respecté

Responsive Quality

Mobile usability : Score Google 100/100
Cross-browser : Compatibilité IE11+ garantie
Device coverage : iPhone SE à desktop 4K
Touch optimization : Gestures naturels supportés

🚀 Évolutions Futures

Dark Theme

Color palette : Variables CSS pour switch automatique
Contrast adaptation : Niveaux ajustés pour dark mode
Media query : @media (prefers-color-scheme: dark)
Toggle manual : Contrôle utilisateur avec persistence

Advanced Interactions

Drag & drop : Réorganisation cards personnalisée
Chart overlays : Graphiques détaillés en modal
Bulk actions : Sélection multiple avec toolbar
Real-time updates : WebSocket pour données live

Micro-animations Avancées

Morphing numbers : Transitions chiffres plus fluides
Particle effects : Célébrations achievements
Parallax subtle : Depth effect sur scroll
Physics-based : Spring animations réalistes

🎯 Checklist Qualité Design

Avant Déploiement

Contraste colors vérifié WCAG AA
Navigation clavier testée complète
Responsive validé sur tous breakpoints
Performance animations 60fps confirmé
Cross-browser testé Chrome/Firefox/Safari/Edge
Touch targets 44px minimum respectés
Loading states tous scenarios couverts
Error states feedback utilisateur clair

Maintenance Continue

Design tokens mis à jour si évolutions
Component library synchronisée
Documentation à jour avec changes
Accessibility audit périodique
Performance monitoring métriques suivies
User feedback intégré dans itérations

📚 Ressources Design

Assets et Outils

Color palette : Variables CSS dans design-system.css
Icons : FontAwesome 6 pour cohérence
Fonts : System fonts stack pour performance
Images : Formats WebP avec fallback PNG

Documentation Technique

Storybook : Catalogue composants interactifs
Design tokens : Variables Figma → CSS automation
Style guide : Guidelines équipe développement
Pattern library : Composants réutilisables documentés

Documentation réalisée avec expertise UI/UX Designer
Version 2.0 - Janvier 2025 - Notytex Design System 🎨

15 KiB Raw Blame History Unescape Escape