Les meilleurs outils de wireframe et de mock-up

Dans la phase initiale de la con­cep­tion d’un projet Web, les mock-ups et wi­re­frames 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 pro­to­ty­page aident à vi­sua­li­ser les idées d’un projet Internet. Elles per­met­tent de produire des croquis et des ébauches qui re­pré­sen­tent les formes du projet futur et aident ainsi gran­de­ment le processus de dé­ve­lop­pe­ment à avancer.

Les mock-ups et wi­re­frames sont à la fois d’une grande utilité pour la con­cep­tion d’un projet Web mais sont aussi un support essentiel pour illustrer des idées et des concepts aux clients et aux in­ves­tis­seurs notamment. Ils peuvent être crées à l’aide d’un simple stylo et d’une feuille de papier ou alors sur or­di­na­teur avec des logiciels ou pro­grammes. Les pro­grammes 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 wi­re­fra­ming spé­ci­fiques peuvent aider gran­de­ment.

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 dif­fé­rences de ces deux méthodes de pro­to­ty­page ? Un wireframe va notamment s’attarder sur la con­cep­tion de l’ex­pé­rience uti­li­sa­teur et de l’usabilité, la recherche d’une ex­pé­rience uti­li­sa­teur optimale est donc ici centrale. Un wireframe est composé gé­né­ra­le­ment d’esquisses et de croquis qui il­lustrent le projet avec la re­pré­sen­ta­tion 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 re­pré­sente l’étape suivante, car il est souvent construit à partir d’un wireframe. Dans cette étape les aspects du design comme la couleur, la ty­po­gra­phie, les images etc. sont pris en compte. Un mock-up est fi­na­le­ment un wireframe plus détaillé, mais reste encore éloigné de la version finale. Il est cependant très pratique et bien souvent né­ces­saire notamment pour les réunions clients ou avec les in­ves­tis­seurs, d’avoir déjà un aperçu du « Look and Feel », c’est-à-dire l’ex­pé­rience uti­li­sa­teur pour tout projet Web (site Internet ou ap­pli­ca­tion Web). Les outils de pro­to­ty­page présentés ci-dessous sont adaptés pour réaliser des wi­re­frames, des mock-ups et bien souvent les deux.

Balsamiq est cer­tai­ne­ment l’outil de pro­to­ty­page le plus connu sur le marché notamment con­cer­nant le wi­re­fra­ming. Les uti­li­sa­teurs peuvent avec ce logiciel bé­né­fi­cier d’un large éventail d’éléments de base. Ces derniers, en as­so­cia­tion avec les éléments de na­vi­ga­tion, les zones pour les images et les vidéos, les for­mu­laires etc. fa­ci­le­ment 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 uti­li­sa­teur peut créer ses propres modules. Etape par étape, un wireframe pro­fes­sion­nel peut ainsi être réalisé. La fonction de com­men­taire est notamment pratique pour ajouter des ex­pli­ca­tions pour chaque élément. Balsamiq est gé­né­ra­le­ment considéré comme étant facile à utiliser et possède une interface claire com­pre­nant une ca­té­go­ri­sa­tion pour chaque élément. Cependant, il existe peu de pos­si­bi­lité pour installer des in­te­rac­tions dans le prototype. Il est tout de même possible de relier ensemble plusieurs onglets. La con­cep­tion 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é­ve­lop­pe­ment.  L’éditeur Balsamiq Studios propose deux versions de l’outil de wireframe : une ap­pli­ca­tion de bureau appelée « Mockups 3 » té­lé­char­geable pour Windows, Mac et Linux et une ap­pli­ca­tion Web basée sur le Cloud « my­Bal­sa­miq ». Après l’ins­crip­tion, les uti­li­sa­teurs 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’uti­li­sa­teurs et de projets. Si vous souhaitez créer des wi­re­frames en ligne, il est possible d’exécuter 3 projets actifs avec la version de base. Une version d’essai gratuite est dis­po­nible ici.

