UI/UX Pro Max - Expert en Intelligence de Conception

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

Flux de Travail

Étape 1 : Analyser les Besoins Utilisateurs

Extraire de la demande utilisateur :

Type de produit : SaaS, e-commerce, portfolio, tableau de bord, page d'atterrissage, etc.
Mots-clés de style : minimal, ludique, professionnel, élégant, mode sombre, etc.
Secteur d'activité : santé, fintech, jeux vidéo, éducation, beauté, etc.
Pile technologique : React, Vue, Next.js, Svelte, Flutter, ou html-tailwind (par défaut)

Étape 2 : Générer le Système de Conception

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

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

Étape 3 : Directives d'Implémentation

Appliquer les meilleures pratiques spécifiques à la pile à partir des données de référence :

Utilitaires HTML/Tailwind, points de rupture réactifs
Hooks React, gestion d'état, motifs 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 toutes les listes de contrôle (qualité visuelle, interaction, mode clair/sombre, mise en page, accessibilité) avant de livrer tout code UI.

Règles de Priorité

Priorité	Catégorie	Impact
1	Accessibilité	CRITIQUE - Contraste couleur 4.5:1, états de focus, aria-labels
2	Tactile & Interaction	CRITIQUE - Cibles tactiles 44x44px, curseur-pointer
3	Performance	ÉLEVÉ - Optimisation d'image, chargement différé
4	Mise en page & Réactif	ÉLEVÉ - Mobile-first, balise meta viewport
5	Typographie & Couleur	MOYEN - Hauteur de ligne 1,5-1,75, polices lisibles
6	Animation	MOYEN - Durée 150-300ms, transformation uniquement
7	Sélection de Style	MOYEN - Adapter le style au type de produit

Sélecteur Rapide de Style par Type de Produit

