InVision Studio : aperçu et examen

InVision Studio est un outil de prototypage et d'animation qui vous permet de créer rapidement des conceptions d'écran vectorielles avancées grâce à des calques flexibles et un canevas infini. Il est considéré comme l'un des meilleurs outils de prototypage haute fidélité. Avec InVision Studio, vous pouvez accélérer votre flux de travail ; créer des prototypes intéressants et interactifs ; communiquer vos conceptions à l'équipe et aux clients ; tester vos conceptions ; et éliminez les questions, les préoccupations et les changements de conception avant la phase de développement.

InVision Studio fait partie de la suite d'outils InVision, qui comprend également InVision Cloud, où vous pouvez vous connecter, stocker et partager votre flux de travail de conception de produit complet, et InVision DSM, un gestionnaire de système de conception et une bibliothèque où vous pouvez stocker et contrôler tous vos la marque et les composants UX. InVision Studio peut être utilisé sur Mac et Windows. Vous pouvez également importer des fichiers Sketch.

Fonctionnalités d'InVision Studio

Après avoir téléchargé l'application InVision Studio, vous aurez un choix de projets à créer. Après avoir choisi ce que vous voulez concevoir, vous aurez une visite guidée de l'interface.

Pour ajouter une couche ou un composant, cliquez sur le signe plus en haut. Lorsque vous ajoutez un composant, toutes vos options s'affichent sur la droite.

Passons en revue certaines des fonctionnalités remarquables d'InVision.

Redimensionnez et recadrez les images sans masques.

Cette fonctionnalité, appelée recadrage d'image intelligent, recadre automatiquement les images lorsque vous changez de taille. C'est similaire à la création d'un remplissage d'image dans Sketch, puis à son réglage sur « remplissage », mais en moins d'étapes et de manière plus intuitive. Le recadrage d'image intelligent est destiné aux images avec un point focal proche du centre. C'est aussi mieux si vous voulez recadrer dans un cercle, un rectangle ou un rectangle arrondi. Pour les images qui ont un point focal différent ou une forme plus intéressante, vous voudrez créer un masque pour accéder à plus d'options de personnalisation.

Source : LearnInVisionStudio.com

Corrigez les éléments lorsque vous faites défiler.

La correction de l'en-tête et du pied de page n'est pas nouvelle pour InVision, mais la correction d'autres éléments l'est. Réglez le défilement sur horizontal, vertical ou les deux, puis choisissez l'élément que vous souhaitez corriger en cliquant sur l'icône représentant une épingle en haut à droite.

Liez plusieurs plans de travail en une seule animation.

Le minuteur vous permet de contrôler plusieurs plans de travail que vous souhaitez transformer en une seule animation. Vous pouvez également boucler une animation pour que le dernier plan de travail pointe vers le premier. Ou, vous pouvez avoir une animation en plusieurs étapes directement vers une autre partie de votre conception. Les animations complexes comme celle-ci sont idéales pour les intros et les outros vidéo.

Créez des déclencheurs de balayage pour les animations de parallaxe.

Les déclencheurs de balayage peuvent créer des effets de parallaxe et d'autres types d'animations qui se produisent lors du défilement.

Créez des prototypes réactifs sans écrire de code.

Avec des prototypes réactifs, vous pouvez tout faire en fonction du pourcentage et redimensionner chaque élément en fonction de la taille du plan de travail. Vous pouvez ensuite créer des prototypes qui répondent à toutes sortes d'écrans. Cela facilite la création de maquettes de différentes tailles. De plus, définir un design comme « redimensionnable » dans Studio le redimensionnera automatiquement lorsqu'il sera affiché dans le navigateur.

Source : LearnInVisionStudio.com

Mettez en miroir des prototypes sur votre téléphone.

Si vous souhaitez tester une animation ou un prototype sur votre téléphone, vous pouvez le partager, sélectionner « miroir », puis scanner le code QR dans l'application mobile.

Utilisez des raccourcis de type Sketch.

Si vous utilisez actuellement Sketch, vous serez déjà familiarisé avec les raccourcis utilisés par InVision Studio – à peu près tous sont les mêmes, en particulier en ce qui concerne l'inspecteur, les calques et la barre d'outils.

Basculez entre les thèmes clairs et sombres.

Les non-concepteurs peuvent ne pas réaliser à quel point cette fonctionnalité est utile. Lorsque vous concevez une interface claire, le contraste supplémentaire d'un thème sombre peut être utile (et vice versa).

Collaborez avec l'équipe en temps réel.

La collaboration et le flux de travail sont simplifiés et les membres de l'équipe peuvent concevoir et commenter en temps réel. Avec la synchronisation globale et les mises à jour en temps réel, personne ne sera exclu.

Conception avec InVision Studio sur un navigateur

Je veux vous montrer rapidement ce que c'est que de travailler avec la version navigateur d'InVision Studio. Nous allons brièvement passer en revue la conception d'une planche, la création d'un prototype et l'utilisation du mode à main levée.

