Les meilleurs outils de wireframe et de mock-up

Dans la phase initiale de la conception d’un projet Web, les mock-ups et wireframes sont des méthodes précieuses pour coucher ses idées et concepts sur le papier. Même avant la mise en œuvre technique réelle, ces deux méthodes de prototypage aident à visualiser les idées d’un projet Internet. Elles permettent de produire des croquis et des ébauches qui représentent les formes du projet futur et aident ainsi grandement le processus de développement à avancer.

Les mock-ups et wireframes sont à la fois d’une grande utilité pour la conception d’un projet Web mais sont aussi un support essentiel pour illustrer des idées et des concepts aux clients et aux investisseurs notamment. Ils peuvent être crées à l’aide d’un simple stylo et d’une feuille de papier ou alors sur ordinateur avec des logiciels ou programmes. Les programmes et logiciels d’édition et de retouche d’image sont en effet très utilisés comme par exemple Photoshop ou Fireworks, quand justement la mise en œuvre manuelle n’est pas la plus efficace. Cependant des outils de mock-up ou de wireframing spécifiques peuvent aider grandement.

Vous pouvez consulter notre article pour en savoir plus sur les principes de base d’un mock-up ou d’un wireframe. Quelles sont les différences de ces deux méthodes de prototypage ? Un wireframe va notamment s’attarder sur la conception de l’expérience utilisateur et de l’usabilité, la recherche d’une expérience utilisateur optimale est donc ici centrale. Un wireframe est composé généralement d’esquisses et de croquis qui illustrent le projet avec la représentation des fonctions et la mise en page. C’est un premier examen du concept et le premier pas vers sa mise en œuvre. En principe, un mock-up représente l’étape suivante, car il est souvent construit à partir d’un wireframe. Dans cette étape les aspects du design comme la couleur, la typographie, les images etc. sont pris en compte. Un mock-up est finalement un wireframe plus détaillé, mais reste encore éloigné de la version finale. Il est cependant très pratique et bien souvent nécessaire notamment pour les réunions clients ou avec les investisseurs, d’avoir déjà un aperçu du « Look and Feel », c’est-à-dire l’expérience utilisateur pour tout projet Web (site Internet ou application Web). Les outils de prototypage présentés ci-dessous sont adaptés pour réaliser des wireframes, des mock-ups et bien souvent les deux.

Balsamiq est certainement l’outil de prototypage le plus connu sur le marché notamment concernant le wireframing. Les utilisateurs peuvent avec ce logiciel bénéficier d’un large éventail d’éléments de base. Ces derniers, en association avec les éléments de navigation, les zones pour les images et les vidéos, les formulaires etc. facilement déplaçables avec le glisser-déposer (Drag and Drop) sur la surface de dessin, sont utiles pour la création d’un wireframe. Il est également possible de réaliser la mise en forme (couleur et taille) des modules et chaque utilisateur peut créer ses propres modules. Etape par étape, un wireframe professionnel peut ainsi être réalisé. La fonction de commentaire est notamment pratique pour ajouter des explications pour chaque élément. Balsamiq est généralement considéré comme étant facile à utiliser et possède une interface claire comprenant une catégorisation pour chaque élément. Cependant, il existe peu de possibilité pour installer des interactions dans le prototype. Il est tout de même possible de relier ensemble plusieurs onglets. La conception simple de Balsamiq aboutit au même résultat que lorsque l’on dessine à la main. Il en résulte une bonne vue d’ensemble, sans détails superflus et c’est donc une solution idéale pour les premières phases de développement.  L’éditeur Balsamiq Studios propose deux versions de l’outil de wireframe : une application de bureau appelée « Mockups 3 » téléchargeable pour Windows, Mac et Linux et une application Web basée sur le Cloud « myBalsamiq ». Après l’inscription, les utilisateurs ont accès à un compte d’essai gratuit de 30 jours, après quoi les droits de licence sont payants. Le tarif augmente en fonction du nombre d’utilisateurs et de projets. Si vous souhaitez créer des wireframes en ligne, il est possible d’exécuter 3 projets actifs avec la version de base. Une version d’essai gratuite est disponible ici.

L’outil Axure convient pour créer de simples wireframes ainsi que des prototypes détaillés. Avec une large gamme de fonctionnalités, Axure est considéré comme un outil professionnel en ligne de Mock-up. En tant que débutant, il est nécessaire de prendre du temps pour se former et pour bien maitriser l’outil afin de pouvoir utiliser l’ensemble des fonctions et obtenir un aperçu suffisant. L’outil de  Mock-up offre une large gamme d’éléments préconfigurés, qui sont tous personnalisables. Il est aussi possible d’intégrer des actions simples comme des info-bulles, une navigation Flyout ou l’effet lightbox. Axure est ainsi une bonne alternative pour les premiers tests utilisateurs. Enfin, ce logiciel possède la fonction de commentaire, et toutes les explications et les notes de bas de pages peuvent être facilement exportées ultérieurement en tant que CSV ou PDF. Il est aussi possible de travailler en équipe, en effet plusieurs utilisateurs peuvent travailler sur le même mock-up en même temps sans écraser les modifications. Une version d’essai gratuite de 30 jours est aussi disponible. Il existe plusieurs versions payantes : « Pro », « Team » ou « Entreprise ». A noter que l’utilisation d’Axure est gratuite pour les étudiants.

