GratuitDébutant2 h 08

Concevoir un wireframe

Apprenez à passer d'une idée à une structure d'écran solide : choisir le bon niveau de fidélité, organiser l'information avec un tri de cartes, poser une grille et un zoning, annoter vos choix, puis transformer un croquis papier en wireframe Figma testable.

Ce que vous saurez faire

  • Choisir entre wireframe basse et haute fidélité selon l'objectif
  • Organiser les contenus d'un site ou d'une application avec un tri de cartes et un plan de navigation
  • Découper un écran en zones à l'aide d'une grille et d'un zoning
  • Utiliser des patterns d'interface courants pour les listes, formulaires et navigations
  • Annoter un wireframe pour que l'équipe comprenne chaque choix
  • Transformer un croquis papier en wireframe Figma prêt à être testé

Prérequis conseillés

Les bases de l'UX

Plan du cours

Partie 1 · Comprendre le wireframe et organiser l'information42 min

  1. Le wireframe et ses niveaux de fidélité10 min
  2. L'architecture de l'information11 min
  3. Le tri de cartes pour classer les contenus11 min
  4. Quiz : comprendre le wireframe et organiser l'information10 min

Partie 2 · Structurer une page43 min

  1. Grilles et zoning : découper l'écran11 min
  2. Les patterns d'interface courants11 min
  3. Annoter un wireframe et soigner les contenus11 min
  4. Quiz : structurer une page10 min

Partie 3 · Du croquis papier au wireframe Figma43 min

  1. Commencer par le croquis papier10 min
  2. Construire le wireframe dans Figma12 min
  3. Tester le wireframe et itérer11 min
  4. Quiz : du croquis papier au wireframe Figma10 min