Type de Produit	Style Principal	Styles Secondaires	Ambiance Couleur
SaaS (Général)	Minimalisme	Design Plat, Glassmorphisme	Bleu confiance + accent contraste
E-commerce	Néo-Brutalisme	Grille Bento, Mode Sombre	Primaire marque + vert succès
E-commerce Luxe	Minimalisme Luxe	Mode Sombre, Élégant	Noir premium + accents or
Santé	Minimalisme Doux	Design Plat, Organique	Bleu calme + vert santé
Fintech/Crypto	Cyberpunk	Mode Sombre, Glassmorphisme	Technologie sombre + accents vibrants
Jeux Vidéo	Lumière Néon	Cyberpunk, Mode Sombre	Vibrant + néon + immersif
Portfolio/Créatif	Éditorial	Brutalisme, Asymétrique	Primaire marque + artistique
Tableau de Bord	Technologie Corporate	Design Plat, Riche en Données	Dégradés froid→chaud + neutre
IA/Chatbot	Dégradés Aurora	Glassmorphisme, Mode Sombre	Neutre + Violet IA (#6366F1)
Beauté/Spa/Bien-être	Formes Organiques	Minimalisme Doux, Élégant	Pastels doux + tons naturels

Palettes de Couleurs par Secteur d'Activité

SaaS / Business

Rôle	Hex	Tailwind
Primaire	#2563EB	blue-600
Secondaire	#3B82F6	blue-500
CTA	#F97316	orange-500
Arrière-plan	#F8FAFC	slate-50
Texte	#1E293B	slate-800
Bordure	#E2E8F0	slate-200

E-commerce Luxe

Rôle	Hex	Tailwind
Primaire	#1C1917	stone-900
Secondaire	#44403C	stone-700
CTA	#CA8A04	yellow-600
Arrière-plan	#FAFAF9	stone-50
Texte	#0C0A09	stone-950
Bordure	#D6D3D1	stone-300

Santé

Rôle	Hex	Tailwind
Primaire	#0891B2	cyan-600
Secondaire	#22D3EE	cyan-400
CTA	#059669	emerald-600
Arrière-plan	#ECFEFF	cyan-50
Texte	#164E63	cyan-900
Bordure	#A5F3FC	cyan-200

Fintech / Crypto

Rôle	Hex	Tailwind
Primaire	#F59E0B	amber-500
Secondaire	#FBBF24	amber-400
CTA	#8B5CF6	violet-500
Arrière-plan	#0F172A	slate-900
Texte	#F8FAFC	slate-50
Bordure	#334155	slate-700

Jeux Vidéo

Rôle	Hex	Tailwind
Primaire	#7C3AED	violet-600
Secondaire	#A78BFA	violet-400
CTA	#F43F5E	rose-500
Arrière-plan	#0F0F23	custom-dark
Texte	#E2E8F0	slate-200
Bordure	#4C1D95	violet-900

IA / Plateforme Chatbot

Rôle	Hex	Tailwind
Primaire	#7C3AED	violet-600
Secondaire	#A78BFA	violet-400
CTA	#06B6D4	cyan-500
Arrière-plan	#FAF5FF	violet-50
Texte	#1E1B4B	indigo-950
Bordure	#DDD6FE	violet-200

Beauté / Spa / Bien-être

Rôle	Hex	Tailwind
Primaire	#DB2777	pink-600
Secondaire	#F472B6	pink-400
CTA	#059669	emerald-600
Arrière-plan	#FDF2F8	pink-50
Texte	#831843	pink-900
Bordure	#FBCFE8	pink-200

Associations Typographiques

Professionnel / Corporate

Titre : Inter | Corps : Inter

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

Idéal pour : SaaS, tableaux de bord, applications professionnelles

É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');

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

Moderne / Technologie

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');

Idéal pour : Startups tech, fintech, produits IA

Amical / Ludique

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');

Idéal pour : Éducation, applications grand public, marques de style de vie

É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');

Idéal pour : Blogs, magazines, portfolios

Santé / Bien-être

Titre : Outfit | Corps : Nunito

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

Idéal pour : Santé, bien-être, applications médicales

Référence des Styles Visuels

Minimalisme

Couleurs : Monochrome + 1 accent, beaucoup d'espace blanc
Effets : Ombres subtiles, bordures nettes, micro-interactions
Idéal pour : SaaS, productivité, applications professionnelles
Mots-clés : propre, simple, espace blanc, subtil, élégant

Glassmorphisme

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

Neumorphisme

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

Mode Sombre

Couleurs : Arrière-plans sombres (#0F172A), texte clair, couleurs d'accentuation
Effets : Bordures subtiles, lueurs au focus, réduction de la fatigue oculaire
Idéal pour : Outils de développement, applications médiatiques, jeux vidéo
Mots-clés : sombre, nuit, faible luminosité, contraste, moderne

Grille Bento

Couleurs : Basé sur des cartes avec des arrière-plans distincts par section
Effets : Mises en page en grille, tailles de cartes variables, hiérarchie claire
Idéal pour : Présentations de fonctionnalités, portfolios, tableaux de bord
Mots-clés : grille, cartes, modulaire, organisé, vitrine

Aurora / Dégradé Maillé

Couleurs : Dégradés multicolores, mélange maillé, vibrant
Effets : Dégradés animés, transitions de couleur, profondeur
Idéal pour : Produits IA, outils créatifs, pages d'atterrissage
Mots-clés : aurore, dégradé, maillé, coloré, fluide

Brutalisme

Couleurs : Contraste élevé, couleurs brutes, primaires audacieuses
Effets : Bordures lourdes, typographie brute, intentionnellement brut
Idéal pour : Agences créatives, portfolios d'art, marques audacieuses
Mots-clés : brut, audacieux, austère, non poli, frappant

Motifs de Pages d'Atterrissage

Centré sur le Hero (Focus Conversion)

Sections : Hero > Preuve Sociale > Fonctionnalités > CTA

CTA principal au-dessus de la ligne de flottaison
Badges de confiance près du CTA
Message unique et ciblé

Axé sur les Fonctionnalités (Démo Produit)

Sections : Hero > Grille de Fonctionnalités > Comment Ça Marche > Tarification > CTA

Démonstrations visuelles du produit
Avantages plutôt que caractéristiques
Tableaux de comparaison pour la tarification

Axé sur l'Histoire (Construction de Marque)

Sections : Hero > Problème > Solution > Parcours > Équipe > CTA

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

Axé sur la Preuve Sociale (Construction de Confiance)

Sections : Hero > Logos > Témoignages > Études de Cas > CTA

Logos clients bien en vue
Témoignages vidéo
Statistiques et chiffres

Sélection du Type de Graphique

Type de Données	Meilleur Graphique	Quand l'Utiliser
Tendance dans le Temps	Graphique Linéaire	Séries temporelles, croissance, progression
Comparer des Catégories	Graphique à Barres	Classements, comparaisons
Partie-à-Tout	Graphique en Donut	Pourcentages, proportions (≤5 éléments)
Corrélation	Nuage de Points	Relations, motifs
Géographique	Carte Choroplèthe	Données régionales, localisations
Entonnoir/Flux	Graphique en Entonnoir	Conversion, étapes de processus
Performance	Jauge/Bullet	KPI, cibles
Hiérarchique	Treemap	Catégories imbriquées, proportions

Conseils de Couleur pour Graphiques :

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

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

Exigences d'Accessibilité (CRITIQUE)

Contraste des Couleurs

Texte normal : Rapport minimum 4,5:1
Grand texte (18px+) : Rapport minimum 3:1
Éléments interactifs : États de focus clairs

Cibles Tactiles

Taille minimale : 44x44px pour les appareils tactiles
Espacement : 8px minimum 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 entrée DOIT avoir une étiquette associée
Utiliser <label for="id"> ou aria-label
Messages d'erreur près du champ concerné

Anti-Motifs 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 Survole

NON : Transformations d'échelle qui décalent la mise en page
OUI : Uniquement des transitions de couleur/opacité

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 de z-index aléatoires (999, 9999)
OUI : Échelle définie : 10 (par défaut), 20 (liste déroulante), 30 (modale), 50 (toast)

Animations

NON : Animations lentes (>500ms) ou décalage de mise en page
OUI : Durée 150-300ms, transformation/opacité uniquement

Directives Spécifiques à la Pile

HTML + Tailwind CSS

Utiliser les classes utilitaires, éviter le CSS personnalisé
Réactif : points de rupture sm:, md:, lg:, xl:
Mode sombre : 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 en ligne dans le rendu
Utiliser Suspense pour le fractionnement de code

Next.js

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

Vue 3

Utiliser l'API Composition avec <script setup>
Pinia pour la gestion d'état
defineProps avec TypeScript
Charger paresseusement les routes avec les importations dynamiques

Flutter

Utiliser les constructeurs const pour les widgets statiques
ListView.builder pour les longues listes
Disposer des contrôleurs 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 l'asynchrone
Utiliser LazyVStack pour les longues listes
Prendre en charge Dynamic Type pour l'accessibilité

Pour des directives complètes spécifiques à la pile (99 règles couvrant Flutter, SwiftUI, etc.), voir data/stack-guidelines.csv.

Style de Réponse

Lors de la conception d'interfaces :

Présenter le système de conception en premier avec toutes les recommandations
Afficher les échantillons de couleurs avec les valeurs hexadécimales et l'utilisation
Inclure le code d'importation Google Fonts prêt à l'emploi
Fournir des exemples de code suivant les meilleures pratiques de la pile
Expliquer les décisions de conception avec justification

Liste de Contrôle Pré-Livraison

Qualité Visuelle

Pas d'emojis comme icônes (utiliser SVG : Heroicons, Lucide, Simple Icons)
Toutes les icônes d'un ensemble cohérent
Logos de marque vérifiés à partir de sources officielles
Les états de survole ne provoquent pas de décalage de mise en page

Interaction

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

Mode Clair/Sombre

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

Mise en Page

Les éléments flottants ont un espacement approprié par rapport aux bords

...

[Le contenu a été tronqué pour la traduction]

Demander à votre IA préférée

Documentation