# 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** : `
`, `