Aller directement au contenu

Choisissez votre outil de maquettage ! Notre liste d’outils de maquettage

10/12/2012

À l’approche des fêtes, nous avons décidé de remettre à jour notre liste d’outils de prototypage d’interface. Parmi trente outils testés, nous en avons sélectionné une vingtaine, en les catégorisant pour vous aider à mieux choisir. N’hésitez pas à réagir à cette liste pour le plus grand bonheur de tous.

Vous souhaitant une bonne lecture et d’excellentes fêtes !

Des outils très complets pour des interactions très poussées

Axure


Axure, est incontestablement indétrônable en termes de maquettage dynamique. Sa prise en main est facile et permet de créer rapidement des maquettes. Avec la pratique, ce logiciel permet le maquettage d’interactions complexes et réalistes. La bibliothèque propose les composants essentiels à la conception d’écrans et est facilement personnalisable. Sa logique de ‘’master’’ permet de s’organiser méthodiquement dans la construction des écrans. La création de variables et l’utilisation des « Dynamic Panels » permettent les interactions riches et une profondeur de détails dans les scénarios. Axure génère des fichiers HTML couplés à du javascript (bien sûr inexploitables) ce qui simule une maquette interactive des plus réalistes. N’oublions pas la possibilité d’élaborer des scénarios et de partager ses maquettes en ligne. Un petit bémol sur les interactions mobiles qui ne sont pas toutes reproduites.

Justinmind


Justinmind est un concurrent sérieux de notre bon vieux Axure. Justement, les modalités tactiles sont plus consistantes, avec par exemple la prise en compte du ‘’pinch open’’, ‘’pinch close’’ ou l’orientation portrait et paysage. Au niveau des fonctionnalités, il ne dépasse pas Axure mais est complémentaire. On apprécie les aides de positionnement d’objets ou les grilles configurables qui rendent la mise en page intuitive et efficace. Le mode collaboratif est utile pour travailler en équipe.

Une solution plus simple mais efficace

Balsamiq Mockup


Balsamiq, malgré son manque de richesse en interaction, reste apprécié pour créer rapidement des maquettes. La seule interaction possible est le ‘’clic and go’’, suffisant pour tester la navigation, mais qui nécessite un peu de bricolage si l’on veut simuler l’apparition d’un élément sur une même page. La richesse des composants qui comprend une thématique mobile rend le maquettage efficace. On ne s’étonnera pas que le HTML ne soit pas proposé à l’export au vu de la simplicité de l’outil. L’exploitation de png ou PDF interactif est basique mais utile. Un bémol sur la nécessité d’enregistrer chaque page créée qui ralentit l’utilisation de l’outil. Le côté esquissé des composants est un parti pris assumé qui donne une identité singulière à Balsamiq (au passage, cela nous rappelle l’aspect jetable du maquettage pour une démarche itérative).

Les outils généralistes

Certains outils ont des fonctionnalités qui ne sont pas nativement dédiées au maquettage. Vous les possédez déjà ? Autant vous en servir !

Power mockup


Power Mockup est une extension de powerpoint, qui permet d’importer une bibliothèque de patterns. L’avantage est que tout le monde (ou presque) possède ce logiciel de bureautique. Utile pour créer des slides de présentations, avec Power Mockup on peut rapidement élaborer des zonings d’écrans. L’interaction est limitée, similaire à Balsamiq mais la création d’un document de présentation, qui permet de simuler des interactions d’écran, s’avère fort utile.

Microsoft Visio

Visio est un outil qui permet la création de schémas, diagrammes et autre représentations visuelles. Dans sa version 2013 il propose une bibliothèque de composants d’interfaces. À ma grande surprise la création de wireframe exploitable est tout à fait convenable. Les interactions de bases permettent de concevoir la navigation des pages. La richesse des fichiers générés (y compris le HTML) satisfera tous les besoins. Cependant je trouve son utilisation freinante. Contrairement à un logiciel dédié au wireframe il faut tâtonner entre moult clics droits, boîtes de dialogues, listes déroulantes pour créer des interactions. Je ne le conseillerai donc pas pour un usage principal au maquettage.

OmniGraffle


OmniGraffle, l’équivalent de Visio sur mac propose dans sa bibliothèque de base des composants interactifs. L’interface standard Apple est facile à prendre en main et son usage est fluide grâce aux systèmes de calque, de patron et d’inspecteur. Les interactions basiques permettent de maquetter des scénarios efficacement. OmniGraffle génère, entre autres, des images, pdf et cartes d’images HTML facilement utilisables. Comme Visio, il englobe la création large de visuels mais, contrairement à celui-ci, je ne le déconseillerais pas. Son utilisation intuitive est une agréable surprise.

Pour les webdesigners

Adobe Fireworks


