Prototypes parfaits et designs de la main avec Marvel

Sep 13, 2025

Comment

A person sat in a cafe using Marvel on their laptop and displaying a finished prototype on their smartphone.

[dix] [dix] [dix]

[dix]

Avec une courbe d'apprentissage plus courte que l'application d'invision et les nouveaux outils de transfert de conception pour les équipes d'entreprise, il n'y a pas de meilleur moment à explorer la manière dont Marvel peut être une solution Swift et sans effort pour le prototypage des applications Web et mobiles dans les équipes.

[dix]

Marvel aide les équipes à prendre leurs conceptions (fabriquées à la croquis ou à la merveille elle-même) de l'idée esquissée au concept initial au concept testé. Ses outils de collaboration encouragent les parties prenantes non seulement à avoir leur mot à dire, mais à faire partie du flux de travail de conception.

01. Créez votre premier projet Marvel

Marvel's new design screen, indicating the locations of the buttons to create new designs. — Une fois que vous avez choisi votre projet, cliquez sur l'un des deux boutons pour démarrer le processus de conception.

Inscrivez-vous à Marvel pour commencer, où seul votre nom et votre adresse e-mail sont nécessaires. Choisissez un projet de conception ou un projet prototype. Un projet prototype est lorsque vous téléchargez des écrans que vous avez déjà conçus (généralement dans l'esquisse). Un projet de conception est lorsque vous commencez à partir de zéro et que vous souhaitez utiliser les outils de conception propres de Marvel pour créer une maquette à faible fidélité (une option incroyable d'itération rapide et de brainstorming).

Choisissez le projet de conception, puis donnez-lui un nom, puis choisissez iPhone X et cliquez sur le bouton Créer un projet. À partir d'ici (nous appellerons cela le tableau de bord du projet à partir d'ici), cliquez sur le bouton de conception du côté gauche ou du bouton de conception de démarrage au milieu de la fenêtre.

02. Conception de prototypes à faible fidélité

Marvel's protoyping screen, showing how easy it is to add mocked up components, include smartphone camera screens. — Vous pouvez utiliser et adapter des composants prêts à l'emploi, comme cet écran de caméra

Notre objectif de base ici est de visualiser nos idées rapidement sans perdre trop de temps à vous inquiéter de ce que le résultat final ressemblera. D'ici, nous sommes capables de créer des formes, des images, du texte, des composants prêts à l'emploi, tels que les barres d'onglets et même des composants plein écran tels que cet écran de caméra (qui a été choisi dans la barre latérale gauche et restylée à l'aide de la main droite. barre latérale).

[dix]

Dessinez des formes, la création de couches de texte et la création de changements visuels simples est assez facile, même pour un non-concepteur, bien que des concepteurs assaisonnés aiment la rapidité avec laquelle ils sont capables de jeter une idée ensemble et de cliquer sur le bouton Ajouter au projet.

Bien que vous ne puissiez pas vous attendre à ce que vous ne puissiez pas vous attendre à des outils de dessin vectoriels, de masquage et d'autres outils de conception complexes, cette interface se sentira malheureusement familière si vous êtes un croquis, Adobe XD ou un utilisateur de FIGMA (en fait, nous discuterons d'importer des conceptions de fidélité supérieure à partir d'une esquisse. dans un moment). Ce que vous pouvez attendre est de zoomer, d'aligner, de grouper, des outils de conception visuelle de base, des commandes de la souris telles que le glissement, le redimensionnement et la rotation de quelques raccourcis clavier à portée de main.

03. Recevoir des commentaires

Cependant, Marvel n'est pas seulement pour les concepteurs. Bien qu'il puisse nécessiter un concepteur de créer la conception finale dans une application de conception standard de l'industrie, les idées devraient (et faire) provenant de toutes sortes de parties prenantes (gestionnaires, clients, développeurs, etc.).

Quel que soit votre rôle principal dans une équipe, il devrait être super facile à dire: «Hé, pourrait-il être une idée?», Puis démontrer cela visuellement. Marvel POP L'application mobile réduit la barrière de l'entrée encore plus en apportant ces outils de conception simplifiés sur des appareils mobiles, car, en faisons face à cela, les idées peuvent venir à nous à l'étranger des temps. Les idées esquissées sur papier peuvent être converties en un écran marvel interactif à l'aide de la caméra de périphérique. La conception doit être démocratisée, où tout le monde peut avoir un mot à dire sans être limité à l'utilisation d'applications de conception complexes.

[dix]

04. Intégrer Marvel avec esquisse

Après un brainstorming de manière productive des idées de faible fidélité avec votre équipe, vous voudrez vous moquer de la première itération de votre application de conception de votre choix. Bien que vous puissiez totalement télécharger des écrans PNG exportés depuis n'importe quelle application de conception, Sketch est l'application recommandée car il existe un plug-in d'esquisse dédié qui automatise le processus (et fait même que la conception de manière à pouvoir être inspectée par les développeurs ultérieurement). La prise en charge de PhotosHOP pour la conception des moyens de transfert sera plus tard, mais Adobe n'est pas tout Photoshop pour la conception d'interface utilisateur, car elle a créé Adobe XD.

Dans le tableau de bord, cliquez sur Paramètres et GT; Intégrations & GT; Sketch Plugin, puis téléchargez le plugin. Une fois que vous l'avez installé et que votre fichier de conception s'ouvre, appuyez sur la synchronisation sélectionnée ou synchroniser tous les boutons de la barre Marvel (ceci apparaît au-dessus de la liste des calques) pour commencer à choisir un projet Marvel pour synchroniser les écrans.

05. Interactions prototypes