Concevoir un tableau

Votre centre de commande se trouve en haut à droite de l'écran. Les cinq icônes représentent :

• Modifier l'en-tête
• Définir le type de mise en page
• Paramètres
• commentaires
• Partager

Modifier l'en-tête

J'ai joué un peu avec la tête. Après avoir cliqué sur "Modifier l'en-tête", ces options sont apparues :

J'ai remplacé l'image et le texte, je l'ai légèrement flouté et j'ai ajouté une légère superposition pour faire ressortir le texte. J'aime particulièrement l'option "Taille" - il vous suffit de passer votre souris dessus et de choisir parmi trois tailles.

Définir le type de mise en page

J'ai ensuite changé le type de mise en page en « Meticuleux ». C'est pour les blocs de contenu sous l'en-tête, qui apparaîtront lorsque vous faites défiler vers le bas.

Modification de sections supplémentaires

Si vous passez la souris à droite du titre de la section, vous verrez trois icônes. La flèche vers le bas est « Déplacer la section vers le bas » et le « X » est « Supprimer le titre de la section ». Si vous le supprimez puis changez d'avis, vous pouvez simplement survoler la même zone et vous aurez la possibilité d'ajouter un nouveau titre de section.

En cliquant sur le signe plus à droite de la flèche et sur « X », vous obtiendrez un nouveau menu. De gauche à droite, les icônes représentent :

• Ajouter un échantillon de couleur
• Ajouter une note
• Téléverser un fichier

En survolant un bloc de contenu, vous verrez à nouveau les options de redimensionnement, comme avec l'en-tête. La sélection d'une taille différente mettra automatiquement à jour le reste de la mise en page pour remettre les blocs en place. Cliquer sur un bloc de contenu ouvre une fenêtre sur la droite.

En survolant l'une des couleurs de la barre, son code couleur s'affichera. Cette fenêtre est également l'endroit où les membres de l'équipe peuvent laisser un commentaire sur ce bloc de conception particulier.

Création d'un prototype

J'ai aussi joué avec la démo du prototype, juste pour vous montrer quelles sont les options.

Ici, votre centre de contrôle est en bas. En commençant par l'icône en forme d'œil de gauche à droite, les icônes sont les suivantes :

• Mode Aperçu
• Mode de construction
• Mode commentaire
• Mode d'inspection
• Mode historique
• Partage Social
• Écrans de téléchargement
• Configuration
• État de l'écran

Mode main levée

Le mode à main levée commence par une démo interactive pour vous montrer rapidement comment l'utiliser. Ensuite, vous travaillez avec une toile infinie pour monter votre projet. Si vous travaillez dans l'application, vous pouvez envoyer le lien « Collaborer en direct avec Freehand » à un membre de l'équipe et il peut dessiner et ajouter du texte au projet en temps réel.

Tarifs d'InVision Studio

Le forfait gratuit comprend un prototype avec un nombre illimité de collaborateurs et d'écrans. Si c'est tout ce dont vous avez besoin, vous n'aurez jamais à payer. Les démos ne comptent pas dans la limite. Si vous concevez plus d'un prototype, vous bénéficierez de six jours d'accès gratuit pour créer un nombre illimité de prototypes. Après cela, vous devrez effectuer une mise à niveau pour créer et utiliser des prototypes supplémentaires. Si vous souhaitez mettre à niveau, voici leurs plans :

Dernières pensées

Par rapport à d'autres outils de conception, vous pouvez trouver qu'InVision Studio est un peu lent et parfois bogué - cela ne veut pas dire qu'il est lent en général, juste plus lent (parfois) que d'autres outils similaires, comme Adobe XD, Figma et Sketch. Je n'ai pas personnellement rencontré ce problème, mais il apparaît beaucoup dans les critiques. De plus, InVision Studio n'offre pas de prise en charge des plugins, donc si c'est quelque chose qui est important pour vous, pensez plutôt à Sketch.

En ce qui concerne le prototypage, cependant, InVision Studio est difficile à battre, surtout si vous devez collaborer avec une équipe. Il n'est peut-être pas aussi puissant qu'Adobe XD, mais c'est toujours l'un des meilleurs outils de prototypage que vous trouverez.

L'interface d'InVision Studio est facile à apprendre et à utiliser, et les icônes sont élégantes et modernes. Il y a aussi beaucoup d'aide, avec des tutoriels, des visites et des liens vers plus de conseils. (Maintenant, cela dit, j'ai lu des critiques qui disent le contraire, donc je suppose que c'est une question de goût.) Il y a très peu de conjectures avec InVision Studio, et vous pouvez aller directement à ce que vous êtes là pour faire : créer.

Lors de la conception, une règle d'or est d'utiliser le nombre d'or. Consultez mon guide ultime pour utiliser et comprendre le nombre d'or.

Image en vedette via Visual Generation / shutterstock.com