Module 2 — Design & Identité Visuelle | Cours Théorique Complet

🧭 Positionnement Diagnostique — Avant de Commencer

Objectif : évaluer votre culture visuelle, votre rapport aux couleurs, et votre confiance dans la composition. Ce positionnement n'est pas une note : c'est une cartographie de vos goûts et de vos blocages esthétiques. Il vous permettra de choisir consciemment votre direction design.

🎯 Questionnaire d'auto-positionnement (1-5)

1. Je peux expliquer la différence entre une couleur chaude et une couleur froide.
2. Je sais ce qu'est un "design system".
3. Je peux nommer 3 polices différentes et leur caractère.
4. Je comprends le principe de la règle des tiers.
5. Le mot "typographie" ne me fait pas peur.
6. Je sais ce qu'est le contraste WCAG.
7. Je peux décrire l'identité visuelle d'une marque que j'aime.
8. Je sais pourquoi une image lourde ralentit un site.
9. Je me sens capable de choisir une palette de couleurs.
10. Je comprends la différence entre serif et sans-serif.

🗺️ Carte des peurs & envies esthétiques

Peurs (cochez) :
☐ "Je n'ai pas le sens des couleurs."
☐ "Mon site sera kitsch ou amateur."
☐ "La typographie, c'est trop technique."
☐ "Je ne sais pas ce qui est "beau" sur le web."
☐ "Je vais copier sans faire exprès."

Envies :
☐ Créer une atmosphère unique qui me ressemble
☐ Maîtriser la hiérarchie visuelle
☐ Comprendre pourquoi certains sites "fonctionnent"
☐ Utiliser mes propres œuvres comme matériau design
☐ Impressionner par la sobriété, pas par le bruit

Coach — Note d'accueil : Vous êtes artiste. Vous avez déjà une sensibilité visuelle que 90% des développeurs n'ont pas. Ce module ne vous apprendra pas à "devenir créatif" : il vous donnera un cadre technique pour canaliser votre créativité. Le design web n'est pas un talent inné : c'est une discipline qui s'apprend. Et vous avez déjà fait la moitié du chemin en vivant dans un monde visuel.

📊 Interprétation du positionnement :

0-15 points : Profil « Œil naïf ». Vous partez de zéro, mais sans préjugés. C'est une force : vous ne serez pas prisonnier de modes passées.
16-30 points : Profil « Amateur éclairé ». Vous avez des intuitions mais pas le vocabulaire. Ce module vous donnera les mots pour articuler ce que vous sentez déjà.
31-50 points : Profil « Praticien curieux ». Vous avez déjà touché à Canva, Figma, ou au moins à PowerPoint. Vous allez passer de l'outil à la méthode.

📚 Introduction Académique : Du goût à la méthode

2.1 La théorie de la Gestalt : pourquoi nous voyons ce que nous voyons

La psychologie de la Gestalt, née en Allemagne dans les années 1920 (Max Wertheimer, Kurt Koffka, Wolfgang Köhler), étudie la perception visuelle. Son postulat central : « Le tout est différent de la somme de ses parties ». Notre cerveau ne perçoit pas des points, des lignes et des couleurs isolés : il perçoit des formes, des structures, des sens.

Les lois de la Gestalt appliquées au web design :

Proximité : les éléments proches sont perçus comme un groupe. D'où l'importance des marges et du whitespace.
Similarité : les éléments de même couleur, forme ou taille sont perçus comme appartenant à la même catégorie. D'où la cohérence du design system.
Continuité : l'œil suit les lignes et les courbes. D'où l'importance de l'alignement et de la direction du regard.
Fermeture : le cerveau complète les formes incomplètes. D'où la possibilité de suggérer sans surcharger.
Figure/Fond : le cerveau sépare ce qui est premier plan (le contenu) de l'arrière-plan. D'où la nécessité de contrastes suffisants.

Ces lois ne sont pas des options de style : ce sont des contraintes neurologiques. Un site qui les respecte est perçu comme "clair" sans que l'utilisateur sache pourquoi. Un site qui les viole est perçu comme "confus" ou "stressant".

2.2 L'andragogie appliquée au design : l'expérience comme ressource

Knowles postule que l'adulte apprend en s'appuyant sur son expérience. Pour un artiste, cette expérience est visuelle. Vous avez déjà composé des tableaux, organisé des expositions, choisi des cadres. Tout cela est du design. Ce module traduit ces intuitions en variables contrôlables : au lieu de "ça ne rend pas bien", vous direz "le contraste est insuffisant" ou "la hiérarchie typographique manque de deux niveaux".

Coach — Sur la théorie : La Gestalt peut sembler abstraite. Mais elle explique pourquoi vous aimez certains tableaux sans savoir pourquoi. C'est la même chose pour un site. Ce module vous donne le vocabulaire de votre propre œil. Vous ne regardez plus : vous analysez. Et cette analyse vous rend libre, pas prisonnier de règles.

🎨 Chapitre 1 — Psychologie des Couleurs : L'émotion codée en hexadécimal

1.1 La couleur n'est pas une décoration : c'est un langage

