5XUI — Projet Web UI/UX
Slides de présentation du cours
Pourquoi ce cours ?
Vous savez coder une page. Ce cours vous apprend à concevoir un site : partir d'un humain et d'un besoin, le formaliser dans un cahier des charges, lui donner une identité visuelle, le réaliser avec un framework moderne, puis le mettre en ligne et le faire trouver.
C'est aussi la répétition générale de votre travail de fin d'études : le cahier des charges que vous rédigez ici est celui de votre TFE, et le portfolio que vous construisez est votre premier vrai produit, dont vous êtes le client.
Acquis d'apprentissage visés
Au départ d'un projet individuel validé par le chargé de cours, en prenant en compte les principes généraux d'accessibilité, vous serez capables :
- de produire un cahier des charges et son dossier technique répondant à la proposition ;
- de produire les documents UI, UX et d'inclusive design (accessibilité) permettant d'y répondre ;
- de produire et déployer l'application web répondant aux consignes ;
- de justifier vos choix dans la présentation de la démarche UX réalisée.
Pour le degré de maîtrise, on tient compte de la précision et de la complétude du cahier des charges, de la qualité des documents UI/UX, de la pertinence des choix techniques et de leur justification, et de votre autonomie face à la documentation.
Deux volets, un fil rouge
Le cours alterne deux volets qui se répondent :
| Volet A — Design & développement | Volet B — Concevoir et piloter un projet |
|---|---|
| Révisions p5.js (dessin, couleurs, variables, conditions, boucles, art génératif), intégration avec Vite | Qu'est-ce qu'un cahier des charges, et pourquoi c'est un brief |
| Design : tendances web 2026, logo, charte graphique, maquettes | Client, objet et objectifs du site, public cible et persona |
Vue.js : Node/NPM, structure d'un projet, TailwindCSS, composants, ref, v-model, v-if, v-for, events, Vue Router |
Concurrence, contenu, arborescence et navigation |
| Déploiement : Vercel, hébergement OVH | Charte graphique, accessibilité |
| Référencement : SEO, balises OG, Google Analytics | Planning, budget, contraintes techniques, justification des choix |
Le fil rouge est votre portfolio personnel : vous en dessinez le logo, la direction artistique et les maquettes pendant le volet design, puis vous le codez en Vue + Tailwind, le déployez sur Vercel et le référencez. À la fin de l'année, il est en ligne et il vous ressemble. C'est ce que vous présentez à l'examen, avec le cahier des charges de votre TFE.
L'IA
Les assistants, les générateurs d'images et les agents sont autorisés et encouragés. Mais l'IA n'a ni intention, ni goût, ni client : c'est vous qui les apportez. Vous êtes le directeur artistique de vos outils. On vous évalue sur la direction, pas sur l'exécution. Le chapitre d'introduction y est consacré. Et pour diriger, il faut savoir de quoi on parle : c'est pour ça qu'on apprend aussi les bases de Vue.js à la main.
Ce cours et ses documents ont été écrits en collaboration avec Claude Fable 5 et GPT-5.6.