Cette formation permet de concevoir ou d’adapter une charte graphique pour le web et les applications : identité, grilles, typographie, couleurs, composants et mouvement, jusqu’au design system partagé avec les développeurs, en intégrant accessibilité et écoconception. Prérequis : pratique courante de Windows ou macOS.
Objectifs :
• Comprendre le rôle et le contenu d’une charte graphique web.
• Adapter une identité visuelle aux contraintes des écrans.
• Définir grilles, typographies et palettes de couleurs accessibles.
• Concevoir les éléments interactifs et les micro-interactions.
• Produire la charte et un design system exploitable dans Figma.
• Intégrer l’accessibilité (RGAA, WCAG) et l’écoconception.
Formation disponible
présentiel, classe à distance, individuel
Formation disponible présentiel, classe à distance, individuel.
Comment souhaitez vous suivre cette formation ?
Cette formation est disponible en présentiel, à distance ou en cours individuels. Suite aux changements récents du fonctionnement des comptes CPF, si nos liens CPF renvoient sur une erreur temporaire, merci de nous contacter au 04 42 31 43 55
Du 03 août au 05 août 2026
Du 11 décembre au 15 décembre 2026
Du 16 avril au 20 avril 2027
Du 30 juillet au 03 août 2027
Du 16 décembre au 20 décembre 2027
Du 03 août au 05 août 2026
Du 11 décembre au 15 décembre 2026
Du 16 avril au 20 avril 2027
Du 30 juillet au 03 août 2027
Du 16 décembre au 20 décembre 2027
Comment souhaitez vous suivre cette formation ?
Cette formation est disponible en présentiel, à distance ou en cours individuels. Suite aux changements récents du fonctionnement des comptes CPF, si nos liens CPF renvoient sur une erreur temporaire, merci de nous contacter au 04 42 31 43 55
Du 03 août au 05 août 2026
Du 11 décembre au 15 décembre 2026
Du 16 avril au 20 avril 2027
Du 30 juillet au 03 août 2027
Du 16 décembre au 20 décembre 2027
Du 03 août au 05 août 2026
Du 11 décembre au 15 décembre 2026
Du 16 avril au 20 avril 2027
Du 30 juillet au 03 août 2027
Du 16 décembre au 20 décembre 2027
La charte graphique web
• Contenu, présentation et exemples de chartes
• Charte, guide de style et design system : différences
Identité graphique
• Logo et déclinaisons : contraintes d’usage, zone de protection, contraste
• Favicon, icône d’application, mode clair et mode sombre
Contenus
• Inventaire : images, vidéos, sons, animations, textes
• Style photographique, illustrations et iconographie
• Moodboard : ton et message de la marque
Grilles et mise en page
• Choix des grilles selon les formats ; zoning et wireframes
• Responsive : points de rupture, orientation, marges et espacements
Éléments interactifs
• Navigation, boutons, liens, appels à l’action, formulaires
• États : survol, focus, actif, désactivé, erreur
Typographie
• Classifications, associations et polices variables
• Hiérarchie, tailles fluides, interlignage, longueur de ligne
• Licences web et applications ; polices libres et fonderies indépendantes
• Accessibilité et polices de secours
Couleur
• Conversion CMJN et Pantone vers RVB ; psychologie des couleurs
• Construire une palette avec Adobe Color ou Coolors
• Couleurs fonctionnelles et contrastes conformes WCAG
Mouvement
• Transitions, animations et micro-interactions
• Respect des préférences de réduction du mouvement
Produire la charte et le design system
• Document de référence pour les designers : règles, valeurs, ton
• Design system dans Figma : variables, styles, composants, variantes
• Transmission aux développeurs : jetons de design, mode Dev
Ouverture aux outils d’IA
• Générer des pistes de moodboard, de palettes ou d’icônes avec l’IA, puis les affiner
• Limites : cohérence de marque, droits et originalité
Du 03 août au 05 août 2026
Du 11 décembre au 15 décembre 2026
Du 16 avril au 20 avril 2027
Du 30 juillet au 03 août 2027
Du 16 décembre au 20 décembre 2027