La couleur est le premier élément perçu par le cerveau. Les recherches de Lindgaard et al. (2006) montrent que les utilisateurs forment un jugement sur l'attrait visuel d'un site en 50 millisecondes — avant même de lire un mot. citeweb_search:4#6 Cette première impression est irrationnelle, émotionnelle, et durable. Elle colore (littéralement) toute l'expérience suivante.

La psychologie des couleurs n'est pas une science exacte : les associations émotionnelles varient selon la culture, le contexte, et l'expérience individuelle. Mais des tendances globales se dégagent, particulièrement pertinentes pour les artistes :

Bleu : confiance, calme, stabilité. Dominant dans la tech et la finance (Facebook, LinkedIn, PayPal). Pour un artiste, le bleu marine ou indigo peut évoquer la profondeur, la méditation, la nuit.
Rouge : énergie, urgence, passion. Utilisé avec parcimonie car il augmente la tension physiologique (fréquence cardiaque). Excellent pour un CTA (call-to-action) mais épuisant comme fond dominant.
Jaune/Or : optimisme, chaleur, créativité. Le jaune est la couleur la plus visible en termes de longueur d'onde, mais aussi la plus fatigante à l'état pur. Associé au noir, il devient élégant et alerte.
Vert : nature, croissance, équilibre. Le vert est physiologiquement reposant (notre œil ne doit pas l'ajuster, contrairement au rouge). Idéal pour les artistes liés à la nature, à l'écologie, ou à la guérison.
Violet : créativité, luxe, spiritualité. Historiquement la couleur la plus chère à produire (pourpre tyrien), elle conserve une aura d'exclusivité. Très populaire dans les univers artistiques et mystiques.
Noir & Blanc : le noir évoque le luxe, le minimalisme, le mystère. Le blanc évoque la pureté, le vide, la simplicité. Ensemble, ils créent un contraste maximal et une élégance intemporelle.

1.2 La règle 60-30-10 : structure sans rigidité

La règle 60-30-10, héritée de la théorie de la décoration intérieure, est applicable au web :

60% : couleur dominante (fond, arrière-plans). Elle crée l'atmosphère générale.
30% : couleur secondaire (sections, encadrés). Elle apporte de la variété sans concurrencer la dominante.
10% : couleur d'accent (boutons, liens, notifications). Elle attire l'attention là où vous le décidez.

Cette règle n'est pas une loi physique. Certains sites subversifs utilisent 50-25-25 ou même 40-30-30. Mais pour un artiste débutant en web design, elle constitue un garde-fou contre le chaos chromatique. Un site avec 7 couleurs principales est perçu comme amateur, non pas parce que les couleurs sont mauvaises, mais parce que le cerveau ne peut pas hiérarchiser l'information.

1.3 Le daltonisme et la dépendance à la couleur : une exclusion silencieuse

Environ 8% des hommes et 0,5% des femmes présentent une déficience de la vision des couleurs (daltonisme). citeweb_search:4#3 Cela représente des millions d'utilisateurs. Si votre site utilise le rouge pour signaler une erreur et le vert pour signaler un succès, sans autre indicateur (texte, icône, forme), une portion significative de votre audience ne comprendra pas vos messages.

Règle d'or : ne jamais compter sur la couleur seule pour transmettre une information. Associez toujours : couleur + texte, ou couleur + icône, ou couleur + motif. C'est le principe de redondance sensorielle : l'information passe par plusieurs canaux simultanés.

⚠️ Analyse critique — La mode des palettes "aesthetics" : Instagram et Pinterest regorgent de palettes "beige", "dark academia", "cottagecore". Ces esthétiques sont séduisantes mais souvent inaccessibles : tons pastel sur fond blanc cassé = contrastes insuffisants. L'analyse de WebAIM sur un million de pages d'accueil (2025) montre que le texte à faible contraste reste le problème d'accessibilité le plus fréquent. citeweb_search:4#6 La beauté qui exclut n'est pas du beau : c'est de l'élitisme visuel. L'artiste véritable crée pour tous.

Coach — Sur la couleur : Ne choisissez pas vos couleurs sur Pinterest. Choisissez-les dans votre propre œuvre. Prenez une de vos toiles préférées. Extraites-en 3 couleurs dominantes avec un outil comme Coolors ou Adobe Color. Vous avez instantanément une palette cohérente, personnelle, et déjà prouvée esthétiquement. Votre art est votre design system.

🏗️ Chapitre 2 — Design System : L'identité visuelle comme architecture

2.1 Qu'est-ce qu'un design system ?

Un design system n'est pas une charte graphique. Une charte graphique est un document statique (PDF) qui dit "utilisez ce rouge et cette police". Un design system est un écosystème vivant de composants, de règles, de tokens et de documentation qui garantit la cohérence à l'échelle.

Brad Frost a formalisé la méthodologie Atomic Design en 2013, qui reste pertinente en 2025-2026 bien que les labels exacts importent moins que le principe sous-jacent : la construction hiérarchique d'interfaces à partir de composants réutilisables. citeweb_search:4#12 Les cinq niveaux originaux :

Atomes : boutons, inputs, labels, icônes (les briques indivisibles).
Molécules : combinaisons simples d'atomes (un champ de recherche = label + input + bouton).
Organismes : sections complexes (en-tête de page = logo + navigation + bouton CTA).
Templates : structures de page sans contenu réel (grilles, wireframes).
Pages : instances concrètes des templates avec du vrai contenu.

Pour un artiste solo, un design system complet est excessif. Mais le principe est essentiel : définir une fois, réutiliser partout. Si votre bouton "Contact" est bleu sur la page d'accueil et vert sur la page portfolio, l'utilisateur perd ses repères.

2.2 Les tokens de design : les variables de votre identité

Les design tokens sont des variables nommées qui stockent les valeurs visuelles. Exemple : au lieu d'écrire color: #3b82f6; partout, vous définissez --color-primary: #3b82f6; et vous utilisez var(--color-primary). Si vous changez d'avis, une seule modification suffit.

Les tokens essentiels pour un artiste :

Catégorie	Exemples de tokens	Usage
Couleurs	primary, secondary, accent, background, surface, text	Toute l'interface
Typographie	font-heading, font-body, size-h1, size-body, line-height	Hiérarchie textuelle
Espacement	space-xs, space-sm, space-md, space-lg, space-xl	Marges et padding
Rayons	radius-sm, radius-md, radius-lg	Coins arrondis
Ombres	shadow-sm, shadow-md, shadow-lg	Profondeur

2.3 Le moodboard : matérialiser l'intention

Avant de coder une ligne, l'artiste doit créer un moodboard (planche d'ambiance). C'est un collage visuel d'inspirations : couleurs, textures, typographies, photographies, captures d'écran de sites admirés. Outils : Figma (gratuit, professionnel), Canva (accessible), Milanote (visuel), ou même un mur physique avec des magazines découpés.

