Quels sont les excellents outils de prototypage basés sur le Web?
Je recherche une liste d'outils de prototypage basés sur le Web et j'aimerais en créer un ici en utilisant le système de vote démocratique de StackExchange.
Il existe déjà quelques listes sur le Web, notamment celles-ci:
- Gui Prototyping Tools sur c2.com - ceci est un wiki modifiable par l'utilisateur
- Rapid Prototyping Tools at adaptivepath.com - une liste gérée par l'auteur de l'article, qui ne travaille plus pour Adaptive Path
J'ai trouvé les deux de la recherche Google "liste d'outils de prototypage" .
L'interface utilisateur StackExchange devrait, à long terme, être le meilleur format pour gérer une telle liste. Allons pour la pertinence, pas nécessairement l'exhaustivité; l'exhaustivité impliquerait l'ajout de tonnes de réponses, y compris des outils peu connus ou obsolètes. Au lieu de cela, j'aimerais voir une liste des applications de prototypage Web actuelles , et les votes pour chaque produit évolueraient idéalement au fil du temps (par exemple, Balsamiq commencera probablement au sommet aujourd'hui, mais dans 5 ans, nous verrons peut-être autre chose apparaître).
J'en fais un wiki communautaire car c'est plus de documentation qu'objectivement responsable.
HTML + CSS + JS
C'est à peu près la seule option si vous envisagez un prototypage haute fidélité.
Je suis partisan de la hi-fi (codez-le) ou du très lo-fi (applications sommaires comme Balsamiq).
À moins que vous ne testiez des interactions relativement apprivoisées, je trouve des solutions comme Axure et similaires un peu dangereuses. Cela implique une haute fidélité, mais vous ne pouvez pas affiner les interactions dans des applications comme celle-ci au point de refléter l'expérience utilisateur réelle.
Maquettes Balsamiq
Donc, puisque vous l'avez mentionné, j'ajouterai Balsamiq pour commencer la liste :)
La version Web n'est pas encore en version complète, mais l'application de bureau est assez astucieuse.
Lorsqu'il sera mis en ligne, le produit existera ici: page de projet de l'application Web Balsamiq
Sinon, il y a toujours l'application de bureau (à la même URL, cliquez simplement sur le lien "Application de bureau").
Oiseau moqueur
J'ai trouvé que Mockingbird était l'une des applications basées sur un navigateur les plus faciles à utiliser - http://gomockingbird.com
Artisanat
Balsamiq est certainement mon premier choix pour esquisser des idées lors de séances de remue-méninges et de lancement avec des clients. Mais quand il s'agit de prototypes entièrement fonctionnels, mon médicament de choix est toujours Handcraft . Il est parfait pour le prototypage HTML et offre d'excellents extras fonctionnels pour créer des flux d'interaction qui auraient normalement besoin de compétences de codage back-end ou de regrouper des choses en javascript.
Crayon
Crayon est un assez bon que je suis habitué à utiliser. Pas strictement basé sur le Web mais c'est un plugin Firefox.
Mockflow
L'agence interactive de ma femme a réussi avec:
Rapide pour commencer et une quantité raisonnable de commandes et d'écrans intégrés pour les wireframes.
Filaire bleu dans Google Docs.
À partir de ce article de blog de Morten Just , il a créé un Dessin Google public que vous pouvez utiliser. Je ne sais pas pourquoi mais le modèle vierge a disparu maintenant, j'ai donc partagé le modèle que j'ai copié il y a quelque temps . Effectuez un zoom arrière si vous ne voyez pas les objets filaires à gauche.
Il possède un ensemble d'objets filaires que vous copiez, collez puis redimensionnez dans la zone de maquette à droite.
Ensuite, il y a galerie de documents Google de personnes qui ont fait des maquettes en utilisant ce modèle
Hotgloo
Hotgloo fournit un prototypage de base, des liens chauds sur les régions entre les pages, certaines capacités de haute fidélité - à égalité avec balsamiq; plus sophistiqué que mockingbird, mais pas aussi performant qu'une application de bureau comme axure ou justinmind.
ma.origramie
Merci d'avoir partagé! J'ajouterais my.origramy service à la liste. C'est un service en ligne gratuit que j'utilise chaque fois que j'ai besoin de créer un prototype de site Web, une carte mentale, un diagramme ou un schéma.
Fondation
Si vous cherchez une solution HTML/CSS/JavaScript, je vous recommande de jeter un œil à http://foundation.zurb.com/
FluidUI
Je voudrais ajouter FluidUI à cette liste. Nous venons de lancer cet outil le mois dernier. Il est basé sur le Web, conçu pour vous permettre de créer rapidement des prototypes d'interface utilisateur haute et basse fidélité. Prend en charge plusieurs plates-formes, mais vous pouvez définir les dimensions de la page selon vos besoins.
Le lien vers celui-ci est fluidui.com mais si vous avez envie de sauter directement et de l'essayer sans remplir de formulaires et ainsi de suite, vous pouvez le faire sur http://www.fluidui.com/editor
Gliffy
Que diriez-vous gliffy ? Nous venons juste de commencer à l'utiliser dans mon entreprise, c'est beaucoup moins cher que le balsamiq ou le moqueur, et plus polyvalent aussi
Il y a http://cacoo.com . L'interface est un peu ésotérique, mais la version gratuite est un peu moins restrictive que certaines autres (25 pages, 15 utilisateurs).