• 8 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 09/06/2022

Entrainez-vous : créez un prototype à partir de wireframes

À vous de jouer !

Le moment est venu de passer à la pratique en réalisant des wireframes sous la forme de croquis que vous allez animer dans InVision (il vous suffit de créer un compte à partir d'une adresse e-mail). En réalisant cette activité, vous validerez des compétences opérationnelles !

Imaginez-vous dans la situation suivante : vous travaillez dans une agence Web et vous devez réaliser un prototype cliquable, qui devra être partagé avec votre équipe projet pour qu’elle puisse l’utiliser et le commenter.

Vous allez donc créer un prototype cliquable avec un niveau de fidélité bas. Nous vous proposons de partir d'un service déjà existant qui va vous servir de modèle pour faire vos wireframes : à vous de choisir, ça peut donc être une application e-commerce, un réseau social, une application métier etc.

Vous allez donc dessiner, dans un premier temps, entre 5 à 10 wireframes à la main à partir du service de votre choix. Puis, dans un second temps, vous allez créer l'enchaînement de vos écrans dans InVision.

Une fois que les écrans seront importés dans InVision et que votre prototype sera créé (avec un nom), vous allez créer l'enchaînement entre vos écrans pour en ajoutant des interactions pour faire une interface cliquable !

Vous allez donc :

  1. Réaliser les croquis des wireframes principaux de vos écrans à partir d'un service existant de votre choix (mobile ou web) ;

  2. Créer un compte dans InVision via une adresse mail ;

  3. Créer un nouveau prototype que vous allez nommer ;

  4. importer les écrans dans InVision après avoir scanné vos croquis ;

  5. Créer l’enchaînement entre vos croquis pour réaliser un prototype cliquable. Un enchainement par croquis est nécessaire

  6. Partager le lien de votre prototype pour valider l'activité

Avant de passer à la suite, utilisez votre prototype depuis différents navigateurs pour vérifier son affichage. N'hésitez pas, également, à sonder vos proches sur votre travail pour recueillir leurs avis et suggestions.

Vérifiez votre travail

Les éléments suivants doivent être présents pour valider l'exercice :

  • Les écrans doivent s'enchaîner les uns avec les autres à partir des interactions faites dans InVision (qui reproduisent celle du service pris comme référence). Une interaction est nécessaire entre chaque écran.

Exemple de certificat de réussite
Exemple de certificat de réussite