Le moodboard n'est pas du plagiat. C'est un terrain d'entente visuel entre vous, votre formateur, et votre futur vous. Il évite les dérives en cours de route ("je vais juste ajouter un peu de turquoise...").

Coach — Sur le design system : Ne vous sentez pas obligé de créer un système enterprise à la Google. Pour un portfolio d'artiste, un design system minimal suffit : 3 couleurs, 2 polices, 5 tailles de texte, 4 espacements. Écrivez-les sur une carte postale et collez-la près de votre écran. La cohérence naît de la contrainte, pas de l'abondance.

🔤 Chapitre 3 — Typographie Web : La voix silencieuse du contenu

3.1 Serif vs Sans-Serif : deux tempéraments

La typographie est la voix visuelle de votre texte. Le choix entre serif (empattements) et sans-serif (sans empattements) n'est pas anodin :

Serif (Times, Georgia, Playfair Display) : tradition, autorité, élégance, littérature. Les empattements guident l'œil horizontalement, ce qui facilite la lecture longue sur papier. Sur écran, c'est plus discutable, mais les écrans haute résolution (Retina) de 2026 rendent les serif parfaitement lisibles.
Sans-Serif (Arial, Helvetica, Inter, Roboto) : modernité, clarté, neutralité, technologie. Historiquement préférés pour le web car plus nets à basse résolution. Aujourd'hui, c'est le choix par défaut pour l'interface et le corps de texte.

Règle pratique : un serif pour les titres (personnalité, élégance) + un sans-serif pour le corps de texte (lisibilité, neutralité). C'est la combinaison la plus sûre pour un artiste. Éviter d'utiliser plus de 2 polices : chaque nouvelle typographie demande un effort cognitif à l'utilisateur pour "apprendre" ses caractères.

3.2 Hiérarchie typographique : diriger le regard

La hiérarchie typographique organise l'information par niveau d'importance. Elle utilise trois leviers :

Taille : plus c'est grand, plus c'est important. Mais attention : un titre trop grand devient agressif. Utiliser une échelle modulaire (ex: chaque niveau est 1.25 fois plus grand que le précédent).
Poids : la graisse (light, regular, bold, black). Un titre en bold attire plus qu'un titre en regular de même taille.
Couleur : un titre en couleur primaire se détache du corps en gris neutre.

Échelle typographique recommandée pour un portfolio artistique :

Élément	Taille (rem)	Poids	Usage
H1	2.5rem (40px)	Bold	Titre de page, nom de l'artiste
H2	2rem (32px)	Semi-bold	Titre de section
H3	1.5rem (24px)	Medium	Sous-section
Body	1rem (16px)	Regular	Texte courant
Small / Caption	0.875rem (14px)	Regular	Légendes, métadonnées

3.3 Interligne, mesure et espacement : la respiration du texte

La lisibilité ne dépend pas seulement de la police et de la taille. Les paramètres d'espacement sont cruciaux :