Fireworks est considéré comme l’outil phare pour le webdesign, et on ne pense pas assez à l’utiliser pour faire du maquettage. Pourtant sa bibliothèque riche de composants et la possibilité de mapper des interactions lui donne une efficacité dans la pratique du wireframing. Si certains considèrent que Photoshop est surdimensionné pour la pratique du webdesign nous pourrions retourner la remarque à Fireworks pour la pratique unique du maquettage. Une personne non familière de la suite Adobe aura besoin d’une phase d’apprentissage afin d’appréhender le logiciel. Je ne le conseillerais donc pas à un non initié. Il est plutôt destiné aux webdesigners qui maitrisent déjà l’environnement Adobe. Fireworks est également efficace pour la création de maquettes hautes fidélités (avec le design finalisé). La génération de HTML avec les images découpées lui confère une force globale de conception, réalisation et post-intégration d’interface.

Les solutions en ligne et collaboratives.

L’usage des applications web grandissent en popularités, elles peuvent s’avérer utiles pour un travail collaboratif.

Pidoco


Pidoco est un outil plutôt réussi. L’interface est claire avec un design sobre et structuré. Pour le web ou le mobile, le maquettage est facilement réalisable grâce à un panel de composants interactifs facilement personnalisables. Des détails basiques comme le magnétisme de la grille et de l’alignement rendent la mise en page rapide. Et la simulation presque instantanée d’une maquette rend l’outil très fluide. La possibilité de commenter la maquette est très utile pour la collaboration à distance.

MockFlow


MockFlow, situé au même niveau de Picodo.com sur pas mal d’aspects, propose en plus un chat pour dialoguer avec son équipe. L’interaction est légèrement plus limité mais la teneur graphique est aussi léchée (sobre et professionnelle). La librairie plus riche est thématisée par os ou type de projet et le Mockstore permet de le personnaliser. Les 2 outils génèrent une multitude de fichiers (pdf, word, HTML…).

Hotgloo


Dans le même style, Hotgloo est une web appli en flash qui présente la même efficacité de maquettage. Son avantage est assurément la richesse des possibilités d’interactions qui sont plus fournies. J’aime particulièrement les interactions préconfigurées sur les composants de navigation en fonction de l’arborescence existante.

ProtoShare

JustProto


Dans la même lignée, ProtoShare et JustProto proposent des interfaces plus typée logicielle. Les outils sont un peu plus complets et permettent d’être précis (panneau contextuel). Les bibliothèques sont riches et compatibles mobiles.

MockinBird


MockingBird, propose le minimum syndical. En effet, le rudimentaire  est présent à tous les niveaux (interaction, bibliothèque, style graphique) mais ça marche ! Idéal pour du zoning rapide, facilement testable.

Les outils gratuits

Pour les plus radins ;-) quelques outils gratuits permettent de faire du maquettage dynamique. Ils sont bien sur moins fournis mais ont le mérite d’être opérationnels.

Pencil


Pencil, en toute simplicité, se situe au niveau de Balsamiq. La bibliothèque riche et thématisée permet également de créer des schémas. L’interaction et les différents formats générés (dont le HTML) rendent le maquettage efficace.

Cacoo


Cacoo, dans un esprit convivial est une alternative intéressante aux outils payants. Conçu pour créer des diagrammes, il propose une interaction basique en ‘’clic and go’’ qui se compense par la richesse des composants graphiques. L’ensemble est plutôt efficace, cette application web propose un mode collaboratif et encourage le partage sur les médias sociaux.

Mockup Builder


Mockup Builder vaut également le détour. Il est étonnement intuitif, sûrement en raison de la simplicité des fonctionnalités.

Lumzy


L’interface ringarde de Lumzy n’est pas très attractive, mais cela n’enlève rien à l’efficacité de maquettage, on regrette le manque d’orientation mobile.

Gliffy


Gliffy, dans la veine de Visio ou Omnigraffle, permet de créer des visuels variés mais en version modeste. Les composants d’interfaces ne sont pas nombreux. Ce n’est pas l’outil le plus efficace pour créer des maquettes.

Des aides au maquettage papier et haute fidélité

Avant de s’attaquer au maquettage interactif, la phase de maquettage papier n’est pas à jeter à la corbeille ;-) Ces outils ne permettent pas de maquetter, mais d’enrichir la phase d’esquisse sur papier et aussi la phase de design graphique.

InVision


InVision est un outil en ligne qui permet d’importer des images et d’y appliquer des liens entre elles. Le design soigné, les tutoriaux efficaces et les modèles de projets assurent une prise en main facile de l’interface. L’interaction ne va pas bien loin : on relie les images en mettant des zones cliquables. Avec Invision on peut tester la navigation d’écrans esquissés mais aussi la cohérence finale des écrans habillés graphiquement. Le mode en ligne donne accès à un service de commentaires, pratique pour la collaboration à distance. Ce service gratuit est à garder sous le coude.

