🎨 Principes fondamentaux de l’UI Design
🎯 Objectifs du chapitre
- Comprendre les bases du design visuel
- Découvrir les systèmes de design et leur rôle
- Explorer l’impact de la typographie et des couleurs
- Apprendre à améliorer l’expérience avec les micro-interactions et animations
🖼️ Principes de design visuel
📌 Pourquoi c’est important ?
Un bon design visuel guide l’utilisateur sans effort et améliore l’expérience globale.
✅ Principes clés :
- 🌓 Contraste → Assurer une bonne lisibilité (ex. texte sombre sur fond clair).
- 🏷️ Hiérarchie visuelle → Organiser les éléments selon leur importance (ex. titres plus gros que le texte).
- 🏝️ Espace blanc → Aérer l’interface pour améliorer la lisibilité et l’attention.
🎨 Un cas concret
Un site réaliser directement par le client via un service en ligne :
🧩 Systèmes de design et composants UI
📌 Définition
Un système de design est un ensemble de règles et composants réutilisables pour assurer cohérence et efficacité dans un projet.
✅ Exemples populaires :
- Material Design (Google) → Guideline complète avec composants UI prêts à l’emploi.
- Tailwind UI → Framework basé sur des classes utilitaires pour créer rapidement des interfaces cohérentes.
- HeroUI → Librairie d’interface.
🔤 Typographie et couleurs en UI
📌 Typographie
- 🏷️ Hiérarchie des polices → Titre, sous-titre, texte courant.
- 🔎 Taille et lisibilité → Privilégier des tailles adaptées aux écrans (min. 16px pour le texte courant).
- ✂️ Nombre de polices limité → 2 max pour éviter une surcharge visuelle.
🎨 Couleurs
-
🎨 Palette de couleurs → 1 couleur principale, 1 secondaire, 2-3 couleurs d’accent.
-
🌓 Contraste suffisant → Respecter les normes WCAG pour l’accessibilité.
-
🟢 Signification des couleurs → Ex. rouge pour erreurs, vert pour validation.
✨ Micro-interactions et animations
📌 Pourquoi les utiliser ?
- Améliorent la fluidité de navigation.
- Apportent du feedback utilisateur (ex. bouton qui change de couleur au survol).
- Rendent l’interface plus engageante.
✅ Bonnes pratiques
- 🪶 Rester subtil → Éviter les animations trop lentes ou excessives.
- 🧭 Utiliser pour guider → Indiquer un changement d’état (ex. chargement, succès, erreur).
- 📏 Respecter les standards UX → Ne pas perturber l’expérience utilisateur.
💡 Mini-atelier pratique (10 min)
Objectif :
Sur Figma, étudier le fonctionnement des prototypes sur figma :
- Créer un composant et ajouter un variant.
- Modifier la variation.
- Appliquer la variation à un événement.