Interligne (line-height) : pour le corps de texte, 1.5 à 1.7 est l'idéal. En dessous de 1.4, le texte est étouffant. Au-dessus de 2, les lignes se désolidarisent. Les titres courts peuvent descendre à 1.2. citeweb_search:5#10
Mesure (line length) : le nombre de caractères par ligne. Idéal : 45 à 75 caractères (y compris espaces). Au-delà de 90, l'œil perd le fil en passant à la ligne suivante. En dessous de 35, le texte est haché.
Lettrage (letter-spacing) : pour le corps de texte, laisser la valeur par défaut (0). Pour les titres en majuscules, un léger espacement positif (+0.05em) améliore la lisibilité.

WCAG 2.2, via le critère 1.4.12 (Text Spacing), impose que le contenu reste fonctionnel quand l'utilisateur modifie l'espacement : interligne à 1.5x, espacement après paragraphe à 2x, espacement des lettres à 0.12x, espacement des mots à 0.16x. citeweb_search:5#6web_search:5#11

3.4 Unités relatives et accessibilité : la leçon de Margaret

WCAG ne spécifie pas de taille minimale en pixels, mais la pratique standard est 16px (1rem) pour le corps de texte. citeweb_search:5#0 L'unité rem (root em) est préférable au px car elle respecte les préférences utilisateur. Si un utilisateur malvoyant a configuré son navigateur avec une taille de base de 20px, un texte en 1rem affichera à 20px. Un texte en 16px restera figé à 16px, excluant cet utilisateur. citeweb_search:5#0web_search:5#6

Le "Margaret Test", popularisé par Muhammad Afsar Khan, consiste à : zoomer à 200%, changer la taille de police par défaut du navigateur, et tester sur téléphone en plein soleil. Si le texte reste lisible, vous passez le test. citeweb_search:5#0

⚠️ Critique — Le culte de la "belle typo" : Les designers aiment les polices exotiques (script, blackletter, display). Pour un artiste, la tentation est forte d'utiliser une police "artistique" partout. C'est une erreur fatale pour la lisibilité. Une police décorative peut être utilisée pour un titre unique, un logo, une citation. Jamais pour le corps de texte. L'artiste web doit accepter une dualité : l'œuvre est libre, le contenant est discipliné.

Coach — Sur la typographie : Si vous ne retenez qu'une chose : Inter ou Georgia pour le corps, Playfair Display ou Cormorant pour les titres. Ces deux combinaisons sont gratuites (Google Fonts), éprouvées, et fonctionnent à merveille pour un portfolio artistique. Ne passez pas trois jours à choisir une police. Passez trois jours à ajuster les tailles et les interlignes. C'est là que réside la différence entre amateur et pro.

📐 Chapitre 4 — Grille, Règle des Tiers et Golden Ratio : L'ordre harmonieux

4.1 La règle des tiers : le premier pas vers la composition

La règle des tiers divise le cadre en 9 rectangles égaux (3x3). Les points d'intersection des lignes sont les "sweet spots" : l'œil y est naturellement attiré. En UX/UI, le point supérieur gauche est le premier regardé (lecture en F), suivi du point inférieur gauche, puis du supérieur droit. citeweb_search:5#5web_search:5#8

Pour un site web, cela signifie :

Placer le titre principal ou le CTA le plus important au point supérieur gauche.
Placer l'image principale ou le portrait de l'artiste le long d'une ligne verticale, jamais au centre (sauf intention dramatique).
Utiliser la ligne du bas pour la navigation secondaire ou les informations de contact.

La règle des tiers est une approximation du Golden Ratio (1:1.618), plus simple à appliquer et suffisante pour la plupart des layouts web. citeweb_search:5#2web_search:5#3

4.2 Le Golden Ratio (φ = 1.618) : la proportion divine revisitée

Le nombre d'or φ ≈ 1.618 apparaît dans la nature (coquilles, galaxies, plantes) et dans l'art (Parthenon, Mona Lisa). En web design, il peut guider :

Les proportions de colonnes : une zone de contenu à 62% et une sidebar à 38% (100/1.618 ≈ 62).
La hiérarchie typographique : chaque taille de titre est 1.618 fois plus grande que la précédente. Exemple : body 16px → h3 26px → h2 42px → h1 68px.
L'espacement : utiliser la suite de Fibonacci (8, 13, 21, 34, 55px) pour les marges et les gaps. citeweb_search:5#7

Critique : le Golden Ratio n'est pas une formule magique. Un site qui le respecte à la lettre peut être parfaitement proportionné et parfaitement ennuyeux. La proportion est un outil de vérification, pas de génération. Concevez d'abord avec votre intuition, puis vérifiez avec la grille. citeweb_search:5#3

4.3 Le grid system : la structure invisible

Les grilles en web design sont des systèmes de colonnes qui organisent l'espace horizontal. La grille la plus commune est la grille 12 colonnes : elle se divise en 2, 3, 4, ou 6 colonnes égales, offrant une flexibilité maximale. Pour un portfolio artistique, une grille 6 ou 8 colonnes est souvent plus élégante et moins "corporate".

En CSS moderne, les grilles se construisent avec CSS Grid (pour les layouts bidimensionnels complexes) ou Flexbox (pour les alignements unidimensionnels). Pour un débutant, Flexbox suffit largement pour les portfolios. CSS Grid devient utile quand on veut des mises en page magazine (chevauchements, zones asymétriques).

