Quels outils (idéalement abordables) les gens recommanderaient-ils pour créer un site Web filaire?
Quels outils (idéalement abordables) les gens recommanderaient-ils pour créer un site Web filaire? Quels outils avez-vous utilisés et les avez-vous trouvés mieux que le stylo et le papier?
Nous utilisons Balsamiq Mockups religieusement ces jours-ci. C'est un outil si rapide pour créer rapidement des contours approximatifs et même des procédures interactives simples. C'est très bon marché et a un essai gratuit, mais donne également des licences gratuites aux projets communautaires. Essayez la version de bureau, nous l'utilisons depuis quelques mois maintenant et l'avons intégrée à notre processus de spécification et de prototypage.
Le papier est relativement bon marché de nos jours.
De plus, je préfère les crayons en raison de leur bouton d'annulation en caoutchouc.
Je me retrouve à utiliser un simple stylo et du papier pour esquisser rapidement quelques wireframes puis passer au prototype html/css. Surtout depuis que je suis un bon intégrateur, le prototypage précoce est plus facile que l'utilisation de logiciels complexes à filaire.
Sinon, je recommanderais Omnigraffle, pas trop cher et avec les bons pochoirs, il fait un excellent travail. Linky . Il est utile à la fois pour le wireframing et le sitemapping.
Je dois être d'accord avec certaines des autres affiches ici. Le papier et le crayon (ou un stylo ou un marqueur) est le meilleur moyen le moins cher de commencer votre prototypage. Il n'y a aucune raison d'utiliser quelque chose comme Photoshop, car vous ne faites pas de conception complète. Les différents logiciels spécialement conçus pour les maquettes et les prototypes sont tous agréables, mais peuvent devenir très chers, et n'ajoutent pas vraiment beaucoup plus que ce que le papier peut faire pour vous. Je dirais qu'ils sont rarement encore plus efficaces en termes de temps.
Si vous voulez utiliser une application de prototypage, je pense que la meilleure option est Axure. Ils ne sont pas trop chers et ont une grande quantité de fonctionnalités. Et vous pouvez essayer le logiciel gratuitement pendant 30 jours (et je pense qu'il est également pleinement fonctionnel pendant cette période).
Je déconseille d'utiliser HTML/CSS pour vos prototypes, sauf si vous savez que les personnes pour lesquelles vous créez les prototypes comprennent parfaitement la différence entre un prototype HTML et un site réel et fonctionnel. En règle générale, l'une des deux choses suivantes se produit:
- Ils se concentrent sur l'esthétique plutôt que sur la fonctionnalité, car "c'est déjà un site web, donc ça devrait bien paraître".
- Ils ne comprennent pas pourquoi vous ne pouvez pas simplement le terminer quelques jours après leur avoir montré le prototype, car "le site fonctionne déjà, nous avons juste besoin de le rendre plus joli". Il faut beaucoup de travail pour amener les personnes non techniques à comprendre la différence entre un prototype HTML et un site qui fonctionne réellement.
Quant à PowerPoint - à mon avis, c'est l'une des applications les plus surutilisées et mal utilisées. Je ne peux pas compter le nombre de fois où j'ai reçu une présentation PowerPoint en pièce jointe comme seul moyen d'annoncer quelque chose par une personne RH. Son utilisation pour le prototypage va dans le même sens. Il n'a pas été conçu pour cela et il n'a pas vraiment les outils pour le rendre efficace pour le prototypage.
J'utilise principalement un cahier pour esquisser des idées super brutes, puis j'utilise Omnigraffle avec les pochoirs Konigi.com pour faire les maquettes réelles.
Si je fais des tests WoZ, je le fais tout sur papier avec des éléments de navigateur imprimés.
Lors d'une conférence UPA il y a six mois, j'étais dans une session au cours de laquelle les gens ont discuté des outils: HTML vs Axure vs Balsamiq vs FlairBuilder pour le prototypage.
Axure et Balsamiq ont obtenu quelques votes. FlairBuilder obtient mon vote.
J'étais en train de twitter en direct, et quelqu'un en dehors de la session a suggéré de télécharger et d'essayer la démo FlairBuilder. Nous l'avons fait à la volée et avons immédiatement pu l'utiliser sans aucune expérience préalable. FlairBuilder est au même prix que Balsamiq, et chacun avait des fonctionnalités que l'autre n'avait pas. Par exemple, FlairBuilder a du multimédia en direct, y compris à partir de YouTube, qui était important pour certains participants et pas pour d'autres.
Au cours de la discussion, un participant a déclaré que "Visio est un cauchemar", et même si je pense que c'est une déclaration forte, je suis obligé de l'utiliser au travail et je me retrouve à "combattre" Visio (c'est-à-dire perdre mon temps).
Microsoft était à cette conférence pour démontrer un nouvel outil de conception/esquisse qui produit des prototypes basse fidélité, mais qui avait un prix plus élevé. J'ai oublié le nom du produit [edit: It's SketchFlow ], mais la démo était impressionnante, "comme vous vous attendez à ce que n'importe quelle démo sans intervention" soit-il ajouté cyniquement. Ce produit n'a pas été discuté lors de la session de discussion que j'ai décrite ci-dessus [modifier: car il n'est pas encore sorti].
Je recommande d'essayer FlairBuilder , car il est facile à utiliser et à apprendre, surtout si vous commencez par modifier l'exemple de projet. Vous devrez ignorer les fréquents "Achetez-moi maintenant!" message dans la version d'essai gratuite.
Je ne suis affilié ni payé par aucun des produits mentionnés ci-dessus.
J'ai discuté avec:
Feux d'artifice PowerPoint FlairBuilder Balsmiq Axure SketchFlow
Personnellement, je commence sur un tableau blanc. Je pense que FlairBuilder et Balsmiq sont tous deux extrêmement faciles à utiliser - peut-être les plus faciles.
Je pense qu'Axure est vraiment puissant, mais pas aussi sympathique.
Je pense que PowerPoint fonctionne lorsque vous essayez de faire quelque chose de très rapide sur un PC aléatoire.
Mon préféré est SketchFlow en raison de la façon dont ils lient les pages entre elles et de sa capacité à créer des comportements et à se transformer en un proto-type fonctionnel à part entière (très haute fidélité) qui peut servir de code de début d'une application Silverlight ou d'un document génial pour un équipe de développement sur une autre technologie.
J'aime aussi la capture et la conception d'animation, ainsi que la construction de comportement/contrôle par rapport aux autres programmes qui n'utilisent vraiment que des contrôles personnalisés préconçus ou à faible fidélité.
Fireworks est un outil étonnant qui est souvent négligé - il est vraiment mûri, surtout pour faire beaucoup de documentation et d'états.
Le plus grand avantage de Fireworks par rapport aux autres solutions est qu'il peut être utilisé pour les Webapps et pas seulement pour les pages Web. Il y a une énorme différence dans le niveau de complexité qui doit être filaire entre les deux; cela n'est souvent pas pris en compte dans la plupart des outils de wireframing.
J'ai utilisé sérieusement Visio, Illustrator, Axure RP Pro, OmniGraffle, Balsamiq Mockups et j'ai essayé toutes les applications Web. J'ai également fait du prototypage HTML et du prototypage papier.
Ce que je trouve le plus efficace, c'est toujours le croquis sur papier, le raffinement dans OmniGraffle ou le passage direct aux maquettes en HTML. Ce que je choisis de livrer dépend de la destination du document de conception et de son objectif. Surtout, je choisis OmniGraffle pour la vitesse, ou je livre des croquis et du HTML. Avertissement est que je suis dans un concepteur d'interface utilisateur en interne.
J'ai tendance à attraper un stylo Stabilo Poit 88, quelle que soit la couleur qui me plaît et à chercher des idées sur un carnet de croquis filaire de mon propre design (6 x sur A4 paysage).
J'ai également trouvé que si vous coupez un bloc de notes Post-It carrées, réduites à 2/3 de la largeur, cela fonctionne bien - cela vous oblige à ne pas rester coincé dans les détails, mais à vous concentrer sur la page globale.
Ensuite, je passe sur certaines zones avec une couleur différente pour créer un point d'intérêt/action. Ensuite, j'esquisse plus de détails à plus grande échelle (2 x sur paysage A4).
Une fois satisfait de la direction et des concepts, je passe à OmniGraffle, en utilisant un modèle personnel et divers pochoirs (essayez Konigi.com et graffletopia.com). Si quelque chose me fait trébucher à ce stade, c'est de retour au stylo et au papier.
Enfin, j'enregistre mon doc Omni sous un PDF contenant des liens cliquables.
Vous pouvez essayer le nouvel outil Blend SketchFlow de Microsoft. Il est incroyablement puissant, mais peut être un peu difficile à approcher (essayez de côté et avec une tranche de citron).
Il peut générer des prototypes visibles sur le Web (à l'aide de Silverlight) ou une application de bureau Windows à l'aide de WPF avec un système de navigation complet, et je pense qu'il peut suivre les utilisateurs. Il peut également enregistrer les commentaires des utilisateurs pendant qu'ils les parcourent ...
Personnellement, j'utilise Pen and Paper (j'aime particulièrement le papier graphique filaire de konigi ) puis rendu dans Visio, avec les modèles filaires Lombardi et les pochoirs filaires Nick Fink (tous deux gratuits). Donc, à part le coût de MS Visio, cela me convient bien.
Dans le passé, j'ai également utilisé:
- PowerPoint pour créer des filaires "cliquables" mais jamais en colère.
- Axure pour générer des prototypes rapides mais la version que j'ai utilisée n'a pas fait d'effort pour réduire le panneau dynamique lorsque les états étaient de hauteurs différentes (peut-être mieux maintenant)
Mat
Je préfère utiliser un crayon et du papier (en fait un Sharpie et du papier). J'obtiens l'aspect général des choses après avoir décidé quels éléments sont les plus importants, puis directement dans le HTML.
J'ai déjà utilisé Photoshop et Balsamiq et Omnigraffle, mais j'ai toujours eu l'impression de perdre mon temps parce que peu importe à quel point ils étaient beaux, je devrais tout recommencer quand j'arriverais au balisage.
Je me sentais beaucoup mieux pour froisser un morceau de papier sur lequel j'ai travaillé pendant 10 minutes que pour supprimer un fichier Omnigraffle sur lequel j'ai travaillé pendant quelques heures.
Je suis un utilisateur de PowerPoint depuis un certain temps mais je suis fatigué de ses fonctionnalités limitées et du fait qu'elles ne sont pas interactives.
Bien que ce ne soit pas l'option la moins chère, je dois dire que pidoco semble être l'une des meilleures solutions d'outils filaires pour mes besoins car ils sont basés sur un navigateur et me permettent d'exporter vers différents formats et d'obtenir mon travail révisé rapidement. Oui, les fonctionnalités de révision sont assez cool en effet ..
Certes, il existe plusieurs bons outils de maquette, mais ils manquent généralement de portabilité ... alors oui, pidoco est la solution pour moi jusqu'à présent!
Nous utilisons Adobe InDesign. Cela peut sembler un peu étrange mais il y a des fonctionnalités que j'aime:
- il a une interface "de style Adobe". Si vous avez travaillé avec Photoshop ou d'autres produits Adobe, il serait facile d'apprendre à utiliser InDesign
- il peut exporter vos wireframes en PDF cliquables
- il a de puissantes capacités pour travailler avec la typographie, les tableaux, les styles, les grilles, etc.
- il est facile de créer non seulement un simple filaire mais aussi une conception visuelle complexe si nécessaire
Pencil for FireFox est un plugin gratuit et peut également fonctionner comme un outil autonome.
La prochaine étape est quelque chose comme Open Office Draw (également gratuit).
Le stylo et le papier sont également bons.
Vous pouvez également essayer quelque chose comme FlairBuilder qui est une application AIR.
En utilisant Photoshop, je modifie le .psd dans la grille 960 ( http://960.gs/ ) pour créer des wireframes.
Je suis assez content de commencer avec des croquis au crayon puis de passer à OmniGraffle.
Nous avons également utilisé FlairBuilder. C'est décent pour les wireframes et les prototypes très simples, mais nous avons rencontré un certain nombre de limitations. Alors que nous continuions à mettre à jour le prototype, nous avons constaté qu'il devenait douloureusement lent. Nous envisageons maintenant Axure pour le prototypage.
J'utilise Post-its pour la structure et la mise en page globale, puis je passe aux maquettes Balsamiq ou OmniGraffle, et pour les prototypes haute fidélité, rien ne vaut Apple Keynote. :)
Je ne peux pas dire assez de bonnes choses sur http://hello.hotgloo.com/ Je l'ai utilisé pour le cadrage en collaboration et c'est génial.
Oh et c'est gratuit pendant qu'ils sont en version bêta.
J'adore iPlotz. Certaines des fonctionnalités qui m'ont vendu:
- Abordable!
- Gestion des tâches
- Prototypes cliquables
- Exporter en image ou PDF
- Partager et commenter les capacités
- Interface utilisateur simple avec de nombreux widgets disponibles
- Skins pour sketch, Windows et Mac
Avant iPlotz, j'utilisais Photoshop.
- Candace
J'utilise des maquettes Balsamiq pour les wireframes. Si la conception est interactive, j'utilise PowerPoint. Pour les maquettes haute fidélité, PowerPoint est roi.
À propos des outils de prototypage haute fidélité, il y a ceux qui vous permettent de simuler la conception et les effets presque finaux, tels que iRise et Justinmind Prototyper . Ceux-ci ne vous permettent pas simplement d'esquisser le filaire, mais d'incorporer des vidéos, de créer des interactions riches (telles que le remplissage de formulaires et l'utilisation de données), et sont mieux de créer des spécifications et des tests utilisateur.
Ils sont un peu plus loin des outils de dessin simples comme Visio, OG ou Balsamiq.
Nous avons essayé plusieurs outils de wireframing, mais nous nous sommes contentés de pidoco.com car il contient des tests de convivialité utiles et est entièrement en ligne.
Feux d'artifice, haut la main est l'un des meilleurs outils là-bas; non seulement pour le wireframing mais aussi pour la transition du wireframe à la maquette et pour l'exportation de prototypes HTML interactifs.
Il propose une bibliothèque de composants Nice. Les outils sont faciles à comprendre. Il prend en charge les pages et les états.
Ce n'est peut-être pas le choix le moins cher, mais en toute honnêteté, c'est l'un des meilleurs outils sur le marché.
J'ai utilisé (et j'ai été très impressionné par) les maquettes Balsamiq, mais comme le dit Nathanel, il a certaines limites.
Je ne sais pas si vous l'avez vu ou non, mais Sitepoint l'a posté il y a quelques mois, mais c'est probablement toujours pertinent. Peut-être que certaines choses méritent une enquête plus approfondie.
Comme la plupart des gens ici, il semble que j'utilise Balsamiq pour faire des maquettes approximatives à la volée, mais les limites de l'interface (et la tendance occasionnelle à planter) obligent à utiliser Omnigraffle pour des travaux de wireframing plus solides, généralement avec les pochoirs Konigi mais de plus en plus aussi avec le mien. Je trouve qu'une fois que vous avez investi le temps nécessaire pour vous habituer à créer des modèles et des gabarits, ainsi qu'à maîtriser les couches et les variables partagées, Omnigraffle est la combinaison parfaite d'application puissante et riche en fonctionnalités et de production rapide/facile. Le seul inconvénient est bien sûr que vous ne pouvez pas le partager facilement avec les personnes Visio. Ils disent que vous pouvez utiliser les exportations de fichiers basées sur XML que les deux packages prennent en charge, mais cela ne fonctionne jamais vraiment parfaitement et vous vous retrouvez manuellement à trier tous les problèmes.
Je vous suggère de jeter un œil à EightShapes Unify ( http://unify.eightshapes.com/ ) ... Je viens de commencer à le regarder et je n'ai pas obtenu de nouveau projet à essayer avec, mais il ressemble vraiment à un cadre de tueur pour Wireframes et d'autres livrables de conception.
PS C'est totalement gratuit mais vous avez besoin d'Adobe InDesign pour l'utiliser.
Je suis passé de Balsamiq + Napkee à iPlotz - j'adore ça, car vous pouvez créer un prototype brut de travail tout en créant vos maquettes sans travail supplémentaire. J'ai fait un résumé à ce sujet ici: http://www.snipe.net/2010/02/wireframes/
Comme toutes choses, cela dépend de ce que vous espérez accomplir.
J'ai utilisé PowerPoint pendant longtemps et c'était bien.
L'outil filaire le plus complet que j'ai rencontré est Axure (http://www.axure.com/), idéal pour créer des filaires navigables haute fidélité. De plus, il a récemment été lancé pour mac.
Je trouve Balsmiq (http://www.balsamiq.com/products/mockups) un peu délicat, bien que j'aime l'approche `` sketch '' comme si vous recherchiez des commentaires, j'ai trouvé que quelque chose de plus soigné avait l'air - le moins probable vous devez obtenir des commentaires par crainte que ce soit trop loin.
http://gomockingbird.com/ est un excellent outil gratuit, mais assez basique.
Si vous avez un mac, Omnigraffle est génial et vous pouvez télécharger une gamme de pochoirs gratuits sur http://graffletopia.com/
Mais ne sous-estimez jamais la puissance du stylo et du papier - c'est de loin le meilleur pour produire rapidement des idées
Ce billet de blog sur l'utilisation de Google docs, des dessins Google semble intrigant:
http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/
Les outils les plus appropriés pour le wireframing et le prototypage dépendent en grande partie, par ex. sur la structure de votre équipe (interopérabilité, partage,…), l'état du projet (=> fidélité visuelle et fonctionnelle nécessaire) et le type de parties prenantes à qui vous souhaitez communiquer votre conception. Si vous travaillez au moins partiellement à distance avec une équipe distribuée, les exigences sont très différentes de celles d'avoir tout le monde sur place. D'autres influenceurs comprennent par exemple édition et versionnage distribués. (À mon humble avis, le livre de Zaki Warfel sur le prototypage fournit un point de départ utile lorsque vous devez évaluer des alternatives.)
Mon propre flux de travail tourne principalement autour du papier (esquisse à main levée, esquisse avec des modèles de grille de base, parfois des pochoirs en carton pour les éléments souvent utilisés,…), puis le plus souvent OmniGraffle à un stade ultérieur, parfois complété par Indesign, Fireworks (uniquement avec certains clients, si des compositions hifi sont requises - sinon ses performances GUI sont un PITA majeur) ou Keynote (idéal si vous avez besoin de toutes sortes de transitions). J'envisage actuellement de migrer vers Axure RP. Passer devant des prototypes de papier et des maquettes cliquables laisse actuellement essentiellement le format natif, c'est-à-dire le plus souvent HTML/JS (y compris jQuery). Balsamiq et d'autres solutions basées sur navigateur ou RIA jusqu'à présent se sont sentis trop lents et gênants pour moi, je n'arrive tout simplement pas à me mettre en mouvement avec eux. (Les fonctionnalités de collaboration et de test de Pidoco peuvent cependant être intéressantes dans certaines circonstances.)
J'utilise Gliffy (outil en ligne) pour les wireframes simples
Mockingbird est un outil en ligne qui vous permet de créer, de lier ensemble, de prévisualiser et de partager des maquettes de votre site Web ou application.
C'est encore une version bêta précoce et je ne suis pas sûr du prix, mais cela vaut la peine de garder un œil. C'est une application web écrite en Cappuccino donc pas besoin de Flash ...
Cheers R
Bien que je sois sûr que beaucoup de ces outils sont bien meilleurs, voici une solution "low-tech" (étant donné que vous avez PowerPoint) http://www.raizlabs.com/blog/294/wireframing-in -PowerPoint
Ajout d'une ressource dans ** pour prendre en charge l'esquisse comme un excellent outil de wireframing:
50 ressources d'esquisse pour les concepteurs d'expérience utilisateur ** qui comprend l'esquisse:
- des articles
- outils
- modèles
- présentations
- vidéos
- livres
- exemples
Firefox Pencil Plugin est un autre outil à vérifier.
http://pencil.evolus.vn/en-US/Home.aspx
Son gratuit, a un joli jeu de base de pochoirs et quelques pochoirs sommaires. Vous pouvez obtenir des maquettes approximatives assez rapidement. Pas autant de pochoirs que d'autres outils, mais cela fonctionne plutôt bien.
J'utilise Axure et j'en suis plutôt satisfait. J'ai quelques idées de développement pour rendre la convivialité du programme plus pratique et plus rapide. Par exemple, il manque des fonctionnalités lors du traitement du texte (alignements, alignement texte-image, etc.)
Je n'ai pas encore essayé d'autres trucs!
WireframeSketcher est un outil logiciel qui permet de créer rapidement des wireframes, des maquettes et des prototypes pour les applications de bureau, Web et mobiles. Il s'agit à la fois d'un plug-in pour tous les IDE basés sur Eclipse et d'une version autonome.
J'utilise Justinmind, idéal pour filaire et prototyper des sites Web dynamiques (événements de type JS et intégrer vos propres données) sans codage (même les interactions sont glissées et déposées).
Ils offrent également un service pour partager vos wireframes en ligne afin que les gens puissent commenter directement les éléments et vous pouvez même effectuer des tests utilisateur car il intègre la plupart des outils de test utilisateur (clicktale, userzoom, google analytics ...).
J'ai trouvé MS Visio assez flexible si vous avez les bons fichiers de support. J'utilise...
Visio - le pistolet à ongles du concepteur d'interaction (3e édition)
Widgets Web de base dans les versions standard et "sommaires"
Trucs et astuces Visio pour les concepteurs d'interaction
Macros qui facilitent considérablement l'utilisation de Visio. En particulier, copier des pages et copier/coller des éléments "sur place".
Voici un outil en ligne qui a un plan gratuit ainsi qu'un très bon marché à 50 $/an: http: //www.mockflow. com /
J'en ai assez de voir les gens dire qu'ils n'utilisent que du stylo et du papier.
Si vous pouvez créer des cadres complexes avec du stylo et du papier, soit vous n'êtes pas efficace, soit vous ne réutilisez jamais des modules de conceptions antérieures ou c'est votre premier;)
L'intérêt d'un outil d'esquisse doit être de créer une bibliothèque de modèles et de l'utiliser afin de pouvoir vous concentrer sur les éléments du projet qui sont intéressants et innovants au lieu des parties ennuyeuses que vous avez faites tant de fois auparavant.
L'ensemble "Je n'utilise que du stylo et du papier" me rappelle l'époque où chaque codeur HTML, avec fierté, affirmait qu'il n'avait jamais utilisé autre chose que le bloc-notes pour coder. D'accord, les outils de l'époque étaient mauvais (vous vous souvenez de Frontpage?) - mais quand même ...
Comon! Bien sûr, vous utilisez parfois un stylo et du papier, mais sérieusement, lorsque les gens demandent des conseils sur les outils - ne vous moquez pas d'eux en suggérant un stylo et du papier - ne pensez-vous pas qu'ils connaissent le stylo et le papier avant de poser la question?
J'utilise Axure. Ce n'est pas joli mais ça fait le travail.
(Ne me lancez pas sur ceux qui disent qu'ils passent directement au HTML. Ils sont pires que le stylo et le papier.)
J'utilise ForeUI qui est un excellent outil pour créer des prototypes, dans lequel vous pouvez ajouter un comportement pour simuler un comportement système assez complexe. - Si cela est nécessaire pour votre prototype.
Le prototype DHTML peut être exporté et exécuté dans n'importe quel navigateur prenant en charge Java et facilement partagé avec des collègues et des clients.
Je conçois des logiciels pour Windows, mais ForeUI peut être utilisé pour tout, y compris le Web.
Il fonctionne sur Windows, Mac, Linux et Solaris et le prix est de 99 $. Habituellement, une nouvelle version est publiée tous les quinze jours. Retrouvez plus de détails sur www.foreui.com.
Je voudrais ajouter un générateur de maquette gratuit, rapide, basique et en ligne: (Silverlight requis) http://www.mockupbuilder.com/App
Je l'utilise quand j'ai besoin de quelque chose de brouillon, rapide, en ligne!