L’outil Axure convient pour créer de simples wi­re­frames ainsi que des pro­to­types détaillés. Avec une large gamme de fonc­tion­na­li­tés, Axure est considéré comme un outil pro­fes­sion­nel en ligne de Mock-up. En tant que débutant, il est né­ces­saire 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é­con­fi­gu­rés, qui sont tous per­son­na­li­sables. Il est aussi possible d’intégrer des actions simples comme des info-bulles, une na­vi­ga­tion Flyout ou l’effet lightbox. Axure est ainsi une bonne al­ter­na­tive pour les premiers tests uti­li­sa­teurs. Enfin, ce logiciel possède la fonction de com­men­taire, et toutes les ex­pli­ca­tions et les notes de bas de pages peuvent être fa­ci­le­ment exportées ul­té­rieu­re­ment en tant que CSV ou PDF. Il est aussi possible de tra­vail­ler en équipe, en effet plusieurs uti­li­sa­teurs peuvent tra­vail­ler sur le même mock-up en même temps sans écraser les mo­di­fi­ca­tions. Une version d’essai gratuite de 30 jours est aussi dis­po­nible. Il existe plusieurs versions payantes : « Pro », « Team » ou « En­tre­prise ». A noter que l’uti­li­sa­tion 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 en­tiè­re­ment gratuite de notre liste. Même si ce programme est uti­li­sable sans licence, toutes les fonctions im­por­tantes né­ces­saires pour réaliser des mock-ups pro­fes­sion­nels sont dis­po­nibles. Pencil comporte aussi un large choix de modèles. Au total, il existe plus de 300 modèles pré­con­fi­gu­rés, soit bien plus que les autres outils de pro­to­ty­page. En plus des nom­breuses formes, éléments gra­phiques, clip art etc., vous pouvez aussi créer des dia­grammes et des or­ga­ni­grammes di­rec­te­ment dans la fenêtre du programme. Malgré la grande variété de fonctions, il est assez aisé pour les uti­li­sa­teurs de naviguer sim­ple­ment dans l’interface. La con­cep­tion intuitive et le glisser-déposer au­to­ri­sent un démarrage et une prise en main rapide. En ébauchant plusieurs pages et en les reliant ensemble, il est possible de con­fi­gu­rer les fonctions pour les pro­chaines pages et d’avoir une procédure d’uti­li­sa­tion sim­pli­fiée. Pencil est un outil open source libre et gratuit, cependant son dé­ve­lop­pe­ment continu de manière fiable n’est pas garanti. On remarque justement une stag­na­tion ces dernières années, et depuis 2013, aucune mise à jour ou de nouvelle version. Mais malgré cet in­con­vé­nient et une do­cu­men­tion moins riche, Pencil reste une bonne al­ter­na­tive gratuite aux outils de wireframe et de mock-up. Cette ap­pli­ca­tion gratuite de bureau est dis­po­nible pour Windows, Mac et Linux, il existe aussi une extension pour le na­vi­ga­teur Mozilla Firefox.

Moqups est cer­tai­ne­ment l’outil de mock-up le plus connu et c’est une véritable ap­pli­ca­tion Web. Moqups est réputé pour sa rapidité et ses nom­breuses pos­si­bi­li­tés. Moqups est un moyen efficace et rapide pour créer en ligne un mock-up. En ouvrant l’ap­pli­ca­tion HTML5, l’uti­li­sa­teur entre di­rec­te­ment dans l’en­vi­ron­ne­ment de travail et peut commencer di­rec­te­ment à créer grâce à un menu clair, à une structure simple, le glisser-déposer et à une prise en main rapide du programme. L’uti­li­sa­teur possède aussi une sélection de modèles et de cadres qui peuvent être organisés et librement con­fi­gu­rés. Justement la pos­si­bi­lité de con­fi­gu­ra­tion est sur Moqups très dé­ve­lop­pée. Per­son­na­li­ser des éléments in­di­vi­duels et des mock-ups est possible grâce à de nom­breuses fonctions, options de con­cep­tions et fonc­tion­na­li­tés sup­plé­men­taires. Même si l’outil offre moins d’éléments pré­fa­bri­qués que d’autres ap­pli­ca­tions si­mi­laires, il fournit cependant beaucoup plus de fonc­tion­na­li­tés de per­son­na­li­sa­tion. De plus, avec Moqups il est aussi possible de créer plusieurs pages si­mul­ta­né­ment et de les relier les unes aux autres. Dans la version gratuite, les uti­li­sa­teurs ont des res­tric­tions au niveau des fonctions. Le plus grand in­con­vé­nient est l’im­pos­si­bi­lité d’exporter les brouil­lons. Afin de convertir un mock-up en PDF ou en fichier JPG, il est né­ces­saire d’obtenir la version payante qui permet d’accéder à la gamme complète des fonc­tion­na­li­tés. Il existe trois dif­fé­rents forfaits. Le forfait de base autorise 10 projets et 1 Go d’espace de stockage.