Coach — Sur la composition : N'ayez pas peur du vide. Le whitespace (espace blanc, ou "négatif") n'est pas du gaspillage : c'est le silence entre les notes. Un site sans respiration est comme un discours sans ponctuation. Éprouvez la composition comme vous éprouvez une toile : est-ce que l'œil se repose ? Est-ce que le regard est guidé ? Est-ce que l'essentiel émerge du bruit ?

📱 Chapitre 5 — Responsive Design & Images : S'adapter à tous les écrans, alléger le monde

5.1 Media queries et breakpoints : les seuils du changement

Le responsive design repose sur les media queries : des règles CSS qui s'appliquent selon les caractéristiques de l'appareil. L'approche mobile-first utilise min-width pour enrichir progressivement :

/* Mobile (base) */
.container { padding: 16px; }

/* Tablette (768px+) */
@media (min-width: 768px) {
  .container { padding: 32px; max-width: 720px; margin: 0 auto; }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .container { max-width: 960px; display: grid; grid-template-columns: 2fr 1fr; }
}

Les breakpoints ne sont pas des lois. Ils doivent être déterminés par votre contenu, pas par les tailles d'appareils. Si votre texte devient illisible à 650px de large, c'est votre breakpoint. Pas besoin de viser exactement 768px.

5.2 Images responsives : srcset et formats modernes

En 2026, servir une image de 2000px de large à un téléphone de 375px est un crime de performance. La solution : srcset, qui permet au navigateur de choisir la taille d'image adaptée à la résolution de l'écran.

Mais le vrai changement de paradigme est l'adoption des formats modernes :

WebP : supporté par ~97% des navigateurs en 2026. 25-35% plus léger que JPEG à qualité équivalente. Supporte la transparence et l'animation. citeweb_search:4#0web_search:4#1web_search:4#5
AVIF : format basé sur le codec AV1. 30-50% plus léger que WebP, avec une meilleure qualité aux basses tailles. Support à ~94% en 2026, mais l'encodage est 5 à 10 fois plus lent que WebP. citeweb_search:4#0web_search:4#1web_search:4#2
JPEG XL : nouveau format prometteur, mais support encore limité en 2026. À surveiller. citeweb_search:4#5

La stratégie de production en 2026 est la suivante : servir AVIF en premier, WebP en fallback, et JPEG en dernier recours, via l'élément <picture> ou un CDN intelligent (Cloudflare, Cloudinary). citeweb_search:4#0

5.3 Lazy loading : charger seulement ce qui est vu

Le lazy loading (chargement paresseux) est un attribut HTML natif : loading="lazy". Les images situées hors de l'écran visible ne sont chargées que quand l'utilisateur scroll vers elles. Cela réduit drastiquement le poids initial de la page et améliore le temps de chargement perçu. Pour un portfolio d'artiste avec 20 œuvres, c'est indispensable.

Attention : l'image principale (hero image) ne doit jamais être lazy-loaded. Elle doit être visible immédiatement. Utilisez loading="eager" pour elle, et loading="lazy" pour toutes les autres.

5.4 Accessibilité visuelle avancée : au-delà du contraste

WCAG 2.2 impose des ratios de contraste minimums : 4.5:1 pour le texte normal, 3:1 pour le texte large (18px+ ou 14px+ bold). citeweb_search:4#3web_search:4#6web_search:4#10 Mais l'accessibilité visuelle ne se limite pas au contraste :

Focus visible : quand un utilisateur navigue au clavier (Tab), l'élément actif doit avoir un contour visible. Par défaut, les navigateurs ajoutent un outline, mais beaucoup de designers le suppriment esthétiquement. C'est une exclusion.
Redimensionnement : le texte doit rester lisible quand l'utilisateur zoome à 200%. Pas de barres de défilement horizontales, pas de texte coupé. citeweb_search:5#0
Mode sombre : si vous proposez un dark mode, vérifiez que vos contrastes inversés restent valides. Un orange vif sur fond blanc peut devenir agressif sur fond noir.

🧮 Cas pratique — Convertir votre portfolio en formats modernes :
Prenez vos 5 œuvres préférées. Convertissez-les avec Squoosh (squoosh.app) : d'abord en WebP qualité 80, puis en AVIF qualité 60. Comparez le poids et la qualité visuelle. Notez le gain en pourcentage. Puis, intégrez-les dans une page HTML avec <picture> et loading="lazy". Mesurez le temps de chargement avec Lighthouse avant et après.

Coach — Sur les images : Vos œuvres méritent d'être vues dans leur meilleure qualité. Mais un visiteur qui attend 8 secondes que votre page se charge n'attendra pas. La solution n'est pas de compresser à mort : c'est de servir la bonne image à la bonne taille au bon moment. C'est ce que fait un musée : il expose l'original dans la salle principale, et des reproductions dans les catalogues. Votre site est le catalogue numérique. L'original reste dans votre atelier.

🧪 Chapitre 6 — Outils de Design et Prototypage : De l'idée au code

