Quel outil dois-je utiliser pour créer des maquettes d'interfaces utilisateur pour les grands écrans?
Je développe des interfaces utilisateur pour les grands écrans. Beaucoup d'entre eux prennent en charge l'interaction multi-touch. J'ai commencé à dessiner des maquettes manuellement avec du stylo et du papier. Pour diverses raisons, je veux le faire avec un ordinateur à l'avenir. Tout d'abord, il est plus facile de le stocker et j'espère qu'il existe des programmes qui me aident à copier plusieurs éléments de l'interface utilisateur dont j'ai besoin plusieurs fois.
Donc ma question est: y a-t-il de bons programmes qui peuvent me soutenir dans la création de maquettes d'interfaces utilisateur "non traditionnelles"?
Oui. Vous aimerez Balsamiq Markups . Vous pouvez même le rendre un peu interactif.
SketchFlow qui fait partie d'Expression Blend Studio de Microsoft est vraiment, vraiment bon ...
Il y a aussi
Après avoir testé de nombreux programmes et sites Web, j'ai constaté que Fireworks est une très bonne option au cas où vous l'auriez, et si vous devez exporter l'esquisse en html ou pdf.
Mais le meilleur de mon point de vue et ce que je fais la plupart du temps, c'est d'utiliser un crayon et des papiers sans utiliser l'ordinateur.
Tout le monde lance diverses options logicielles de wireframing. Ce qui est bien. Mais cela n'amène pas vraiment aux problèmes les plus importants.
À mon humble avis, les wireframes sont abusés et on leur demande de faire des choses que les wireframes ne devraient jamais avoir à faire. L'une de ces choses consiste à définir l'interface utilisateur. Les wireframes sont parfaits pour le brainstorming et peuvent aider à déterminer les mises en page, les zones de contenu et les flux d'utilisateurs globaux, mais ils sont pas conçus pour des interfaces utilisateur entièrement étoffées.
Je vous encourage fortement à vous en tenir au crayon et au papier pour le wireframing général. Pour une interface utilisateur détaillée, entrez dans le prototypage plus tôt que tard et utilisez les outils que vous utiliseriez normalement pour créer vos éléments d'interface utilisateur (tels que PhotoShop, Illustrator, etc.)
J'aime Scetchflow. Mozilla dispose d'un outil de prototypage gratuit "Crayon Evolus". Cette application est disponible en tant qu'extension Firefox ou en tant qu'application autonome et dispose de plusieurs widgets. Vous pouvez même créer vos propres widgets avec XML (mais c'est un peu compliqué).
Vous pouvez rendre vos croquis numériques facilement avec JotNot Pro: http://drawingdownthevision.com/virtual-office-sharing-sketches-instantly-digitally/
Si vous voulez des maquettes/prototypes uniquement numériques ... le meilleur outil IMO est Protoshare. (Nous l'utilisons en interne chez P&G.)
Cependant, je vous conseille fortement de vérifier ceci pour voir le plus grand processus créatif avant de passer uniquement au numérique: http://atsiem.com/wp-content/uploads/2011/04/FromPaperToPixels.pdf
Pour garder l'esprit ouvert et vous assurer que les maquettes numériques que vous enregistrez valent leur octet ... prenez un stylo et des modèles et concentrez-vous uniquement sur l'esquisse. Essayez d'obtenir 10 croquis de vos pages de haut niveau, alors seulement devriez-vous envisager de passer au numérique.
Je préfère ne pas utiliser l'approche "écran" jusqu'à ce que je doive utiliser des wireframes pour communiquer avec le client, et quand je le fais, je les rend interactifs pour que le client puisse avoir une idée de ce qui se passe.
Lorsque je conçois l'interface utilisateur, j'utilise un crayon et des tonnes de papier mais aussi des CISEAUX et de la COLLE pour tester tout ce que je peux. Prendre des photos de chaque état/révision afin que je puisse faire les wireframes finaux.
Une autre option consiste à utiliser une tablette graphique avec une application de retouche d'image comme Photoshop ou The Gimp. Cela vous donne les avantages d'un prototypage rapide et de la liberté de mouvement, avec la possibilité de recolorer, de supprimer et de réorganiser les objets à volonté.
Si vous avez un Mac, j'apprécie vraiment OmniGraffle pour les maquettes de l'interface utilisateur. C'est un usage général, mais vous pouvez trouver des pochoirs supplémentaires à partir de Graffletopia . Habituellement, je trouve les pochoirs qui nécessitent peu de modifications avant de les ajouter à une maquette. Par exemple, voici certains pochoirs tactiles et gestuels
Cependant, j'ai toujours trouvé qu'il était préférable de noter d'abord l'idée sur papier juste pour gérer des problèmes plus importants avant de créer une maquette numérique.
Je préfère Axure , car il est facile à apprendre et à utiliser. Vous pouvez trouver divers documents d'aide et vidéos sur leur page Web.
Je l'ai récemment évalué pour mon entreprise et nous avons acheté une licence. Nous concevons un prototype complet au sein d'Axure d'un de nos nouveaux produits (Web-Client) avant de coder. Il est très rentable de produire ces maquettes et elles peuvent être connectées à une logique métier un peu, qui est très appréciée par les gestionnaires pour "ressentir" et voir comment l'utilisateur utilisera le logiciel.
Nous avons réussi à remarquer de nombreux problèmes et avons obtenu plusieurs nouvelles idées avant de développer le vrai produit. Nous avons maintenant un prototype de ce que nous voulons construire et les développeurs peuvent transférer les images en code. Ils économisent du temps et de l'énergie immersifs car ils n'ont pas besoin de réfléchir à tous les aspects de la conception.
Il est également multi-OS (Mac et Win) avec une licence. Malheureusement, les frais de licence sont un peu élevés et le logiciel n'a pas de processus de mise à jour automatique. Si vous êtes membre de l'UPA, vous obtenez la licence pour moins cher.
Comme déjà mentionné ... JustInMind est un excellent outil pour utiliser et créer des wireframes interactifs. Je viens de l'utiliser pour créer une maquette iPhone interactive d'une APP que mon PDG voulait suggérer de construire. L'inconvénient de ce logiciel est qu'il coûte 500 dollars pour une seule licence; ils offrent des rabais si vous êtes admissible, mais offrent un essai de 30 jours.
Balsamiq est également un outil amusant et rapide à utiliser, mais il n'est pas très interactif.
Je serais d'accord que Omnigraffle serait votre meilleure option ici (si vous êtes un utilisateur Mac). Vous pouvez travailler sur plusieurs pages et il est assez facile de créer des éléments réutilisables. Avec le Konigi Wireframe Stencils , vous pouvez créer une maquette low-fi décente.
Une autre bonne option mac que j'aime bien est Antetype (bien qu'il soit plus adapté au prototypage). Si vous n'êtes pas sur un Mac, je recommanderais Balsamiq , comme d'autres l'ont fait.
J'utilise les trois ci-dessous:
- Maquettes Balsamiq (pour des croquis rapides)
- Visio (pour les spécifications)
- Expression Blend (pour les maquettes/prototypes interactifs)
Si vous utilisez un iPad, alors App Cooker est assez facile à utiliser avec quelques fonctionnalités intéressantes.