Formation Charte graphique pour le Web
Adaptez votre identité visuelle aux écrans : grilles, typographies et couleurs accessibles pour une charte graphique web cohérente.
Notre équipe vous conseille
Est-ce la bonne formation pour vous ?
Votre objectif, votre niveau, votre financement : notre équipe vérifie avec vous que cette formation vous correspond, ou vous oriente vers celle qui vous conviendra mieux.
- Pour qui
- Infographistes, webdesigners, responsables de communication...
- Prérequis
Bonne connaissance de l’environnement informatique (pratique courante d’OS X ou de Windows)
- Durée
- 21 h · 3 jours
En bref
Ce que vous saurez faire
- 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.
Programme
01La charte graphique web
- Contenu, présentation et exemples de chartes
- Charte, guide de style et design system : différences
02Identité graphique
- Logo et déclinaisons : contraintes d’usage, zone de protection, contraste
- Favicon, icône d’application, mode clair et mode sombre
03Contenus
- Inventaire : images, vidéos, sons, animations, textes
- Style photographique, illustrations et iconographie
- Moodboard : ton et message de la marque
04Grilles et mise en page
- Choix des grilles selon les formats ; zoning et wireframes
- Responsive : points de rupture, orientation, marges et espacements
05Éléments interactifs
- Navigation, boutons, liens, appels à l’action, formulaires
- États : survol, focus, actif, désactivé, erreur
06Typographie
- 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
07Couleur
- Conversion CMJN et Pantone vers RVB ; psychologie des couleurs
- Construire une palette avec Adobe Color ou Coolors
- Couleurs fonctionnelles et contrastes conformes WCAG
08Mouvement
- Transitions, animations et micro-interactions
- Respect des préférences de réduction du mouvement
09Produire 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
10Ouverture 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é
Prochaines sessions
Les dates peuvent s'adapter : en individuel, la formation démarre quand vous êtes prêt(e).
- 11 décembre 2026 – 15 décembre 2026
- 16 avril 2027 – 20 avril 2027
- 30 juillet 2027 – 3 août 2027
- 16 décembre 2027 – 20 décembre 2027
Financer cette formation
Selon votre situation, tout ou partie de la formation peut être pris en charge. Notre équipe vérifie vos droits avec vous.
Votre employeur (OPCO), France Travail, la Région ou un financement personnel peuvent prendre en charge cette formation.
Notre équipe identifie la bonne solution et monte le dossier avec vous.
Informations pratiques
- Type de reconnaissance
- Attestation de fin de formation
- Accessibilité
- Locaux accessibles aux personnes à mobilité réduite (PMR) et aux personnes en situation de handicap (PSH).
Référent handicap : Bénédicte Guilloteau, benedicte@mandyben.com
Fiche mise à jour le 29 octobre 2026
En savoir plus sur cette formation
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.
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é
Avis
Ils sont passés par là. Des stagiaires.
J'ai pu créer ma boutique en ligne et réaliser des ventes en lançant ma marque :-)
Ce stage m'a permis de tester plusieurs appareils photo, et de me mettre en situation pour mieux comprendre les problématiques.
Les explications claires et bien ciblées ont permis à notre collaborateur à la fois de se former et de rectifier ses procédures. Objectif atteint donc et nous en remercions le formateur.
Je vous confirme que la formation s’est excellemment bien déroulée. Le contenu était très intéressant et devrait m’apporter beaucoup dans mon travail à venir. J’en profite pour vous féliciter sur le choix de vos formateurs, le formateur fait preuve d’une grande pédagogie et d’une extrême gentillesse.
Questions fréquentes
WordPress ou Wix : que choisir ?
WordPress offre plus de liberté et de fonctionnalités, Wix est plus simple pour démarrer. Nous vous conseillons selon votre projet et votre budget.
Faut-il savoir coder ?
Non pour WordPress, Wix, Webflow ou PrestaShop en tant qu'utilisateur. Pour le développement de thèmes, des bases en HTML et CSS sont utiles (voir le domaine Développement et informatique).
Peut-on travailler sur son propre site pendant la formation ?
Oui, en formation individuelle notamment, nous travaillons volontiers sur votre projet réel.
Qu'est-ce que l'UX/UI design ?
L'UX (expérience utilisateur) et l'UI (interface) consistent à concevoir des sites et applications simples et agréables à utiliser. Nos formations utilisent notamment Figma.
Où se déroulent les formations ?
Dans nos locaux au 146 rue Paradis, à Marseille (6e), dans vos locaux pour les formations intra-entreprise, ou à distance en visio, en direct avec le formateur. Les modalités possibles sont indiquées sur chaque fiche.
Pas sûr(e) d'être fait(e) pour ça ?
Chacun sa façon d'atteindre son objectif. Notre équipe vous rappelle pour trouver la formation et le financement adaptés à votre situation.
- QualiopiOrganisme certifié
- 1 780personnes formées en 2026
- 98 %de satisfaction
- Depuis 2006à Marseille, 146 rue Paradis