6.1 Figma : le standard de l'industrie

Figma est un outil de design d'interface basé sur le navigateur (gratuit pour les individus). Il permet de créer des maquettes, des prototypes interactifs, et des design systems. Pour un artiste, Figma est précieux car il permet de "prévisualiser" son site avant de coder. C'est le croquis avant la toile.

Fonctionnalités clés pour ce module :

Frames et grilles : créer des cadres de taille responsive (desktop, tablette, mobile) avec des grilles intégrées.
Variables et tokens : définir des couleurs, des typographies, et des espacements réutilisables.
Auto-layout : créer des composants qui s'adaptent automatiquement au contenu (boutons qui s'allongent selon le texte).
Plugins : Stark (vérification d'accessibilité), Unsplash (images libres), Coolors (palettes).

6.2 Canva : l'accessibilité visuelle pour tous

Canva est plus simple que Figma, moins précis pour l'interface web, mais excellent pour créer des moodboards, des bannières, et des visuels sociaux. Pour un artiste qui n'a pas le temps de maîtriser Figma, Canva peut constituer une étape intermédiaire valide.

6.3 Coolors & Adobe Color : générer et tester des palettes

Coolors (coolors.co) génère des palettes harmonieuses et vérifie les contrastes en temps réel. Adobe Color propose des règles d'harmonie (complémentaire, triadique, analogique) basées sur la roue chromatique. Pour un artiste, l'approche recommandée est : extraire les couleurs d'une de vos œuvres, puis vérifier avec Coolors que les combinaisons passent les tests WCAG.

6.4 Google Fonts : la bibliothèque typographique du monde

Google Fonts propose plus de 1500 polices gratuites et optimisées pour le web. En 2026, le chargement de polices Google est optimisé (affichage rapide, pas de flash de texte invisible). Mais attention : chaque police ajoute du poids à la page. Limiter à 2-3 variantes (Regular, Bold pour le titre ; Regular pour le corps). Préférer le chargement avec display=swap pour éviter le FOIT (Flash of Invisible Text).

Coach — Sur les outils : Ne devenez pas esclave de l'outil. Figma est puissant, mais un papier et un crayon suffisent pour 80% des décisions de design. Le meilleur outil est celui que vous utilisez. Si Figma vous bloque, utilisez Canva. Si Canva vous bloque, utilisez du papier. L'important est de décider avant de coder. Coder sans maquette, c'est peindre sans croquis : possible, mais coûteux en erreurs.

🛠️ Cas Pratiques Guidés — Apprendre en concevant

CP1 : Extraire une palette de votre propre œuvre

📋 Consigne : Choisissez une œuvre qui vous représente. Photographiez-la ou ouvrez-la dans un logiciel d'édition. Utilisez Adobe Color (adobe.com/fr/color) ou Coolors pour en extraire 5 couleurs. Nommez-les : Primary, Secondary, Accent, Background, Text. Vérifiez chaque combinaison texte/fond avec WebAIM Contrast Checker. Si une combinaison échoue (ratio < 4.5:1), ajustez la teinte ou la luminosité jusqu'à validation. Documentez votre processus en 5 captures d'écran.

🎯 Objectif : créer une palette personnelle, validée, et accessible.

CP2 : Construire un moodboard structuré

📋 Consigne : Dans Figma ou Canva, créez une planche de 1920x1080 px divisée en 6 zones : (1) Couleurs, (2) Typographies, (3) Textures/Matériaux, (4) Sites web inspirants, (5) Mots-clés, (6) Votre œuvre de référence. Remplissez chaque zone. Ajoutez une légende sous chaque élément expliquant pourquoi il est là. Partagez la planche avec un pair pour feedback.

🎯 Objectif : matérialiser l'intention esthétique avant le code.

CP3 : Créer une échelle typographique accessible

📋 Consigne : Dans un fichier HTML/CSS, définissez une échelle typographique avec rem : html { font-size: 100%; } puis body (1rem), h3 (1.5rem), h2 (2rem), h1 (2.5rem). Réglez line-height: 1.6 pour le body, 1.2 pour les titres. Testez en zoomant à 200% dans votre navigateur. Vérifiez que rien ne se coupe et qu'aucune barre horizontale n'apparaît. Testez sur mobile.

🎯 Objectif : maîtriser la hiérarchie et l'accessibilité typographique.

CP4 : Grille responsive avec CSS Grid ou Flexbox

📋 Consigne : Créez une grille de portfolio avec 6 œuvres. Sur mobile : 1 colonne. Sur tablette (768px+) : 2 colonnes. Sur desktop (1024px+) : 3 colonnes. Utilisez CSS Grid (grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) ou Flexbox avec flex-wrap. Ajoutez un gap de 24px (1.5rem). Chaque carte contient une image (lazy-loaded) et un titre. Testez le redimensionnement de la fenêtre.

🎯 Objectif : comprendre le responsive sans media queries complexes.

CP5 : Audit d'accessibilité visuelle complet

📋 Consigne : Prennez un site d'artiste au hasard. Utilisez les outils suivants : (1) Lighthouse (onglet Accessibilité), (2) axe DevTools (extension Chrome), (3) WebAIM Contrast Checker. Notez les 3 erreurs les plus fréquentes. Proposez des corrections concrètes pour chacune. Rédigez un rapport d'audit d'une page.

🎯 Objectif : développer le regard critique professionnel sur l'accessibilité.

🎮 Défi ludique — Le "Can't Unsee"

Jouez 10 minutes à Can't Unsee (cantunsee.space). C'est un jeu qui vous présente deux versions d'une interface et vous demande laquelle est "la bonne". Cela entraîne votre œil à détecter les problèmes d'alignement, de contraste, de hiérarchie, et d'accessibilité. Atteignez le niveau "Medium". C'est addictif et formatif.

📝 Questionnaires d'Évaluation

QCM 1 — Psychologie des couleurs & Design System (Chapitres 1 & 2)

1. Quel pourcentage approximatif des hommes présente une déficience de la vision des couleurs ?

A. 1%
B. 4%
C. 8%
D. 15%

Réponse C. Environ 8% des hommes et 0,5% des femmes présentent une forme de daltonisme. Cela représente des millions d'utilisateurs potentiellement exclus si le design repose uniquement sur la couleur. citeweb_search:4#3

2. Quelle est la proportion recommandée par la règle 60-30-10 pour une couleur d'accent ?

A. 60%
B. 30%
C. 10%
D. 50%

Réponse C. La règle 60-30-10 préconise 60% pour la couleur dominante (fond), 30% pour la couleur secondaire, et 10% pour l'accent (CTA, liens, notifications). Cette structure évite le chaos visuel. citeweb_search:4#9

3. Dans la méthodologie Atomic Design, un bouton est considéré comme :

A. Une molécule
B. Un atome
C. Un organisme
D. Une page

Réponse B. Dans Atomic Design, l'atome est l'élément de base indivisible (bouton, input, label). Les molécules combinent plusieurs atomes. Les organismes sont des sections complexes. citeweb_search:4#12

QCM 2 — Typographie & Grille (Chapitres 3 & 4)

4. Quelle unité CSS est recommandée pour les tailles de texte afin de respecter les préférences utilisateur ?

A. px
B. pt
C. rem
D. cm

Réponse C. L'unité rem (root em) est relative à la taille de base définie par l'utilisateur dans son navigateur. Elle permet aux personnes malvoyantes d'agrandir le texte sans casser la mise en page. citeweb_search:5#0web_search:5#6

5. Quel interligne (line-height) est recommandé pour le corps de texte en lecture prolongée ?

A. 1.0
B. 1.2
C. 1.5 - 1.7
D. 2.5

Réponse C. Un interligne de 1.5 à 1.7 est idéal pour le corps de texte. En dessous de 1.4, le texte est étouffant. Au-dessus de 2, les lignes se désolidarisent trop. citeweb_search:5#10

6. La règle des tiers divise la composition en :

A. 4 rectangles égaux
B. 6 rectangles égaux
C. 9 rectangles égaux
D. 12 rectangles égaux

Réponse C. La règle des tiers divise le cadre en 9 rectangles égaux (3x3). Les points d'intersection sont les "sweet spots" où l'œil se pose naturellement. citeweb_search:5#4web_search:5#5

QCM 3 — Responsive & Images (Chapitre 5)

7. Quel est le taux de support navigateur de WebP en 2026 ?

A. 85%
B. 90%
C. 97%
D. 100%

Réponse C. En 2026, WebP est supporté par environ 97% des navigateurs mondiaux. Les 3% restants sont principalement des versions legacy d'Internet Explorer et d'anciens Android WebView. citeweb_search:4#0web_search:4#1

8. Quel format offre la meilleure compression en 2026, bien que son encodage soit plus lent ?

A. JPEG
B. PNG
C. WebP
D. AVIF

Réponse D. AVIF offre 30-50% de compression supérieure à WebP, mais son encodage est 5 à 10 fois plus lent. C'est le choix optimal pour les sites image-heavy avec une infrastructure de build ou un CDN. citeweb_search:4#0web_search:4#1

9. Quel attribut HTML permet le lazy loading natif des images ?

A. defer="true"
B. loading="lazy"
C. async="image"
D. preload="none"

Réponse B. L'attribut loading="lazy" est la méthode native HTML5 pour différer le chargement des images hors écran jusqu'à ce que l'utilisateur scroll vers elles.

10. Quel ratio de contraste minimum WCAG AA est requis pour le texte normal ?

A. 2:1
B. 3:1
C. 4.5:1
D. 7:1

Réponse C. WCAG 2.2 exige un ratio de contraste de 4.5:1 minimum pour le texte normal (Level AA), et 3:1 pour le texte large (18px+ ou 14px+ bold). Le Level AAA exige 7:1 pour le texte normal. citeweb_search:4#3web_search:4#6

Questions ouvertes d'analyse critique

QO1 — Analyse psychologique : Une étude montre que les utilisateurs forment un jugement sur un site en 50 millisecondes, principalement via la couleur. Comment un artiste peut-il utiliser cette "vitesse de jugement" à son avantage sans tomber dans le piège de l'effet "vendeur de tapis" (trop de couleurs, trop d'urgence) ? (Rédigez 15-20 lignes)

