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 :

1. Contraste → Assurer une bonne lisibilité (ex. texte sombre sur fond clair).
2. Hiérarchie visuelle → Organiser les éléments selon leur importance (ex. titres plus gros que le texte).
3. 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 :

1. Créer un composant et ajouter un variant.
2. Modifier la variation.
3. Appliquer la variation à un événement.