⚡ 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, Tailwind 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é.