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é. L'esthétique ne doit jamais nuire à la compréhension.

Les fondamentaux du design web

1. La hiérarchie visuelle

La hiérarchie visuelle guide l'œil de l'utilisateur vers l'information importante.

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│   TITRE PRINCIPAL (le plus visible)                         │
│   ══════════════════════════════════                        │
│                                                             │
│   Sous-titre explicatif                                     │
│   ─────────────────────                                     │
│                                                             │
│   Corps de texte avec les détails. Lorem ipsum dolor sit    │
│   amet, consectetur adipiscing elit. Texte de taille        │
│   normale, moins impactant visuellement.                    │
│                                                             │
│   ┌──────────────────┐                                      │
│   │  BOUTON D'ACTION │  ← Élément interactif distinct       │
│   └──────────────────┘                                      │
│                                                             │
│   Note de bas de page (petit, discret)                      │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Outils de la hiérarchie :

• Taille : Plus c'est grand, plus c'est important
• Poids : Le gras attire l'attention
• Couleur : Les couleurs vives se démarquent
• Espace : L'espace blanc met en valeur
• Position : En haut et à gauche = plus visible (en occident)

2. La règle des tiers

Divisez votre page en 3 colonnes et 3 rangées. Placez les éléments importants aux intersections.

    1/3         1/3         1/3
┌───────────┬───────────┬───────────┐
│           │           │           │
│     ●─────────────────────●       │  1/3
│           │           │           │
├───────────┼───────────┼───────────┤
│           │           │           │
│     ●─────────────────────●       │  1/3
│           │           │           │
├───────────┼───────────┼───────────┤
│           │           │           │
│           │           │           │  1/3
│           │           │           │
└───────────┴───────────┴───────────┘

● = Points d'intérêt naturels

Palette de couleurs

Choisir ses couleurs

Une palette efficace comprend généralement :

Type	Usage	Exemple
Couleur principale	Identité de marque, éléments clés	Bleu : #1976D2
Couleur secondaire	Accents, éléments secondaires	Orange : #FF9800
Couleur neutre	Texte, fonds, bordures	Gris : #424242
Couleur de succès	Validations, confirmations	Vert : #4CAF50
Couleur d'erreur	Erreurs, alertes	Rouge : #F44336
Couleur d'avertissement	Attention requise	Jaune : #FFC107

Règle du 60-30-10

Pour une harmonie visuelle, répartissez vos couleurs ainsi :

• 60% : Couleur principale (fond, grandes surfaces)
• 30% : Couleur secondaire (navigation, sections)
• 10% : Couleur d'accent (boutons, liens, CTA)

Harmonie des couleurs

Type	Description	Exemple
Monochromatique	Variations d'une seule couleur	Bleu clair → Bleu foncé
Complémentaire	Couleurs opposées sur le cercle	Bleu + Orange
Analogue	Couleurs voisines	Bleu + Violet + Cyan
Triadique	3 couleurs équidistantes	Rouge + Jaune + Bleu

Accessibilité

Vos choix de couleurs doivent respecter les contrastes WCAG. Voir la Phase 6 — Accessibilité.

Outils pour créer une palette

Outil	Description	URL
Coolors	Générateur de palettes	coolors.co
Adobe Color	Roue chromatique interactive	color.adobe.com
Paletton	Harmonies de couleurs	paletton.com
Color Hunt	Palettes pré-faites	colorhunt.co
Realtime Colors	Visualiser sur un vrai site	realtimecolors.com

Typographie

Choix des polices

Limitez-vous à 2 polices maximum :

• Une pour les titres (peut être plus expressive)
• Une pour le corps de texte (doit être très lisible)

Catégorie	Caractéristiques	Usage	Exemples
Sans-serif	Moderne, épuré	Corps de texte écran	Inter, Roboto, Open Sans
Serif	Classique, élégant	Titres, éditorial	Georgia, Merriweather, Lora
Monospace	Technique, code	Blocs de code	Fira Code, JetBrains Mono

Hiérarchie typographique

Définissez une échelle cohérente :

/* Exemple d'échelle typographique */
h1 { font-size: 2.5rem; }   /* 40px - Titre principal */
h2 { font-size: 2rem; }     /* 32px - Sections */
h3 { font-size: 1.5rem; }   /* 24px - Sous-sections */
h4 { font-size: 1.25rem; }  /* 20px - Sous-titres */
p  { font-size: 1rem; }     /* 16px - Corps de texte */
small { font-size: 0.875rem; } /* 14px - Notes */

Lisibilité du texte

Critère	Recommandation	Pourquoi
Taille minimale	16px (1rem)	En dessous, difficile à lire sur écran
Interligne	1.5 à 1.7	Facilite le suivi des lignes
Longueur de ligne	60-80 caractères	Au-delà, l'œil se perd
Contraste	Ratio ≥ 4.5:1	Norme WCAG AA

