🎯 Objectifs pédagogiques
À la fin de ce module, vous serez capable de :
- Expliquer le fonctionnement réel du Web sans jargon inutile
- Comprendre ce qui se passe techniquement derrière une interface “qui s’affiche”
- Dialoguer intelligemment avec des développeurs (sans faire semblant)
- Anticiper les contraintes techniques dès la phase de design
- Éviter les erreurs classiques des designers face au Web
🧭 Mise en contexte — Pourquoi ce module est crucial
Soyons honnêtes : beaucoup de designers conçoivent encore le Web comme une surface magique.
Une maquette, un export, et “ça va s’intégrer”.
Dans la réalité, le Web est un système technique lent, imparfait et contraint.
👉 Plus tôt vous comprenez ce système, plus vos interfaces seront :
- réalistes
- performantes
- respectées par les équipes techniques
🧩 Étape 1 — Le Web, expliqué simplement (sans bullshit)
Le Web fonctionne sur un principe très simple :
Quelqu’un demande quelque chose → quelqu’un répond.
Ce système repose sur trois acteurs :
- Le client : le navigateur (Chrome, Firefox, Safari…)
- Le serveur : une machine distante qui répond aux demandes
- Le protocole : la langue commune (HTTP / HTTPS)
💡 Astuce senior :
Quand une interface est lente, l’utilisateur n’accuse jamais le serveur.
Il accuse le design.
La performance est une perception UX, pas un concept technique.
🧩 Étape 2 — Le navigateur : la scène finale de ton design
Le navigateur est l’endroit où ton design est jugé.
Pas Figma. Pas ton écran Retina. Le navigateur.
- Il envoie des requêtes
- Il reçoit des fichiers
- Il interprète HTML, CSS et JavaScript
- Il compose l’interface en temps réel
⚠️ Piège classique :
Concevoir une interface parfaite… sans jamais l’avoir ouverte dans un navigateur.
🧩 Étape 3 — Le serveur : le cerveau (lent) du système
Le serveur est une machine distante.
Elle :
- reçoit la demande
- exécute du code
- interroge une base de données
- renvoie une réponse
👉 WordPress est un site dynamique :
chaque page est construite à la demande.
💡 Astuce terrain :
Plus il y a de plugins, plus le serveur réfléchit.
Plus il réfléchit, plus l’UX ralentit.
🧩 Étape 4 — Hébergement & réalité du terrain
Tous les hébergements ne se valent pas.
- Mutualisé : économique, mais lent
- VPS : plus stable
- Cloud : flexible mais complexe
👉 En tant que designer, vous ne choisissez pas toujours l’hébergement,
mais vous devez adapter vos choix UI à la réalité technique.
🧩 Étape 5 — Le trajet d’une page (mini-film mental)
- L’utilisateur tape une URL
- Le navigateur cherche le serveur (DNS)
- Il envoie une requête
- Le serveur calcule
- Il renvoie des fichiers
- Le navigateur assemble l’interface
🎬 Imagine ce trajet à chaque clic que tu ajoutes dans ton design.
🧩 Étape 6 — HTTP / HTTPS (ce n’est pas un détail)
HTTPS n’est pas une option.
- Sécurité
- Confiance utilisateur
- SEO
⚠️ Un site sans HTTPS en 2025 = perte de crédibilité immédiate.
🧠 Où se situe le Product Designer ?
- Il ne code pas, mais il comprend
- Il anticipe les contraintes
- Il conçoit des interfaces faisables
- Il évite de faire perdre du temps aux équipes
👉 Un bon designer fait gagner du temps à tout le monde.
🛠 Mini-tuto — Voir le Web fonctionner en direct
- Ouvre un site (n’importe lequel)
- Clic droit → Inspecter
- Onglet Network
- Recharge la page
🧠 Question à te poser :
Mon design ajoute-t-il de la valeur… ou juste des requêtes ?
🎮 Exercice ludique — Le serveur paresseux
Imagine que ton serveur est lent aujourd’hui.
- Quels éléments peux-tu charger plus tard ?
- Quels éléments sont vraiment prioritaires ?
- Que pourrais-tu masquer derrière une animation ?
👉 Skeletons, lazy loading, hiérarchie visuelle.
🧠 Quiz rapide
Vrai ou Faux :
- Une interface lourde est toujours un problème de développeur ❌
- Le design a un impact direct sur la performance perçue ✅
🧩 Synthèse finale
- Le Web est un système client–serveur
- Chaque clic a un coût
- La performance est une expérience utilisateur
- Comprendre le Web rend ton design meilleur
📦 Livrable du module
À l’issue de ce module, vous êtes capable :
- d’expliquer le Web simplement
- d’anticiper les contraintes techniques
- de concevoir des interfaces plus intelligentes
Version pédagogique — formateur senior