TP 5 : Concevoir les wireframes d'une application
Cours UI/UX Design · Chapitre 08 : Phase de conception, wireframes et prototypes
==========================================================================

Contenu de l'archive
--------------------
definition/
  dossier-definition-cantinecampus.pdf ... Personas (Sarah, Hélène, Yanis), fiche de
                                           cadrage, proposition de valeur, les trois
                                           solutions retenues et le parcours futur.
                                           À utiliser en complément de votre TP 4, ou à
                                           sa place s'il est incomplet.
exemples/
  exemple-A.png à exemple-F.png ........... Six images à classer (partie 1) : croquis,
                                           wireframe, maquette, prototype… Elles montrent
                                           BiblioCampus, l'application d'exemple du cours.
modeles/
  grille-wireframes.xlsx .................. Le classeur à remplir pendant tout le TP
  gabarit-mobile.pdf ...................... 12 cadres de téléphone à imprimer pour les
                                           croquis (partie 3)
  fiche-ecran.md .......................... Modèle de fiche d'écran (partie 2)
  compte-rendu-test-couloir.md ............ Consignes et grille du test de couloir (partie 8)

Outils
------
- Balsamiq : version d'essai gratuite. Si elle n'est pas disponible, réalisez
  toutes les maquettes fil de fer dans ioDraw.
- ioDraw : en ligne, gratuit, pour les diagrammes de flux et les écrans secondaires.
- Figma : compte gratuit, pour le prototype cliquable.
- InVision a fermé ses services le 31 décembre 2024 : ses principes (zones
  cliquables, partage, commentaires) s'appliquent dans Figma.

Où ranger vos livrables (dépôt ui-ux-design-bts)
------------------------------------------------
projet-cantinecampus/04-prototyper/croquis/      photos des croquis
projet-cantinecampus/04-prototyper/wireframes/   flux et exports PNG (E01-menu-du-jour.png…)
projet-cantinecampus/04-prototyper/prototype/    captures du prototype
projet-cantinecampus/04-prototyper/test/         compte rendu du test de couloir
projet-cantinecampus/04-prototyper/liens-figma.md  liens de partage du fichier Figma

Règles du classeur
------------------
- Cellules jaunes : à remplir. Cellules grises : calculées, ne pas modifier.
- Les écrans portent un code (E01 à E20) ; utilisez les mêmes codes partout :
  inventaire, flux, vérification, liens du prototype, noms des cadres Figma.
- Onglet « Prototype » : saisissez les points de départ des tâches ; ils ne sont pas
  comptés comme écrans orphelins.
- L'onglet « Mode d'emploi » affiche le bilan de tous les points de contrôle.

L'application, ses usagers et le dossier de définition sont fictifs : ils ont été
créés pour ce TP. Le test de couloir se fait avec de vrais participants.
