La présentation des designs est l'une des exigences centrales dans le développement d'applications. Les développeurs dépendent de vos designs pour réussir à mettre en œuvre l'application. Dans ce guide, je vais vous montrer comment fournir vos designs sans effort dans InVision, afin que votre équipe de design ait toujours accès aux versions les plus récentes. Avec InVision, vous vous assurez que vos idées sont optimisées en matière de visualisation et de communication, tout en pouvant intégrer facilement des modifications.
Principales conclusions
- InVision permet une synchronisation et une présentation faciles des designs.
- Vous pouvez exporter vos designs directement depuis Sketch et les télécharger dans InVision.
- L'outil propose différents modes pour visualiser et interagir avec les prototypes.
- Les fonctionnalités de feedback et de commentaire favorisent la collaboration entre concepteurs et développeurs.
Guide étape par étape
Étape 1: Créer un nouveau projet dans InVision
Tout d'abord, ouvrez InVision et créez un nouveau projet. Pour cela, sélectionnez l'option de créer un « Prototype » et choisissez le modèle iPhone pour présenter vos designs de manière optimale sur les appareils mobiles. Sélectionnez « Mobility Stream Udemy » comme nom de projet et cliquez sur « Créer ».
Étape 2: Exporter les designs depuis Sketch
Après avoir configuré votre projet, importez vos designs depuis Sketch. Dans ce processus, vous devez vous assurer de sélectionner les bons artboards et de les télécharger dans InVision. Vous pouvez faire glisser les fichiers directement dans le projet InVision. Il est important de choisir le bon format d'exportation depuis Sketch pour éviter les complications.
Étape 3: Installer le plugin InVision
Pour simplifier le processus de synchronisation, vous devez utiliser le plugin InVision pour Sketch. Installez le plugin, connectez-vous avec votre compte InVision et activez l'option de synchronisation. Cela vous permettra de transférer les modifications de design directement de Sketch vers votre projet InVision sans avoir à télécharger manuellement les fichiers.
Étape 4: Équiper les artefacts d’interfaces
Vous pouvez maintenant créer l'interface utilisateur de votre application et rendre les différents écrans interactifs. Cliquez sur les boutons en mode Build pour créer des hotspots qui simulent la navigation dans l'application. Vous pouvez choisir divers transitions comme « Slide in » ou « Instant » pour représenter réalistement l'expérience utilisateur.
Étape 5: Définir les transitions
Une fois que vous avez ajouté des interactions, il est important de définir les bonnes animations pour les transitions entre les écrans. Vous pouvez choisir le type d'animation qui sera efficace lors du passage à un autre écran. Veillez à ce que ces détails soient clairs et précis pour les développeurs, afin qu'ils puissent mettre en œuvre le comportement souhaité.
Étape 6: Définir les couleurs et les arrière-plans
Vous devez également vous assurer que toutes les couleurs de fond et les détails stylistiques sont corrects. Souvent, on oublie de définir les couleurs de fond dans les fichiers Sketch. Parcourez chaque écran et vérifiez que les arrière-plans que vous avez prévus dans le design sont également affichés dans InVision. Assurez-vous que tout a l'air harmonieux.
Étape 7: Synchronisation et mise à jour
Après avoir effectué toutes les modifications, il est temps de tout synchroniser. Enregistrez les modifications dans Sketch et cliquez sur le bouton de synchronisation dans le plugin. Cela mettra automatiquement à jour vos nouveaux écrans et ajustements dans InVision. Notez que ce processus peut prendre un certain temps.
Étape 8: Collecter des retours
Utilisez la fonction de commentaire et de feedback dans InVision pour clarifier des questions générales sur vos designs. Vous pouvez ajouter un commentaire directement dans le prototype, qui pourra ensuite être répondu par d'autres membres de l'équipe. Cela est particulièrement utile pour s'assurer que votre design respecte le briefing et que toutes les attentes sont satisfaites.
Étape 9: Conclusion de la présentation
Enfin, vous devriez tester vos designs et vous assurer que tout fonctionne parfaitement. Vérifiez tous les hotspots que vous avez créés et simulez l'interaction pour obtenir des expériences du point de vue de l'utilisateur. Cela garantira que l'ensemble est cohérent avant de le présenter à votre équipe ou aux développeurs.
Résumé - Fournir des designs avec succès dans InVision
Dans ce guide, vous avez appris à fournir vos designs étape par étape dans InVision. Vous avez découvert à quel point il est facile de travailler avec InVision et comment vous pouvez améliorer l'efficacité de vos transferts de design. Une préparation soignée et l'utilisation de fonctionnalités utiles vous aideront à réaliser vos projets avec succès et à fournir aux développeurs les informations nécessaires.
Questions fréquemment posées
Comment installer le plugin InVision pour Sketch?Téléchargez le plugin sur le site Web d'InVision et suivez les instructions d'installation.
Comment synchroniser des designs de Sketch avec InVision?Enregistrez vos modifications et cliquez sur le bouton de synchronisation dans le plugin InVision pour télécharger les designs.
Quels arrière-plans doivent être utilisés dans les designs?Utilisez des couleurs de fond distinctes pour tous les écrans afin de vous assurer qu'ils sont correctement affichés dans InVision.
Puis-je collecter des retours directement dans InVision?Oui, vous pouvez ajouter des commentaires à votre prototype et obtenir des retours d'autres membres de l'équipe.
Que puis-je faire si les animations ne fonctionnent pas correctement?Vérifiez la sélection des transitions et testez chaque écran pour vous assurer que tout fonctionne comme prévu.