Marvel screen showing how you can create interactions, for example placing your thumb on the thumbprint scanner to progress to the next screen. — Faites glisser-sélectionner des régions pour créer des points chauds pour la liaison d'un écran à un autre.

Mais bien sûr, nous ne pouvons pas tester des prototypes si nous n'avons pas ajouté aucune interaction à eux, alors faisons cela maintenant. Retour au tableau de bord Marvel, où vous verrez les écrans que nous avons synchronisés, cliquez sur Afficher sur l'une quelconque des écrans pour entrer en mode écran.

À partir de là, nous pouvons toujours naviguer dans les écrans à l'aide des flèches gauche et droite de chaque côté de la fenêtre, cliquez sur TIMER pour avoir un cycle marvel à travers les écrans après un certain nombre de secondes (utile pour les présentations!), Ou cliquez sur No Comments pour ajouter votre premier commentaire ou annotation à l'écran.

Probablement la première chose que vous remarquerez est l'en-tête fixe et les boutons de pied de page fixes qui apparaissent à proximité des coins supérieurs gauche et inférieur gauche de l'écran respectivement. Ces boutons sont déplacés et peuvent également être déplacés pour marquer la région de coupure d'une section d'en-tête qui doit rester fixée au sommet d'une fenêtre défilable. Vous pouvez également utiliser les champs de texte dans le coin supérieur droit et à bas niveau pour spécifier manuellement cette valeur.

Mais comment relient-nous réellement un écran à un autre? Simple: avec la souris, faites-la glisser une région à l'écran pour créer un autre écran (c'est appelé «hotspot»). Une fois que vous avez fait cela, une interface apparaîtra au bas de la fenêtre qui vous permet de personnaliser l'emplacement de l'emplacement de l'utilisateur, toute transition qui se produit pendant l'interaction et quel geste est nécessaire pour activer cette interaction (tapother, glisser, etc. ).

Et bien sûr, nous pouvons utiliser ces outils de prototypage même sur des maquettes à faible fidélité. En fait, il est recommandé de le faire, tout en utilisant les fonctionnalités de commentaire pour discuter et réitérer.

06. Donnant des conceptions aux développeurs

A screen grab of Marvel showing how easy it is for developers to access detailed information from handed off designs, such as the positions and sizes of each element. — Le design de la conception facilite la conception et le développeur de travailler les uns avec les autres

Lorsque votre équipe conserve pleinement la confiance dans la conception finale, validée à l'aide des outils de commentaires et d'essais, il est temps de la remettre aux développeurs qui peuvent ensuite inspecter et coder. Il est important de se rappeler qu'un designer n'est pas «fait» une fois que la conception est remise et que les concepteurs et les développeurs devraient toujours communiquer en harmonie pour superviser le développement jusqu'à l'achèvement. Le développeur peut également avoir des questions, de sorte que ces caractéristiques de commentaire devraient encore être très actives.

Appuyez sur le bouton de lecture, puis cliquez sur MODIFT dans le coin inférieur gauche pour ouvrir l'interface de transfert de la conception. À partir de là, les développeurs pourront cliquer sur les éléments de conception et inspecter les styles individuels qui en font ce qu'ils sont, à l'aide de la barre latérale du côté droit (très semblable à l'interface de l'inspecteur dans Sketch, Figma ou Adobe XD). La seule différence ici est que les développeurs sont capables de cliquer sur le bouton Copier pour copier les styles sous forme de code dans le presse-papiers.

Cet article a été publié à l'origine dans le numéro 301 de Net, le magazine le plus vendu au monde pour les concepteurs Web et les développeurs. Acheter numéro 301 ou Abonnez-vous au NET .

Obtenir plus d'informations sur le prototypage itératif

Generate NYC 2018 runs from the 25th-27th April 2018 — Marisa Morby donne sa discussion Découvrez comment les tests de prototypes itératifs vous aideront à créer une conception gagnante, à chaque fois pour générer New York du 25 au 27 avril 2018

Lorsque la plupart des entreprises doivent créer une nouvelle conception Web, le processus commence généralement par des idées de pitching, se déplace à la conception, puis de développement, puis va en direct. Mais si cela ne fonctionne pas? C'est beaucoup de temps, d'efforts et d'argent à dépenser pour savoir que une idée a mal jouée.

Heureusement, dans son discours à Générez New York du 25 au 27 avril 2018 Marisa Morby, chef de la recherche à Clearhead, vous montrera une meilleure façon de créer et de valider de nouvelles conceptions plus rapides, plus faciles et moins chères que le processus de conception traditionnel utilisant du prototypage et des tests itératifs.

Générer New York a lieu du 25 au 27 avril 2018. Obtenez votre billet maintenant .

Articles Liés:

10 outils de prototypage supérieur
Les 18 meilleurs outils filaires
Comment éviter les pièges de prototypage

[dix] [dix]

[dix]

Prototypes parfaits et designs de la main avec Marvel

01. Créez votre premier projet Marvel

02. Conception de prototypes à faible fidélité

03. Recevoir des commentaires

04. Intégrer Marvel avec esquisse

05. Interactions prototypes

06. Donnant des conceptions aux développeurs

Obtenir plus d'informations sur le prototypage itératif

Comment - Most Popular Articles

Tutoriel de bobines Instagram: Guide de débutant

Comment republier sur Instagram

21 façons d'optimiser votre CSS et d'accélérer votre site

Comment dessiner un éléphant

Comment corriger une composition imparfaite

Créer des styles et des mises en page spécifiques à la quantité spécifique à CSS

Peindre sur un maillage 3D avec l'outil Polypaint de Zbrushcore

Créez une sensation peintre dans votre art numérique

Catégories