785 lines
31 KiB
Markdown
785 lines
31 KiB
Markdown
# Portfolio Développeur Web - Spécification UI/UX
|
|
|
|
## 1. Introduction
|
|
|
|
Ce document définit les objectifs d'expérience utilisateur, l'architecture de l'information, les flux utilisateurs et les spécifications de design visuel pour l'interface utilisateur du **Portfolio Développeur Web**. Il sert de fondation pour le design visuel et le développement frontend, assurant une expérience cohérente et centrée sur l'utilisateur.
|
|
|
|
### 1.1 Objectifs UX & Principes de Design
|
|
|
|
#### Personas Utilisateurs Cibles
|
|
|
|
| Persona | Description |
|
|
|---------|-------------|
|
|
| **Recruteur** | Professionnel RH ou technique cherchant un candidat fiable, compétent, avec des preuves vérifiables de ses compétences |
|
|
| **Client Potentiel** | Entrepreneur ou responsable projet souhaitant évaluer la capacité à livrer un projet freelance, sensible à la qualité et au professionnalisme |
|
|
| **Curieux / Pair** | Développeur ou professionnel tech consultant le portfolio par curiosité ou benchmark |
|
|
|
|
#### Objectifs d'Utilisabilité
|
|
|
|
- **Découverte rapide** : Comprendre en <10 secondes qui est le développeur et ce qu'il propose
|
|
- **Navigation intuitive** : Trouver n'importe quelle section en maximum 2 clics
|
|
- **Zéro friction** : Aucun obstacle du premier clic jusqu'au formulaire de contact envoyé
|
|
- **Preuves accessibles** : Chaque compétence/affirmation liée à une preuve cliquable
|
|
- **Mobile-first** : Expérience optimale sur smartphone (prioritaire)
|
|
|
|
#### Principes de Design
|
|
|
|
1. **Le design au service du message** — L'interface reste au second plan, le contenu prime
|
|
2. **Montrer plutôt que dire** — Chaque affirmation soutenue par une preuve tangible
|
|
3. **Progressive disclosure** — Projets vedettes en détail, projets secondaires en liste
|
|
4. **Feedback immédiat** — Toute action a une réponse visuelle claire
|
|
5. **Accessible par défaut** — Contrastes, navigation clavier, structure sémantique
|
|
|
|
### 1.2 Journal des modifications
|
|
|
|
| Date | Version | Description | Auteur |
|
|
|------|---------|-------------|--------|
|
|
| 2026-01-22 | 0.1 | Création initiale | Sally (UX Expert) |
|
|
|
|
## 2. Architecture de l'Information (IA)
|
|
|
|
### 2.1 Site Map / Inventaire des Écrans
|
|
|
|
```mermaid
|
|
graph TD
|
|
A[🏠 Accueil] --> B[📁 Projets]
|
|
A --> C[🛠 Compétences]
|
|
A --> D[👤 Me Découvrir]
|
|
A --> E[✉️ Contact]
|
|
|
|
B --> B1[Projets Vedettes]
|
|
B --> B2[Projets Secondaires]
|
|
B1 --> B3[Page Projet 1]
|
|
B1 --> B4[Page Projet 2]
|
|
B1 --> B5[Page Projet N...]
|
|
|
|
C --> C1[Technologies de Dev]
|
|
C --> C2[Outils Démontrables]
|
|
C --> C3[Autres Outils]
|
|
|
|
D --> D1[Parcours]
|
|
D --> D2[Motivations]
|
|
D --> D3[Passions]
|
|
D --> D4[Témoignages]
|
|
|
|
E --> E1[Formulaire]
|
|
E --> E2[Liens Secondaires]
|
|
```
|
|
|
|
### 2.2 Structure de Navigation
|
|
|
|
**Navigation Primaire (Navbar sticky)** :
|
|
|
|
| Élément | URL | Notes |
|
|
|---------|-----|-------|
|
|
| Accueil | `/` | Logo cliquable |
|
|
| Projets | `/projets` | Liste vedettes + secondaires |
|
|
| Compétences | `/competences` | Technos + outils |
|
|
| Me Découvrir | `/a-propos` | Parcours + témoignages |
|
|
| **Me Contacter** | `/contact` | **CTA bouton distinct** |
|
|
|
|
**Navigation Secondaire** :
|
|
- **Footer** : Liens réseaux sociaux (LinkedIn, GitHub), mentions légales
|
|
- **Breadcrumbs** : Sur pages projet uniquement (`Accueil > Projets > Nom du projet`)
|
|
|
|
**Stratégie de Breadcrumb** :
|
|
- Activé uniquement sur les pages projet individuelles
|
|
- Format : Texte cliquable pour chaque niveau
|
|
- Dernier élément (page actuelle) non cliquable
|
|
|
|
## 3. Flux Utilisateurs
|
|
|
|
### 3.1 Découverte et Exploration d'un Projet
|
|
|
|
**Objectif utilisateur** : Évaluer les compétences du développeur à travers un projet concret
|
|
|
|
**Points d'entrée** :
|
|
- Page d'accueil (CTA "Découvrir mes projets")
|
|
- Navbar (lien "Projets")
|
|
- Page Compétences (lien technologie → projets associés)
|
|
|
|
**Critères de succès** : L'utilisateur visite le projet en ligne ou consulte les captures d'écran
|
|
|
|
```mermaid
|
|
graph TD
|
|
A[Entrée: Accueil/Navbar] --> B[Page Projets]
|
|
B --> C{Choix du projet}
|
|
C --> D[Page Projet Détaillée]
|
|
D --> E[Lecture: Contexte]
|
|
E --> F[Lecture: Solution Technique]
|
|
F --> G[Lecture: Réalisation]
|
|
G --> H{Projet en ligne?}
|
|
H -->|Oui| I[🔗 Visite du projet]
|
|
H -->|Non| J[📷 Galerie captures]
|
|
I --> K{Convaincu?}
|
|
J --> K
|
|
K -->|Oui| L[CTA: Me Contacter]
|
|
K -->|Non| M[Retour liste projets]
|
|
M --> C
|
|
```
|
|
|
|
**Edge Cases & Gestion d'erreurs** :
|
|
- Projet hors ligne : Afficher "Projet non disponible" + captures d'écran
|
|
- Lien externe cassé : Vérification périodique, fallback vers captures
|
|
- Projet confidentiel : Mention "Projet sous NDA" + description anonymisée
|
|
|
|
---
|
|
|
|
### 3.2 Prise de Contact (Conversion)
|
|
|
|
**Objectif utilisateur** : Envoyer un message au développeur
|
|
|
|
**Points d'entrée** :
|
|
- Bouton CTA navbar (toutes pages)
|
|
- Fin de page projet
|
|
- Fin de page "Me Découvrir"
|
|
|
|
**Critères de succès** : Message envoyé avec confirmation visible
|
|
|
|
```mermaid
|
|
graph TD
|
|
A[CTA: Me Contacter] --> B[Page Contact]
|
|
B --> C[Remplissage formulaire]
|
|
C --> D{Données persistées?}
|
|
D -->|Oui| E[Pré-remplissage auto]
|
|
D -->|Non| F[Formulaire vierge]
|
|
E --> G[Complétion]
|
|
F --> G
|
|
G --> H[Validation temps réel]
|
|
H --> I{Erreurs?}
|
|
I -->|Oui| J[Affichage erreurs inline]
|
|
J --> G
|
|
I -->|Non| K[Clic Envoyer]
|
|
K --> L[Spinner + bouton désactivé]
|
|
L --> M{reCAPTCHA OK?}
|
|
M -->|Non| N[Erreur discrète, retry]
|
|
M -->|Oui| O[Envoi PHP]
|
|
O --> P{Succès?}
|
|
P -->|Oui| Q[✅ Message de confirmation]
|
|
P -->|Non| R[❌ Erreur + données conservées]
|
|
Q --> S[localStorage vidé]
|
|
R --> G
|
|
```
|
|
|
|
**Edge Cases & Gestion d'erreurs** :
|
|
- Utilisateur quitte et revient : Données restaurées depuis localStorage
|
|
- reCAPTCHA échoue : Dégradation gracieuse, formulaire reste fonctionnel
|
|
- Erreur serveur : Message explicite, données préservées pour retry
|
|
- Double soumission : Bouton désactivé pendant traitement
|
|
|
|
---
|
|
|
|
### 3.3 Vérification des Compétences
|
|
|
|
**Objectif utilisateur** : Valider que le développeur maîtrise une technologie spécifique
|
|
|
|
**Points d'entrée** :
|
|
- Navbar (lien "Compétences")
|
|
- Badge technologie sur carte projet
|
|
|
|
**Critères de succès** : L'utilisateur trouve la preuve de maîtrise (projet ou lien externe)
|
|
|
|
```mermaid
|
|
graph TD
|
|
A[Page Compétences] --> B{Type de compétence?}
|
|
B -->|Techno Dev| C[Liste technologies]
|
|
B -->|Outil| D[Liste outils]
|
|
C --> E[Clic sur technologie]
|
|
E --> F[Voir projets associés]
|
|
F --> G[Navigation vers projet]
|
|
D --> H{Démontrable?}
|
|
H -->|Oui| I[🔗 Lien preuve externe]
|
|
H -->|Non| J[📝 Contexte d'utilisation]
|
|
I --> K[Visite preuve: GitHub, Notion...]
|
|
```
|
|
|
|
**Edge Cases & Gestion d'erreurs** :
|
|
- Technologie sans projet associé : Masquer ou afficher avec mention "En apprentissage"
|
|
- Lien externe cassé : Vérification régulière, fallback texte descriptif
|
|
|
|
## 4. Wireframes & Mockups
|
|
|
|
**Approche Design** : Wireframes low-fidelity en description textuelle. Le développement se fera directement en HTML/Tailwind CSS, ce document sert de référence.
|
|
|
|
### 4.1 Page d'Accueil
|
|
|
|
**Objectif** : Accroche immédiate + orientation vers les sections
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ NAVBAR (sticky) │
|
|
│ [Logo] Accueil Projets Compétences À propos [CTA] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ HERO SECTION │
|
|
│ [Photo ou Illustration] │
|
|
│ Prénom NOM │
|
|
│ Développeur Web Full-Stack │
|
|
│ "Phrase d'accroche percutante" │
|
|
│ [ Découvrir mes projets → ] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ SECTIONS RAPIDES │
|
|
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
|
|
│ │ 📁 │ │ 🛠 │ │ 👤 │ │
|
|
│ │ Projets │ │ Compétences │ │ Me Découvrir│ │
|
|
│ │ [Voir →] │ │ [Voir →] │ │ [Voir →] │ │
|
|
│ └─────────────┘ └─────────────┘ └─────────────┘ │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ FOOTER LinkedIn GitHub Email © 2026 │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**Interactions** : Fade-in au chargement, hover sur cartes (élévation)
|
|
|
|
---
|
|
|
|
### 4.2 Page Projets
|
|
|
|
**Objectif** : Présenter les projets vedettes + secondaires
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ NAVBAR │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ Mes Projets │
|
|
│ Découvrez les réalisations qui illustrent mon travail │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ PROJETS VEDETTES │
|
|
│ ┌──────────────────┐ ┌──────────────────┐ │
|
|
│ │ [Thumbnail] │ │ [Thumbnail] │ │
|
|
│ │ Titre Projet │ │ Titre Projet │ │
|
|
│ │ [PHP] [JS] [CSS] │ │ [React] [Node] │ │
|
|
│ └──────────────────┘ └──────────────────┘ │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ AUTRES PROJETS │
|
|
│ • Projet A — Description courte — [PHP, JS] │
|
|
│ • Projet B — Description courte — [WordPress] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ FOOTER │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**Interactions** : Hover cartes (ombre/élévation), badges cliquables
|
|
|
|
---
|
|
|
|
### 4.3 Page Projet Individuelle
|
|
|
|
**Objectif** : Détailler un projet avec preuves
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ NAVBAR │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ Accueil > Projets > Nom du Projet (breadcrumb) │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ TITRE DU PROJET │
|
|
│ [PHP] [JavaScript] [Tailwind CSS] │
|
|
│ ┌─────────────────────────────────────────┐ │
|
|
│ │ [Image principale] │ │
|
|
│ └─────────────────────────────────────────┘ │
|
|
│ [ Voir le projet en ligne → ] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ CONTEXTE — Description du projet │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ SOLUTION TECHNIQUE — Technologies et argumentation │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ TRAVAIL D'ÉQUIPE — Rôle, organisation (si applicable) │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ RÉALISATION — Durée + Galerie [img1] [img2] [img3] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ 💬 TÉMOIGNAGE — "Citation..." — Nom, Rôle │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ [ ← Retour aux projets ] [ Me contacter → ] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ FOOTER │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
### 4.4 Page Contact
|
|
|
|
**Objectif** : Conversion sans friction
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ NAVBAR │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ Me Contacter │
|
|
│ Une question, un projet ? Parlons-en ! │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ ┌─────────────────────────────────────────┐ │
|
|
│ │ Nom * Prénom * │ │
|
|
│ │ [_______________] [_______________] │ │
|
|
│ │ Email * Entreprise │ │
|
|
│ │ [_______________] [_______________] │ │
|
|
│ │ Catégorie * [▼ Sélectionner...] │ │
|
|
│ │ Objet * [_____________________] │ │
|
|
│ │ Message * [_____________________] │ │
|
|
│ │ [_____________________] │ │
|
|
│ │ [ Envoyer le message ] │ │
|
|
│ │ [Effacer le formulaire] │ │
|
|
│ └─────────────────────────────────────────┘ │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ Retrouvez-moi aussi sur : │
|
|
│ [LinkedIn] [GitHub] [Email direct] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ FOOTER │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**Interactions** : Validation temps réel, spinner à l'envoi, message de confirmation
|
|
|
|
## 5. Component Library / Design System
|
|
|
|
**Stratégie** : Utilisation de Tailwind CSS avec des classes utilitaires. Pas de design system externe. Les composants sont définis comme des patterns HTML/Tailwind réutilisables.
|
|
|
|
### 5.1 Bouton Principal (CTA)
|
|
|
|
| Propriété | Valeur |
|
|
|-----------|--------|
|
|
| **Objectif** | Action principale (Contact, Voir projet) |
|
|
| **Variantes** | Primary (rempli), Secondary (outline), Ghost (texte) |
|
|
| **États** | Default, Hover, Focus, Disabled, Loading |
|
|
|
|
```
|
|
Primary: [████████████] → Fond accent, texte blanc
|
|
Secondary: [────────────] → Bordure accent, fond transparent
|
|
Ghost: [ Texte → ] → Texte accent, pas de bordure
|
|
```
|
|
|
|
### 5.2 Carte Projet
|
|
|
|
| Propriété | Valeur |
|
|
|-----------|--------|
|
|
| **Objectif** | Aperçu cliquable d'un projet vedette |
|
|
| **Variantes** | Standard (grille), Compact (liste secondaires) |
|
|
| **États** | Default, Hover (élévation + ombre) |
|
|
|
|
**Structure** : Thumbnail (16:9, lazy loading) → Titre (H3) → Badges technologies (max 4)
|
|
|
|
### 5.3 Badge Technologie
|
|
|
|
| Propriété | Valeur |
|
|
|-----------|--------|
|
|
| **Objectif** | Afficher une technologie/outil |
|
|
| **Variantes** | Standard (petit), Large (page compétences) |
|
|
| **États** | Default, Hover (si cliquable) |
|
|
|
|
Exemple : `[PHP] [JavaScript] [Tailwind CSS] [+3]`
|
|
|
|
### 5.4 Champ de Formulaire
|
|
|
|
| Propriété | Valeur |
|
|
|-----------|--------|
|
|
| **Objectif** | Saisie utilisateur |
|
|
| **Variantes** | Text, Email, Textarea, Select |
|
|
| **États** | Default, Focus, Error, Disabled, Filled |
|
|
|
|
**Structure** : Label (*) → Input avec bordure → Message d'erreur inline
|
|
|
|
### 5.5 Navbar
|
|
|
|
| Propriété | Valeur |
|
|
|-----------|--------|
|
|
| **Objectif** | Navigation globale persistante |
|
|
| **Variantes** | Desktop (horizontal), Mobile (hamburger) |
|
|
| **États** | Default, Scrolled (ombre), Menu ouvert |
|
|
|
|
**Structure** : Logo → Liens navigation (état actif) → Bouton CTA → Hamburger (mobile)
|
|
|
|
### 5.6 Section Témoignage
|
|
|
|
| Propriété | Valeur |
|
|
|-----------|--------|
|
|
| **Objectif** | Afficher une citation client/employeur |
|
|
| **Variantes** | Inline (page projet), Card (section dédiée) |
|
|
|
|
**Structure** : Guillemets → Citation (italique) → Auteur (nom, rôle, entreprise) → Photo (optionnel)
|
|
|
|
### 5.7 Breadcrumb
|
|
|
|
| Propriété | Valeur |
|
|
|-----------|--------|
|
|
| **Objectif** | Indiquer la position dans la hiérarchie |
|
|
| **Usage** | Pages projet individuelles uniquement |
|
|
|
|
Format : `Accueil > Projets > Nom du Projet` (derniers éléments cliquables sauf actuel)
|
|
|
|
### 5.8 Footer
|
|
|
|
| Propriété | Valeur |
|
|
|-----------|--------|
|
|
| **Objectif** | Informations secondaires et liens réseaux |
|
|
|
|
**Structure** : Icônes réseaux sociaux → Copyright → Mentions légales
|
|
|
|
## 6. Branding & Style Guide
|
|
|
|
### 6.1 Identité Visuelle
|
|
|
|
**Thème** : Sombre (Dark Mode)
|
|
**Logo** : Imposé, disponible dans `assets/img/`
|
|
**Style** : Moderne, clean, technique mais accessible
|
|
|
|
### 6.2 Palette de Couleurs (Thème Sombre)
|
|
|
|
| Type | Hex | Tailwind Config | Usage |
|
|
|------|-----|-----------------|-------|
|
|
| **Primary** | `#FA784F` | `primary` | CTA, liens, éléments d'accent |
|
|
| **Primary Hover** | `#FB9570` | `primary-light` | Hover sur primary |
|
|
| **Primary Dark** | `#E5623A` | `primary-dark` | Active/pressed |
|
|
| **Background** | `#17171F` | `background` | Fond de page principal |
|
|
| **Surface** | `#1E1E28` | `surface` | Cartes, navbar, composants |
|
|
| **Surface Light** | `#2A2A36` | `surface-light` | Hover cartes, inputs focus |
|
|
| **Border** | `#3A3A48` | `border` | Bordures, séparateurs |
|
|
| **Text Primary** | `#F5F5F7` | `text-primary` | Titres, texte principal |
|
|
| **Text Secondary** | `#A1A1AA` | `text-secondary` | Texte secondaire, labels |
|
|
| **Text Muted** | `#71717A` | `text-muted` | Placeholders, désactivé |
|
|
| **Success** | `#34D399` | `success` | Confirmations |
|
|
| **Warning** | `#FBBF24` | `warning` | Avertissements |
|
|
| **Error** | `#F87171` | `error` | Erreurs |
|
|
| **Info** | `#60A5FA` | `info` | Informations |
|
|
|
|
### 6.3 Configuration Tailwind
|
|
|
|
```javascript
|
|
// tailwind.config.js
|
|
module.exports = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
DEFAULT: '#FA784F',
|
|
light: '#FB9570',
|
|
dark: '#E5623A',
|
|
},
|
|
background: '#17171F',
|
|
surface: {
|
|
DEFAULT: '#1E1E28',
|
|
light: '#2A2A36',
|
|
},
|
|
border: '#3A3A48',
|
|
text: {
|
|
primary: '#F5F5F7',
|
|
secondary: '#A1A1AA',
|
|
muted: '#71717A',
|
|
},
|
|
success: '#34D399',
|
|
warning: '#FBBF24',
|
|
error: '#F87171',
|
|
info: '#60A5FA',
|
|
},
|
|
},
|
|
},
|
|
}
|
|
```
|
|
|
|
### 6.4 Typographie
|
|
|
|
| Usage | Police | Fallback |
|
|
|-------|--------|----------|
|
|
| **Titres & Corps** | Inter | system-ui, sans-serif |
|
|
| **Code** | JetBrains Mono | monospace |
|
|
|
|
**Échelle Typographique** :
|
|
|
|
| Élément | Taille | Poids | Line Height |
|
|
|---------|--------|-------|-------------|
|
|
| H1 | 2.5rem (40px) | 700 | 1.2 |
|
|
| H2 | 2rem (32px) | 600 | 1.3 |
|
|
| H3 | 1.5rem (24px) | 600 | 1.4 |
|
|
| Body | 1rem (16px) | 400 | 1.6 |
|
|
| Small | 0.875rem (14px) | 400 | 1.5 |
|
|
|
|
### 6.5 Iconographie
|
|
|
|
**Bibliothèque** : Heroicons (outline navigation, solid états actifs)
|
|
**Tailles** : 24px (nav), 20px (inline), 16px (badges)
|
|
**Couleur** : Hérite du texte parent
|
|
|
|
### 6.6 Espacements
|
|
|
|
**Système** : Base 4px, classes Tailwind standard
|
|
|
|
| Token | Valeur | Usage |
|
|
|-------|--------|-------|
|
|
| sm | 8px | Entre éléments proches |
|
|
| md | 16px | Padding composants |
|
|
| lg | 24px | Entre sections |
|
|
| xl | 32px | Marges de section |
|
|
| 2xl | 48px | Séparation majeure |
|
|
|
|
## 7. Exigences d'Accessibilité
|
|
|
|
### 7.1 Niveau de Conformité
|
|
|
|
**Standard** : WCAG 2.1 Niveau AA (bonnes pratiques, pas de certification formelle)
|
|
|
|
### 7.2 Contrastes de Couleurs
|
|
|
|
| Élément | Couleurs | Ratio | Conformité |
|
|
|---------|----------|-------|------------|
|
|
| Texte principal / fond | `#F5F5F7` / `#17171F` | 15.5:1 | AAA |
|
|
| Texte secondaire / fond | `#A1A1AA` / `#17171F` | 6.8:1 | AA |
|
|
| Primary / fond | `#FA784F` / `#17171F` | 5.2:1 | AA |
|
|
| Texte / bouton primary | `#17171F` / `#FA784F` | 5.2:1 | AA |
|
|
|
|
### 7.3 Indicateurs de Focus
|
|
|
|
- **Style** : `outline: 2px solid #FA784F; outline-offset: 2px;`
|
|
- **Visibilité** : Toujours visible, jamais supprimé
|
|
- **Cohérence** : Identique sur tous les éléments interactifs
|
|
|
|
### 7.4 Navigation Clavier
|
|
|
|
| Touche | Action |
|
|
|--------|--------|
|
|
| `Tab` | Navigation séquentielle |
|
|
| `Shift+Tab` | Navigation inverse |
|
|
| `Enter` | Activation liens/boutons |
|
|
| `Escape` | Fermeture menu mobile |
|
|
|
|
**Ordre** : `tabindex` naturel du DOM respecté
|
|
|
|
### 7.5 Support Lecteur d'Écran
|
|
|
|
- **Landmarks** : `<header>`, `<nav>`, `<main>`, `<footer>`
|
|
- **Titres** : Hiérarchie H1 → H2 → H3 sans saut
|
|
- **Labels** : Tous les inputs associés à un `<label>`
|
|
- **États** : `aria-expanded`, `aria-invalid` utilisés
|
|
|
|
### 7.6 Textes Alternatifs
|
|
|
|
| Type | Traitement |
|
|
|------|------------|
|
|
| Décorative | `alt=""` |
|
|
| Informative | `alt` descriptif |
|
|
| Thumbnail projet | `alt="Aperçu du projet [Nom]"` |
|
|
| Icône avec texte | `aria-hidden="true"` |
|
|
| Icône seule | `aria-label` descriptif |
|
|
|
|
### 7.7 Cibles Tactiles
|
|
|
|
- **Taille minimum** : 44x44px
|
|
- **Espacement** : 8px entre cibles adjacentes
|
|
|
|
### 7.8 Stratégie de Test
|
|
|
|
| Outil | Usage |
|
|
|-------|-------|
|
|
| Lighthouse | Score accessibilité > 90 |
|
|
| axe DevTools | Erreurs ARIA |
|
|
| Navigation clavier | Test manuel |
|
|
| Contrast Checker | Validation ratios |
|
|
|
|
## 8. Stratégie Responsive
|
|
|
|
### 8.1 Breakpoints
|
|
|
|
| Breakpoint | Min Width | Max Width | Appareils |
|
|
|------------|-----------|-----------|-----------|
|
|
| **Mobile** | 0px | 639px | Smartphones |
|
|
| **Tablet** | 640px | 1023px | Tablettes |
|
|
| **Desktop** | 1024px | 1279px | Laptops |
|
|
| **Wide** | 1280px | — | Grands écrans |
|
|
|
|
**Classes Tailwind** : `sm:` (640px), `md:` (768px), `lg:` (1024px), `xl:` (1280px)
|
|
|
|
### 8.2 Patterns d'Adaptation Layout
|
|
|
|
| Élément | Mobile | Tablet | Desktop |
|
|
|---------|--------|--------|---------|
|
|
| Conteneur | 100% - 16px padding | 100% - 24px padding | Max 1280px centré |
|
|
| Grille projets | 1 colonne | 2 colonnes | 3 colonnes |
|
|
| Cartes accueil | Empilées | 3 colonnes | 3 colonnes |
|
|
| Formulaire | Champs empilés | Empilés | Nom/Prénom côte à côte |
|
|
|
|
### 8.3 Navigation Responsive
|
|
|
|
| Élément | Mobile | Desktop |
|
|
|---------|--------|---------|
|
|
| Menu | Hamburger → overlay | Liens horizontaux |
|
|
| CTA Contact | Dans menu hamburger | Bouton navbar visible |
|
|
| Logo | Centré/gauche | Gauche |
|
|
|
|
### 8.4 Adaptation des Interactions
|
|
|
|
| Comportement | Mobile | Desktop |
|
|
|--------------|--------|---------|
|
|
| Hover cartes | `:active` uniquement | Élévation + ombre |
|
|
| Hover boutons | `:active` | Changement couleur |
|
|
| Galerie | Swipe horizontal | Clic agrandissement |
|
|
|
|
### 8.5 Exemple Tailwind
|
|
|
|
```html
|
|
<!-- Grille projets responsive -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<!-- Cartes projet -->
|
|
</div>
|
|
```
|
|
|
|
## 9. Animations & Micro-interactions
|
|
|
|
### 9.1 Principes de Motion Design
|
|
|
|
1. **Subtilité** — Guider l'œil sans distraire du contenu
|
|
2. **Intention** — Chaque animation a un but (feedback, orientation)
|
|
3. **Performance** — Uniquement `transform` et `opacity` (GPU-accelerated)
|
|
4. **Accessibilité** — Respect de `prefers-reduced-motion`
|
|
|
|
### 9.2 Animations Clés
|
|
|
|
| Animation | Élément | Durée | Easing |
|
|
|-----------|---------|-------|--------|
|
|
| Fade-in Hero | Titre, sous-titre, CTA | 600ms (staggered +100ms) | ease-out |
|
|
| Hover Cartes | Cartes projet | 200ms | ease-in-out |
|
|
| Hover Boutons | CTA | 150ms | ease |
|
|
| Menu Mobile | Overlay | 300ms | ease-out |
|
|
| Focus Input | Champs formulaire | 150ms | ease |
|
|
| Spinner | Bouton envoi | 1000ms loop | linear |
|
|
| Confirmation | Toast succès | 300ms | ease-out |
|
|
|
|
### 9.3 Exemples CSS
|
|
|
|
```css
|
|
/* Hover carte projet */
|
|
.project-card {
|
|
transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
|
|
}
|
|
.project-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Hover bouton primary */
|
|
.btn-primary {
|
|
background-color: #FA784F;
|
|
transition: background-color 150ms ease;
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: #FB9570;
|
|
}
|
|
|
|
/* Focus input */
|
|
input:focus {
|
|
border-color: #FA784F;
|
|
box-shadow: 0 0 0 3px rgba(250, 120, 79, 0.2);
|
|
}
|
|
```
|
|
|
|
### 9.4 Accessibilité Motion
|
|
|
|
```css
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
```
|
|
|
|
## 10. Considérations de Performance
|
|
|
|
### 10.1 Objectifs
|
|
|
|
| Métrique | Objectif | Source PRD |
|
|
|----------|----------|------------|
|
|
| **Lighthouse Performance** | > 90 | NFR9 |
|
|
| **First Contentful Paint (FCP)** | < 1.5s | NFR10 |
|
|
| **Cumulative Layout Shift (CLS)** | < 0.1 | NFR11 |
|
|
| **Time to Interactive (TTI)** | < 3s | NFR12 |
|
|
| **CSS après purge** | < 50kb | Story 1.2 |
|
|
|
|
### 10.2 Stratégies Images
|
|
|
|
| Technique | Implémentation |
|
|
|-----------|----------------|
|
|
| Format WebP | `<picture>` avec fallback JPG/PNG |
|
|
| Lazy loading | `loading="lazy"` sur toutes les images |
|
|
| Dimensions | `width` et `height` explicites (évite CLS) |
|
|
| Thumbnails | Max 400px, qualité 80% |
|
|
|
|
```html
|
|
<picture>
|
|
<source srcset="image.webp" type="image/webp">
|
|
<img src="image.jpg" alt="..." width="400" height="225" loading="lazy">
|
|
</picture>
|
|
```
|
|
|
|
### 10.3 Stratégies CSS/JS
|
|
|
|
**CSS (Tailwind)** :
|
|
- Purge automatique via config `content`
|
|
- Minification avec `--minify`
|
|
- Objectif : < 50kb
|
|
|
|
**JavaScript** :
|
|
- Vanilla JS (pas de framework)
|
|
- Attribut `defer` sur les scripts
|
|
- Scripts en fin de `<body>`
|
|
|
|
### 10.4 Stratégies Fonts
|
|
|
|
```html
|
|
<link rel="preload" href="fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
|
|
```
|
|
|
|
- `font-display: swap` (évite FOIT)
|
|
- Fallback : `system-ui, sans-serif`
|
|
|
|
### 10.5 Outils de Test
|
|
|
|
| Outil | Usage |
|
|
|-------|-------|
|
|
| Lighthouse | Audit complet (Chrome DevTools) |
|
|
| PageSpeed Insights | Test conditions réelles |
|
|
| WebPageTest | Analyse waterfall |
|
|
|
|
## 11. Prochaines Étapes
|
|
|
|
### 11.1 Actions Immédiates
|
|
|
|
1. **Revue avec les parties prenantes** — Valider cette spécification UI/UX
|
|
2. **Passage à l'Architecte** — Transmettre ce document pour l'architecture technique
|
|
3. **Préparation des assets** — Rassembler le logo, préparer les images des projets
|
|
|
|
### 11.2 Checklist de Validation Design
|
|
|
|
- [x] Objectifs UX et personas définis
|
|
- [x] Architecture de l'information complète
|
|
- [x] Flux utilisateurs documentés
|
|
- [x] Wireframes des écrans clés
|
|
- [x] Composants UI identifiés
|
|
- [x] Palette de couleurs (thème sombre) validée
|
|
- [x] Typographie définie
|
|
- [x] Exigences d'accessibilité documentées
|
|
- [x] Stratégie responsive définie
|
|
- [x] Animations spécifiées
|
|
- [x] Objectifs de performance établis
|
|
|
|
### 11.3 Handoff vers l'Architecte
|
|
|
|
| Élément | Référence |
|
|
|---------|-----------|
|
|
| Stack technique | PRD Section 4 |
|
|
| Palette couleurs | Section 6.2 |
|
|
| Config Tailwind | Section 6.3 |
|
|
| Composants | Section 5 |
|
|
| Performance | Section 10 |
|
|
|
|
### 11.4 Questions Ouvertes
|
|
|
|
| Question | Statut |
|
|
|----------|--------|
|
|
| Contenu exact de l'accroche Hero | À rédiger |
|
|
| Sélection des 5-10 projets vedettes | À définir |
|
|
| Photos/visuels pour "Me Découvrir" | À préparer |
|
|
| Témoignages clients | À collecter |
|
|
|
|
---
|
|
|
|
*Document généré par Sally (UX Expert) - Méthode BMAD*
|
|
|