# **Module 4 : Design UI avancé** ## **Objectifs :** - Approfondir les compétences en design UI, en se concentrant sur la cohérence et l'esthétique - Maîtriser les principes avancés de choix des couleurs, des typographies et des éléments graphiques - Apprendre à créer des systèmes de design et des guides de style pour des projets plus complexes - Garantir l'accessibilité et l'ergonomie des interfaces web --- ## **Section 1 : Choix des couleurs et des typographies** ### **1.1. La théorie des couleurs :** Le choix des couleurs est essentiel pour définir l'identité visuelle d'un site web. Voici les principes clés à garder en tête : 1. **Les palettes de couleurs :** - **Couleurs primaires** : Couleurs principales utilisées pour les éléments clés (boutons, en-têtes). - **Couleurs secondaires** : Utilisées pour les éléments complémentaires (fonds, encadrés, icônes). - **Couleurs d'accentuation** : Utilisées pour attirer l'attention sur des actions ou des éléments spécifiques (appels à l'action). 2. **Harmonie des couleurs** : - **Monochrome** : Une seule couleur avec des variations de teintes et d'intensité. - **Couleurs complémentaires** : Deux couleurs opposées sur le cercle chromatique (par exemple, bleu et orange). - **Couleurs analogues** : Couleurs situées côte à côte sur le cercle chromatique (par exemple, bleu et vert). ### **1.2. Application dans Figma :** 1. **Créer une palette de couleurs dans Figma** : - Sélectionnez l'outil **Rectangle** et dessinez une série de rectangles. - Dans le panneau de droite, sélectionnez la couleur de chaque rectangle et définissez les couleurs primaires, secondaires et d'accentuation. 2. **Créer des styles de couleurs** : - Dans Figma, vous pouvez enregistrer vos couleurs comme des styles pour les réutiliser facilement. - Une fois qu'une couleur est définie, dans la section **Fill** (Remplissage) du panneau de droite, cliquez sur les trois petits points à côté de la couleur, puis sur **Create Style**. - Nommez votre style (par exemple, **Primary Color**). ### **1.3. Typographie :** 1. **Choisir les bonnes polices** : - Une bonne typographie améliore la lisibilité et contribue à l’identité visuelle. - Utilisez des polices simples et lisibles pour le corps du texte (ex : Roboto, Open Sans). - Les en-têtes peuvent utiliser des polices plus stylisées mais restent lisibles (ex : Montserrat, Lato). 2. **Hiérarchie typographique** : - Utilisez différentes tailles et épaisseurs de texte pour créer une hiérarchie visuelle. Par exemple : - **H1** : 32px (Titre principal) - **H2** : 24px (Sous-titre) - **Paragraphe** : 16px (Texte de base) ### **1.4. Travaux pratiques : Création d’une palette de couleurs et hiérarchie typographique** 1. **Créer une palette de couleurs** pour un site fictif. Utilisez une combinaison de couleurs primaires, secondaires et d’accentuation. 2. **Définir une hiérarchie typographique** pour les titres, sous-titres, et paragraphes dans Figma. Utilisez des polices disponibles comme Google Fonts. --- ## **Section 2 : Systèmes de design et guides de style** ### **2.1. Qu'est-ce qu'un système de design ?** Un système de design est un ensemble de règles et de composants qui garantissent la cohérence dans tout le projet. Cela inclut : - Les styles de couleurs - La typographie - Les composants UI (boutons, cartes, formulaires) - Les espacements et alignements ### **2.2. Comment créer un système de design dans Figma :** 1. **Créer des styles globaux** : - Commencez par définir vos styles de couleurs et de typographie (comme vu précédemment). - Sauvegardez-les en tant que styles globaux pour les utiliser facilement sur tous les composants. 2. **Créer des composants réutilisables** : - Par exemple, un bouton. Créez un bouton une fois, définissez-le comme un **composant**, et utilisez-le partout dans votre projet. - Si vous avez besoin de plusieurs types de boutons (primaire, secondaire), créez des variantes du composant. 3. **Créez une bibliothèque de composants** : - Dans Figma, vous pouvez créer une page dédiée à vos composants (boutons, formulaires, cartes). - Tous les composants que vous créez dans cette page pourront être réutilisés à travers différents projets ou pages. ### **2.3. Créer un guide de style :** Un guide de style rassemble toutes les règles de design pour un projet. Il inclut : - **Les couleurs principales et secondaires** : Liste des couleurs utilisées, avec leurs codes hexadécimaux. - **La typographie** : Les polices utilisées, avec des exemples pour chaque taille de titre, sous-titre, et texte de paragraphe. - **Les composants** : Boutons, champs de formulaire, icônes, etc. ### **2.4. Travaux pratiques : Création d’un système de design et d’un guide de style** 1. **Créer un bouton principal et un bouton secondaire** en tant que composants. 2. **Créer une page de guide de style** où vous affichez : - La palette de couleurs avec les codes hexadécimaux. - Les différentes tailles et styles de texte. - Les composants comme les boutons. --- ## **Section 3 : Accessibilité et ergonomie web** ### **3.1. Pourquoi l’accessibilité est-elle importante ?** L'accessibilité dans le design UI consiste à garantir que votre site est utilisable par tous, y compris les personnes ayant des handicaps (visuels, auditifs, moteurs). Voici quelques principes : - **Contraste des couleurs** : Utiliser un contraste suffisant entre le texte et l'arrière-plan pour garantir la lisibilité. - **Taille de police** : Assurez-vous que la taille de la police est suffisamment grande pour être lisible sur tous les écrans. - **Navigation au clavier** : Assurez-vous que tous les éléments interactifs peuvent être accessibles via le clavier. ### **3.2. Outils pour tester l'accessibilité dans Figma :** 1. **Plugins Figma pour l'accessibilité** : - Utilisez des plugins comme **Contrast** pour vérifier le contraste de votre design. - Testez les tailles de texte et les couleurs pour vérifier qu'elles respectent les bonnes pratiques en matière d'accessibilité. 2. **Utilisation des grilles pour garantir une structure cohérente** : - Les grilles permettent de structurer les éléments de manière cohérente et ergonomique, garantissant ainsi que l'interface est utilisable sur différents types d'écrans. ### **3.3. Travaux pratiques : Tester l’accessibilité d’un design** 1. **Utilisez le plugin Contrast** dans Figma pour tester une page que vous avez créée. Vérifiez que toutes les combinaisons de couleurs passent les tests de contraste. 2. **Ajustez les polices** et les couleurs si nécessaire pour améliorer l’accessibilité. --- ## **Section 4 : Travaux pratiques** ### **TP 4 : Création d'un style guide pour un projet fictif** ### **Objectif :** Créer un guide de style pour un site fictif en définissant la palette de couleurs, la typographie, et les composants UI réutilisables. ### **Instructions :** 1. **Définir une palette de couleurs** pour un site fictif (couleurs primaires, secondaires, et d'accentuation). 2. **Créer des styles typographiques** pour les titres, sous-titres, et paragraphes, avec des exemples pour chaque taille de texte. 3. **Créer des composants réutilisables** comme des boutons et des cartes. 4. **Assembler le tout dans une page dédiée** pour constituer un guide de style complet. 5. **Vérifier l'accessibilité** du design avec un plugin comme Contrast. ### **Durée :** 2 heures --- ## **Conclusion :** À la fin de ce module, vous maîtriserez les compétences avancées en design UI, notamment la gestion des couleurs, des typographies, et la création de composants réutilisables. Vous aurez également acquis des connaissances solides en accessibilité et serez capable de créer des systèmes de design cohérents et ergonomiques.