Qu'est-ce que le content design
Le content design, ce n'est pas "écrire du contenu" ni "faire joli". C'est une discipline à part entière qui consiste à choisir le meilleur format pour transmettre une information donnée à un public donné.
Un rédacteur web écrit des textes. Un content designer se pose d'abord la question : "est-ce qu'un texte est le bon format ici ?" Peut-être qu'un tableau serait plus clair. Peut-être qu'un schéma ferait comprendre en 3 secondes ce qu'un paragraphe explique en 3 minutes.
Content design vs. rédaction web classique
| Rédaction web classique | Content design |
|---|---|
| Se concentre sur les mots | Se concentre sur l'information et sa forme |
| Produit des textes | Produit des expériences (texte, visuel, interactif) |
| Pense "article" | Pense "comment l'utilisateur va consommer cette info" |
| Optimise pour le SEO d'abord | Optimise pour la compréhension d'abord (le SEO suit) |
| Mesure les mots-clés et le ranking | Mesure le temps passé, le scroll depth, la satisfaction |
En pratique, tu vas combiner les deux. Tu as besoin de savoir bien écrire pour le web, ET de savoir structurer visuellement l'information. Le content design est la couche supérieure.
Les principes fondamentaux
La hiérarchie visuelle
Chaque page web a une hiérarchie. Le titre H1 domine, suivi des H2, puis des H3, puis du texte courant. Cette hiérarchie guide l'oeil du lecteur et lui permet de scanner la page rapidement. Règle : un lecteur qui ne lit QUE les titres H2 de ta page doit comprendre le sujet global et décider s'il veut lire le détail.
La scannabilité
80% des visiteurs web scannent, ils ne lisent pas. Ils cherchent l'information qui les concerne et ignorent le reste. Ton contenu doit fonctionner pour les scanneurs ET pour les lecteurs attentifs. Concrètement :
- Des H2 descriptifs (pas "Partie 1" mais "Comment choisir ton hébergeur")
- Des mots en gras sur les termes clés de chaque paragraphe
- Des listes à puces pour les énumérations
- Des tableaux pour les comparaisons
- Des encadrés pour les points clés
La charge cognitive
Chaque élément sur ta page demande de l'énergie mentale au lecteur. Plus la charge cognitive est élevée, plus le lecteur abandonne vite. Pour la réduire :
- Une seule idée par paragraphe
- Des phrases courtes (15-20 mots max en moyenne)
- Du vocabulaire simple (pas de jargon inutile)
- De l'espace blanc entre les blocs (le vide aide à digérer l'info)
Les patterns de lecture : F et Z
Les études eye-tracking montrent deux patterns dominants :
- Pattern F : sur les pages texte (articles, blogs). L'oeil lit la première ligne en entier, puis scanne le début de chaque ligne suivante en formant un F. Conséquence : les premiers mots de chaque paragraphe sont critiques.
- Pattern Z : sur les pages visuelles (landing pages, pages d'accueil). L'oeil suit un Z : haut gauche, haut droit, bas gauche, bas droit. Place tes éléments clés sur ce trajet.
A retenir
En pattern F, les 2 premiers mots de chaque paragraphe, titre et item de liste sont les plus lus. Mets-y l'information essentielle, pas des mots de liaison ("En effet", "Par conséquent").
Structurer un article pour le web
La pyramide inversée
Technique issue du journalisme : donne la conclusion en premier, puis les détails. Sur le web, personne ne lit jusqu'en bas pour découvrir la réponse. Si quelqu'un cherche "quel hébergeur choisir", donne ta recommandation dans les 3 premières lignes, puis explique pourquoi.
Le chapeau (intro)
Les 2-3 premières phrases sous le H1. Elles doivent répondre à 3 questions : de quoi parle cet article ? Pourquoi je devrais le lire ? Qu'est-ce que je vais apprendre ? Un bon chapeau réduit le taux de rebond de 20-30%.
La structure H2/H3
Pense tes H2 comme les chapitres d'un livre et tes H3 comme les sous-chapitres. Règles pratiques :
- Un H2 tous les 200-400 mots
- 2-4 H3 par H2 maximum
- Chaque H2 est autonome (le lecteur peut lire un seul H2 et en tirer de la valeur)
- Formule les H2 comme des questions ou des promesses ("Comment...", "Les 5 erreurs...", "Pourquoi...")
Paragraphes courts
Sur le web, un paragraphe = 2-4 lignes max (sur desktop). Un paragraphe de 8 lignes sur desktop en fait 16 sur mobile et ça devient un mur de texte. Découpe systématiquement.
Les listes à puces et numérotées
Utilise une liste à puces quand tu as 3+ éléments sans ordre d'importance. Utilise une liste numérotée quand l'ordre compte (étapes, classement). Ne mets jamais plus de 7-9 items par liste (au-delà, découpe en sous-catégories).
Les éléments visuels qui améliorent la compréhension
Le texte seul ne suffit pas. Voici quand utiliser chaque type d'élément visuel.
| Élément | Quand l'utiliser | Impact sur le lecteur |
|---|---|---|
| Tableau comparatif | Comparer 3+ éléments sur les mêmes critères | Permet une décision rapide, scannable en 5 sec |
| Liste à puces | Énumérer des éléments sans ordre d'importance | Scannabilité +50%, réduit la charge cognitive |
| Liste numérotée | Étapes séquentielles, classement | Le lecteur sait où il en est dans le process |
| Screenshot annoté | Tutoriels, guides d'utilisation d'outils | Réduit les erreurs de 70%, le lecteur voit exactement où cliquer |
| Encadré "A retenir" | Synthèse d'un point clé ou d'une section | Lu même par les scanneurs, ancre la mémorisation |
| Encadré "Attention" | Erreur fréquente, piège à éviter | Effet de contraste, attire l'attention par la couleur |
| Schéma/diagramme | Concepts abstraits, relations entre éléments | Compréhension en 3 sec vs. 3 min de texte |
| Chiffre clé en gros | Stat importante, résultat marquant | Attire l'oeil, mémorisation x3 vs. texte courant |
Conseil
Après avoir rédigé chaque section, demande-toi : "ce paragraphe serait-il plus clair sous forme de tableau ? Cette liste serait-elle mieux en schéma ?" Un seul changement de format peut transformer une section confuse en section limpide.
Exemples avant/après
Avant (mur de texte) :
"WordPress coûte entre 0 et 50 EUR/mois selon l'hébergeur, il est flexible et a beaucoup de plugins mais il demande de la maintenance. Shopify coûte 32 EUR/mois, il est simple à utiliser mais limité pour le SEO et prend une commission sur les ventes. Webflow coûte entre 14 et 39 EUR/mois, il offre un contrôle total sur le design mais a une courbe d'apprentissage élevée."
Après (tableau) :
| CMS | Coût/mois | Points forts | Points faibles |
|---|---|---|---|
| WordPress | 0-50 EUR | Flexible, écosystème de plugins | Maintenance, mises à jour |
| Shopify | 32 EUR | Simple, tout-en-un e-commerce | SEO limité, commission |
| Webflow | 14-39 EUR | Contrôle design total | Courbe d'apprentissage |
Le même contenu, 3x plus rapide à scanner et à comprendre.
Typographie et lisibilité
Le choix typographique a un impact direct sur le taux de lecture. Un contenu excellent dans une typo illisible est un contenu que personne ne lira.
| Paramètre | Valeur recommandée | Pourquoi |
|---|---|---|
| Taille du texte courant | 16-18px minimum | En dessous, fatigue oculaire sur mobile |
| Interligne (line-height) | 1.5 à 1.7 | Moins = lignes collées, plus = texte flottant |
| Longueur de ligne | 60-80 caractères | Au-delà, l'oeil perd sa ligne au retour chariot |
| Contraste texte/fond | Ratio 4.5:1 minimum (WCAG AA) | Le gris clair sur blanc, c'est tendance mais illisible |
| Police de titre | Sans-serif ou serif forte | Doit se démarquer clairement du texte courant |
| Police de corps | Sans-serif (Inter, System UI) | Meilleure lisibilité sur écran |
| Espacement entre sections | 32-48px | Le blanc entre les blocs aide à "digérer" l'info |
Attention
Ne sacrifie jamais la lisibilité pour l'esthétique. Un texte en gris clair (#999) sur fond blanc (#fff) a un ratio de contraste de 2.8:1. C'est joli mais c'est illisible pour 15% de la population. Vise du #333 minimum sur fond blanc (ratio 12.6:1).
Pour approfondir l'UX et le design de pages qui convertissent, consulte la page sur le web design et la conversion UX.
Écrire pour le mobile
60 à 70% de ton trafic vient du mobile. Si tu rédiges en regardant uniquement ton écran 27 pouces, tu crées du contenu pour une minorité de tes lecteurs.
Les règles du mobile-first
- Paragraphes de 2-3 lignes max (sur mobile, pas sur desktop). Ce qui fait 3 lignes sur desktop en fait 6-7 sur un iPhone.
- Pas de tableaux larges : un tableau à 5 colonnes est illisible sur mobile. Limite-toi à 2-3 colonnes ou utilise un format liste à la place.
- Titres courts : un H2 de 80 caractères fait 4 lignes sur mobile. Vise 40-50 caractères max.
- Boutons et liens cliquables : taille minimale de 44x44px (norme Apple). Les liens trop proches les uns des autres sont impossibles à cliquer au doigt.
- Images optimisées : les images lourdes tuent le temps de chargement sur la 4G. Compresse et utilise le format WebP.
Conseil
Avant de publier un article, ouvre-le sur ton téléphone. Lis-le réellement. Tu verras immédiatement les paragraphes trop longs, les tableaux cassés et les images trop petites. Cette vérification de 2 minutes rattrape 80% des problèmes de content design mobile.
Content design et SEO
Le content design n'est pas l'ennemi du SEO. C'est son meilleur allié. Google récompense les contenus bien structurés.
Featured snippets
Les featured snippets (position 0) sont attribués aux contenus qui répondent clairement et de manière structurée à une question. Les formats qui gagnent des featured snippets :
- Paragraphe : réponse directe en 40-50 mots juste après un H2 formulé comme une question
- Liste : étapes numérotées ou liste à puces en réponse à "comment faire X"
- Tableau : comparaison de données en réponse à "quel est le meilleur X"
People Also Ask
Les blocs "Autres questions posées" dans Google adorent les H2 sous forme de questions avec une réponse concise juste en dessous. Formule tes H2 en questions quand c'est naturel.
Passage ranking
Depuis 2021, Google peut indexer et ranker des passages individuels d'une page, pas seulement la page entière. Ça signifie qu'une section bien structurée (H2 clair + réponse précise) peut ranker même si le reste de la page n'est pas optimal. Raison de plus pour soigner chaque section individuellement.
Pour en savoir plus sur l'écriture d'articles optimisés, consulte la page sur la rédaction d'articles SEO.
Checklist content design avant publication
Avant de cliquer sur "publier", passe chaque article dans cette checklist.
- Les H2 seuls racontent l'histoire de l'article (lis-les sans le texte)
- Chaque paragraphe fait 2-4 lignes max sur desktop
- Au moins 1 élément visuel (tableau, liste, encadré) toutes les 300 mots
- Les mots-clés importants sont en gras
- L'intro donne la réponse principale en 2-3 phrases
- Pas de mur de texte de plus de 5 lignes sans coupure visuelle
- Les tableaux ont 2-3 colonnes max (compatible mobile)
- Au moins 1 encadré "A retenir" ou "Conseil" par article
- La page est lisible et bien formattée sur mobile
- Le contraste texte/fond respecte le ratio WCAG AA (4.5:1)
- Les images sont compressées et ont un alt text descriptif
- Les liens internes pointent vers des pages pertinentes
A retenir
Le content design, c'est 50% de l'impact d'un article. Tu peux avoir le meilleur contenu du monde : si c'est un mur de texte sans structure, personne ne le lira. Investis autant de temps dans la mise en forme que dans la rédaction. Pour maîtriser l'écriture web elle-même, consulte le guide complet de l'écriture web.