Transformer vos PSD et images en prototype de site avec Marvel

Vous avez toujours rêvé de transformer vos PSD et vos images en prototypes interactifs et transférables ? C’est désormais possible grâce à l’application gratuite Marvel. Découvrez les explications de Murat Mutlu à ce sujet.

Partons d’un triste constat, qui au fil du temps s’est transformé en un sujet d’inquiétude. La plupart des designers et graphistes bâclent la présentation de leurs projets. Les images et montages sur lesquels ils ont travaillé durant des jours, voire des semaines atterrissent chez les clients sur des PDF et des pièces jointes dont la présentation laisse vraiment à désirer. Pour régler le problème, certaines agences de designers préfèrent faire recours aux services des développeurs professionnels pour créer des prototypes corrects. Toutefois, il faut se rendre compte de l’évidence : cette solution est généralement trop coûteuse en moyens financiers et en temps. Des ressources que tous les designers n’ont pas forcément.

Tous les designers et graphistes rêvent de disposer d’un outil simple à manœuvrer, rapide et efficace qui leur permettrait de transformer très aisément toutes leurs créations en prototypes et d’interagir facilement avec leurs dessins, peu importe l’appareil dont ils se servent. La solution, c’est Marvel. C’est un logiciel très pratique et très intuitif qui se base sur des images statiques et des PSD pour créer des prototypes destinés à des clients ou devant être partagés avec des collègues ou des développeurs. Sa particularité, c’est qu’il utilise des données enregistrées sur Dropbox, ce qui évite à l’utilisateur de devoir « retélécharger » des images.

prototype-site

Le fonctionnement de cet outil est tout à fait simple. Vous ajoutez des liens à vos PSD et à vos images puis vous les reliez grâce à des hotspots. Ensuite, vous définissez une zone de navigation pour permettre au client de simuler une navigation. Le prototype ainsi obtenu est associé à une URL que vous pouvez exécuter et partager sur tous les types de terminaux intégrant un navigateur web. Découvrez le principe en ces quelques étapes suivantes :

1 – Créez votre compte gratuit

Pour commencer, vous devez enregistrer un compte sur Marvel, un processus très simple et très rapide. Ici, le programme vous demandera de vous connecter à partir de votre espace de stockage Dropbox, puisque c’est de là que les fichiers seront chargés pour concevoir les prototypes. Vous pourrez utiliser autant de données disponibles dans votre espace de stockage et créer le nombre de projets de votre choix. Tout dépend de vous et de vos données. Il n’y aucune limite tant que vous indiquez les identifiants requis.

2 – Créez votre propre prototype

La prochaine étape après l’enregistrement de votre compte Marvel, c’est la création d’une première mouture de projet. En gros, cela consiste à choisir des images qui seront synchronisées à partir de Dropbox en vue de réaliser des pages web séparées. Pour cela, il suffit d’ouvrir votre espace Dropbox et d’importer quelques images en cliquant sur l’icône de synchronisation en bleu. Les images seront automatiquement prises en charge puis traitées par Marvel, puisque l’application supporte le format PSD.

sync-marvel

3 – Reliez les écrans

Une fois que vous avez sélectionné les images à rendre dynamiques pour le compte de votre projet, l’étape suivante consiste à relier ces dernières. Par exemple, pour créer un lien permettant d’aller sur une zone B à partir d’une zone A, il suffit de créer sur une partie de A un espace sensible en se servant de l’outil d’édition pour insérer le lien devant renvoyer vers B. En dehors des liens, vous pouvez insérer des transitions pour passer d’un écran à un autre avec un effet précis. Une fois ce premier modèle de base obtenu, vous pouvez modifier les fichiers directement à la source dans Dropbox ; le logiciel les prendra systématiquement en compte.

liens-prototype

4 – Ajoutez une application ou un favicon

Le logiciel Marvel comporte un autre avantage de taille, en ce sens que vous pouvez définir une application ou un favicon parmi les données enregistrées dans votre Dropbox. De cette façon, vous pouvez choisir une image comme l’interface de prototype, laquelle se met à jour de façon automatique. Si vous définissez l’icône en question comme écran d’accueil de votre prototype interactif, celle-ci apparaitra dans la barre de navigation de votre iPhone à tout moment.

5 – Aperçu de votre prototype

Une fois que vous avez fini de relier les différentes pages web pour constituer un projet de prototype interactif, vous pouvez le visionner en cliquant simplement sur l’icône « Preview ». Cela vous permet de passer en revue votre prototype, d’analyser sa cohérence et de relever les imperfections éventuelles. Vous pourrez ainsi accéder à chaque session afin de travailler sur l’accessibilité de votre prototype.

preview-prototype

6 – Partagez votre prototype

Si vous franchissez avec succès toutes les étapes ci-dessus citées, alors c’est que votre prototype est fin prêt. À présent, vous pouvez l’envoyer au client, le partager avec un collègue ou le transférer à un développeur. Mais dans quels formats de fichier le faire ? Eh bien, à ce propos, vous serez heureux d’apprendre que Marvel a pensé à tous les détails. Il associe une URL unique à chaque prototype généré, ce qui permet de le partager par différents canaux incluant le SMS classique, la messagerie électronique ou les codes QR, et ce peu importe si vous le modifiez entièrement ou pas du tout.

7 – Transformez les croquis en prototypes

Nous avons développé une application pour iPhone qui vous permet de faire des photos de vos croquis et de les charger directement dans le logiciel Marvel. Une fois les images importées, le processus est le même jusqu’à l’obtention d’un prototype dynamique et interactif prêt à être présenté. La taille des images chargée sera automatiquement ajustée à l’écran des versions d’iPhone 4, iPhone 5 ainsi que l’iPad. Vous pouvez télécharger gratuitement cette application sur l’App Store.

L’avenir de Marvel

Ce projet n’en est encore qu’à ses débuts. La version bêta actuellement disponible sur le marché nous permettra de recueillir les avis des utilisateurs et de faire des corrections ainsi que des mises à jour pour développer une meilleure version. Dans tous les cas, Marvel est en train de faire ses preuves comme un outil de qualité qui permet aux designers et aux développeurs d’aller beaucoup plus vite dans leurs projets. C’est un outil qui s’adapte à toutes sortes d’utilisation et qui a encore beaucoup à offrir.

Photoshop CS6 : tour d'horizon
10 points pour optimiser les images et booster vos performances

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *