Design Graphique & UI/UX

1.1 Histoire du design graphique

1.2 Les 4 principes CRAP (Robin Williams)

1.3 La règle des tiers et composition

┌─────────┬─────────┬─────────┐
│         │         │         │
│         ●─────────●         │
│         │         │         │
├─────────┼─────────┼─────────┤
│         │         │         │
│         ●─────────●         │
│         │         │         │
└─────────┴─────────┴─────────┘
● = Points forts (placez vos sujets ici)

Diviser la composition en 9 parties égales. Les 4 intersections sont les zones d'intérêt naturel de l'œil.

1.4 Hiérarchie visuelle

1.5 Espace négatif (blanc)

L'espace vide n'est pas du vide — c'est un outil de design. Il donne de la respiration, isole les éléments importants et améliore la lisibilité. Les marques comme Apple, Nike et Google utilisent massivement l'espace négatif.

1.6 Formats et résolutions

2.1 Le cercle chromatique

2.2 Harmonies chromatiques

2.3 Psychologie des couleurs

2.4 Modes colorimétriques

2.5 Hexadécimal et notation CSS

/* Couleurs en CSS */
couleur: #FF0000;      /* Rouge pur en héxa */
couleur: rgb(255,0,0); /* Rouge en RVB */
couleur: hsl(0,100%,50%); /* Rouge en HSL */

/* Palette d'exemple — identité NB3BN */
--bleu-principal:  #1a56db;
--bleu-secondaire: #1e429f;
--jaune-accent:    #f59e0b;
--texte-fonce:     #111827;
--fond-clair:      #f9fafb;

2.6 Outils de création de palettes

3.1 Anatomie d'un caractère typographique

     ┌──────────────────────────────────────────────┐
     │  Empattement  Hampe   Œil    Boucle           │
     │       │        │      │       │                │
     │  ═══════════════════════════════ ← Ligne de cap│
     │                                                │
     │  ─────────────────────────────── ← Ligne de x  │
     │                                                │
     │  ═══════════════════════════════ ← Ligne de base│
     │                                                │
     │  ─────────────────────────────── ← Jambages    │
     └──────────────────────────────────────────────┘

3.2 Classification des typographies

3.3 Règles typographiques essentielles

3.4 Métriques typographiques

Corps (font-size)    : taille de la police (16px standard web)
Interligne (leading) : espace entre lignes = 120–150% du corps
                       → 16px × 1.5 = 24px interligne
Approche (tracking)  : espacement global entre tous les caractères
Crénage (kerning)    : ajustement entre paires spécifiques (AV, To...)
Empagement           : espace entre les mots

/* CSS recommandé */
body {
  font-size: 16px;
  line-height: 1.6;     /* 160% */
  letter-spacing: 0.01em;
}

3.5 Associations typographiques efficaces

3.6 Ressources de polices gratuites

4.1 Interface Photoshop

4.2 Le modèle de calques

Les calques (layers) sont la fonctionnalité centrale de Photoshop. Imaginez des feuilles transparentes empilées :

┌─────────────────────────┐
│ Calque Texte (haut)     │ ← visible en premier
├─────────────────────────┤
│ Calque Ajustement       │ ← teinte, saturation...
├─────────────────────────┤
│ Calque Personnage       │ ← image principale
├─────────────────────────┤
│ Calque Fond (bas)       │ ← toujours visible dessous
└─────────────────────────┘

4.3 Corrections colorimétriques

4.4 Détourage et masques

4.5 Filtres et effets essentiels

Filtre → Netteté → Accentuation   : rendre l'image plus nette
Filtre → Bruit → Réduction du bruit : nettoyer les photos en basse lumière
Filtre → Flou → Flou gaussien    : créer un arrière-plan flou
Filtre → Déformation → Liquéfier  : reshaper les formes (retouche portrait)
Filtre → Camera Raw               : développement RAW avancé
Filtre → Neural Filters           : IA — lissage peau, colorisation, styles...

4.6 Export pour le web

Fichier → Exporter → Enregistrer pour le web (Alt+Maj+Ctrl+S)

Format JPG   : photos, fonds → Qualité 80-85% (bon compromis)
Format PNG-8 : illustrations, logos avec transparence (<256 couleurs)
Format PNG-24: logos, icônes avec transparence (toutes couleurs)
Format WebP  : modern web → 30% plus léger que JPG/PNG (même qualité)
Format GIF   : animations simples
Format SVG   : exporter depuis Illustrator, pas Photoshop

5.1 Vectoriel vs Bitmap — Comprendre la différence

5.2 Interface Illustrator et outils clés

5.3 La plume (Pen Tool) — Maîtrise essentielle

Exercice pratique plume :
1. Tracez un triangle (3 clics simples + retour au 1er point)
2. Tracez un cercle (4 points avec glissé à 90°, tangentes égales)
3. Tracez la lettre "S" (combinaison courbes et angles)
4. Détourez une forme complexe (feuille, nuage, silhouette)

5.4 Pathfinder — Opérations booléennes

5.5 Créer un logo professionnel — Méthodologie

5.6 Charte graphique — Composants

Une charte graphique complète contient :
├── 1. Logo (principal + déclinaisons)
├── 2. Palette de couleurs (codes HEX, RVB, CMJN, Pantone)
├── 3. Typographies (titres, corps, alternatives web)
├── 4. Règles d'utilisation (zones de protection, fonds autorisés)
├── 5. Éléments graphiques (icônes, motifs, textures)
├── 6. Exemples d'applications (carte de visite, papier à en-tête...)
└── 7. Ce qu'il ne faut PAS faire (interdits visuels)

6.1 Canva — Vue d'ensemble

6.2 Formats Canva les plus utilisés

6.3 Workflow Canva efficace

6.4 Autres outils no-code design

7.1 Différence UI et UX

7.2 Processus UX Design (Design Thinking)

7.3 Personas et recherche utilisateur

Persona : "Fatima, 32 ans, responsable RH"
─────────────────────────────────────────────
Contexte : Utilise un logiciel RH quotidiennement
          Bureau Mac, téléphone Android
Objectifs: Gérer les congés rapidement
          Générer des rapports mensuels sans aide IT
Frustrations: Interface actuelle trop complexe
              Pas d'accès mobile
Comportements: Très occupée, veut aller à l'essentiel
               Apprend par exploration, pas de manuel

7.4 Niveaux de fidélité des maquettes

7.5 Figma — L'outil standard du marché

Raccourcis Figma essentiels :
F      → Outil Frame (équivalent Artboard)
R      → Rectangle
T      → Texte
I      → Pipette couleur
K      → Scale (redimensionner proportionnellement)
Ctrl+G → Grouper
Ctrl+Alt+G → Frame à partir de la sélection
Alt+glisser → Dupliquer
Ctrl+D → Répéter dernier duplicate
Ctrl+/ → Recherche de commandes

7.6 Design Systems et Composants

Un Design System est une bibliothèque de composants réutilisables avec des règles d'utilisation documentées. Il garantit la cohérence visuelle sur toute une application.

7.7 Accessibilité WCAG 2.1

8.1 Introduction au Motion Design

8.2 Principes d'animation (Disney 12 Principles)

8.3 Adobe After Effects — Bases

Interface After Effects :
├── Projet (panneaux sources)
├── Composition (zone de préview)
├── Timeline (keyframes et calques)
└── Effets et prédéfinitions

Raccourcis essentiels :
U       → Afficher les keyframes animés d'un calque
T       → Opacité (Transparency)
R       → Rotation
S       → Échelle (Scale)
P       → Position
F9      → Easy Ease (easing automatique sur keyframe)
Ctrl+Alt+F → Ajuster à la fenêtre de composition
Espace  → Prévisualisation RAM

8.4 Keyframes et interpolation

8.5 Workflow vidéo promotionnelle

8.6 Outils alternatifs au motion design

9.1 Qu'est-ce qu'une infographie efficace ?

9.2 Types d'infographies

9.3 Choisir le bon graphique

9.4 Règles d'or de la visualisation

9.5 Outils de création d'infographies

9.6 Infographie pour les réseaux sociaux

