15 principaux outils de prototypage en tête-à-tête –

Vous voulez apprendre l'UX de la base? Obtenez une collection complète de livres UX couvrant les bases, les projets, les astuces, les outils, etc., avec SitePoint Premium. Inscrivez-vous maintenant pour seulement 9 dollars par mois ou essayez notre essai gratuit de 7 jours .

Le nombre et la variété d'outils de prototypage ne cessant de croître, il devient de plus en plus difficile à déterminer. quels outils répondent à quels besoins, et à qui ils conviennent. Depuis que nous avons écrit cet article pour la première fois en 2015, d'innombrables applications de conception ont dominé (et modifié) le secteur du prototypage.

Les commentaires des utilisateurs et les tests des utilisateurs jouent désormais un rôle de plus en plus important dans la conception des interfaces utilisateur. Cette nouvelle génération d'outils vise à connecter ces deux étapes précédemment distinctes du processus de conception. Les clients veulent que soit impliqué et le courrier électronique ne le coupe plus. Certaines applications, comme UXPin, s’occupent également des étapes de l’animation filaire, alors que d’autres, comme InVision App, comblent le fossé qui sépare concepteur et développeur en proposant des outils de transfert de conception.

Read Jump Start Adobe XD

De plus, il existe désormais une distinction nette entre les outils de bureau avec partage en nuage (Adobe XD, Axure, Balsamiq, Sketch + InVision) et les outils en ligne collaboratifs (Figma, UXPin, Fluid UI, Proto.io). 19659003] Beaucoup de ces outils semblent converger vers un ensemble de fonctionnalités qui définit le rôle du concepteur d'expérience utilisateur moderne. TL; DR – voici une comparaison rapide des outils de prototypage.

Cet article a été mis à jour en mars 2019 pour refléter l’état actuel du marché des outils de prototypage.

Adobe a peut-être été surpris en train de faire la sieste lors de la montée en puissance de Sketch, mais le problème est rapidement rattrapé par Adobe XD. Lancé en mars 2016, il s’agit du dernier ajout à la suite Creative Cloud d’Adobe. Alors que vous pouvez créer un prototype d'interactions dans Sketch avec l'aide de Craft Plugin, Adobe XD propose ces outils immédiatement, de sorte que les concepteurs comparent déjà Adobe XD à Sketch comme des rivaux de longue date.

Si vous êtes intéressé par un outil qui couvre toutes vos bases (prototypage basse fidélité, prototypage haute fidélité flux d’utilisateurs, partage et retour d’informations), le tout dans une seule application.

Points forts

• Disponible pour macOS et Windows
• Tout ce dont vous avez besoin dans une seule application

Points faibles

• Toujours en version bêta (bien qu'agréablement développé en tant qu'application de conception)
• Flux de travail du plug-in inexistant, vous êtes enfermé dans l'écosystème Adobe

InVision App est l'outil de collaboration de conception le plus vaste et le plus performant actuellement sur le marché, le principal outil d'utilisation pour les concepteurs sérieux et les équipes d'entreprise. Avec des outils tels que la collaboration au tableau blanc, le prototypage dynamique, les commentaires, la prévisualisation de l'appareil, l'appel vidéo, les tests utilisateur, le contrôle de version et le transfert de conception, InVision est déjà une force colossale dans le prototypage, mais lorsque vous intégrez ses intégrations Sketch et Photoshop, une suite de conception tout-en-un, en particulier lorsque vous ajoutez Craft, le plug-in Sketch / Photoshop qui apporte une grande partie de cette fonctionnalité directement dans l'application de conception de votre choix.

Depuis la première édition de cet article, la société dispose de a également publié InVision Studio, un outil de conception UX gratuit mais puissant qui a été accueilli par des critiques positives. Cela permet aux utilisateurs de renoncer à Sketch et à Photoshop et de conserver l'ensemble de leur processus de conception dans l'écosystème InVision. Il est désormais disponible sur Mac avec une version Windows en développement.

Points forts

• Une plate-forme puissante et mature
• Intégré à Sketch pour une conception haute fidélité
• Mise à jour constante avec de nouvelles fonctionnalités

Faiblesses