L’outil de Mock-up Pencil est le seul projet open source et la seule version de bureau entièrement gratuite de notre liste. Même si ce programme est utilisable sans licence, toutes les fonctions importantes nécessaires pour réaliser des mock-ups professionnels sont disponibles. Pencil comporte aussi un large choix de modèles. Au total, il existe plus de 300 modèles préconfigurés, soit bien plus que les autres outils de prototypage. En plus des nombreuses formes, éléments graphiques, clip art etc., vous pouvez aussi créer des diagrammes et des organigrammes directement dans la fenêtre du programme. Malgré la grande variété de fonctions, il est assez aisé pour les utilisateurs de naviguer simplement dans l’interface. La conception intuitive et le glisser-déposer autorisent un démarrage et une prise en main rapide. En ébauchant plusieurs pages et en les reliant ensemble, il est possible de configurer les fonctions pour les prochaines pages et d’avoir une procédure d’utilisation simplifiée. Pencil est un outil open source libre et gratuit, cependant son développement continu de manière fiable n’est pas garanti. On remarque justement une stagnation ces dernières années, et depuis 2013, aucune mise à jour ou de nouvelle version. Mais malgré cet inconvénient et une documention moins riche, Pencil reste une bonne alternative gratuite aux outils de wireframe et de mock-up. Cette application gratuite de bureau est disponible pour Windows, Mac et Linux, il existe aussi une extension pour le navigateur Mozilla Firefox.

Moqups est certainement l’outil de mock-up le plus connu et c’est une véritable application Web. Moqups est réputé pour sa rapidité et ses nombreuses possibilités. Moqups est un moyen efficace et rapide pour créer en ligne un mock-up. En ouvrant l’application HTML5, l’utilisateur entre directement dans l’environnement de travail et peut commencer directement à créer grâce à un menu clair, à une structure simple, le glisser-déposer et à une prise en main rapide du programme. L’utilisateur possède aussi une sélection de modèles et de cadres qui peuvent être organisés et librement configurés. Justement la possibilité de configuration est sur Moqups très développée. Personnaliser des éléments individuels et des mock-ups est possible grâce à de nombreuses fonctions, options de conceptions et fonctionnalités supplémentaires. Même si l’outil offre moins d’éléments préfabriqués que d’autres applications similaires, il fournit cependant beaucoup plus de fonctionnalités de personnalisation. De plus, avec Moqups il est aussi possible de créer plusieurs pages simultanément et de les relier les unes aux autres. Dans la version gratuite, les utilisateurs ont des restrictions au niveau des fonctions. Le plus grand inconvénient est l’impossibilité d’exporter les brouillons. Afin de convertir un mock-up en PDF ou en fichier JPG, il est nécessaire d’obtenir la version payante qui permet d’accéder à la gamme complète des fonctionnalités. Il existe trois différents forfaits. Le forfait de base autorise 10 projets et 1 Go d’espace de stockage.

L’outil de prototypage Mockingbird est aussi une application Web à part entière et ne nécessite aucune installation locale. Il s’agit d’un programme idéal pour créer des mock-ups, aussi bien pour les débutants que pour les utilisateurs plus aguerris. Pour commencer, l’utilisateur sélectionne les éléments préfabriqués appropriés pour les intégrer facilement grâce au glisser-déposer à l’endroit désiré. Au total, vous avez le choix entre 90 modules différents. Mockingbird est également convaincant par une structure intéressante et une catégorisation compréhensible. En outre, il existe une fonction de recherche bien pratique. L’utilisateur peut créer plusieurs pages en parallèle mais ne peut cependant pas les relier.  La particularité de l’outil Mockingbird est qu’il permet l’utilisation d’un système de grille (grid system), qui est généré sur toutes les pages. Ce système est utilisé par presque tous les sites Web modernes. Si ceci est pris en compte à un stade précoce de la conception, cela permettra d’économiser beaucoup de temps notamment lors de la mise en page. Mockinbird est disponible avec une version gratuite. Cependant, comme avec Moqups, de nombreuses fonctionnalités importantes comme le stockage et l’exportation ne sont disponibles qu’avec la version payante. Le forfait de base comporte 3 projets.

Wireframe.cc est un outil relativement minimaliste pour la création de wireframes clairs et ordonnés. En effet, en comparaison avec les autres outils de prototypage, le nombre des fonctions est réduit. Wireframe.cc est justement approprié pour une utilisation rapide et peu complexe. La mise en page peut être réalisée en un laps de temps assez court, sans avoir recours à une grande sélection d’éléments préfabriqués. Avec Wireframe.cc, l’utilisateur peut définir la taille d’une fenêtre simplement avec la souris. Et peut dans le menu déroulant sélectionner le type d’éléments comme la zone de texte, l’élément d’image etc. Grâce à la possibilité de choisir entre différentes tailles de pages, vous pouvez créer des cadres pour les périphériques et appareils mobiles ou de bureau. Le nombre limité de fonctions et de fonctionnalités apporte une simplicité d’exécution. Le travail d’équipe, avec le partage et les commentaires est facile et pratique. Les wireframes réalisés possèdent une URL et peuvent être stockés et expédiés.
Cet outil de prototypage est disponible dans une version de base gratuite. La version premium apporte des fonctionnalités supplémentaires, comme l’interaction, l’historique de travail et l’exportation qui sont comme pour les outils listés plus haut, disponibles seulement avec une version payante. La période d’essai est de 7 jours, le tarif est variable en fonction du nombre d’utilisateurs et des capacités requises.

Pour ne pas perdre trop de temps avec une mise en œuvre manuelle de la conception, l’utilisation des outils de wireframe et de mock-up s’avère fort utile. En effet, ces outils assurent un travail plus efficace à tous les stades de développement. Le projet est réalisé bien plus rapidement, et il est possible plus tard d’y insérer directement des commentaires (clients). Enfin, un outil de prototypage professionnel fournit une bien meilleure représentation des aspects conceptuels, des contenus et des fonctions avant de passer aux éléments de conception, surtout pour ceux qui travaillent en équipe, et qui souhaitent bénéficier des nombreuses fonctionnalités des outils listés plus haut.