Itérer son design avec invision

Publié il y a plus de 2 ans
Victor Darras
Votre formateur
Victor Darras

Mordu de l'Internet dès mon plus jeune âge, j'ai vite pris goût à l'image et tout particulièrement au webdesign. Après un BTS de Design de communication en 2011, j'ai commencé à m'intéresser plus précisément à l'expérience utilisateur au coeur du processus créatif.

De Sketch à SASS en passant par jQuery, j'ai toujours aimé découvrir et explorer de nouvelles solutions, de nouvelles technologies et garder une certaine polyvalence.

Où nous retrouver ?

Catégories : UI / UX

Présentation d'invision un service pour versionner, partager, commenter et itérer ses design.

Afficher le transcript complet de la vidéo

Bienvenue dans cette nouvelle vidéo Hackademy qui portera sur un outil bien pratique que je tenais à vous faire découvrir : InVision.

Cet outil vous permet de gérer vos projets de webdesign, de la maquette à l’intégration.

InVision se présente comme une solution à plusieurs problèmes auxquels sont confrontés les webdesigners. Nous verrons dans cette vidéo quels sont ces problématiques et comment l’application peut nous aider.

Avant de commencer, InVison est un service pensé tant pour un freelance que pour une entreprise et est payant au delà d’un seul projet (ce qui vous permet de l’essayer sans soucis).
Sachant qu’un projet est une app mobile, tablette OU desktop vous pouvez oublier la version gratuite pour un site responsive…

Le service met à votre disposition une interface web complète pour gérer vos projets ainsi qu’une application desktop de synchronisation que vous pourrez tout aussi bien remplacer par DropBox (et tant mieux puisqu’elle n’est disponible que sur OSX).

Posons nous une première question, un outils de synchronisation ? pourquoi faire ?

Versioning de fichier design (.psd, .sketch)

Si vous avez un peu de bouteille en tant que développeur vous avez déjà eu l’occasion d’utiliser un système de versioning tel que GIT, mais qu’est-ce que ça peut donner pour le webdesign ?

Le versioning pour des éléments visuels permet de garder un aperçu de chacune des étapes créatives passées sur vos maquettes, une bouton qui bouge, une typo qui change, etc…

Dans InVision chaque version est enregistrée avec un screenshot et une date. Vous pourrez à tout moment télécharger un ancien fichier source afin de reprendre votre maquette là où bon vous semble.

Fier utilisateur de Sketch, InVision sait automatiquement récupérer les différentes pages définies au sein de mon fichier. À priori, la même fonctionnalité existe avec les artboards d’Illustrator et est remplacée par un ensemble de symbole pour Photoshop. Personne n’est donc laissé à l’abandon (sauf les utilisateurs de Fireworks mais vous l’avez bien cherché).

Histoire d’aller jusqu’au bout sachez que vous pourrez aussi ajouter les polices de caractère utilisées dans votre maquette afin de permettre à InVision de les afficher avec le plus de précision possible. J’imagine que si ce n’est pas fait automatiquement c’est pour s’assurer que les utilisateurs sont conscients des droits d’utilisation des-dîtes polices.

Outils de prototypage

Voyons maintenant l’outil de prototypage. Une fois que vous aurez uploadé votre fichier source, Invision récupère les différentes pages que vous pouvez visionner sur cet écran.

Nous pouvons dans un premier temps redéfinir l’ordre des pages, utile tant que nous n’avons pas défini de navigation particulière.
Regardons ce que ça donne en passant les pages avec le clic ou avec les touches directionnelles du clavier.

Passons en mode Build. Nous pouvons maintenant mettre en place des hotspots, sorte de liens entre nos vues, en commençant par la sidebar de navigation.
Comme vous pouvez le remarquer nous pouvons créer un hotspot vers n’importe quelle vue, l’activer au “clic” comme au “hover” (survol) et garder la position du scroll de l’utilisateur. Sur un projet type “Mobile” vous aurez ici la possibilité d’ajouter une transition entre les vues afin d’offrir un aperçu plus réaliste à vos collaborateurs.

Il est possible de gérer des templates de hotspot, concrètement cela revient à définir une navigation commune et fixe entre plusieurs vues.
Nous aurons aussi la possibilité d’appliquer ce template à plusieurs pages d’un coup. Idéal pour une navigation en sidebar comme la nôtre c’est surtout indispensable une fois qu’on a plus de 3 pages.

Processus de retour client

Maintenant que nous avons défini une navigation logique, nous pouvons partager l’application avec nos collaborateurs afin de récolter leurs avis éclairés sur ce webdesign tout neuf.

Passons dans la peau du collaborateur éclairé afin d’ajouter des commentaires sur nos maquettes.
Comme dans la vue de l’éditeur nous pouvons passer les pages ou utiliser la navigation que nous venons de créer.

Après avoir activé le mode “Commentaire” : il nous suffit de cliquer sur la maquette pour ouvrir un formulaire où nous pourrons définir qui doit être notifié de notre message ou qui nous voudrions inviter à cette nouvelle conversation.
Notez l’importance d’un système de conversations, bien plus pratique lorsqu’il s’agit de discuter, qu’un simple commentaire.

Revenons maintenant à la gestion de projet, vous remarquerez que notre conversation est présente, et que nous pouvons y répondre rapidement. Il est aussi possible de clore cette discussion, comme on fermerait un ticket de bug.

Collaboration en temps réel

L’équipe d’InVision a mis en place récemment un outils baptisé LiveShare.
C’est un outil en temps réel de collaboration dans le navigateur (sans le rendu souvent maladroit des partage d’écran traditionnels).
LiveShare vous permet donc d’afficher les curseurs d’autres collaborateurs,
de dessiner directement sur les maquettes (idéal pour exprimer une idée complexe) et de gérer une conférence audio tout en gardant le contrôle de la réunion.

L’idée est ici d’offrir une nouvelle alternative aux fils de conversations gérés par les commentaires. Plus rapide, réactif et facile pour chacun, c’est sûrement le moyen le plus direct pour discuter autour d’une maquette.

Gestion de plusieurs projets

Comme je l’expliquais en début de vidéo, il est possible de gérer plusieurs projets en parallèle. Chaque projet est lié à un type d’écran précis, probablement pour offrir un meilleure immersion lors de la visualisation des vues.

Vous pouvez aussi définir un certains nombre de collaborateur par projet, qui seront notifiés ou non lorsqu’une nouvelle conversation est ouverte ou même lorsque l’une des vue est mise à jour.

En bref

Entre un design sobre et épuré, un rendu très professionnel pour vos démos et une FAQ technique aux petits oignons, InVision et vraiment agréable à utiliser.

Tant pour Sketch, Illustrator ou Photoshop, c’est un plaisir de voir que l’outil gère les fichiers propriétaires et nous permet de s’affranchir de beaucoup de tâches répétitives.

Je vous invite donc à tester l’application, à partager ce genre d’outils qui font radicalement avancer notre métier et bien sûr à partager cette vidéo qui, je l’espère, vous aura appris quelque chose.