Prototyping on paper


Dans le même style, Prototyping on paper, est plus convivial et plus facile à utiliser. On ne peut pas complètement le comparer avec Invision puisqu’il s’agit d’une application iPhone. Son avantage est qu’avec le même terminal on photographie un écran dessiné et on le traite à travers l’application. L’usage est beaucoup plus fluide et plus fun. Il peut également être détourné dans un usage de maquette haute fidélité en important des écrans réalisés sous photoshop (par exemple). À avoir absolument, pour les projets mobiles !

Et en bonus !


Exemple de gabarit à imprimer par Raincreativelab

Quelques gabarits à imprimer pour le maquettage papier. Avec des grilles, des contextes de navigateur ou de mobile. Très utile pour éviter le syndrome de la page blanche! Merci Speckyboy.

Pour aller plus loin !

Vous souhaitez en savoir plus sur la pratique du maquettage et des méthodes de conception ? Nous vous proposons les formations suivantes :

14 Commentaires

  • Ghusse dit :

    Il existe également Pencil, logiciel libre et gratuit.

  • sebty dit :

    Bonjour,

    Je ne comprends pas l’absence du logiciel Pencil dans votre panel.

  • Valéry Ly dit :

    Article mis à jour avec Pencil.
    Merci Ghusse :-)

  • Ghusse dit :

    J’ajoute que Balsamiq a une offre en ligne, qui ne figure pas dans votre liste.

    Concernant Pencil, l’export PDF ne fonctionne pas correctement.

  • Sylvain dit :

    Plus récent, il y a aussi Mockps (https://moqups.com),
    outil en ligne qui ajoute une dimension de gestion de projets plutôt pratique. Pas encore eu l’occasion de le tester en production ;-)

  • ludolmn dit :

    Je recommande également l’excellent WireFrameSketcher avec des gabarits pour les plateformes mobiles et une approche héritage d’écran évitant les copier/coller lorsqu’on déroule un scénario. Très utile pour créer et intégrer ses propres UI design pattern !!!

  • Caroline dit :

    Votre article est très interessant, néanmoins j’y rajouterais http://uxpin.com/ , nouvel outil à grand potentiel.

  • JiDai dit :

    Après en avoir testé pas mal (qui sont présent dans votre liste), j’utilise finalement ForeUI (foreui.com), même si l’interface est pas terrible, c’est plutôt un bon compromis. Je ne voulais pas d’une solution hébergée. Donc c’était soit ForeUI, Axure ou Omnigraphe…

  • Paulpote dit :

    Merci pour cet article
    Il faut absolument rajouter Indigo Studio. C’est très interessant comme outil et gratuit en plus.
    Je pense que cet outil a un bel avenir devant lui.

  • Guillaume Wuip dit :

    Il y a également Moqups (http://moqups.com/#!/ ) qui est pratique (en ligne, compte, partage, projets)

  • Loïc Nunez dit :

    Bonjour, merci pour ce benchmark ! Nous pourrions aussi rajouter un outil qui prend de l’ampleur : https://www.lucidchart.com

  • ZenCoach dit :

    A ajouter aux solutions payantes intégrées : PowerPoint Storyboarding est une module complémentaire de PowerPoint qui s’éxécute après avoir installé Microsoft Visual Studio 2012. Ce module est une brique de la suite pour construire des pages sous Win 8. Il offre de nombreuses bibliothèques pour créer ses mockup. Des bibliothèques complémentaires , accessibles sur le site du producteur, permettent de télécharger gratuitement des composants pour iOS, Androïd. Cependant, comme tout bon produit de la firme, il est essentiellement utilisable pour un export vers VS. Il faut ajouter que PowerPoint est installé sur la plupart des machines du marché.

  • Solène dit :

    Je ne suis pas tout à fait en ligne sur le vocabulaire : je préfère utiliser les termes de wireframes, prototypes et maquettes pour désigner 3 phases différentes.

    1/ wireframe : (avec Balsamiq dans mon cas) pour établir les grands principes, l’organisation de la page, etc.

    2/ prototype : (avec Axure par exemple) on ajoute de l’interactivité et des action. On se rapproche de la maquette HD.

    3/ maquette : la « vraie » maquette sous Photoshop, l’étape du graphisme, à laquelle devra strictement se référer l’intégrateur pour le design.

    Après les 3 étapes ne sont pas toujours obligatoires…

  • @Solène. Il est vrai que le vocabulaire n’est pas encore utilisé de manière cohérente par tout le monde (experts, clients…). Le domaine reste jeune. Surement nous trouverons un vocabulaire commun avec le temps.

Laisser un commentaire