Phase 3 — Design et identité visuelle
Principe clé
« Le design n'est pas seulement ce à quoi ça ressemble, c'est aussi comment ça fonctionne. » — Steve Jobs
Un bon design sert l'utilisabilité. Pour approfondir chaque principe, consultez Laws of UX (FR) — la référence visuelle.
Les fondamentaux du design web
1. Hiérarchie visuelle
Guidez l'œil vers ce qui compte. 5 outils : taille, poids (gras), couleur, espace, position (haut-gauche = plus visible en occident).
| ❌ Sans hiérarchie | ✅ Avec hiérarchie | |
|---|---|---|
| Titre | Même taille que le texte | Grand, gras, couleur de marque |
| Prix | Perdu dans le texte | Mis en évidence |
| Bouton commander | Petit lien | Gros bouton coloré |
| Photo | Petite, à droite | Grande, au centre |
| Description | Long paragraphe | Court, aéré |
2. Composition — règle des tiers et patterns Z/F
L'eye-tracking montre que les internautes scannent une page selon des schémas prévisibles. Placez les éléments importants aux intersections d'une grille 3×3.
| Pattern | Type de page | Placement recommandé |
|---|---|---|
| Z | Landing pages, pages visuelles | Logo en haut-gauche, CTA en bas-droite |
| F | Articles, listes, contenu texte | Titres et mots-clés en début de ligne |
Le Z explique la règle des tiers
Le logo Pizza Mario est en haut-gauche (début du Z), le bouton « Commander » en bas-droite (fin du Z). Tendez vers les zones d'intersection — pas besoin d'alignement au pixel.
3. Proximité et groupement (Gestalt)
Le cerveau regroupe automatiquement les éléments proches. C'est la loi de proximité.
Règle simple : rapprochez ce qui va ensemble, éloignez ce qui est différent.
| Principe | Application concrète |
|---|---|
| Rapprocher les éléments liés | Image + nom + prix d'un produit = un seul bloc |
| Éloigner les groupes distincts | Séparer la nav du contenu principal |
| Aligner sur une grille | Les éléments alignés forment un ensemble |
Exemple — Fiche produit Pizza Mario
Mêmes infos, deux résultats. La carte de droite « fait pro » :
| Carte gauche | Carte droite | |
|---|---|---|
| Titre | Même taille que les ingrédients | Gras, plus grand |
| Ingrédients | Même poids que le titre | Plus petit, discret |
| Prix + bouton | Séparés | Sur la même ligne |
| Espacement | Irrégulier | Cohérent |
4. Espace blanc (whitespace)
L'espace blanc n'est pas du vide — c'est un outil de design. Il améliore lisibilité et confort.
| Zone | ❌ Serré | ✅ Pro |
|---|---|---|
| Navigation | 3-5px | ~16px |
| Nav → Hero | Collé | ~40px |
| Titre de section | Trop proche | 32px haut, 24px bas |
| Cartes | Gouttières serrées | ~16px |
| Footer | Collé | ~40-50px |
Quand vous doutez, ajoutez de l'espace
Augmentez les marges, le padding, l'interligne. Il est plus fréquent de manquer d'espace que d'en avoir trop.
Palette de couleurs
Choisissez vos couleurs en partant de l'identité du projet — pas au hasard.
Exemple — Palette de Pizza Mario
| Couleur | Code | Usage |
|---|---|---|
| 🔴 Rouge tomate | #D32F2F | Boutons, prix, accents |
| 🟢 Vert basilic | #2E7D32 | En-tête, navigation |
| 🟡 Jaune fromage | #FFC107 | Badges, étoiles |
| ⚪ Crème | #FFF8E1 | Fond principal |
| ⚫ Brun foncé | #3E2723 | Texte (plus doux que noir pur) |
Visualisez en ligne : Coolors · Realtime Colors · Contrast Checker
Autres palettes par type de projet
Portfolio développeur (technique, dark mode)
| Code | Usage |
|---|---|
#1A1A2E | Fond principal |
#0EA5E9 | Liens, boutons |
#F8FAFC | Texte, cartes |
#64748B | Texte secondaire |
Boutique artisanale (sobre, met en valeur les photos)
| Code | Usage |
|---|---|
#B8860B | Doré, accents |
#FAF9F6 | Blanc cassé, fond |
#2D2D2D | Texte |
#E8C4C4 | Rose poudré, badges |
Règle 60-30-10
| Proportion | Rôle | Pizza Mario |
|---|---|---|
| 60% | Dominante | Crème (fond) |
| 30% | Secondaire | Vert (nav, sections) |
| 10% | Accent | Rouge (CTA, prix) |
Harmonies de couleurs
| Harmonie | Principe | Exemple Pizza Mario | Tester |
|---|---|---|---|
| Monochromatique | Variations d'une couleur | Rouge clair → rouge foncé | Coolors |
| Complémentaire ✓ | Couleurs opposées | Rouge + Vert (palette PM) | Coolors |
| Analogue | Couleurs voisines | Rouge + Orange + Jaune | Coolors |
| Triadique | 3 couleurs équidistantes | Drapeau italien | Coolors |
Vérifiez toujours les contrastes
Chaque combinaison texte/fond doit atteindre 4.5:1 minimum (WCAG AA). Outil : WebAIM Contrast Checker.
Ce qui se teste, c'est chaque combinaison, pas les couleurs une par une. Le vert de Pizza Mario en est l'exemple : en #388E3C, du texte blanc dessus ne donnait que 4,12:1 — joli, mais sous le seuil. Assombri en #2E7D32, il passe à 5,13:1. Une palette se corrige souvent d'un cran de luminosité, pas d'un changement de couleur.
Typographie
2 polices maximum
Une pour les titres (expressive), une pour le corps (lisible).
| Type | Caractère | Usage | Exemples |
|---|---|---|---|
| Sans-serif | Moderne, épuré | Corps de texte | Inter, Roboto |
| Serif | Classique, élégant | Titres, éditorial | Merriweather, Lora |
| Monospace | Technique | Blocs de code | Fira Code, JetBrains Mono |
Hiérarchie et lisibilité
h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; } /* 32px */
h3 { font-size: 1.5rem; } /* 24px */
p { font-size: 1rem; } /* 16px - jamais en dessous */| Critère | Recommandation |
|---|---|
| Taille corps | ≥ 16px (1rem) |
| Interligne | 1.5 - 1.7 |
| Longueur ligne | 60-80 caractères |
| Contraste | ≥ 4.5:1 (WCAG AA) |
| Alignement | Toujours à gauche, jamais justifié |
Combinaisons par type de projet
| Projet | Titres | Corps | Tester |
|---|---|---|---|
| Pizzeria | Playfair Display | Open Sans | Realtime Colors |
| Portfolio dev | Inter | Inter | Realtime Colors |
| Blog voyage | Merriweather | Source Sans Pro | Realtime Colors |
| App fitness | Montserrat | Roboto | Realtime Colors |
Sobriété visuelle
« Éliminez la moitié des mots de chaque page, puis éliminez la moitié de ce qui reste. » — Steve Krug
❌ Trop de tout — Comic Sans, étoiles, animations, compteurs.
✅ Sobre et efficace — typographie élégante, palette cohérente, navigation claire.
| ❌ Problème | ✅ Solution |
|---|---|
| Trop de couleurs | 3-4 max (règle 60-30-10) |
| Trop de polices | 2 max |
| Animations partout | Uniquement sur les actions clés |
| Texte dense | Aérer (espace blanc) |
| Trop de choix | Limiter (loi de Hick) |
| Effets excessifs | Supprimer (rasoir d'Occam) |
Lois UX à connaître
Chaque principe ci-dessus s'appuie sur une loi UX documentée. Cliquez sur les images pour les agrandir.
Loi de Fitts — Boutons et zones cliquables
Plus une cible est grande et proche, plus elle est facile à atteindre. Faites des boutons d'action grands, placés sur le parcours visuel.
Loi de Hick — Limiter les choix
Plus il y a de choix, plus la décision est lente. Limitez la nav à 5-7 items, regroupez le reste en sous-menus.
Loi de Miller — 7 éléments en mémoire
On retient 7 éléments (± 2) en mémoire de travail. Structurez listes et catégories en groupes de 5-7 max.
Loi de Jakob — Respecter les conventions
Les utilisateurs préfèrent les interfaces familières. Logo en haut-gauche, nav horizontale, panier en haut-droite — ne réinventez pas la roue.
Loi de similarité — Cohérence des éléments
Les éléments qui se ressemblent sont perçus comme un groupe. Cartes produit avec même style = même type d'objet pour l'utilisateur.
Effet d'utilisabilité esthétique — Le beau paraît simple
Un design beau est perçu comme plus facile à utiliser — même si la fonctionnalité est identique.
Rasoir d'Occam — Simplifier au maximum
La solution la plus simple est généralement la meilleure. Avant d'ajouter une fonctionnalité : « Est-ce que ça aide l'utilisateur à atteindre son objectif ? »
« La perfection est atteinte non pas lorsqu'il n'y a plus rien à ajouter, mais lorsqu'il n'y a plus rien à retirer. » — Saint-Exupéry
Exercice pratique
Exercice — Créez la charte graphique de votre projet.
Remplir ma fiche Design| Étape | Action | Outil |
|---|---|---|
| 1 | 🎨 Choisir 3-4 couleurs | Coolors, Color Hunt |
| 2 | ✅ Vérifier les contrastes | WebAIM |
| 3 | 🔤 Choisir 2 polices | Google Fonts, Fontjoy |
| 4 | 📐 Définir l'échelle typo | Typescale |
| 5 | 📏 Définir les espacements | 4, 8, 16, 24, 32, 40 px |
| 6 | 📝 Documenter | Fiche Design en ligne |
Ressources
Outils, inspiration et lectures
Couleurs : Coolors · Adobe Color · Realtime Colors · Happy Hues · Contrast Checker
Polices : Google Fonts · Fontjoy · Typescale
Conception : Figma · Excalidraw · Penpot (open-source)
Inspiration : Dribbble · Awwwards · Muzli
Lectures : Don't Make Me Think (Krug) · Refactoring UI (Wathan & Schoger) · The Design of Everyday Things (Norman) · Laws of UX (FR) · Material Design
Checklist de la Phase 3
- Palette définie (3-4 couleurs max)
- Contrastes vérifiés (≥ 4.5:1)
- 2 polices max sélectionnées
- Échelle typographique définie
- Espacements standardisés
- Règle 60-30-10 appliquée
- Charte documentée (fiche Design)
- Pas de surcharge visuelle
- Logo en haut-gauche, CTA en bas-droite (pattern Z)
- Éléments liés regroupés (proximité)
- Espace blanc suffisant entre sections
Prochaine étape
L'identité visuelle est définie. Passez à la Phase 4 — Ergonomie et UX.