1.1 – Comprendre le maquettage

🏆 Compétence cible

C1 – Maquetter une application (20h – Niveau 1)
L’apprenant doit être capable de concevoir et d’expliquer une maquette fonctionnelle d’un site ou d’une application web, en identifiant le rôle du maquettage et en utilisant des outils adaptés.

🧩 Micro-compétence

1.1 – Comprendre le maquettage (10h)
Découvrir les bases du maquettage, ses objectifs dans le cycle de vie d’un projet web et s’initier aux outils de conception d’interfaces (wireframes et prototypage).

📝 Description de l’autoformation

Cette autoformation initie l’apprenant aux principes fondamentaux du maquettage et à son importance dans un projet web. Elle explique le rôle des wireframes dans la communication entre les différentes parties prenantes et enseigne l’utilisation d’outils modernes (comme Figma) pour créer des maquettes simples et interactives.

UA 1.1.1 – Identifier le rôle du maquettage

  1. 🎯 Objectif global

    • Comprendre ce qu’est le maquettage, son rôle dans un projet web et la manière dont il sert de base pour la conception et la communication entre les parties prenantes.

  2. 📚 Liste des chapitres

    • Chapitre 1 : Qu’est-ce qu’un wireframe ? (1h).
    • Chapitre 2 : Cycle de vie d’un projet web (1h).

  3. 📄 Livrable attendu

    • Réaliser un schéma filaire (wireframe) simple d’une page d’accueil de site web en identifiant les sections principales (en-tête, navigation, contenu, pied de page), accompagné d’une note expliquant le rôle de chaque partie.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Identifier correctement les éléments constitutifs d’un wireframe et expliquer leur rôle.
    • Niveau 2 : Appliquer le maquettage sur un exemple concret (page d’accueil).
    • Niveau 3 : Créer un wireframe complet et justifier les choix d’organisation et de structure.

UA 1.1.2 – Découvrir les outils de maquettage

  1. 🎯 Objectif global

    • Découvrir et utiliser les principaux outils de maquettage pour concevoir des prototypes d’interface simples, en particulier Figma.

  2. 📚 Liste des chapitres

    • Chapitre 3 : Outils de maquettage (1h).
    • Chapitre 4 : S’initier à Figma (1h).
    • Chapitre 5 : Créer une maquette simple (2h).

  3. 📄 Livrable attendu

    • Réaliser une maquette interactive basique (par exemple, une page de login ou une page d’accueil) avec Figma ou un outil équivalent, et fournir un lien de partage ou un export d’écran.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Identifier les principales fonctionnalités d’un outil de maquettage.
    • Niveau 2 : Créer une maquette simple en utilisant les composants et grilles de base.
    • Niveau 3 : Réaliser une maquette organisée et interactive (navigation entre deux ou trois écrans).