story-research-zapwall/features/ui-improvements.md

Améliorations UI - Documentation

Auteur : Équipe 4NK Date : 2025-01-27

Vue d'ensemble

Ce document liste les améliorations UI proposées pour la plateforme zapwall.fr. Ces améliorations visent à créer une interface plus cohérente, moderne et visuellement attrayante tout en respectant le thème cyberpunk/neon existant.

1. Design System et Cohérence Visuelle

Système de couleurs unifié

• Audit des couleurs :

  • Identifier tous les usages de couleurs non-thème (ex: SeriesCard utilise bg-white, text-gray-700)
  • Remplacer par les couleurs du design system (cyber/neon)
  • Créer une palette de couleurs documentée avec usages

• Cohérence des états :

  • États hover cohérents sur tous les éléments interactifs
  • États focus visibles et uniformes
  • États disabled avec style cohérent
  • États actifs/selected avec indicateurs visuels clairs

Composants réutilisables

• Créer une bibliothèque de composants :

  • Button : Variantes (primary, secondary, danger, ghost)
  • Card : Variantes (default, hover, selected)
  • Input : Variantes (text, search, textarea)
  • Badge : Variantes (info, success, warning, error)
  • Modal : Composant modal réutilisable avec overlay
  • Toast : Système de notifications toast
  • Skeleton : Loaders skeleton pour différents contenus

• Documentation des composants :

  • Storybook ou documentation inline
  • Exemples d'utilisation
  • Props et variantes documentées

2. Typographie et Espacement

Hiérarchie typographique

• Système de tailles cohérent :

  • text-xs : Métadonnées, labels
  • text-sm : Texte secondaire, descriptions
  • text-base : Corps de texte principal
  • text-lg : Sous-titres
  • text-xl : Titres de sections
  • text-2xl : Titres principaux
  • text-3xl+ : Titres hero

• Poids de police :

  • font-normal : Texte courant
  • font-medium : Emphase légère
  • font-semibold : Emphase moyenne
  • font-bold : Titres, CTA

• Espacement cohérent :

  • Utiliser l'échelle Tailwind (4, 8, 12, 16, 24, 32...)
  • Marges verticales cohérentes entre sections
  • Padding cohérent dans les cards et containers

Lisibilité améliorée

• Contraste :

  • Vérifier tous les contrastes (WCAG AA minimum)
  • Améliorer les contrastes faibles (ex: text-cyber-accent/70)
  • Tester avec différents thèmes si applicable

• Largeur de ligne optimale :

  • Limiter la largeur du texte à ~65-75 caractères
  • Appliquer max-w-prose ou similaire pour le contenu
  • Ajuster les espacements pour la lecture

3. Layout et Grille

Système de grille cohérent

• Containers :

  • Largeur max cohérente (max-w-4xl, max-w-6xl, etc.)
  • Padding horizontal cohérent (px-4, px-6, px-8)
  • Centrage automatique avec mx-auto

• Grilles responsives :

  • grid-cols-1 sur mobile
  • md:grid-cols-2 sur tablette
  • lg:grid-cols-3 ou xl:grid-cols-4 sur desktop
  • Gaps cohérents (gap-4, gap-6, gap-8)

Responsive design amélioré

• Breakpoints cohérents :

  • Mobile first : base styles
  • sm: : 640px (petites tablettes)
  • md: : 768px (tablettes)
  • lg: : 1024px (desktop)
  • xl: : 1280px (large desktop)

• Navigation mobile :

  • Menu hamburger pour navigation sur mobile
  • Drawer/sidebar pour filtres sur mobile
  • Touch targets minimum 44x44px

4. Cards et Containers

Style unifié des cards

• Card de base :

  className="border border-neon-cyan/30 rounded-lg p-6 bg-cyber-dark hover:border-neon-cyan/50 hover:shadow-glow-cyan transition-all"
  

• Variantes :

  • Card simple : bordure subtile, pas de hover
  • Card interactive : hover avec glow, cursor pointer
  • Card selected : bordure plus visible, background différent
  • Card compact : padding réduit pour listes denses

