7 outils de prototypage pour les designers web

7 outils de prototypage pour les designers webNous croyons fermement que vous devriez tester un prototype avec des utilisateurs réels avant d'écrire n'importe quel code. Parce qu'il est beaucoup plus coûteux, long et frustrant pour vos ingénieurs de faire des changements dans le code, que pour votre designer de revenir en arrière et faire des changements dans son outil de conception.

Dans un monde parfait, les développeurs devraient dépenser 100% de leur temps à la construction des nouveaux produits et des fonctionnalités impressionnantes. Mais en réalité, on estime que 50% du temps des ingénieurs est dépensé à faire un travail qui aurait pu être évité. La fixation d'une erreur après le développement est jusqu'à 100 fois plus chère que sa correction dès le début.

Le Prototypage peut vous aider à éviter les reprises coûteuses

Le fait d’obtenir tôt des informations en retour de la part de vos clients, peut vous aider à éviter les erreurs coûteuses, à économiser des centaines d'heures d'ingénierie et des milliers de dollars/euros.

Pour faire un meilleur usage de votre temps, réalisez votre conception initiale en Mock Up, déposez-le dans votre outil de prototypage de choix, puis exécuter un test utilisateur pour valider vos hypothèses et déterminer si vous vous dirigez dans la bonne direction.

Mais quel outil de prototypage devriez-vous utiliser ? Nous avons testé plusieurs prototypes, et nous avons rassemblé nos outils et ressources préférées pour vous aider dans votre travail.

1) InVision

InVision, rend la création des prototypes interactifs facile. Il suffit de télécharger les Screenshots statiques et créer des prototypes cliquables que vos utilisateurs peuvent comprendre et interagir avec.

InVision s’adapte à tous les supports : les principaux modèles de mobiles, ordinateurs de bureau et aux diverses tailles d'écran portables, et vous pouvez facilement partager vos créations avec les membres de l'équipe, les intervenants et les clients. Ils peuvent vous donner des retours contextuels en laissant des commentaires directement dans votre prototype.

L’outil offre quelques plans différents à des prix différents, commençant par un compte gratuit qui vous permet de faire 1 prototype, allant jusqu’ à 99 $ par mois pour un nombre illimité de prototypes pour cinq membres de l'équipe.

2) Marvel

Marvel transforme rapidement vos croquis, images et maquettes en prototypes qui ressemblent et paraissent comme un produit fini.

Vous pouvez créer des prototypes pour tous les mobiles, ordinateurs de bureau, et les diverses tailles d'écran portables, et les partager facilement avec les autres. Membres de l'équipe, les intervenants et les clients peuvent commenter directement sur chaque écran ou laisser des notes.

Marvel propose trois plans commençant par un compte gratuit avec des projets illimités (mais avec certaines limitations de base), allant à 55$ par mois le compte pour 5 membres de l'équipe. Vous pouvez ajouter d'autres membres de l'équipe à votre compte pour 11$ par utilisateur par mois.

3) Flinto

Flinto vous permet de prototyper rapidement vos applications iOS et Android en utilisant des écrans ou des croquis que vous avez déjà conçus, vous permettant de mettre à jour à chaque itération. Il est spécialisé dans les prototypes mobiles pour les appareils iOS et Android.

Avec Flinto, il est facile de partager vos prototypes mobiles. Vous pouvez envoyer un lien aux membres de votre équipe, les intervenants et les clients, ce qui leur permettra de télécharger votre prototype mobile sur leurs écrans d'accueil et l'utiliser comme toute autre application.

Il coûte 20$ par mois et par utilisateur.

4) Ustinmind

Justinmind est un créateur de wireframe interactif qui vous permet de créer des prototypes interactifs réalistes, sans codage.

Il s’adapte à tous les principaux formats d'écran mobiles et de bureau, et également Google Glass.

Tout comme Invision et Marvel, Justinmind facilite le partage des prototypes et l’obtention des informations contextuelles en retour.

Vous pouvez soit acheter un abonnement de 19$ par utilisateur par mois. Ainsi que l'originalité d'une offre de 495$ par utilisateur à vie.

5) Axure

Axure vous permet de générer des wireframes réalistes en générant des prototypes HTML. Nous recommandons Axure pour les grands projets où chaque détail compte. Axure est un outil de pros: la courbe d'apprentissage est un peu plus élevée que d'autres outils, mais ils ont un grand centre d'apprentissage et beaucoup de ressources. Il s’adapte à tous les mobiles, et les tailles d'écran de bureau.

Axure offre deux types de payements: un paiement unique de 289$ pour le plan standard, et 589$ pour le plan professionnel. Ils offrent également un essai gratuit de 30 jours.

6) Porto.io

Vous pouvez créer n’importe quel format d’écran et de le personnaliser avec vos propres appareils et vos frames graphiques pour traiter à peu près tous les appareils existants

7) Balsamiq

Balsamiq vous aide à concevoir rapidement des Mockups et facilement les partager avec vos équipes et clients. Il est facile à utiliser, il a une grande bibliothèque en widgets, et le fait qu'il soit une solution hébergée rend la collaboration entre l’équipe facile.

Balsamiq s’adapte à tous les mobiles, et les tailles d'écran de bureau, également il s’adapte aux boites de dialogue des Mockups.

Le logiciel de bureau coute 89$. La version Application web du produit varie entre 12$ par mois pour trois projets et 249$ par mois pour une centaine de projets.

Outil Bonus : Keynotopia

Keynotopia est facile à utiliser. Il transforme PowerPoint et Keynote en machines de prototypage que quiconque peut utiliser, vous obtenez des Templates Drag and Drop, que vous pouvez les utiliser facilement pour créer des interfaces en Mock Up. Et vous pouvez même créer des prototypes interactifs en associant des éléments de design à des diapositives spécifiques.

BLOG COMMENTS POWERED BY DISQUS