UI/UX Pro Max - Expert en Intelligence de Design

Guide complet de design UI/UX pour applications web et mobiles. Fournit des recommandations de design intelligentes basées sur le type de produit, l'industrie et les exigences utilisateur. Référencez ces directives lors de la conception de nouvelles interfaces utilisateur, du choix des couleurs et de la typographie, de la révision du code pour les problèmes UX, ou de l'implémentation de fonctionnalités.

Workflow

Étape 1 : Analyser les exigences utilisateur

Extraire de la demande utilisateur :

• Type de produit : SaaS, e-commerce, portfolio, dashboard, landing page, etc.
• Mots-clés de style : minimal, playful, professionnel, élégant, dark mode, etc.
• Industrie : santé, fintech, gaming, éducation, beauté, etc.
• Stack technologique : React, Vue, Next.js, Svelte, Flutter, ou html-tailwind (par défaut)

Étape 2 : Générer le système de design

Consulter les données de référence ci-dessous (et les fichiers CSV dans data/) pour :

• Les patterns recommandés et les mises en page de sections
• Le style visuel principal avec effets
• La palette de couleurs (primaire, secondaire, CTA, arrière-plan, texte)
• L'appariement typographique (polices de titre et corps avec URL Google Fonts)
• Les effets clés et les anti-patterns à éviter

Étape 3 : Directives d'implémentation

Appliquer les meilleures pratiques spécifiques à la stack depuis les données de référence :

• Utilitaires HTML/Tailwind, points d'arrêt responsifs
• Hooks React, gestion d'état, patterns de performance
• API Composition Vue, état Pinia
• Widgets Flutter, thèmes, navigation
• Exigences d'accessibilité (conformité WCAG)

Étape 4 : Vérification pré-livraison

Passer en revue tous les checklists (qualité visuelle, interaction, light/dark mode, mise en page, accessibilité) avant de livrer tout code UI.

Règles de priorité

Sélecteur de style rapide par type de produit

Palettes de couleurs par industrie

SaaS / Business

E-commerce Luxe

Santé

Fintech / Crypto

Gaming

IA / Plateforme Chatbot

Beauté / Spa / Wellness

Appariements typographiques

Professionnel / Corporatif

Titre : Inter | Corps : Inter

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

Meilleur pour : SaaS, dashboards, applications métier

Élégant / Luxe

Titre : Playfair Display | Corps : Lato

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Lato:wght@400;700&display=swap');

Meilleur pour : Marques luxe, éditorial, e-commerce haut de gamme

Moderne / Tech

Titre : Space Grotesk | Corps : DM Sans

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

Meilleur pour : Startups tech, fintech, produits IA

Amical / Playful

Titre : Poppins | Corps : Open Sans

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Open+Sans:wght@400;600&display=swap');

Meilleur pour : Éducation, applications grand public, marques lifestyle

Éditorial / Créatif

Titre : Fraunces | Corps : Source Sans 3

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Source+Sans+3:wght@400;600&display=swap');

Meilleur pour : Blogs, magazines, portfolios

Santé / Wellness

Titre : Outfit | Corps : Nunito

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Nunito:wght@400;600&display=swap');

Meilleur pour : Santé, wellness, applications médicales

Styles visuels de référence

Minimalisme

• Couleurs : Monochrome + 1 accent, espaces blancs importants
• Effets : Ombres subtiles, bordures nettes, micro-interactions
• Meilleur pour : SaaS, productivité, applications professionnelles
• Mots-clés : épuré, simple, espace blanc, subtil, élégant

Glassmorphism

• Couleurs : Couches translucides, effets de flou, arrière-plans dégradés
• Effets : backdrop-blur, bg-white/10, ombres douces
• Meilleur pour : Dashboards modernes, applications musicales, portfolios
• Mots-clés : verre, flou, translucide, givré, couches

Neumorphism

• Couleurs : Pastels doux, ombres de même teinte (sombre/clair)
• Effets : Ombres intérieures, éléments extrudés, profondeur douce
• Meilleur pour : Panneaux de contrôle, calculatrices, lecteurs musicaux
• Mots-clés : doux, en relief, extrusion, tactile, 3D-doux