Containers et sections

• Sections :

  • Espacement vertical cohérent entre sections (mb-8, mb-12)
  • Titres de section avec style cohérent
  • Séparateurs visuels si nécessaire

• Containers de contenu :

  • Background cohérent (bg-cyber-dark ou bg-cyber-darker)
  • Bordures subtiles (border-neon-cyan/20 ou /30)
  • Padding cohérent selon le contexte

5. Buttons et Interactions

Système de boutons

• Variantes de boutons :

  • Primary : bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan border-neon-cyan/50
  • Secondary : bg-cyber-light hover:bg-cyber-dark text-cyber-accent border-neon-cyan/30
  • Success : bg-neon-green/20 hover:bg-neon-green/30 text-neon-green border-neon-green/50
  • Danger : bg-red-500/20 hover:bg-red-500/30 text-red-400 border-red-500/50
  • Ghost : bg-transparent hover:bg-cyber-light text-cyber-accent

• Tailles cohérentes :

  • Small : px-3 py-1.5 text-sm
  • Medium : px-4 py-2 text-base (défaut)
  • Large : px-6 py-3 text-lg

• États :

  • Loading : spinner + texte "Chargement..."
  • Disabled : opacity-50 cursor-not-allowed
  • Focus : ring visible avec focus:ring-2 focus:ring-neon-cyan

Micro-interactions

• Transitions :

  • transition-all pour changements d'état
  • transition-colors pour changements de couleur uniquement
  • Durées cohérentes (150ms, 200ms, 300ms)

• Hover effects :

  • Scale subtil sur les cards (hover:scale-[1.02])
  • Glow sur les boutons et éléments interactifs
  • Changement de couleur progressif

6. Icônes et Illustrations

Système d'icônes

• Cohérence :

  • Utiliser une seule bibliothèque d'icônes (ex: Heroicons, Lucide)
  • Tailles cohérentes (w-4 h-4, w-5 h-5, w-6 h-6)
  • Couleurs cohérentes avec le thème

• Icônes contextuelles :

  • Icônes pour les actions (éditer, supprimer, partager)
  • Icônes pour les états (succès, erreur, chargement)
  • Icônes pour la navigation (menu, fermer, retour)

Illustrations et images

• Placeholders :

  • Placeholder cohérent pour images manquantes
  • Skeleton loaders pour images en chargement
  • Aspect ratios cohérents

• Optimisation :

  • Utiliser Next.js Image component partout
  • Lazy loading pour images hors viewport
  • Tailles appropriées selon le contexte

7. Animations et Transitions

Animations subtiles

• Apparition :

  • Fade in pour les éléments qui apparaissent
  • Slide in pour les modals et overlays
  • Stagger pour les listes (délai entre éléments)

• Transitions de page :

  • Fade entre les pages
  • Slide pour navigation latérale
  • Transitions fluides sans jarring

Feedback visuel

• Loading states :

  • Spinners cohérents (taille, couleur, vitesse)
  • Skeleton loaders pour contenu
  • Progress bars pour actions longues

• Confirmations :

  • Animations de succès (checkmark animé)
  • Animations d'erreur (shake, pulse)
  • Toast notifications avec animations

8. Modals et Overlays

Style unifié

• Modal de base :

  • Overlay : bg-black bg-opacity-50
  • Container : bg-cyber-dark border border-neon-cyan/30 rounded-lg
  • Padding cohérent : p-6 ou p-8
  • Max width selon contenu : max-w-md, max-w-lg, max-w-xl

• Header de modal :

  • Titre avec style cohérent
  • Bouton fermer visible et accessible
  • Séparateur si nécessaire

• Footer de modal :

  • Actions alignées à droite
  • Bouton principal en dernier
  • Espacement cohérent

Accessibilité

• Focus trap : Garder le focus dans la modal
• Escape key : Fermer avec Escape
• Click outside : Option de fermer en cliquant sur l'overlay
• ARIA : Labels et rôles appropriés

9. Formulaires

Style unifié