• L'ensemble de fonctionnalités peut être un peu difficile au début
• InVision Studio est actuellement disponible pour Mac OS uniquement, mais la prise en charge de Windows est en cours. Sketch est uniquement disponible pour les utilisateurs de MacOS (mais vous pouvez relier InVision à Photoshop sous Windows, bien que Photoshop ne soit pas strictement un outil de conception d'interface utilisateur)

Un grand favori pour ceux qui recherchent des alternatives plus simples et plus conviviales à l’application InVision. Marvel App a excellé dans la création d'un outil de prototypage qui convient à la fois aux concepteurs UX avancés et à ceux qui cherchent simplement à communiquer des concepts haute et basse fidélité. De plus, tout en privilégiant l'utilisation de Sketch, ils proposent également des bibliothèques de composants permettant un flux de travail en ligne complet dans Marvel. Marvel App a également récemment intégré le jeu favori des fans POP ​​ce qui permet aux concepteurs de transformer leurs idées stylo / papier en applications pour iPhone et Android.

Points forts

• Soutien important aux transitions pour un réalisme supplémentaire [19659013] Plus convivial pour les non-concepteurs, en particulier pour les commentaires

Faiblesses

• Web uniquement
• Pas de conception hors ligne

UXPin est la solution en ligne la plus complète pour les concepteurs UX. en termes de leur offre. Bien que vous puissiez importer à partir de Sketch et de Photoshop, vous pouvez également concevoir des interfaces complexes et réactives avec les bibliothèques intégrées de UXPin, ce qui en fait également un outil filaire. Grâce à ses fonctions de systèmes de conception UXPin devient l’un des outils les plus complexes en termes de documentation automatisée, de transferts concepteur / développeur et de fonctions de collaboration.

Points forts

• Conception réactive avec points de rupture
• ] Animations puissantes ( non seulement des écrans de liaison )
• Solution complète de collaboration et de transfert de conception

Faiblesses

• Un peu cher par rapport à la concurrence à 49 $ / utilisateur / mois
• Des fonctions supplémentaires augmentent les coûts complexité d'utilisation

Webflow est un outil visuel de conception de sites Web réactifs, qui exporte également du code propre. Il supprime les problèmes de tête liés au passage du design au publié sur le web . En concurrence autant avec WordPress qu'avec Sketch App, Webflow vous permet de concevoir des sites Web réactifs entièrement fonctionnels intégrant des données de back-end (API) et de se déployer automatiquement vers un hébergement entièrement évolutif et sans souci en un seul clic. Il s’agit en réalité d’Adobe Dreamweaver pour les concepteurs modernes qui s’intéressent au code propre et à la conception Web conviviale pour les mobiles.

Points forts

• Des données réelles peuvent être incluses (à partir d'API / JSON / etc)
• Crée du code réutilisable de haute qualité
• Les sites Web réactifs peuvent être facilement conçus et déployés

Faiblesses

• Inutile pour la conception d'applications mobiles natives
• Requiert des connaissances en HTML / CSS pour être au plus efficace

Ajout récent à l’espace du prototypage, Figma propose les fonctionnalités de collaboration de conception en temps réel les plus fascinantes de n’importe quel outil de prototypage, tout en modélisant ses fonctionnalités des outils de conception intuitifs de Sketch et d'Adobe XD (tels que les symboles et l'aperçu du périphérique), ainsi que de nombreux outils généralement réservés au groupe en ligne (tels que le contrôle de version et le transfert de conception). La version 2.0, lancée en juillet 2017, inclut un mode de prototypage avec points chauds et transferts des développeurs pour rationaliser davantage le flux de travail de conception. Il fonctionne dans le navigateur, sous macOS, et sous Windows, bien que cela puisse parfois être lent.

Points forts

• Les fonctionnalités de conception collaborative en temps réel sont sans égal
• . ] Complet, idéal pour les concepteurs du début à la fin

Faiblesses

• Figma peut être lent à la fois, particulièrement avec une collaboration en temps réel

9 outils de prototypage supplémentaires à considérer

Fluid UI

Portant une attention particulière à la simplicité et à la communication, Fluid UI comprend des bibliothèques de composants haute et basse fidélité intégrées, une collaboration en équipe, des aperçus d'appareils et des présentations vidéo, ce qui en fait une solution de premier ordre pour les concepteurs, Les chefs de produit et les fondateurs sont les mêmes.

Proto.io

Mûre et riche en fonctionnalités, Proto.io est mieux utilisé par les concepteurs qui cherchent à créer des prototypes très animés et très animés le navigateur.

