Pour élaborer rapidement et concrètement l’agencement de l’information (et le zoning) et des fonctionnalités d’une future interface, le maquettage en fil de fer (wireframe) est souvent un passage obligé de l’approche ergonomique. Comme le dit Jean-François Nogier dans son ouvrage : “Le prototypage est la clé de voûte du développement itératif“.
Voir notre formation Adobe XD pour concevoir des maquettes UX/UI
Que l’on soit à l’aise ou non avec un crayon à papier, quand un client veut pouvoir se représenter concrètement sa future interface, l’esthétique du wireframe a tout de même son importance. De nombreux outils sont à portée de souris et tout dépend de ce que l’on veut en faire. Je vous en propose donc quelques uns, du plus basique au plus étoffé, du plus statique au plus fonctionnel (n’hésitez pas à nous en suggérer d’autres!).
Les plus populaires |
||||
Axure, assurément le meilleur compromis en termes de possibilités de prototypage statique ou fonctionnel et d’architecture de l’information, sans connaissance en programmation. Il génère même du javascript en toute transparence (rendu au format html). Un module supplémentaire permet le partage de prototype en ligne et l’ajout de commentaires aux pages, de code Google Analytics, etc. (module ax-admin). Un dernier argument pour être convaincu est la génération automatique de spécifications fonctionnelles de belle facture.
Voir à ce sujet notre formation Axure |
||||
Patterns |
Fonctionnel |
Rapidité |
Prix |
Le site officiel |
Omnigraffle, une application mac très populaire, orientée plutôt à l’origine pour concevoir de jolis diagrammes et des graphismes vectoriels. Elle tire son épingle du jeu par la possibilité d’échanges avec Visio certes uniquement sur PC, mais également par une très riche bibliothèque d’icônes et de patterns sur Graffletopia. Superfiction le vend très bien sur ce post! | ||||
Patterns |
Fonctionnel |
Rapidité |
Prix |
Le site officiel |
Balsamiq Mockup, utilisable facilement en ligne (Flex) ou en logiciel, le rendu ressemble à du dessin bien qu’il reste très efficace (exportable au format png (et xml avec le logiciel)), question de goût. | ||||
Patterns |
Fonctionnel |
Rapidité |
Prix |
Le site officiel |
Les valeurs montantes |
||||
FlairBuilder, une application AIR plutôt efficace, avec de nombreux patterns personnalisables et configurables. Pour l’instant, il ne peut exporter qu’en image, mais ils promettent d’autres formats (html, flex) et il semble déjà possible d’importer des maquettes réalisées avec Balsamiq Mockups. | ||||
Patterns |
Fonctionnel |
Rapidité |
Prix |
Le site officiel |
Justinmind, un autre très bon compromis en termes de possibilités de prototypage statique ou fonctionnel sans connaissance de la programmation,… comme son grand frère Axure ! il a par contre quelques fonctionnalités supplémentaires tels que l’aide au positionnement des objets ou la possibilité de collaboration avec les clients (serveur dédié et ajout de commentaires en ligne).Un point fort qui le démarque également est l’interactivité avec des données sous forme de tableaux par exemple (ex: ajout, modification, suppression). | ||||
Patterns |
Fonctionnel |
Rapidité |
Prix |
Le site officiel |
WireframeSketcher, un plugin de l’environnement Eclipse (environnement de développement multilangage et libre), dédié à la création de prototypes. Malgré une liste de patterns assez basiques, il offre un gain de temps sans conteste pour l’intégration et le développement d’application.
|
||||
Patterns |
Fonctionnel |
Rapidité |
Prix |
Le site officiel |
Encore quelques autres |
||||
Pencil Sketching, une extension de Firefox contenant l’essentiel des éléments fonctionnels de tout interface (bouton, liste déroulante, zone de texte, etc.). Vraiment très basique et assez configurable (rendu exportable simplement au format png). | ||||
Patterns |
Fonctionnel |
Rapidité |
Prix |
Le site officiel |
MockupScreens, un logiciel de wireframe plutôt basique et facile d’utilisation, générant une maquette fonctionnelle (rendu au format html). | ||||
Patterns |
Fonctionnel |
Rapidité |
Prix |
Le site officiel |
Oversite, un logiciel de wireframe assez basique, permettant en particulier de définir l’architecture d’un site web et les liens entre pages, et donc une maquette fonctionnelle (rendu exportable au format html). | ||||
Patterns |
Fonctionnel |
Rapidité |
Prix |
Le site officiel |
Gliffy, plutôt généraliste dans la manipulation d’objets, il permet néanmoins un maquettage efficace bien que basique (rendu au format html). | ||||
Patterns |
Fonctionnel |
Rapidité |
Prix |
Le site officiel |
Protoshare, uniquement en ligne, ce logiciel permet de créer des maquettes très riches dans un espace collaboratif où les différents intervenants pourront apporter leurs contributions au projet. | ||||
Patterns |
Fonctionnel |
Rapidité |
Prix |
Le site officiel |
Prototype Composer de Serena, un logiciel complet de la définition de l’architecture de l’information à l’interface finale (rendu exportable simplement au format Visio). Toutefois, la richesse des fonctionnalités ne fait pas forcément l’efficacité des maquettes. | ||||
Patterns |
Fonctionnel |
Rapidité |
Prix |
Le site officiel |
Il existe encore un bon petit nombre d’applications susceptibles de vous convaincre de l’utilité du maquettage dans une phase de conception, citons notamment :FluidIA, Foreui, Microsoft Expression – Sketchflow. Certes, d’autres logiciels comme Dreamweaver, Flash, iRise ou Visio permettent de faire des prototypes bien plus puissants et fonctionnels… mais leur maniabilité demande davantage de temps et/ou de connaissances (programmation, interaction avec des bases de données, etc.).
Touche d’humour: Si vous avez la possibilité d’amener votre porte de frigo en réunion, je vous conseille également guimagnets… une autre manière de faire du maquettage un jeu?! |
1ère publication (3/12/2008)
1 – Mise à jour suite au commentaire de Eric-superfiction: Ajout de Gliffy et Protoshare, et ajout de notations détaillées (3/6/2009)
2 – Mise à jour suite aux commentaires de Régis sur de nouvelles fonctionnalités d’Axure et l’arrivée à maturité de Justinmind (8/9/2009)
3 – Mise à jour face à la percée de FlairBuilder et WireframeSketcher, et l’omission volontaire mais temporaire d’Omnigraffle, ainsi que quelques petits ajustements de détails (24/02/2010)
Lire aussi :
- Maquettage d’interface
- Prototypage ou réalisation de prototypes d’une application
- Qu’est-ce qu’un Wireframe ?
- Qu’est-ce qu’un mockup ?
- Choisissez votre outil de maquettage ! Notre liste d’outils de maquettage
- Le Kit de Maquettage, un outil pour la conception d’interface
- Outils de prototypage d’interface
- Pourquoi utiliser Axure pour votre prototypage ?
- Les 20 meilleurs plugins Figma en 2024
- 7 bonnes raisons d’utiliser Figjam
Tu peux rajouter Gliffy (outil online) et Protoshare dont je vais parler bientôt.
http://www.superfiction.net/blog/index.php?2008/09/11/304-les-outils-online-de-conception-de-wireframes-1-5-utiliser-gliffy
http://www.protoshare.com/
J’ai également rédigé une série de billets sur les outils de prototypage :
1. les outils online
Gliffy, Jumpchart, Balsamiq… ici :
http://www.superfiction.net/blog/index.php?q=Les+outils+online+de+conception+de+wireframes
2. les outils offline :
– powerpoint : http://www.superfiction.net/blog/index.php?2007/03/13/125-creation-de-wireframes-article-1-3-utiliser-microsoft-powerpoint
– visio et ses pencils spécifiques : http://www.superfiction.net/blog/index.php?2007/03/18/127-creation-de-wireframes-article-2-3-utiliser-microsoft-visio
– axure et son module de rédaction des spécifications :http://www.superfiction.net/blog/index.php?2007/03/22/128-creation-de-wireframes-article-3-3-utiliser-axure-rp-pro
Je ne connaissais pas 2 ou 3 outils, merci pour ce billet !
Tes articles sont plutôt bien détaillés, c’est très utile!
J’ai donc ajouté Gliffy et Protoshare dans cette liste, puisque ce blog a une vocation collaborative.
J’en ai profité pour proposer des notes à chaque, pour rendre compte du nombre et de la qualité des patterns à disposition, la capacité de maquettage fonctionnel/dynamique, la rapidité de prise en main et de création, et le niveau de prix.
Merci pour cette liste d’outils, afin de pouvoir y piocher en fonction de nos besoins :) Après, ce qui me plait beaucoup dans le papier crayon, c’est la possibilité de le modifier en instantané, peu importe les compétences réunies autour de la table… et on peut avoir une mémoire “graphique” du cheminement des idées à coups de traits (j’évite de gommer ou faire gommer: je fais plutôt plusieurs photocop’ d’une même idée, qui va se transformer sous les coups de crayons, parfois rageurs ^^ , des participants: quand c’est trop plein, on peut passer à une version propre!)
Bonjour,
Merci pour ce post et les précisions d’Eric.
Si je comprends bien, l’outil le plus recommandable est AXURE ?
Vous confirmez ?
Personnellement, je recommanderais Axure pour la qualité des prototypes fonctionnels que l’on peut réaliser (à la fois graphiques et utilisables). Ce qui peut servir pour des tests utilisateurs, mais également pour vérifier la faisabilité du design avant un maquettage html (proportions, tailles, agencement, etc.)
Bien entendu, comme le commentait Céline, tout dépend du besoin. Car les échanges avec les clients sont aussi très fructueux sur papier (avec ciseau et colle si nécessaire) lorsque l’on réfléchit ensemble à l’agencement de l’interface et son contenu.
Si vous avez aimés Balsamiq or MockupScreens vous pouvez aussi jeter un œil sur WireframeSketcher. C’est un plugin Eclipse pour créer des wireframes:
http://wireframesketcher.com
Un billet complémentaire vient d’être publié sur le blog Adaptive Path (en anglais) :
http://www.adaptivepath.com/blog/20…
On retrouve les mêmes outils, mais aussi des outils de développement comme Dreamweaver, Flash ou Flex, qui à mon avis sont mal adaptés au prototypage car ils demandent plus de temps pour réaliser un prototype.
Bonjour,
pour compléter Axure, on a développé une solution qui permet de palier à certains manques comme le partage du prototype en ligne et l’ajout de commentaires aux pages, code google analytics…
sinon, très bon article, depuis il y a justinmind qui est sorti
http://www.justinmind.com/
et d’autres en prévisions comme http://wireframesketcher.com/
Et Omnigraffle alors ?
http://www.superfiction.net
Bonjour,
Excellent article! très complet et bien documenté!
Merci d´avoir citer Justinmind! La plupart de nos clients utilisaient Axure avant, mais il ont été seduit par nos fonctionnalités de simulation instantannée, la simulation de données sans aucune programmation (ni DB), et par sa facilité d´utilisation (tout se fait par glisser/déposer). Justinmind permet entre autres, d´associer des commentaires aux élements (par glisser/déposer), créer des modèles de documentation (générés automatiquement en .doc) et tout type de diagrammes (flux de navigation…). De plus, le code HTML géneré permet aussi d´intégrer tout type de codes (GA, clicktale) pour réaliser des tests utiisateurs.
Nous proposons un outil très complet qui fluidifie vraiment les projets IT de A à Z.
Bonjour,
très intéressant mais existe-t’il des outils qui permettent de faire de la spécification d’interface et du prototypage pour périphériques mobiles ?
J’ai consulté plusieurs des outils présentés ici mais n’en ai pas trouvé qui proposait des composants orientés maquettes pour ihm mobiles (ex : composants iphone pour le rendu) ?
La plupart des logiciels de maquettage avancé comme Axure sont tout à fait appropriés pour le prototypage et la génération de spécifications de qualité.
J’ai dernièrement réalisé des prototypes d’interfaces tactiles pour des écrans de différentes dimensions (3,5”, 12”, etc.). L’utilisation et la démonstration de maquettes fonctionnelles en html sur des périphériques mobiles ne pose pas de problèmes particuliers. Un navigateur internet suffit !
Toutefois, il ne faut pas brûler les étapes dans la conception de logiciels, quel qu’il soit. C’est une question de méthode !
L’intégration de composants graphiques tels que ceux de l’iPhone, doit se faire dans un second temps, une fois que la définition des scénarios d’utilisation a été validée par des utilisateurs notamment.
De nombreuses ressources existent selon les plateformes (http://iphoneized.com/2009/11/21-pr…). Autrement, Apple propose le logiciel adapté pour le développement d’applications dédiées Dashcode (http://developer.apple.com/tools/da…)
Bien entendu, à utiliser dans le cadre d’une méthode de conception centrée utilisateur !
Bonjour et bien vue pour la MAJ c’est ce qui m’a permis de trouver ce site.
c’est justement le genre d’outils que je cherchais pour un projet.
Maintenant il ne me reste plus qu’a faire mon choix, et à tester les différents logiciels proposés.
Merci de ce partage
Y’aurait il par hasard un outil de ce type performant et euh … Gratuit?
Des outils gratuits et performants… bien difficile à trouver!
WireframeSketcher pour Eclipse n’est pas si mal, bien qu’un peu compliqué à prendre en main. Xcode sur mac, est pas mal non plus bien que limité aux applications mac Dashboard et Iphone
Certains dans cette liste le sont, mais soit la qualité graphique n’est pas là, soit c’est les possibilités de prototypage dynamiques qui manquent : http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/
ou bien ici
http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/
Très bon choix de logiciels, mais on oublie toujours le vilain petit canard de la suite Adobe CS, Fireworks !
J’utilise Fireworks depuis des années pour tous mes prototypages, son utilisation et ces divers formats d’exportation en font pour moi un logiciel qui mérite vraiment à être connu et surtout à être utilisé.
Ne faite pas l’impasse sur son installation comme beaucoup de personnes le font.
Bonjour,
Un petit lien vers un nouveau comparatif d’une 20ène d’outils intéressants du même type que ceux présentés dans cet article : http://www.hongkiat.com/blog/wireframing-prototyping-tools/