Format optimal par plateforme :
Instagram  : 1080×1080 (carré) ou 1080×1350 (4:5 portrait)
Pinterest  : 1000×1500 (portrait 2:3 — idéal infographies)
LinkedIn   : 1200×628 (paysage) ou 1200×1200 (carré)
Facebook   : 1200×630 (paysage)
Twitter/X  : 1600×900 (16:9)
WhatsApp   : 800×800 (carré) — lisible sur mobile

Règle mobile : testez TOUJOURS votre infographie
sur un écran de smartphone (lisibilité texte ≥ 14px)

10.1 Prépresse — Qu'est-ce que c'est ?

10.2 Les formats papier ISO

10.3 Fond perdu (bleed) et zones de sécurité

Document A4 avec fond perdu :
┌──────────────────────────────────────┐
│         Zone de fond perdu (3mm)     │
│  ┌──────────────────────────────┐    │
│  │    Zone de sécurité (5mm)    │    │
│  │  ┌────────────────────────┐  │    │
│  │  │                        │  │    │
│  │  │   ZONE IMPRIMABLE      │  │    │
│  │  │   (contenu principal)  │  │    │
│  │  │                        │  │    │
│  │  └────────────────────────┘  │    │
│  └──────────────────────────────┘    │
└──────────────────────────────────────┘
Format fichier : A4 + 3mm fond perdu = 216×303mm
Contenu important : 5mm minimum des bords

10.4 CMJN vs RVB en impression

10.5 Checklist prépresse avant envoi

10.6 Papiers et finitions

Finitions : Pelliculage brillant/mat, Vernis UV (localisé ou total), Dorure à chaud, Embossage/débossage (relief), Découpe spéciale.

11.1 Qu'est-ce que le branding ?

11.2 Architecture d'une identité visuelle

Identité visuelle complète :
├── Logo
│   ├── Version principale (horizontal)
│   ├── Version secondaire (vertical/empilée)
│   ├── Favicon / pictogramme seul
│   └── Déclinaisons couleur (couleur, NB, blanc sur fond foncé)
├── Palette de couleurs
│   ├── Couleur primaire (dominante)
│   ├── Couleur secondaire
│   └── Couleurs d'accent et neutres
├── Typographie
│   ├── Police de titres
│   ├── Police de corps
│   └── Police d'accent (optionnel)
├── Éléments graphiques
│   ├── Icônes et pictogrammes
│   ├── Motifs et textures
│   └── Style photographique
└── Tone of Voice (ton éditorial)
    ├── Formelle / décontractée
    ├── Sérieuse / ludique
    └── Proximité / distance

11.3 Exemples de marques et leurs stratégies

11.4 Processus de création d'identité visuelle

11.5 Charte graphique NB3BN Info — Cas pratique

CHARTE GRAPHIQUE NB3BN INFO
═══════════════════════════════════════════

COULEURS
  Bleu principal    : #1a56db (RVB: 26, 86, 219)
  Bleu secondaire   : #1e429f (RVB: 30, 66, 159)
  Jaune accent      : #f59e0b (RVB: 245, 158, 11)
  Fond clair        : #f9fafb
  Texte principal   : #111827

TYPOGRAPHIES
  Titres : Poppins Bold / SemiBold
  Corps  : Inter Regular / Medium
  Code   : JetBrains Mono

LOGO
  Fond blanc  : version couleur complète
  Fond foncé  : version blanc ou blanc + jaune
  Fond coloré : version blanche
  Minimum     : 30px de hauteur (digital), 10mm (print)
  Zone de protection : 1× hauteur du logo autour

STYLE PHOTOGRAPHIQUE
  Lumineux, couleurs naturelles, personnes réelles
  Contexte professionnel et pédagogique
  Pas de photos génériques de stock
  Eviter: filtres Instagram, photos de bureau vides

12.1 L'importance du portfolio

12.2 Que mettre dans son portfolio ?

12.3 Plateformes portfolio

12.4 Carrières en design graphique

12.5 Construire sa clientèle en freelance

12.6 Ressources pour se former et s'inspirer