⚡ TLDR UX/UI Design

Ce cours couvre les fondamentaux de l’UX (User Experience) et de l’UI (User Interface) Design, deux disciplines complémentaires essentielles à la conception de produits numériques réussis.

📘 1. UX vs UI

• UX Design : concerne l’expérience globale de l’utilisateur — ergonomie, navigation intuitive, satisfaction.
• UI Design : concerne l’apparence visuelle et l’interaction — couleurs, typographies, boutons, animations.
• Analogie : l’UX est le squelette et l’architecture d’une maison, l’UI est la décoration et le design intérieur.

🧠 2. Principes fondamentaux de l’UX

• Les 10 heuristiques de Nielsen : visibilité de l’état du système, correspondance avec le monde réel, contrôle utilisateur, cohérence, prévention des erreurs, reconnaissance plutôt que rappel, flexibilité, design minimaliste, aide à la correction des erreurs, documentation.
• Les 5 éléments de Garrett : Stratégie → Portée → Structure → Squelette → Surface.
• Lois cognitives :
  • Fitts : plus une cible est grande et proche, plus elle est facile à atteindre.
  • Hick : plus il y a de choix, plus le temps de décision augmente.
  • Proximité : les éléments proches sont perçus comme liés.
• Accessibilité (a11y) : concevoir des interfaces utilisables par tous, y compris les personnes en situation de handicap. Respecter les normes WCAG 2.1 : ratio de contraste minimum de 4.5:1 pour le texte normal (niveau AA), 3:1 pour le texte large.

🎨 3. Principes fondamentaux de l’UI

• Design visuel : contraste, hiérarchie visuelle, espace blanc.
• Typographie : 2 polices max, taille minimum 16px pour le texte courant.
• Couleurs : 1 principale, 1 secondaire, 2-3 accents. Respecter les normes WCAG pour le contraste.
• Design System : un ensemble de composants, règles et standards réutilisables pour assurer la cohérence d’un produit (ex. Material Design, TailwindTailwind
  Framework CSS utilitaire permettant de styliser directement dans le HTML via des classes prédéfinies. UI, Ant Design).
• Micro-interactions : animations subtiles pour guider l’utilisateur et apporter du feedback.

🧩 4. La règle CRAP

Quatre principes fondamentaux du design visuel :

• Contraste : différencier les éléments (couleurs, tailles, typographies).
• Répétition : cohérence visuelle via des éléments récurrents.
• Alignement : organiser l’information de façon logique et structurée.
• Proximité : grouper les éléments liés pour créer des liens visuels.

🛠️ 5. Processus de conception UX/UI

1. Recherche utilisateur : interviews, sondages, création de personas (représentations fictives d’utilisateurs types basées sur des données réelles).
2. Définition des besoins : identifier les problèmes, définir les KPIs.
3. Wireframing : maquettes basse fidélité (papier, Balsamiq).
4. Prototypage : maquettes interactives haute fidélité (Figma, Adobe XD).
5. Tests utilisateurs : tests modérés, non modérés, A/B testing. Itérer selon les retours.

🔧 6. Outils clés

• Figma : prototypage collaboratif en temps réel (le plus utilisé).
• Adobe XD : intégration Adobe Suite.
• Balsamiq : wireframes low-fi.
• Lighthouse : audit UX et accessibilité.