Les 10 plugins WordPress essentiels pour débuter
Introduction Les plugins (ou extensions) sont l'une des forces principales de WordPress. Ils permettent d'ajouter…
Estimated reading time: 13 minutes
Introduction
Le design web efficace repose sur deux piliers fondamentaux : la hiérarchie visuelle et la typographie. Ces principes guident l’œil de l’utilisateur, facilitent la compréhension du contenu et créent une expérience utilisateur fluide et intuitive.
Table of Contents
Dans cet article, nous explorerons les bases essentielles pour créer des interfaces web claires, accessibles et professionnelles, même si vous débutez dans le design web.
La hiérarchie visuelle : Guider l’œil de l’utilisateur
Qu’est-ce que la hiérarchie visuelle ?
La hiérarchie visuelle est l’organisation des éléments d’une page pour indiquer leur importance relative. Elle utilise la taille, la couleur, le contraste, l’espacement et la position pour créer un ordre de lecture naturel.
Principe clé : L’utilisateur moyen parcourt une page en forme de F ou de Z. Votre design doit s’adapter à ces patterns naturels de lecture.
Les 5 techniques essentielles de hiérarchie visuelle
1. La taille et l’échelle
La taille est l’indicateur le plus évident d’importance. Les éléments plus grands attirent naturellement l’attention en premier.
/ Exemple de hiérarchie typographique /
h1 {
font-size: 3rem; / 48px - Titre principal /
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
}
h2 {
font-size: 2.25rem; / 36px - Sous-titre /
font-weight: 600;
line-height: 1.3;
margin-bottom: 1.25rem;
}
h3 {
font-size: 1.75rem; / 28px - Section /
font-weight: 600;
line-height: 1.4;
margin-bottom: 1rem;
}
p {
font-size: 1rem; / 16px - Corps de texte /
font-weight: 400;
line-height: 1.6;
margin-bottom: 1rem;
}
.caption {
font-size: 0.875rem; / 14px - Légende /
color: #6b7280;
line-height: 1.5;
}
Règle du 1.5 : Chaque niveau de titre devrait être environ 1.5 fois plus grand que le niveau inférieur pour une hiérarchie claire.
2. Le contraste et la couleur
Le contraste attire l’attention. Utilisez des couleurs vives pour les éléments importants (boutons d’action) et des tons neutres pour le contenu secondaire.
/ Boutons avec hiérarchie claire /
.button-primary {
background-color: #2563eb; / Bleu vif - Action principale /
color: #ffffff;
padding: 0.75rem 1.5rem;
font-weight: 600;
border: none;
border-radius: 0.5rem;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button-primary:hover {
background-color: #1d4ed8;
}
.button-secondary {
background-color: transparent;
color: #2563eb;
padding: 0.75rem 1.5rem;
font-weight: 500;
border: 2px solid #2563eb;
border-radius: 0.5rem;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
}
.button-secondary:hover {
background-color: #eff6ff;
}
.button-tertiary {
background-color: transparent;
color: #6b7280; / Gris - Action tertiaire /
padding: 0.5rem 1rem;
font-weight: 400;
border: none;
font-size: 0.875rem;
cursor: pointer;
text-decoration: underline;
}
Astuce : Limitez-vous à 3 niveaux de boutons maximum pour éviter la confusion.
3. L’espacement (whitespace)
L’espace blanc n’est pas du vide, c’est un outil puissant pour créer de la respiration et grouper visuellement les éléments liés.
/ Système d'espacement cohérent (base 8px) /
:root {
--space-xs: 0.25rem; / 4px /
--space-sm: 0.5rem; / 8px /
--space-md: 1rem; / 16px /
--space-lg: 1.5rem; / 24px /
--space-xl: 2rem; / 32px /
--space-2xl: 3rem; / 48px /
--space-3xl: 4rem; / 64px /
}
/ Application dans une carte de contenu /
.card {
padding: var(--space-xl);
margin-bottom: var(--space-lg);
background: #ffffff;
border-radius: 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.card-header {
margin-bottom: var(--space-lg);
padding-bottom: var(--space-md);
border-bottom: 1px solid #e5e7eb;
}
.card-body p + p {
margin-top: var(--space-md); / Espacement entre paragraphes /
}
.card-footer {
margin-top: var(--space-xl); / Plus d'espace pour séparer /
padding-top: var(--space-lg);
border-top: 1px solid #e5e7eb;
}
Loi de proximité : Les éléments proches sont perçus comme liés. Augmentez l’espacement entre sections distinctes.
4. La position et l’alignement
La position dans la page indique l’importance. Le haut et la gauche (dans les cultures occidentales) sont des zones de haute attention.
.site-header {
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
max-width: 1280px;
margin: 0 auto;
}
.logo img {
height: 40px;
width: auto;
}
.main-nav {
flex: 1;
margin: 0 2rem;
}
.nav-list {
display: flex;
gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
}
.nav-list a {
color: #374151;
text-decoration: none;
font-weight: 500;
font-size: 0.9375rem;
transition: color 0.2s ease;
}
.nav-list a:hover {
color: #2563eb;
}
5. Le poids visuel
Les éléments sombres, saturés ou avec des bordures épaisses ont plus de poids visuel et attirent davantage l’attention.
/ Exemple de carte produit avec poids visuel gradué /
.product-card {
background: #ffffff;
border-radius: 0.75rem;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.product-image {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
}
.product-content {
padding: 1.5rem;
}
/ Titre du produit - poids fort /
.product-title {
font-size: 1.25rem;
font-weight: 700;
color: #111827;
margin-bottom: 0.5rem;
line-height: 1.3;
}
/ Prix - poids très fort avec couleur /
.product-price {
font-size: 1.5rem;
font-weight: 800;
color: #dc2626;
margin-bottom: 1rem;
}
/ Description - poids faible /
.product-description {
font-size: 0.9375rem;
color: #6b7280;
line-height: 1.6;
margin-bottom: 1.25rem;
font-weight: 400;
}
/ Badge promotion - poids visuel maximal /
.product-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: #dc2626;
color: #ffffff;
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}
Typographie web : Les fondamentaux
Choisir et combiner des polices
La typographie représente 95% du design web. Choisir les bonnes polices et les combiner harmonieusement est crucial.
Règles de base
Règle 1 : Limitez-vous à 2-3 polices maximum par site.
Règle 2 : Créez du contraste entre vos polices.
/ Exemple de combinaison typographique efficace /
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@700;900&display=swap');
:root {
/ Polices /
--font-display: 'Playfair Display', Georgia, serif; / Titres élégants /
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; / Corps moderne /
--font-mono: 'Consolas', 'Monaco', 'Courier New', monospace; / Code /
/ Tailles de base /
--text-xs: 0.75rem; / 12px /
--text-sm: 0.875rem; / 14px /
--text-base: 1rem; / 16px /
--text-lg: 1.125rem; / 18px /
--text-xl: 1.25rem; / 20px /
--text-2xl: 1.5rem; / 24px /
--text-3xl: 1.875rem; / 30px /
--text-4xl: 2.25rem; / 36px /
--text-5xl: 3rem; / 48px /
--text-6xl: 3.75rem; / 60px /
}
body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.6;
color: #1f2937;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.2;
color: #111827;
}
code, pre {
font-family: var(--font-mono);
font-size: 0.9em;
}
Exemples de combinaisons populaires
Combinaison 1 – Classique et professionnelle :
Combinaison 2 – Moderne et tech :
Combinaison 3 – Élégante et minimaliste :
Hiérarchie typographique en action
/ Système typographique complet /
.hero-title {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4rem); / Responsive entre 40px et 64px /
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.02em; / Légère compression pour grandes tailles /
margin-bottom: 1.5rem;
}
.hero-subtitle {
font-family: var(--font-body);
font-size: clamp(1.125rem, 2vw, 1.5rem); / 18-24px /
font-weight: 400;
line-height: 1.5;
color: #4b5563;
max-width: 600px; / Limite de largeur pour lisibilité /
margin-bottom: 2rem;
}
.section-title {
font-family: var(--font-display);
font-size: clamp(1.875rem, 3.5vw, 2.5rem); / 30-40px /
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}
.body-text {
font-family: var(--font-body);
font-size: 1.0625rem; / 17px - légèrement plus grand pour le confort /
line-height: 1.7;
color: #374151;
max-width: 65ch; / 65 caractères max pour lisibilité optimale /
}
.lead-text {
font-family: var(--font-body);
font-size: 1.25rem; / 20px /
font-weight: 400;
line-height: 1.6;
color: #4b5563;
max-width: 60ch;
}
.small-text {
font-family: var(--font-body);
font-size: 0.875rem; / 14px /
line-height: 1.5;
color: #6b7280;
}
Lisibilité : Les règles d’or
1. Longueur de ligne
La longueur idéale d’une ligne de texte est de 50-75 caractères (65 optimal).
/ Méthode moderne avec l'unité 'ch' /
.article-content {
max-width: 65ch; / 65 caractères /
margin-left: auto;
margin-right: auto;
}
/ Méthode traditionnelle en pixels /
.content-wrapper {
max-width: 700px; / Environ 65-70 caractères à 16px /
margin: 0 auto;
padding: 0 1.5rem;
}
2. Interligne (line-height)
L’espacement entre les lignes affecte directement la lisibilité.
/ Valeurs recommandées selon le contexte /
.heading {
line-height: 1.2; / Titres : serré pour impact /
}
.body-text {
line-height: 1.6; / Corps de texte : confortable /
}
.long-form-content {
line-height: 1.8; / Articles longs : très aéré /
}
.ui-text {
line-height: 1.5; / Interface : compact mais lisible /
}
.legal-text {
line-height: 1.4; / Petits textes : légèrement serré /
font-size: 0.75rem;
}
3. Contraste et couleur
Le contraste entre le texte et l’arrière-plan doit respecter les normes WCAG 2.1.
/ Ratios de contraste minimum (WCAG AA) /
/ Texte normal : ratio 4.5:1 minimum /
.normal-text {
color: #1f2937; / Gris très foncé sur blanc /
background: #ffffff;
/ Ratio : 15.9:1 - Excellent /
}
/ Texte large (18px+ ou 14px+ gras) : ratio 3:1 minimum /
.large-text {
color: #374151; / Gris foncé sur blanc /
background: #ffffff;
font-size: 1.25rem;
/ Ratio : 11.7:1 - Excellent /
}
/ Texte secondaire : maintenir ratio suffisant /
.secondary-text {
color: #6b7280; / Gris moyen sur blanc /
background: #ffffff;
/ Ratio : 5.4:1 - Bon pour texte large /
font-size: 1rem; / Attention : limite pour texte normal /
}
/ Texte sur fond coloré /
.text-on-blue {
color: #ffffff;
background: #2563eb; / Bleu /
/ Ratio : 8.6:1 - Excellent /
padding: 1rem 1.5rem;
}
/ Texte désactivé : exception autorisée pour ratio faible /
.disabled-text {
color: #9ca3af; / Gris clair /
opacity: 0.5;
}
Outil indispensable : Utilisez WebAIM Contrast Checker pour vérifier vos combinaisons de couleurs.
Responsive typography
La typographie doit s’adapter à toutes les tailles d’écran.
/ Approche moderne avec clamp() /
:root {
--fluid-min-width: 320;
--fluid-max-width: 1140;
/ Titres fluides /
--font-size-h1: clamp(2rem, 4vw + 1rem, 4rem);
--font-size-h2: clamp(1.75rem, 3vw + 1rem, 3rem);
--font-size-h3: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
/ Corps de texte fluide /
--font-size-base: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
body { font-size: var(--font-size-base); }
/ Approche traditionnelle avec media queries /
.responsive-title {
font-size: 2rem; / Mobile : 32px /
line-height: 1.2;
}
@media (min-width: 640px) {
.responsive-title {
font-size: 2.5rem; / Tablet : 40px /
}
}
@media (min-width: 1024px) {
.responsive-title {
font-size: 3.5rem; / Desktop : 56px /
}
}
@media (min-width: 1280px) {
.responsive-title {
font-size: 4rem; / Large desktop : 64px /
}
}
Mise en pratique : Créer une page d’accueil
Appliquons tous ces principes pour créer une section hero complète.
Design Web Moderne - Hiérarchie & Typographie
Nouveau : Version 2.0 disponible
Créez des interfaces web
inoubliables
Maîtrisez les principes fondamentaux du design web pour concevoir
des expériences utilisateur exceptionnelles qui convertissent et engagent.
+500
/ Reset et configuration de base /
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/ Couleurs /
--color-primary: #2563eb;
--color-primary-dark: #1d4ed8;
--color-secondary: #7c3aed;
--color-text: #1f2937;
--color-text-light: #6b7280;
--color-bg: #ffffff;
--color-bg-secondary: #f9fafb;
/ Typographie /
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'Inter', -apple-system, sans-serif;
/ Espacements /
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-2xl: 4rem;
--space-3xl: 6rem;
}
body {
font-family: var(--font-body);
color: var(--color-text);
line-height: 1.6;
background: var(--color-bg);
}
/ Section Hero /
.hero {
min-height: 100vh;
display: flex;
align-items: center;
padding: var(--space-xl) var(--space-md);
background: linear-gradient(135deg, #f9fafb 0%, #eff6ff 100%);
}
.hero-container {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
align-items: center;
}
@media (min-width: 1024px) {
.hero-container {
grid-template-columns: 1.2fr 1fr;
gap: var(--space-2xl);
}
}
/ Badge - Attirer l'attention immédiatement /
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
background: #ffffff;
padding: 0.5rem 1rem;
border-radius: 2rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
margin-bottom: var(--space-lg);
animation: fadeInUp 0.6s ease-out;
}
.badge-icon {
font-size: 1.25rem;
}
.badge-text {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-primary);
}
/ Titre Hero - Hiérarchie niveau 1 /
.hero-title {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-text);
margin-bottom: var(--space-md);
animation: fadeInUp 0.6s ease-out 0.1s both;
}
.hero-title-highlight {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
}
/ Sous-titre - Hiérarchie niveau 2 /
.hero-subtitle {
font-family: var(--font-body);
font-size: clamp(1.125rem, 2vw, 1.375rem);
line-height: 1.6;
color: var(--color-text-light);
max-width: 540px;
margin-bottom: var(--space-xl);
animation: fadeInUp 0.6s ease-out 0.2s both;
}
/ Boutons CTA - Hiérarchie claire /
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
margin-bottom: var(--space-xl);
animation: fadeInUp 0.6s ease-out 0.3s both;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
border-radius: 0.5rem;
transition: all 0.3s ease;
border: 2px solid transparent;
cursor: pointer;
}
.button-primary {
background: var(--color-primary);
color: #ffffff;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.button-primary:hover {
background: var(--color-primary-dark);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}
.button-secondary {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.button-secondary:hover {
background: var(--color-primary);
color: #ffffff;
transform: translateY(-2px);
}
/ Preuve sociale - Hiérarchie niveau 3 /
.hero-social-proof {
display: flex;
align-items: center;
gap: var(--space-md);
animation: fadeInUp 0.6s ease-out 0.4s both;
}
.social-proof-avatars {
display: flex;
align-items: center;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid #ffffff;
margin-left: -12px;
}
.avatar:first-child {
margin-left: 0;
}
.avatar-count {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--color-primary);
color: #ffffff;
border-radius: 50%;
font-size: 0.75rem;
font-weight: 700;
margin-left: -12px;
border: 3px solid #ffffff;
}
.social-proof-text {
font-size: 0.9375rem;
color: var(--color-text-light);
line-height: 1.4;
}
.social-proof-text strong {
color: var(--color-text);
font-weight: 600;
}
/ Visuel Hero /
.hero-visual {
animation: fadeIn 1s ease-out 0.5s both;
}
.hero-image {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
}
/ Animations /
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/ Accessibilité /
@media (prefers-reduced-motion: reduce) {
,
::before,
::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Exemples du monde réel
Airbnb
Airbnb utilise une hiérarchie visuelle très claire :
Titre géant (56-72px) pour les destinations
Images de qualité occupant 60% de l’espace
Prix en gras avec couleur distinctive
Espacement généreux (minimum 24px entre sections)
Typographie : Cereal (custom) – clean et moderne
Stripe
Stripe excelle dans la typographie technique :
Titres : Inter Display (géométrique, très lisible)
Code : Roboto Mono avec syntax highlighting
Contraste parfait : respecte toujours WCAG AAA
Animations subtiles pour guider l’attention
Apple
Apple maîtrise le whitespace :
75% d’espace blanc sur certaines pages
Une idée par section
Typographie SF Pro optimisée pour tous les écrans
Hiérarchie minimale mais ultra-efficace
Outils recommandés
Pour la typographie
Google Fonts – Bibliothèque gratuite de polices web
Font Pair – Trouver des combinaisons harmonieuses
Type Scale – Générer des échelles typographiques
WhatFont – Extension pour identifier les polices sur le web
Pour la hiérarchie visuelle
Figma – Design d’interfaces (gratuit pour débuter)
Adobe XD – Prototypage et design
Contrast Checker – Vérifier l’accessibilité des couleurs
Grid Calculator – Créer des grilles de mise en page
Pour l’inspiration
Dribbble – Designs UI/UX de qualité
Awwwards – Sites web primés
Land-book – Galerie de landing pages
Typewolf – Inspiration typographique
Checklist de vérification
Avant de valider votre design, vérifiez :
Hiérarchie visuelle :
[ ] L’élément le plus important est-il immédiatement visible ?
[ ] Y a-t-il minimum 3 niveaux de hiérarchie distincts ?
[ ] L’espacement crée-t-il des groupes logiques ?
[ ] Les CTA se démarquent-ils clairement ?
[ ] Le parcours visuel est-il intuitif ?
Typographie :
[ ] Maximum 2-3 polices utilisées ?
[ ] Contraste texte/fond supérieur à 4.5:1 ?
[ ] Longueur de ligne entre 50-75 caractères ?
[ ] Line-height adapté (1.2 titres, 1.6+ corps) ?
[ ] Tailles responsive avec clamp() ou media queries ?
[ ] Polices bien chargées (performance) ?
Accessibilité :
[ ] Texte lisible à 200% de zoom ?
[ ] Pas de texte dans les images ?
[ ] Hiérarchie HTML correcte (h1, h2, h3…) ?
[ ] Textes alternatifs sur les images ?
Conclusion
La hiérarchie visuelle et la typographie sont les fondations du design web. En maîtrisant ces principes, vous créez des interfaces intuitives qui guident naturellement l’utilisateur vers l’action souhaitée.
Points clés à retenir :
La taille, le contraste et l’espacement créent la hiérarchie
Limitez-vous à 2-3 polices complémentaires
Le contraste doit respecter WCAG (minimum 4.5:1)
65 caractères maximum par ligne pour le confort
Testez sur mobile, tablette et desktop
Prochaines étapes :
Pratiquez en redessinant une page existante
Créez votre propre système typographique
Analysez les sites que vous admirez
Testez vos designs auprès d’utilisateurs réels
La pratique régulière transformera ces principes en réflexes naturels. Commencez petit, restez cohérent, et itérez constamment.
Ressources complémentaires :
Google Fonts – Polices gratuites
Type Scale – Générateur d’échelles
WebAIM – Test de contraste
Refactoring UI – Guide complet de design (anglais)