L’outil de pro­to­ty­page Mo­cking­bird est aussi une ap­pli­ca­tion Web à part entière et ne nécessite aucune ins­tal­la­tion locale. Il s’agit d’un programme idéal pour créer des mock-ups, aussi bien pour les débutants que pour les uti­li­sa­teurs plus aguerris. Pour commencer, l’uti­li­sa­teur sé­lec­tionne les éléments pré­fa­bri­qués ap­pro­priés pour les intégrer fa­ci­le­ment grâce au glisser-déposer à l’endroit désiré. Au total, vous avez le choix entre 90 modules dif­fé­rents. Mo­cking­bird est également con­vain­cant par une structure in­té­res­sante et une ca­té­go­ri­sa­tion com­pré­hen­sible. En outre, il existe une fonction de recherche bien pratique. L’uti­li­sa­teur peut créer plusieurs pages en parallèle mais ne peut cependant pas les relier.  La par­ti­cu­la­rité de l’outil Mo­cking­bird est qu’il permet l’uti­li­sa­tion 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 con­cep­tion, cela permettra d’éco­no­mi­ser beaucoup de temps notamment lors de la mise en page. Mo­ckin­bird est dis­po­nible avec une version gratuite. Cependant, comme avec Moqups, de nom­breuses fonc­tion­na­li­tés im­por­tantes comme le stockage et l’ex­por­ta­tion ne sont dis­po­nibles qu’avec la version payante. Le forfait de base comporte 3 projets.

Wireframe.cc est un outil re­la­ti­ve­ment mi­ni­ma­liste pour la création de wi­re­frames clairs et ordonnés. En effet, en com­pa­rai­son avec les autres outils de pro­to­ty­page, le nombre des fonctions est réduit. Wireframe.cc est justement approprié pour une uti­li­sa­tion 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é­fa­bri­qués. Avec Wireframe.cc, l’uti­li­sa­teur peut définir la taille d’une fenêtre sim­ple­ment avec la souris. Et peut dans le menu déroulant sé­lec­tion­ner le type d’éléments comme la zone de texte, l’élément d’image etc. Grâce à la pos­si­bi­lité de choisir entre dif­fé­rentes tailles de pages, vous pouvez créer des cadres pour les pé­ri­phé­riques et appareils mobiles ou de bureau. Le nombre limité de fonctions et de fonc­tion­na­li­tés apporte une sim­pli­cité d’exécution. Le travail d’équipe, avec le partage et les com­men­taires est facile et pratique. Les wi­re­frames réalisés possèdent une URL et peuvent être stockés et expédiés.
Cet outil de pro­to­ty­page est dis­po­nible dans une version de base gratuite. La version premium apporte des fonc­tion­na­li­tés sup­plé­men­taires, comme l’in­te­rac­tion, l’his­to­rique de travail et l’ex­por­ta­tion qui sont comme pour les outils listés plus haut, dis­po­nibles seulement avec une version payante. La période d’essai est de 7 jours, le tarif est variable en fonction du nombre d’uti­li­sa­teurs et des capacités requises.

Pour ne pas perdre trop de temps avec une mise en œuvre manuelle de la con­cep­tion, l’uti­li­sa­tion 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é­ve­lop­pe­ment. Le projet est réalisé bien plus ra­pi­de­ment, et il est possible plus tard d’y insérer di­rec­te­ment des com­men­taires (clients). Enfin, un outil de pro­to­ty­page pro­fes­sion­nel fournit une bien meilleure re­pré­sen­ta­tion des aspects con­cep­tuels, des contenus et des fonctions avant de passer aux éléments de con­cep­tion, surtout pour ceux qui tra­vail­lent en équipe, et qui sou­hai­tent bé­né­fi­cier des nom­breuses fonc­tion­na­li­tés des outils listés plus haut.