Dark Mode

• Couleurs : Arrière-plans sombres (#0F172A), texte clair, couleurs accent
• Effets : Bordures subtiles, halos au focus, fatigue oculaire réduite
• Meilleur pour : Outils de développeur, applications médias, gaming
• Mots-clés : sombre, nuit, faible luminosité, contraste, moderne

Bento Grid

• Couleurs : Cartes avec arrière-plans distincts par section
• Effets : Mises en page en grille, tailles de cartes variables, hiérarchie claire
• Meilleur pour : Showcases de fonctionnalités, portfolios, dashboards
• Mots-clés : grille, cartes, modulaire, organisé, showcase

Aurora / Gradient Mesh

• Couleurs : Dégradés multi-couleurs, mélange mesh, vibrant
• Effets : Dégradés animés, transitions de couleurs, profondeur
• Meilleur pour : Produits IA, outils créatifs, landing pages
• Mots-clés : aurore, dégradé, mesh, coloré, fluide

Brutalism

• Couleurs : Haut contraste, couleurs brutes, primaires audacieuses
• Effets : Bordures épaisses, typographie brute, volontairement rude
• Meilleur pour : Agences créatives, portfolios artistiques, marques audacieuses
• Mots-clés : brut, audacieux, stark, non poli, frappant

Patterns de landing page

Héro-centrique (Focus conversion)

Sections : Héro > Social Proof > Fonctionnalités > CTA

• CTA primaire au-dessus de la ligne de flottaison
• Badges de confiance près du CTA
• Message unique et focalisé

Orienté fonctionnalités (Démo produit)

Sections : Héro > Grille de fonctionnalités > Comment ça marche > Tarifs > CTA

• Démos visuelles du produit
• Avantages plutôt que fonctionnalités
• Tableaux de comparaison pour les tarifs

Piloté par l'histoire (Construction de marque)

Sections : Héro > Problème > Solution > Parcours > Équipe > CTA

• Connexion émotionnelle en premier
• Histoires de succès clients
• Flux narratif de marque

Social Proof Lourd (Construction de confiance)

Sections : Héro > Logos > Témoignages > Études de cas > CTA

• Logos clients en avant
• Témoignages vidéo
• Stats et chiffres

Sélection du type de graphique

Directives de couleur pour graphiques :

• Données primaires : #2563EB (blue-600)
• Succès/Croissance : #22C55E (green-500)
• Avertissement/Alerte : #F59E0B (amber-500)
• Erreur/Déclin : #EF4444 (red-500)
• Neutre : #94A3B8 (slate-400)

Pour les données de graphiques détaillées (25 types de graphiques avec recommandations de bibliothèques, notes d'accessibilité et niveaux interactifs), voir data/design-data.csv.

Exigences d'accessibilité (CRITIQUE)

Contraste des couleurs

• Texte normal : Ratio minimum 4,5:1
• Texte large (18px+) : Ratio minimum 3:1
• Éléments interactifs : États de focus clairs

Cibles tactiles

• Taille minimale : 44x44px pour appareils tactiles
• Espacement : Minimum 8px entre les cibles

États de focus

/* Anneau de focus toujours visible */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

Mouvement réduit

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Étiquettes de formulaire

• Chaque input DOIT avoir une étiquette associée
• Utiliser <label for="id"> ou aria-label
• Messages d'erreur près du champ problématique

Anti-patterns UX courants (À ÉVITER)

Icônes

• NON : Utiliser des emojis comme icônes UI
• OUI : Utiliser des icônes SVG (Heroicons, Lucide, Simple Icons)

États de survol

• NON : Transformations d'échelle qui décalent la mise en page
• OUI : Transitions de couleur/opacité uniquement

Curseurs

• NON : Curseur par défaut sur les éléments cliquables
• OUI : cursor-pointer sur tous les éléments interactifs

Verre en mode clair

• NON : bg-white/10 (trop transparent, invisible)
• OUI : bg-white/80 ou opacité plus élevée

Z-Index

• NON : Valeurs aléatoires (999, 9999)
• OUI : Échelle définie : 10 (par défaut), 20 (dropdown), 30 (modal), 50 (toast)

Animations

• NON : Animations lentes (>500ms) ou décalant la mise en page
• OUI : Durée 150-300ms, transform/opacity uniquement

Directives spécifiques à la stack

HTML + Tailwind CSS

• Utiliser les classes utilitaires, éviter le CSS personnalisé
• Responsive : points d'arrêt sm:, md:, lg:, xl:
• Dark mode : variante dark:
• Toujours inclure cursor-pointer sur les boutons/liens

React

• Utiliser memo() pour les composants coûteux
• Préférer useMemo/useCallback pour les références stables
• Éviter les fonctions inline dans le rendu
• Utiliser Suspense pour la division du code

Next.js

• Utiliser next/image pour l'optimisation automatique
• Implémenter les imports dynamiques pour les composants lourds
• Utiliser next/font pour le chargement de polices optimisé
• Tirer parti des Server Components quand c'est possible

Vue 3

• Utiliser Composition API avec <script setup>
• Pinia pour la gestion d'état
• defineProps avec TypeScript
• Lazy load des routes avec imports dynamiques

Flutter

• Utiliser les constructeurs const pour les widgets statiques
• ListView.builder pour les listes longues
• Dispose des controllers dans dispose()
• Utiliser Theme.of(context) pour un thème cohérent

SwiftUI

• Utiliser @State pour l'état local, @StateObject pour les types de référence
• Préférer .task à .onAppear pour les opérations asynchrones
• Utiliser LazyVStack pour les listes longues
• Supporter Dynamic Type pour l'accessibilité

Pour les directives complètes spécifiques à la stack (99 règles sur Flutter, SwiftUI et plus), voir data/stack-guidelines.csv.

Style de réponse

Lors de la conception d'interfaces :

1. Présenter le système de design en premier avec toutes les recommandations
2. Afficher les nuances de couleur avec valeurs hex et utilisation
3. Inclure le code d'import Google Fonts prêt à l'emploi
4. Fournir des exemples de code suivant les meilleures pratiques de la stack
5. Expliquer les décisions de design avec justification

Checklist pré-livraison

Qualité visuelle

• [ ] Pas d'emojis comme icônes (utiliser SVG : Heroicons, Lucide, Simple Icons)
• [ ] Toutes les icônes proviennent d'une ensemble cohérent
• [ ] Logos de marque vérifiés auprès de sources officielles
• [ ] Les états de survol ne causent pas de décalage de mise en page

Interaction

• [ ] Tous les éléments cliquables ont cursor-pointer
• [ ] Les états de survol donnent un retour visuel clair
• [ ] Les transitions sont fluides (150-300ms)
• [ ] Les états de focus visibles pour la navigation au clavier

Light/Dark mode

• [ ] Le texte en mode clair a un contraste suffisant (minimum 4,5:1)
• [ ] Les éléments verre/transparents visibles en mode clair
• [ ] Les bordures visibles dans les deux modes

Mise en page

• [ ] Les éléments flottants ont un espacement approprié par rapport aux bordures
• [ ] Aucun contenu caché derrière les barres de navigation fixes
• [ ] Responsive à 375px, 768px, 1024px, 1440px
• [ ] Pas de scroll horizontal sur mobile

Accessibilité

• [ ] Toutes les images ont du texte alt
• [ ] Les inputs de formulaire ont des étiquettes
• [ ] La couleur n'est pas le seul indicateur
• [ ] prefers-reduced-motion respecté

Pré-implémentation

• [ ] Type de produit identifié
• [ ] Style visuel sélectionné
• [ ] Palette de couleurs définie
• [ ] Appariement typographique choisi
• [ ] Pattern de landing page sélectionné
• [ ] Exigences d'accessibilité notées
• [ ] Directives de la stack technologique examinées