Tutoriel Invision : réaliser un mockup avec Invision

Rédigé par Xavier

Livres et ressources UX | Méthodes et logiciels UX | UI design | UX design

24 octobre 2019

Puissant outil de maquettage, Invision permet aux concepteurs de créer des interfaces interactives. Cet outil est intuitif, pratique et surtout simple à utiliser. Vous pouvez vous en servir pour ajouter des animations fonctionnelles afin de transformer chaque écran statique en un prototype interactif cliquable.
C’est sous la forme d’une plateforme de travail collaboratif que se présente Invision. Après l’élaboration d’une maquette d’interface interactive, vous pouvez la partager et ainsi la présenter à qui vous voulez. Cela permet d’avoir des commentaires essentiels pour éventuellement améliorer le travail. Suivez le tutoriel ci-après et vous aurez un bon exemple d’utilisation d’Invision.

Tutoriel pour réaliser un mockup avec Invision

Votre souhait est de créer un site web ou une application et vous voulez que tout soit parfait. Vous pouvez commencer par réaliser un mockup. Il s’agit d’un prototype qui permettra de valider l’attrait de votre site ainsi que son usage réel à partir d’une simulation.

Présentation de Invision Studio


Le tutoriel invision suivant vous montrera comment vous y prendre pour réaliser votre mockup en toute simplicité.

  1. La première chose à faire est de réaliser un croquis. Grâce à celui-ci, vous pourrez schématiser tous les éléments que vous voulez voir apparaitre sur votre interface. Ce croquis est réalisable à la main, sur une simple feuille.
  2. Ensuite, lancez Invision et choisissez un type de projet. Vous pouvez sélectionner « Create New Prototype ».
  3. Puis, nommez votre projet. Une fois que c’est fait, faites un clic sur « Get started » pour la création de votre mockup.
  4. À ce niveau, en principe, votre projet est créé. Mais il est vide. Il vous revient donc de l’enrichir en important vos visuels au format .jpeg ou .png en cliquant sur « Browse your files ».
  5. Sur votre croquis papier, vous avez certainement défini des interactions. Il est temps de les créer, ce qui impose la disposition du curseur sur votre première image.
  6. Ensuite, vous devez cliquer sur « View Screen » afin de lancer l’éditeur. En arrivant sur celui-ci, vous serez en mode « Preview ». Les autres visuels peuvent être sélectionnés directement toujours en étant dans l’éditeur.
  7. Dans les paramètres, vous avez la possibilité de modifier le rendu de l’interface. L’onglet « Build Mode », situé en bas de votre écran, vous permet d’ajouter des actions. Notez que l’ajout d’une action n’est pas difficile à réaliser. En effet, à l’aide de votre curseur, vous n’avez qu’à sélectionner un ou plusieurs éléments. Vous constaterez l’ouverture d’une fenêtre vous demandant, entre autres, la destination et le type d’animation de votre écran lors de la transition.
  8. Après l’ajout des actions qui vous intéresse, vous devez appuyer sur « Save » afin de faire la sauvegarde.
  9. Vous reviendrez ensuite en « Preview mode », ce qui vous permettra de voir le résultat de votre travail. Avec Invision, vous avez la possibilité de faire des réglages quand vous voulez pour améliorer votre mockup. Dans tous les cas, après la configuration de toutes vos slides, vous pouvez tester le résultat en revenant sur le premier onglet, à savoir le « Preview Mode ».

Tutoriel invision : les 5 notions de base à connaître !

  1. Importation d’esquisse – Importation – Copier et coller
  2. Une brève visite guidée de l’interface utilisateur – Toile – Panneau de gauche (calques, composants, etc.) – Panneau Inspecteur – Principales options
  3. Planches – tailles de planche de jeu – paramètre des prototypes – Pages vs Artboards
  4. Layouts & Grids – colonnes – rangées – grilles
  5. Ajout de formes – Snapping- tailles – touches de raccourci



La prise en main d’Invision est rapide, ce qui en fait une bonne solution pour les débutants. Même si vous n’avez jamais réalisé de mockup dans le passé, vous vous en sortirez si vous faites le choix de cet outil de maquettage.

Lire aussi :

Lire aussi…