Les 7 principes qui séparent un site amateur d’un site professionnel
Le design web ne s’improvise pas, mais il s’apprend. Derrière chaque site qui « a l’air pro », il y a l’application méthodique de quelques principes fondamentaux. Maîtrisez-les, et même sans formation en design, vous créerez des sites qui inspirent confiance et convertissent.
Principe 1 : La hiérarchie visuelle
La hiérarchie visuelle guide l’œil du visiteur dans l’ordre que vous souhaitez. Sans elle, l’utilisateur ne sait pas où regarder et quitte la page.
Comment créer une hiérarchie claire
Quatre leviers principaux, par ordre d’impact :
- Taille : Les éléments les plus importants sont les plus grands. Votre titre principal doit être significativement plus grand que le reste
- Poids : Le texte en gras attire l’œil avant le texte regular
- Couleur et contraste : Les éléments colorés sur fond neutre ressortent immédiatement
- Espace : Plus un élément a d’espace autour de lui, plus il attire l’attention
Exemple concret : une section hero
/* Hiérarchie visuelle en action */
.hero-overline {
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #2563EB; /* Couleur d'accent pour attirer d'abord ici */
}
.hero-title {
font-size: 3.5rem; /* Le plus grand élément = le plus important */
font-weight: 800;
line-height: 1.1;
color: #111827;
margin-top: 0.5rem;
}
.hero-subtitle {
font-size: 1.25rem; /* Nettement plus petit que le titre */
font-weight: 400;
color: #6B7280; /* Plus clair = secondaire */
max-width: 540px;
margin-top: 1.5rem;
}
.hero-cta {
margin-top: 2rem; /* Espace généreux = élément distinct et important */
padding: 16px 32px;
font-size: 1.125rem;
font-weight: 600;
background: #2563EB;
color: white;
border-radius: 8px;
}
L’œil suit naturellement : overline coloré → titre géant → sous-titre explicatif → bouton CTA. C’est exactement le parcours que vous voulez.
Principe 2 : L’espace blanc (whitespace)
L’espace blanc — ou espace négatif — est la zone vide entre les éléments. C’est le principe le plus sous-estimé et pourtant le plus transformateur.
Pourquoi c’est crucial
- Lisibilité : Le texte a besoin de respirer pour être lu confortablement
- Focus : L’espace isole les éléments importants et les met en valeur
- Perception de qualité : Les sites de luxe utilisent massivement l’espace blanc. Les sites discount entassent tout
Application pratique
/* Espacements insuffisants (amateur) */
.section-bad {
padding: 20px;
}
.section-bad h2 { margin-bottom: 8px; }
.section-bad p { margin-bottom: 8px; }
/* Espacements généreux (professionnel) */
.section-good {
padding: 80px 24px; /* Beaucoup d'espace vertical entre les sections */
}
.section-good h2 {
margin-bottom: 24px; /* Le titre respire */
}
.section-good p {
margin-bottom: 16px;
line-height: 1.7; /* Interligne aéré */
max-width: 680px; /* Le texte ne s'étale pas trop */
}
Système d’espacement cohérent
Utilisez une échelle basée sur un multiple de 4 ou 8 pixels :
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
}
En utilisant toujours ces valeurs, vos espacements seront harmonieux sans y réfléchir.
Principe 3 : L’alignement et la grille
Chaque élément doit être aligné sur une grille invisible. Le désalignement, même de quelques pixels, crée une impression de désordre.
La grille 12 colonnes
C’est le standard du web. Elle permet de diviser l’espace en 1, 2, 3, 4, 6 ou 12 colonnes :
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
}
/* Exemples de layouts */
.full-width { grid-column: span 12; }
.half { grid-column: span 6; }
.third { grid-column: span 4; }
.quarter { grid-column: span 3; }
.two-thirds { grid-column: span 8; }
.one-third { grid-column: span 4; }
/* Responsive */
@media (max-width: 768px) {
.grid { grid-template-columns: 1fr; }
.half, .third, .quarter { grid-column: span 1; }
}
L’alignement à gauche par défaut
Le texte aligné à gauche est le plus lisible en français et dans les langues latines. Réservez le centrage pour :
- Les titres de section courts (1 ligne)
- Les héros et les CTA
- Les footers
Ne centrez jamais un paragraphe long — c’est illisible car l’œil doit chercher le début de chaque ligne.
Principe 4 : Le contraste
Le contraste crée la différence entre les éléments et les rend distinguables. Sans contraste suffisant, tout se mélange.
Contraste de taille
Le ratio entre votre titre et votre texte corps doit être d’au moins 2:1. Si votre corps est à 16px, vos titres principaux devraient être à 32px minimum (idéalement 40-56px).
Contraste de couleur
Les normes WCAG imposent des ratios minimum pour l’accessibilité :
- Texte normal : ratio 4.5:1 minimum
- Gros texte (18px+ bold ou 24px+) : ratio 3:1 minimum
- Éléments interactifs (boutons, liens) : ratio 3:1 avec le fond
En pratique : du texte gris #6B7280 sur fond blanc #FFFFFF a un ratio de 4.6:1 — ça passe de justesse. Du texte #9CA3AF sur blanc a seulement 2.9:1 — ça ne passe pas pour du texte normal.
Contraste visuel pour les CTA
Votre bouton d’action principal doit se démarquer de tout le reste de la page :
/* Le CTA doit être la seule chose dans cette couleur vive */
.btn-primary {
background: #2563EB;
color: #FFFFFF;
padding: 14px 28px;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
border: none;
}
/* Les boutons secondaires sont visuellement plus discrets */
.btn-secondary {
background: transparent;
color: #2563EB;
padding: 14px 28px;
border: 2px solid #2563EB;
border-radius: 8px;
font-weight: 600;
}
/* Les boutons tertiaires sont encore plus discrets */
.btn-ghost {
background: transparent;
color: #6B7280;
padding: 14px 28px;
border: none;
font-weight: 500;
text-decoration: underline;
}
Principe 5 : La répétition et la cohérence
Chaque élément similaire doit avoir le même style partout sur le site. Les titres de section ont toujours la même taille. Les boutons ont toujours les mêmes couleurs. Les cartes ont toujours le même border-radius.
Ce que ça implique concrètement
- Un seul style de bouton principal sur tout le site (même couleur, même taille, même radius)
- Un seul style de carte (même ombre, même padding, même radius)
- Des titres de même niveau = même style (tous les h2 identiques, tous les h3 identiques)
- Des espacements constants entre les sections (toujours 80px, pas 60 ici et 100 là)
Utiliser les variables CSS pour garantir la cohérence
:root {
/* Un seul endroit pour tout définir */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.07);
--shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
--transition: 200ms ease;
}
/* Tous les éléments utilisent les mêmes tokens */
.card { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.button { border-radius: var(--radius-md); transition: all var(--transition); }
.avatar { border-radius: var(--radius-full); }
.input { border-radius: var(--radius-md); }
Principe 6 : La proximité et le groupement
Les éléments liés doivent être proches. Les éléments non liés doivent être séparés. C’est le principe de proximité de la Gestalt.
Exemple : un formulaire
/* MAUVAIS : tout le même espacement */
.form-bad label { margin-bottom: 16px; }
.form-bad input { margin-bottom: 16px; }
/* BON : le label est proche de son input, séparé du groupe suivant */
.form-group {
margin-bottom: 24px; /* Espace ENTRE les groupes */
}
.form-group label {
display: block;
margin-bottom: 6px; /* Petit espace entre label et input */
font-weight: 500;
font-size: 0.875rem;
}
.form-group input {
width: 100%;
padding: 10px 14px;
border: 1px solid #D1D5DB;
border-radius: 8px;
}
Avec 6px entre le label et l’input, et 24px entre les groupes, on comprend immédiatement quel label correspond à quel champ.
Principe 7 : L’accessibilité n’est pas optionnelle
Un bon design web fonctionne pour tout le monde — écrans petits ou grands, connexion rapide ou lente, vision parfaite ou altérée.
Les minimums à respecter
- Taille de texte : 16px minimum pour le corps (14px minimum pour les légendes)
- Zones tactiles : 44×44 pixels minimum pour les boutons et liens sur mobile
- Contraste : Ratio 4.5:1 pour le texte, 3:1 pour les éléments interactifs
- Focus visible : Chaque élément interactif doit avoir un indicateur de focus visible au clavier
- Pas de couleur seule : N’utilisez jamais uniquement la couleur pour transmettre une information (ajoutez une icône ou un texte)
Focus visible en CSS
/* Style de focus visible et élégant */
:focus-visible {
outline: 2px solid #2563EB;
outline-offset: 2px;
border-radius: 4px;
}
/* Retirer l'outline pour les clics souris (seulement) */
:focus:not(:focus-visible) {
outline: none;
}
Mettre tout ensemble : anatomie d’une page bien conçue
Voici comment ces principes s’appliquent à une landing page type :
Header (navigation)
- Hauteur fixe : 72px
- Logo à gauche, navigation au centre, CTA à droite
- Position sticky (reste visible au scroll)
- Ombre subtile pour se détacher du contenu
Section Hero
- Padding vertical généreux : 80-120px
- Titre : 48-56px, Bold, max 600px de largeur
- Sous-titre : 18-20px, couleur secondaire, max 500px
- CTA : le seul élément dans la couleur d’accent
- Image/illustration à droite ou en arrière-plan
Sections de contenu
- Alternance fond blanc / fond gris clair pour créer du rythme
- Titre de section centré, 32-36px
- Sous-titre optionnel en gris
- Contenu en grille : 2, 3 ou 4 colonnes selon le type
- Padding vertical constant : 80px
CTA final
- Fond coloré (votre couleur primary) pour se démarquer
- Texte blanc, centré
- Un seul bouton clair
Footer
- Fond sombre (gris-900)
- 4 colonnes : à propos, liens, services, contact
- Informations légales et copyright en bas
- Adresse physique à Dakar, numéro +221, réseaux sociaux
Exercice pratique
Prenez n’importe quel site que vous trouvez « beau » et analysez-le avec ces 7 principes :
- Quelle est la hiérarchie visuelle ? Où votre œil se pose-t-il en premier ?
- Comment l’espace blanc est-il utilisé ?
- Les éléments sont-ils alignés sur une grille ?
- Où se trouve le contraste maximal ?
- Les éléments similaires sont-ils cohérents ?
- Les groupes d’éléments liés sont-ils proches ?
- Le site est-il accessible (taille de texte, contraste, zones tactiles) ?
Faites cet exercice avec 5 sites différents et vous développerez un œil de designer en quelques heures. Commencez par des sites comme Stripe, Linear, Notion, ou des sites sénégalais bien conçus comme Wave ou Expresso.
