📅 S07 – UX/UI & Maquettage

  • PĂ©riode : du 15 au 26 dĂ©cembre 2025 – Semaines 51–52
  • ThĂ©matique : Concevoir des interfaces web centrĂ©es utilisateur
  • Jour fĂ©riĂ© / vacances : âś… Vacances d’automne du 27 dĂ©cembre au 5 janvier (juste après la session)

🧭 Objectifs de la session

  • Comprendre les principes fondamentaux de l’UX (expĂ©rience utilisateur) et de l’UI (interface utilisateur).
  • Apprendre Ă  concevoir une maquette fonctionnelle Ă  l’aide d’un outil de maquettage (Figma).
  • RĂ©aliser une refonte visuelle d’un blog sur la base d’un audit UX.
  • Produire un prototype de maquette exploitable pour les prochaines sessions (fil rouge).

🧠 Cette session amorce une réflexion critique sur l’ergonomie et le design responsive, en parallèle du développement technique.

📚 Unités d’apprentissage mobilisées

  • UA 1.1.1 – Identifier le rĂ´le du maquettage – (2h) – rĂ©fĂ©rentiel
  • UA 1.1.2 – DĂ©couvrir les outils de maquettage – (4h) – rĂ©fĂ©rentiel
  • UA 1.2.1 – ExpĂ©rience utilisateur (UX) – (4h) – rĂ©fĂ©rentiel
  • UA 1.2.2 – Interface utilisateur & responsive – (6h) – rĂ©fĂ©rentiel

🧩 Prototype

Titre : Maquette Figma – Blog Solicode

Description : Créer une maquette statique d’une page d’accueil de blog (section header, articles récents, menu, pied de page), en utilisant Figma ou un outil équivalent. Le prototype doit inclure :

  • des blocs fonctionnels bien identifiĂ©s
  • un enchaĂ®nement logique
  • des indications de hiĂ©rarchie visuelle (titres, couleurs, espacement)

Contraintes :

  • Pas de code, livrable purement visuel
  • Export PDF ou lien Figma recommandĂ©

🧪 Mini-Projet

Titre : Audit UX & refonte UI

Description : Analyser l’interface actuelle d’un site de blog (réel ou fictif) et produire une refonte UI guidée par les principes UX.

Livrables attendus :

  • Fichier d’analyse UX (forces, faiblesses, amĂ©liorations)
  • Nouvelle maquette de l’interface (page d’accueil minimum)
  • PrĂ©sentation synthĂ©tique de la dĂ©marche

Contraintes techniques :

  • Figma ou outil Ă©quivalent
  • Export clair (PDF, PNG ou lien)
  • Travail individuel ou en binĂ´me

📊 Grille d’évaluation par niveau

  • Niveau 1 : Maquette simple, Ă©lĂ©ments de base positionnĂ©s
  • Niveau 2 : Bonne hiĂ©rarchie visuelle, organisation logique
  • Niveau 3 : Refonte UX cohĂ©rente, justification des choix, livrable exploitable