15 min de lecture
Maquette Web qu’on utilise le plus c’est bien sur celui qui permet de créer des maquettes et prototypes.
J’ai donc une question pour vous. Est-ce que vous utilisez des maquettes web avant de créer vos sites web, ou foncez-vous tête baissée ?
D’ailleurs, il faut distinguer maquette web ou wireframe et prototype car même si on a tendance aujourd’hui a tous les mettres dans le même panier, c’est totalement différent!
#wireframes #prototypes #webflow
Sinon, utilisez-vous un outil pour cela ?
Non, je suis débutant, je ne connais rien des maquettes web et des prototypes avant que vous n’en parliez aujourd’hui.
Oui ! (pouvez-vous le préciser en commentaire ? ;) )
En tout cas, il existe plusieurs outils et logiciels dédiés à la création de wireframes et de prototypes.
Nous allons voir dans ce guide 28 d’entre eux, que l’on peut aisément utiliser pour la création de site sur Webflow, mais aussi pour tout autre plateforme et application web.
Comme vous le savez, on l’appelle aussi wireframe.
Mais qu’est-ce que c’est exactement ?
Il s’agit d’un simple croquis du site web. Il ne contient encore rien de concret : aucun mot, aucun texte, aucune image, rien. Seulement, les éléments essentiels, c’est-à-dire : les différentes zones du site, l’emplacement des boutons, etc.
On peut même le simuler au squelette du site. Ce n’est que le point de départ. À cette étape de travail, le design n’entre pas encore en ligne de mire. Seules les structures et fonctionnalités du site sont pensées.
En réalité, la création de la maquette web a pour objectif : l’entente des 2 parties (clients et webdesigners) ; ils se mettent d’accord pour les éléments de bases qui figureront sur le site ainsi que la manière de les placer. Quoi qu’il en soit, vous devez vous attendre à plusieurs modifications de la part du client avant qu’il ne soit réellement satisfait.
En général, les éléments les plus importants à montrer sont :
Le but est de faire ressortir quelque chose de très synthétique, le plus synthétique possible d’ailleurs.
Mais un prototype n’est-il pas la même chose qu’une maquette web ?
Pas du tout !
En effet, il ressemble presque au produit final. Je vais même accentuer le mot “presque”, parce qu’il ne l’est pas tout à fait. Il est à moitié créé, et n’est utile que pour simuler l’UI du site web.
À cet effet, il est évident qu’on peut cliquer dessus ; on peut interagir sur les prototypes. Une fois les prototypes terminés, il ne reste plus qu’à les tester. Et si tout se passe bien (aucun bug et complication), l’équipe peut enfin passer à la conception du site.
La création de prototypes est une suite logique de celle de la maquette web . Comme je viens de vous l’expliquer, c’est une occasion de tester si tout fonctionne bien ou non. Cela permet donc aux développeurs de gagner du temps dans leur codage.
Et si comme moi, ceux en charge de la création du site ne codent pas, mais utilisent des outils no code pour créer un site web (Webflow entre autres), ce sera encore plus facile !
Supposons qu’il y a quelque chose qui cloche dans la création de prototypes. Autant l’identifier le plus tôt possible, et ainsi peut-on y remédier aussitôt. Souvent, à ce stade du travail, les webdesigners trouvent une autre idée créative (sans pour autant tout changer) à ajouter au site web.
Bref, tout cela a l’air bien beau. Mais est-ce faisable sur un bout de papier ?
Vous avez sûrement déjà dû entendre parler de Mockflow. Il sert à créer des wireframes pour site web (de la création du sitemap aux wireframes, jusqu’à la publication du site lui-même), mais pas que. Certains l’utilisent également pour leurs profils sur les réseaux sociaux ou autres.
Il y a une offre gratuite, mais si vous ne voulez pas être limité dans vos projets, vous aurez besoin de 19 $ par mois.
Au début, il a été destiné pour la création de diagrammes. Les webdesigners et développeurs ayant vu son potentiel, ils n’ont pas non plus hésité à l’utiliser pour leurs dessins de maquettes web .
Il se démarque par le fait qu’on peut l’utiliser à plusieurs. Il est donc très prisé par les équipes de designers et de développeurs, de manière que chacun apporte sa pierre au wireframe.
Comme son nom l’indique, sa conception se focalise surtout sur la conception UX. D’ailleurs, ce sont des concepteurs UX qui l’ont créé. Avec lui, vous pouvez créer la maquette web de vos sites web facilement et rapidement ; quelques clics suffisent.
Aussi intuitif soit-il, il est très prisé par le fait qu’il n’y a même pas besoin de créer un compte pour l’utiliser.
iPlotz a deux versions (comme tant d’autres outils de maquettage d’ailleurs). L’une est gratuite tandis que l’autre est payante. Pour iPlotz gratuit, vous avez droit à la création de 5 wireframes. Mieux, le travail en équipe est possible avec lui.
Son nom en dit déjà long sur lui ! Il est tout simplement dédié à la création de wireframes (maquettes web fonctionnelles). Il ne dispose que de très peu de fonctions, ce qui n’est pas forcément une mauvaise chose. Cela vous permet d’aller directement à l’essentiel.
Il est normal que vous pensiez que Wireframe.cc soit difficile à manipuler, surtout si vous débutez avec cet outil. Mais ce n’est qu’une impression. Le fait qu’il ne propose que quelques fonctions lui confère une interface intuitive.
D’ailleurs, vous pouvez ajouter des commentaires, partager l’URL... à des membres de votre équipe. En effet, les collaborations sont possibles !
Les fonctionnalités de base sont disponibles en mode gratuit. Pour aller plus loin (par exemple, exporter vos travaux), vous pouvez souscrire à un abonnement à partir de 16 $ par mois.
Aussi, wireframe.cc permet une visualisation de la maquette web sur d’autres terminaux (tablettes et smartphones).
Vous souvenez-vous des outils no code dont je vous ai parlé ? Eh bien Moqups en fait partie. Avec lui, vous n’avez besoin de manipuler quoi que ce soit. En effet, la fonction glisser-déposer peut tout faire. Moqups met également à votre disposition une bibliothèque bien remplie (éléments et modèles).
Encore une fois, le travail en équipe est souvent de mise en création de sites web (que ce soit avec d’autres développeurs, webdesigners, traducteurs, etc.). C’est pourquoi cet outil est relié à Confluence et JIRA.
Voici une particularité de Moqups : vous pouvez jouer avec les couleurs pour bien distinguer les zones du futur site.
À partir de 13 $ par mois, vous avez accès à des fonctionnalités encore plus avancées.
Celui-ci est quelque peu complexe, car vous ne pourrez en tirer profit que si vous maîtrisez les HTML et CSS.
Oui, mais il ne s’agit que du wireframe, alors pourquoi ce prérequis ?
C’est vrai. C’est justement ce point qui distingue Wirefy des autres. Vous en faites d’une pierre deux coups. Vous ne contentez pas de faire la maquette web, mais en même temps, vous codez directement le site en question.
Les prototypes animés existent aussi. Marvel est l’un des logiciels qui le proposent. Mieux encore, l’outil peut être synchronisé avec d’autres logiciels tels que Sketch, Drive et Dropbox.
Pour un seul projet, il est gratuit. Ensuite, 12 $ par mois vous seront débités pour aller plus loin (travail en équipe, plus de projets et de fonctionnalités...).
La bibliothèque de Whimscical est très complète, ce qui ne fait que simplifier le reste de votre travail : il ne vous reste plus qu’à les insérer, les modifier... pour avoir les wireframes et prototypes adaptés à votre projet.
À seulement 12 $ par mois (avec essai gratuit de 7 jours), vous avez accès à Hotgloo, un outil très complet. En effet, il est bien plus qu’un simple outil de création de Wireframe et de prototypes. Gestion de projets et différents tests peuvent y être menés.
Ce qui nous intéresse est toutefois la réalisation de prototypes interactifs. Clients, membres de l’équipe... tout ce qui veut et doit intervenir sur votre projet en a accès (pourvu que vous leur donniez l’accès).
Tout risque de malentendu est évité avec InVision. En effet, vos échanges avec le client pourront directement se faire sur la plateforme. Une fois toutes les vérifications terminées, l’exportation de la maquette web vers d’autres applications (Sketch, Slack, Confluence) est d’une grande simplicité, que ce soit dans l’optique de reproduire le design final du site ou de gérer l’avancement des projets.
Le problème avec les logiciels, c’est qu’on se demande toujours s’il est compatible avec le système d’exploitation qu’on utilise. Eh bien avec Axure RP9, la question ne se pose plus. Il fonctionne à la fois sur Windows et sur Mac.
Mais encore, ce logiciel est “avancé”. La conception de maquettes web pour sites internet et applications mobiles n’est qu’une infime partie de ce qu’il peut réaliser. Son domaine d’intervention est effectivement bien plus large (création de brochures, flyers...).
Enfin, pour les équipes, il existe une version collaborative de ce logiciel.
Je n’ai plus besoin de vous décrire ce qu’est Adobe ; il est mondialement connu. Je dirais même que plusieurs entrepreneurs et équipes ont trouvé leur bonheur chez Adobe XD. Il n’est pas seulement utilisé par les professionnels du web ; tout ce qui est “design”, on peut le faire avec. Bien plus qu’un simple logiciel de maquette web fonctionnelle, il est même en mesure de créer des prototypes.
Encore ici, vous pouvez travailler aisément avec les autres membres de votre équipe. Ce logiciel convient tout autant aux professionnels qui travaillent en solo.
Aussi simple qu’il soit, il offre un large éventail d’éléments de base dans sa bibliothèque : CTA, bloc de texte, et bien d’autres. La conception de wireframe se fait vraiment de manière très simple : grâce à la fonction glisser-déposer.
Tous les systèmes sont compatibles avec Balsamiq : Windows, Linux et Mac. Évidemment, tout cela a un prix : à partir de 9 $ par mois. Assurez-vous d’abord qu’il est adapté à vos projets, en faisant en essai gratuit de 30 jours.
Certains webdesigners utilisent aussi Photoshop pour la maquette web de leurs sites web. Certes, ce n’est pas un outil dédié, mais comme on dit : c’est le résultat qui compte.
Pencil est complètement gratuit et pourtant, vous pouvez réaliser de bien de choses ! Par exemple, relier les pages entre elles. Vous vous facilitez également la vie, grâce à sa bibliothèque de modèles et d’éléments de base.
J’avoue que ce n’est pas le plus simple de tous ces outils (un peu comme un mélange de Photoshop et de Illustrator). Par contre, un peu d’entrainement suffit à bien le connaître. Et comme il est très connu dans le monde du webdesign, vous trouverez beaucoup de tutos sur la création de wireframes et de prototypes sur Sketch, sur la toile.
Ce logiciel a été conçu par des designers de Facebook, et est spécialement destiné aux créateurs de sites. Aucun prérequis n’est nécessaire pour l’utiliser (même pas le fait de savoir coder).
Les wireframes et prototypes sont très complets. Aussi sont-ils compatibles avec Sketch. Malheureusement, il n’est disponible que sur Mac. Les tests peuvent aussi se faire sur smartphone iOS, via l’application Origami.
Ulzard est encore en version bêta, mais il a du potentiel. En voici une preuve : à partir des wireframes créés sur Ulzard, on peut directement créer des prototypes Sketch.
PrecursorApp est gratuit. Cela ne l’empêche pas d’être aussi performant que les autres outils et logiciels qu’on vient de voir. Non seulement il permet un travail en équipe, mais les prototypes créés à partir de ce logiciel peuvent aussi être testés sur d’autres supports (tablettes et smartphones).
Justinmind est gratuit, mais limité. Pour avoir un logiciel plus avancé, il faudrait payer à partir de 19 $ par mois. Avec Justinmind, vous ne vous limitez pas à des simples wireframes ; il est également possible de créer des prototypes cliquables.
Flinto est divisé en 2 : Flinto Lite et Flinto for Mac.
Le premier sert à réaliser des prototypes, directement sur internet. Le second quant à lui ne fonctionne que sur mac. À cet effet, il est plus approfondi.
Le petit hic se trouve dans le prix de l’abonnement. 99 $ sont nécessaires pour la version pour Mac tandis que ce sera 20 $ pour la version en ligne. Avant d’y souscrire, n’oubliez pas que vous avez droit à, respectivement 15 et 30 jours d’essai gratuit, pour le Lite et le Flinto par mac.
Au début, il a Proto.io a été conçu pour les maquettes web et prototypes d’applications mobiles. Pour autant, il peut bien servir pour les conceptions de sites web. Simple et facile d’utilisation, ce logiciel est disponible à partir de 24 $ par mois. En fonction du nombre de projets dont vous vous occupez régulièrement, mais aussi de la taille de votre équipe, vous pouvez être amené à payer plus.
Si je devais le décrire en un seul mot, je dirais “rapide”. En seulement 5 minutes, vous êtes en effet à même de réaliser un prototype (évidemment, en fonction du projet). Seulement, il n’est disponible que sur Mac. Vous avez 15 jours d’essai gratuit ; si vous envisagez de continuer à l’utiliser, il vous faut 99 $ par mois.
Framer Studio est un logiciel purement destiné aux professionnels. Si vous faites du webdesign depuis longtemps maintenant, et que vous pouvez vous permettre un logiciel plus poussé, Framer Studio est une bonne alternative. Vous devrez payer 129 $ (avec une version gratuite de 15 jours).
Une fois que vous avez fini le wireframe sur Framer Studio, il ne vous reste plus qu’à l’intégrer directement au format Sketch. Il vous reste quand même les calques, lesquelles vous aideront à créer le prototype.
J’ai gardé le meilleur pour la fin. Il est l’un de mes préférés : Figma. Disponible à la fois en ligne et en logiciel, il existe en version complètement gratuite ! Certes, on peut y créer des maquettes web et des prototypes de sites web, mais il peut également s’occuper d’autres types de projets : application mobile entre autres.
Il est surtout facile à utiliser, grâce à la fonctionnalité glisser-déposer. Aussi, l’interface est très intuitive. Que vous débutiez ou non, vous n’aurez aucun mal à manier ce logiciel. Il y a une version disponible en ligne et totalement gratuite. Je trouve que c’est super, surtout pour ceux qui travaillent en équipe ou ceux qui veulent directement envoyer leur travail à leurs clients.
Aucune loi ne vous oblige à utiliser des outils et logiciels de création de maquettes web et de prototypes. Mais croyez-moi, par expérience, c’est la meilleure chose à faire.
A chacun sa préférence. Si j’adore Figma ou Sketch, cela ne veut pas forcément dire que vous allez les aimer. Donc, en fonction de cette liste, vous pouvez choisir celui qui vous semble le mieux adapté à vos projets, mais aussi à votre budget. En tout cas, aucun de ces 28 n’est meilleur. Chacun d’entre eux l’est tout autant, à sa manière. A vous de voir !
Dans la joie et la bonne humeur
Que vous soyez débutant ou expérimenté, la Happy.webacademy vous donne l’énergie, les stratégies et les outils pour avoir plus de liberté et générer des résultats qui propulseront votre chiffre d’affaires dans les étoiles.