QO2 — Analyse technique : AVIF est techniquement supérieur à WebP, mais WebP reste le standard de facto en 2026. Décrivez la tension entre l'innovation technique (adopter AVIF) et la pragmatique (rester sur WebP) du point de vue d'un artiste indépendant sans équipe technique. Quelle stratégie hybride recommanderiez-vous ? (Rédigez 15-20 lignes)

QO3 — Analyse esthétique : Le Golden Ratio est souvent présenté comme une "proportions divine" universelle. Pourtant, des recherches récentes montrent que les designers expérimentés s'en écartent volontiers quand l'usage l'exige. Le beau est-il mathématique ou culturel ? Défendez une position nuancée en lien avec votre pratique artistique. (Rédigez 15-20 lignes)

🗺️ Feuille de Route Personnelle — Semaine 2

📅 Planning type (2h/jour)

Lundi — Théorie (2h) : Lire les Chapitres 1 & 2. Faire le CP1 (extraction palette). Noter 3 questions pour le coaching.
Mardi — Projet (2h) : Créer son design system (couleurs, polices, espacements). Réaliser le CP2 (moodboard). Documenter les choix.
Mercredi — Coaching (2h) : Présenter moodboard + design system au groupe. Feedback sandwich. Valider le contraste avec le formateur.
Jeudi — Théorie (2h) : Lire les Chapitres 3, 4, 5. Réaliser CP3 (échelle typo) et CP4 (grille responsive). Remplir QCM 2 et 3.
Vendredi — Projet (2h) : Appliquer le design system à sa homepage. Tester responsive sur téléphone. Vérifier contrastes avec axe DevTools. Envoyer pour review.

