La Symbolique des Couleurs
Chaque couleur véhicule des émotions et des messages. Comprendre leur symbolique est essentiel pour créer des designs efficaces.
Explorez les couleurs
Cliquez sur une couleur pour découvrir sa symbolique
Sélectionnez une couleur
Émotions
Cliquez sur une couleur pour voir ses associations émotionnelles.
Utilisation en design
Découvrez quand et comment utiliser cette couleur.
Marques célèbres
Exemples de marques utilisant cette couleur.
Les Harmonies de Couleurs
Complémentaire
Couleurs opposées sur le cercle chromatique. Crée un contraste fort et dynamique.
Analogique
Couleurs adjacentes sur le cercle. Crée une harmonie douce et naturelle.
Triadique
Trois couleurs équidistantes. Équilibre entre contraste et harmonie.
Monochromatique
Variations d'une même teinte. Crée une cohérence visuelle forte.
Exercice : Créez votre palette
Utilisez le sélecteur pour créer une palette harmonieuse
Titre de la carte
Votre palette s'applique en temps réel à cet exemple.
Le Choix Pertinent d'une Police Web
La typographie représente 95% du design web. Choisir les bonnes polices est crucial pour la lisibilité et l'identité de votre projet.
Les Grandes Familles Typographiques
Polices à Empattements (Serif)
- Caractéristiques : Petits traits aux extrémités des lettres
- Perception : Tradition, élégance, fiabilité, sérieux
- Utilisation idéale : Contenus longs, éditorial, luxe, institutions
- Exemples : Times New Roman, Georgia, Playfair Display, Merriweather
Polices Sans Empattements (Sans-Serif)
- Caractéristiques : Lignes épurées sans ornements
- Perception : Modernité, simplicité, accessibilité, clarté
- Utilisation idéale : Interfaces web, applications, startups, tech
- Exemples : Inter, Roboto, Open Sans, Helvetica
Polices à Chasse Fixe (Monospace)
- Caractéristiques : Chaque caractère occupe le même espace
- Perception : Technique, précision, code, authenticité
- Utilisation idéale : Code, données techniques, effet rétro
- Exemples : Fira Code, JetBrains Mono, Source Code Pro
Polices Décoratives (Display)
- Caractéristiques : Designs expressifs et uniques
- Perception : Créativité, personnalité, impact visuel
- Utilisation idéale : Titres, logos, affiches (jamais pour le corps de texte)
- Exemples : Lobster, Pacifico, Bebas Neue
Hiérarchie Typographique
Une bonne hiérarchie guide l'œil du lecteur et structure l'information
Titre Principal
Titre de Section
Sous-titre
Corps de texte pour le contenu principal. La lisibilité est primordiale.
Associations de Polices Réussies
Combiner les polices est un art. Voici des associations éprouvées.
Parfait pour : Sites éditoriaux, portfolios créatifs
Parfait pour : Applications, dashboards, SaaS
Parfait pour : Marques de luxe, hôtellerie haut de gamme
Testeur de Polices Interactif
Voix ambiguë d'un cœur qui au zéphyr préfère les jattes de kiwi. The quick brown fox jumps over the lazy dog. 0123456789
L'Importance de la Cohérence
La cohérence visuelle crée la confiance, améliore l'expérience utilisateur et renforce l'identité de marque.
Le Pouvoir de la Cohérence
Mon Super Site
Bienvenue!
Texte de présentation ici.
Nos Services
Description des services.
Problèmes identifiés :
- 5 polices différentes
- Couleurs sans harmonie
- Espacements incohérents
- Styles de boutons variés
- Bordures disparates
Mon Super Site
Bienvenue!
Texte de présentation ici.
Nos Services
Description des services.
Bénéfices :
- Une seule famille de police
- Palette de 3 couleurs
- Espacements uniformes (8px grid)
- Composants réutilisables
- Hiérarchie visuelle claire
Les 5 Piliers de la Cohérence
Couleurs
Limitez-vous à 3-5 couleurs principales. Définissez des rôles clairs : primaire, secondaire, accent, neutrals.
Typographie
Maximum 2 familles de polices. Établissez une échelle typographique (h1-h6, body, small).
Espacement
Utilisez un système de grille (4px ou 8px). Les marges et paddings suivent cette base.
Composants
Créez des composants réutilisables : boutons, cartes, inputs. Même style partout.
Iconographie
Un seul jeu d'icônes avec style cohérent (filled, outlined, rounded).
Quiz : Identifiez les Incohérences
Quel problème de cohérence voyez-vous ?
Combien de familles de polices maximum pour un site web ?
Quelle base d'espacement est recommandée ?
Résultat
Accessibilité & Contraste
Un design accessible n'est pas une option. C'est une nécessité éthique et légale qui améliore l'expérience pour tous.
Vérificateur de Contraste WCAG
Testez si vos combinaisons de couleurs respectent les normes d'accessibilité
Comprendre les niveaux WCAG
Niveau AA (Minimum requis)
- Texte normal : ratio minimum 4.5:1
- Grand texte (18px+ ou 14px bold) : ratio minimum 3:1
- Requis par la plupart des législations
Niveau AAA (Optimal)
- Texte normal : ratio minimum 7:1
- Grand texte : ratio minimum 4.5:1
- Recommandé pour une accessibilité maximale
Simulateur de Daltonisme
Visualisez comment votre design apparaît aux personnes daltoniennes
Bonnes Pratiques d'Accessibilité
✓ À faire
- Utiliser des couleurs avec un contraste suffisant
- Ne pas se fier uniquement à la couleur pour transmettre l'information
- Ajouter des icônes ou motifs aux indicateurs colorés
- Tester avec des outils de simulation
✗ À éviter
- Texte gris clair sur fond blanc
- Rouge/vert comme seuls indicateurs
- Texte sur images sans overlay
- Polices trop fines (< 300)
Formaliser un Design System
Un Design System est une source unique de vérité qui regroupe tous les éléments réutilisables guidés par des standards clairs.
Anatomie d'un Design System
Fondations
Les tokens de design : les atomes visuels de votre système
Composants
Éléments UI réutilisables construits avec les fondations
Patterns
Combinaisons de composants pour résoudre des problèmes UX récurrents
Templates
Layouts de pages prêts à l'emploi
Design Tokens : Le Cœur du Système
Les tokens sont des variables qui stockent les décisions de design
Couleurs
--color-primary
#2563EB
--color-secondary
#10B981
--color-accent
#F59E0B
--color-error
#EF4444
Espacement
--space-xs
4px
--space-sm
8px
--space-md
16px
--space-lg
24px
--space-xl
32px
Typographie
--font-family
'Inter', sans-serif
--font-size-base
16px
--line-height
1.5
:root {
/* Couleurs */
--color-primary: #2563EB;
--color-primary-light: #3B82F6;
--color-primary-dark: #1D4ED8;
--color-secondary: #10B981;
--color-accent: #F59E0B;
--color-error: #EF4444;
--color-warning: #F59E0B;
--color-success: #10B981;
/* Neutres */
--color-gray-50: #F9FAFB;
--color-gray-100: #F3F4F6;
--color-gray-200: #E5E7EB;
--color-gray-500: #6B7280;
--color-gray-900: #111827;
/* Espacement (base 8px) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
/* Typographie */
--font-sans: 'Inter', system-ui, sans-serif;
--font-serif: 'Playfair Display', Georgia, serif;
--font-mono: 'Fira Code', monospace;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
/* Bordures */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
/* Ombres */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}Bibliothèque de Composants
Boutons
Champs de saisie
Cards
Titre de la carte
Contenu de la carte avec informations pertinentes.
Carte interactive
Cette carte réagit au hover.
Badges & Tags
Documenter son Design System
Un Design System sans documentation est comme une bibliothèque sans catalogue. La documentation est essentielle pour :
- L'onboarding - Permettre aux nouveaux membres de l'équipe de comprendre rapidement le système
- La cohérence - Assurer que tout le monde utilise les composants de la même façon
- La maintenance - Faciliter les mises à jour et évolutions du système
- L'adoption - Encourager l'utilisation du système par toutes les équipes
Outils recommandés
Storybook
Documentation interactive des composants React/Vue/Angular
Figma
Design et prototypage avec librairie de composants
Notion / Confluence
Documentation des guidelines et bonnes pratiques
ZeroHeight
Plateforme dédiée aux Design Systems
Récapitulatif
Couleurs
Choisissez des couleurs avec intention en comprenant leur symbolique
Typographie
Maximum 2 familles, hiérarchie claire, lisibilité avant tout
Cohérence
Réutilisez les mêmes éléments, suivez votre grille d'espacement
Accessibilité
Ratio de contraste 4.5:1 minimum, ne pas se fier qu'à la couleur
Design System
Formalisez vos tokens et composants, documentez tout
Prêt à créer des designs cohérents et accessibles ?
Revoir le module