Axure RP 8

[19659003] Créé en 2003, Axure est un excellent choix pour les concepteurs d’UX qui doivent créer des spécifications pour des dessins et des animations extrêmement détaillés. Axure inclut la prise en charge des interactions de flux conditionnelles, du contenu dynamique et de la conception adaptative / réactive, ainsi que du prototypage haute et basse fidélité. Axure est un outil sérieux pour les concepteurs sérieux.

Framer X

À cheval entre le design et le code, Framer X permet au concepteur de créer des animations incroyablement détaillées avec un minimum de codage. (il utilise une version simplifiée de JavaScript appelée CoffeeScript) et s’intègre bien à d’autres outils comme Sketch et Figma. Vous devrez coder les animations et les interactions, mais les possibilités sont pratiquement infinies.

Mockplus

Mockplus est un outil de prototypage filaire et basse fidélité offrant une courbe d'apprentissage relativement simple. support pour Windows, macOS, iOS et Android. Avec plus de 200 composants intégrés et 3 000 icônes pour vous aider à créer rapidement des maquettes, Mockplus est une solution de prototypage rapide relativement solide pour les équipes utilisant une gamme de périphériques et de systèmes d'exploitation.

Justinmind

[196519659003] Justinmind est une application de bureau riche en fonctionnalités qui a étonnamment maintenu une facilité d'utilisation fantastique pour un outil dont les fonctionnalités se sont développées pendant 8 ans. Bien qu’il ne soit pas aussi courant que InVision et Adobe XD, il est assez facile à utiliser et les concepteurs peuvent créer des structures filaires cliquables et des prototypes fonctionnels haute fidélité sans aucun problème. Un choix vraiment fiable.

Flinto

Flinto est une application de bureau macOS offrant une alternative Web plus légère appelée Flinto Lite, dans laquelle les deux utilisateurs se concentrent fortement sur l'application mobile haute fidélité. prototypage avec des animations personnalisables. Flinto a une structure de prix intéressante qui le distingue: Flinto pour macOS coûte 99 $ une fois, et Flinto Lite est de 20 $ / mois, mais vient également avec Flinto pour macOS. Si vous êtes un concepteur travaillant seul, Flinto pour macOS est la solution la moins chère et la plus intelligente.

Outils de prototypage de l’animation

Studio Origami

Origami est l’application de conception de Facebook. Les dessins de Sketch peuvent être copiés dans Origami, où les puissantes fonctionnalités d'animation vous permettent d'explorer différentes animations avec une créativité sans fin. Origami est livré avec des applications de prévisualisation pour iOS et Android, mais l'application principale n'est disponible que pour les utilisateurs de macOS. Le prototypage est spécifiquement limité aux animations.

Principle for Mac

Principle est un autre outil basé sur macOS et mettant l'accent sur l'animation. Il coûte toutefois 129 $ par utilisateur. , sa clientèle est très heureuse. Principle vous permet d’importer à partir de Sketch et de prévisualiser des conceptions sur leur application iOS, mais malheureusement, il n’ya pas d’application Android à tester.

Outil de filature Outil de prototypage

Vous pouvez créer des structures filaires de maquettes de haute (haute fidélité) (les concepteurs adorent dessiner des maquettes lo-fi plus souvent sur des structures filaires par la suite) et vous pouvez également créer des prototypes de maquettes basse fidélité dans un modèle filaire qui est pourquoi certaines applications de prototypage incluent également des outils de wireframing (tels que Axure et UXPin, que j'ai mentionnés plus haut). Si vous pensez que certains autres outils de prototypage méritent une mention spéciale, faites-le-nous savoir dans les commentaires!

Dave est le fondateur de Fluidui.com, où il partage la même passion pour rapprocher les concepteurs et les développeurs. aux utilisateurs qu'ils servent. Ses écrits rassemblés sont disponibles sur le blog Fluid UI .

Daniel Schwarz est un concepteur UX / UI, un développeur Web et un fabricant d'origine, mais un écrivain, éditeur, auteur et enseignant dans l'âme. Actuellement concepteur chez SitePoint (ex Toptal), fondateur de UX Tricks écrivain chez .net Magazine et Web Designer Magazine, et collaborateur occasionnel avec les plus grandes entreprises de design telles que Adobe et InVision.