🎯 Objectifs SMART pour le Module 2

S : Je crée un design system complet avec 3 couleurs, 2 polices, 5 tailles.
M : Je réussis 9/10 au QCM final et valide 100% de mes contrastes.
A : J'ai les outils (Figma, Coolors, WebAIM) et les tutoriels.
R : C'est le socle visuel de mon projet final.
T : Atteindre avant vendredi 18h.

📚 Ressources complémentaires

• Figma (figma.com) — maquettes et design systems
• Coolors (coolors.co) — palettes et vérification contraste
• Google Fonts (fonts.google.com) — polices gratuites optimisées
• Squoosh (squoosh.app) — compression WebP/AVIF
• Can't Unsee (cantunsee.space) — entraînement du regard
• Stark (getstark.co) — plugin Figma d'accessibilité

🌐 Veille et communautés :

Newsletter : Smashing Magazine (design + accessibilité), Typewolf (inspiration typographique).
Podcasts : « Design Details » (design web), « The Futur » (identité visuelle et business créatif).
Pratique quotidienne : 10 min sur Dribbble ou Behance pour analyser pourquoi un design fonctionne. Notez 1 observation par jour dans un carnet.

Coach — Sur la perfection : Votre design system ne sera pas parfait la première semaine. Il va évoluer. Ce n'est pas une statue : c'est un jardin. Vous plantez les graines (couleurs, polices), vous arrosez (tests), vous taillent (ajustements). L'important est de commencer avec une structure, même imparfaite. Un design system bancal mais cohérent vaut mieux qu'une absence totale de règles.

🔑 Fiche Synthétique — Module 2

Psychologie des couleurs : le cerveau juge un site en 50ms. La couleur est un langage émotionnel avant d'être une décoration.
Règle 60-30-10 : 60% dominante, 30% secondaire, 10% accent. Maximum 3 couleurs principales + 1 accent.
Daltonisme : 8% des hommes concernés. Ne jamais compter sur la couleur seule pour transmettre une information.
Design system : tokens de couleurs, typographie, espacement. Cohérence = réutilisation + contrainte.
Atomic Design : atomes → molécules → organismes → templates → pages. Principe de composition hiérarchique.
Typographie : Serif pour les titres (élégance), Sans-Serif pour le corps (lisibilité). Maximum 2 polices.
Hiérarchie : taille + poids + couleur. Échelle modulaire (1.25x ou φ). Interligne 1.5-1.7 pour le corps.
Unités : rem pour le texte (accessibilité), px pour les bordures. Test 200% zoom obligatoire.
Grille : règle des tiers (sweet spots), Golden Ratio (1.618) pour proportions élégantes, Fibonacci pour espacements.
Responsive : mobile-first, min-width, contenu avant appareil. Flexbox/Grid pour les layouts.
Images : WebP (97% support, -30% poids), AVIF (meilleure compression, -50% poids, encodage lent). Lazy loading natif.
Accessibilité visuelle : contraste 4.5:1 minimum (WCAG AA), focus visible, redimensionnement sans perte.
Outils : Figma (maquettes), Coolors (palettes), Squoosh (compression), WebAIM (contraste), axe DevTools (audit).