Règle d'or

Ne justifiez jamais le texte sur le web. L'alignement à gauche est plus lisible car les espaces entre les mots restent constants.

Sources de polices

Source	Type	URL
Google Fonts	Gratuit	fonts.google.com
Font Squirrel	Gratuit	fontsquirrel.com
Adobe Fonts	Payant (Creative Cloud)	fonts.adobe.com

Cohérence graphique

Créer un système de design

Un système de design définit des règles réutilisables :

🎨 SYSTÈME DE DESIGN - Mon Projet
═══════════════════════════════════

COULEURS
────────
Principal:     #1976D2  (bleu)
Secondaire:    #FF9800  (orange)
Succès:        #4CAF50  (vert)
Erreur:        #F44336  (rouge)
Texte:         #212121  (noir)
Texte léger:   #757575  (gris)
Fond:          #FAFAFA  (blanc cassé)

TYPOGRAPHIE
───────────
Titres:        Montserrat Bold
Corps:         Open Sans Regular
Code:          Fira Code

ESPACEMENTS
───────────
XS: 4px   | S: 8px   | M: 16px
L: 24px   | XL: 32px | XXL: 48px

ARRONDIS
────────
Boutons:  4px
Cartes:   8px
Modales:  12px

Composants réutilisables

Définissez l'apparence de vos composants :

Boutons :

État	Apparence
Normal	Fond bleu, texte blanc
Survol	Fond bleu foncé
Actif	Fond bleu très foncé
Désactivé	Fond gris, texte gris clair

Cartes :

Propriété	Valeur
Fond	Blanc
Ombre	0 2px 4px rgba(0,0,0,0.1)
Arrondi	8px
Padding	16px

Sobriété visuelle

Moins c'est plus

La surcharge cognitive nuit à l'expérience utilisateur. Selon Steve Krug :

« Éliminez la moitié des mots de chaque page, puis éliminez la moitié de ce qui reste. »

Signes de surcharge

❌ Problème	✅ Solution
Trop de couleurs	Limiter à 3-4 couleurs
Trop de polices	Maximum 2 familles
Animations partout	Animer uniquement les actions clés
Texte dense	Aérer avec de l'espace blanc
Icônes décoratives	Icônes uniquement si utiles
Effets visuels excessifs	Supprimer le superflu

L'espace blanc (whitespace)

L'espace vide n'est pas du gaspillage, c'est un outil de design :

❌ SANS ESPACE                     ✅ AVEC ESPACE
─────────────────────────────────────────────────────────

TitreTexte qui suit               Titre
immédiatement sans
respiration avec des              Texte qui suit avec de
éléments collés partout           l'espace pour respirer
BoutonLien
                                  Bouton    Lien

Exercice pratique

Créer votre charte graphique

1. Choisissez 3-4 couleurs avec un outil comme Coolors
2. Vérifiez les contrastes avec WebAIM Contrast Checker
3. Sélectionnez 2 polices sur Google Fonts
4. Définissez une échelle typographique (h1 à p)
5. Documentez vos espacements (4px, 8px, 16px...)
6. Créez un document récapitulatif

Template de charte graphique

# Charte graphique - [Nom du projet]

## Couleurs
| Nom | Code | Usage |
|-----|------|-------|
| Principal | #______ | |
| Secondaire | #______ | |
| Texte | #______ | |
| Fond | #______ | |

## Typographie
- Titres : [Police] [Poids]
- Corps : [Police] [Poids]
- Taille de base : ___px

## Espacements
- XS: ___px
- S: ___px
- M: ___px
- L: ___px

## Composants
### Boutons
[Description]

### Cartes
[Description]

Ressources et inspiration

Sites d'inspiration

Site	Description
Dribbble	Designs de professionnels
Behance	Projets complets
Awwwards	Sites web primés
Muzli	Agrégateur d'inspiration

Références

• Material Design (Google) — m3.material.io
• Human Interface Guidelines (Apple) — developer.apple.com/design
• Refactoring UI (livre) — Conseils pratiques de design

Checklist de la Phase 3

Avant de passer à la phase suivante, vérifiez :

• [ ] Palette de couleurs définie (3-4 couleurs maximum)
• [ ] Contrastes vérifiés pour l'accessibilité
• [ ] 2 polices maximum sélectionnées
• [ ] Échelle typographique définie
• [ ] Espacements standardisés
• [ ] Règle 60-30-10 appliquée aux couleurs
• [ ] Charte graphique documentée
• [ ] Pas de surcharge visuelle

Prochaine étape

L'identité visuelle est définie. Passez à la Phase 4 — Ergonomie et UX pour appliquer les bonnes pratiques d'expérience utilisateur.