• Inputs :

  • Style cohérent : border border-neon-cyan/30 rounded-lg bg-cyber-dark text-cyber-accent
  • Focus : focus:ring-2 focus:ring-neon-cyan focus:border-neon-cyan
  • Placeholder : placeholder-cyber-accent/50
  • Erreur : border-red-500/50 avec message d'erreur

• Labels :

  • Style cohérent : text-sm font-medium text-cyber-accent mb-1
  • Association avec htmlFor et id
  • Required indicator si nécessaire

• Groupes de champs :

  • Espacement vertical cohérent
  • Groupement logique
  • Validation visuelle

Validation visuelle

• États :

  • Default : bordure neutre
  • Focus : bordure cyan avec ring
  • Error : bordure rouge avec message
  • Success : bordure verte (si applicable)

• Messages d'erreur :

  • Position cohérente (sous le champ)
  • Style cohérent : text-sm text-red-400
  • Icône d'erreur si applicable

10. Navigation

Header amélioré

• Layout :

  • Logo/titre à gauche
  • Navigation centrale (si applicable)
  • Actions à droite (connexion, langue, etc.)

• Style :

  • Background : bg-cyber-dark border-b border-neon-cyan/30
  • Hauteur cohérente
  • Sticky si nécessaire

Navigation mobile

• Menu hamburger :

  • Icône hamburger visible sur mobile
  • Drawer/sidebar qui slide depuis la gauche ou droite
  • Overlay sombre
  • Animation fluide

• Navigation verticale :

  • Items de menu avec style cohérent
  • États hover/active visibles
  • Séparateurs si nécessaire

11. États vides et erreurs

États vides

• Style cohérent :

  • Icône ou illustration
  • Message clair et actionnable
  • CTA si applicable
  • Centré verticalement et horizontalement

• Exemples :

  • "Aucun article trouvé" avec suggestion de recherche
  • "Aucun auteur" avec lien pour créer
  • "Liste vide" avec action pour ajouter

États d'erreur

• Style cohérent :
  • Container : bg-red-900/20 border border-red-500/50 rounded-lg p-4
  • Texte : text-red-400
  • Icône d'erreur si applicable
  • Message clair avec action de récupération

12. Améliorations spécifiques

Corrections de cohérence

• SeriesCard :

  • Remplacer bg-white, text-gray-700 par thème cyber/neon
  • Appliquer le même style que ArticleCard et AuthorCard

• AlbyInstaller :

  • Remplacer les couleurs bleues génériques par le thème
  • Utiliser les couleurs neon/cyber

Améliorations visuelles

• Background grid :

  • Utiliser bg-cyber-grid sur certains containers pour effet cyber
  • Optionnel, à utiliser avec parcimonie

• Gradients :

  • Gradients subtils pour certains backgrounds
  • Gradients sur les bordures pour effet neon

• Shadows et glows :

  • Utiliser shadow-glow-cyan et shadow-glow-green de manière cohérente
  • Ajouter des glows sur hover pour éléments interactifs

Priorisation

Priorité haute

1. Correction de cohérence (SeriesCard, AlbyInstaller)
2. Système de boutons unifié
3. Système de cards unifié
4. Typographie et espacement cohérents
5. Responsive design amélioré

Priorité moyenne

6. Composants réutilisables (Button, Card, Input, etc.)
7. Modals et overlays unifiés
8. Formulaires avec validation visuelle
9. Navigation mobile
10. États vides et erreurs

Priorité basse

11. Animations et transitions avancées
12. Système d'icônes complet
13. Background grid et effets visuels
14. Documentation des composants
15. Storybook ou documentation visuelle

Notes d'implémentation

• Toutes les améliorations doivent respecter le thème cyberpunk/neon existant
• Maintenir la cohérence avec les couleurs définies dans tailwind.config.js
• Tester sur différents appareils et tailles d'écran
• Vérifier l'accessibilité (contraste, focus, ARIA)
• Documenter les nouveaux composants et patterns
• Respecter les règles de qualité du projet (pas de duplication, composants réutilisables)