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 toi. Est-ce que tu utilises des maquettes web avant de créer tes sites web, ou fonces-tu 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

🌈 Sondage

Sinon, utilises-tu un outil pour cela ?

Non, je suis débutant, je ne connais rien des maquettes web et des prototypes avant que tu n’en parles aujourd’hui.

Oui ! (peux-tu 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.

Sommaire

Une maquette web ou Wireframe : c’est quoi

Les éléments de bases d’un wireframe

Prototype de site web : c’est quoi

Outils de création de Maquette web - Wireframe et Prototypes

1. Mockflow
2. Glify
3. Pidoco
4. UXpin
5. Frame box
6. iPlotz
7. Wireframe.cc
8. Moqups
9. Wirefy
10. Marvel
11. Whimsical
12. Hotgloo
13. InVision
14. Axure RP9
15. Adobe XD
16. Balsamiq
17. Photoshop
18. Pencil
19. Sketch
20. Origami Studio
21. Ulzard
22. PrecursorApp
23. Justinmind
24. Flinto
25. Proto.io
26. Principle
27. Framer Studio
28. Figma

Outils pour wireframes et prototypes : obligatoire ?

Conclusion

En vidéo

Une Maquette web, qu’est-ce que c’est ?

Comme tu le sais, 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, tu dois t’attendre à plusieurs modifications de la part du client avant qu’il ne soit réellement satisfait.

Les éléments de base d’une maquette web: lesquels ?

En général, les éléments les plus importants à montrer sont :

• boutons de réseaux sociaux
• menus
• barre de recherche
• CTA
• bloc de texte (non travaillé)
• image (représentée par de simples rectangles)

Le but est de faire ressortir quelque chose de très synthétique, le plus synthétique possible d’ailleurs.

Un prototype web : qu’est-ce que c’est ?

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.

Les prototypes sont-ils obligatoires ?

La création de prototypes est une suite logique de celle de la maquette web . Comme je viens de te 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 ?

Les 28 outils de création de Maquette Web - Wireframe et prototypes

Mockflow

Tu as 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 tu ne veux pas être limité dans tes projets, tu auras besoin de 19 $ par mois.

Gliffy

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 .

Pidoco

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.

UXpin

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, tu peux créer la maquette web de tes sites web facilement et rapidement ; quelques clics suffisent.

Framebox

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

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, tu as droit à la création de 5 wireframes. Mieux, le travail en équipe est possible avec lui.

Wireframe.cc

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 te permet d’aller directement à l’essentiel.

Il est normal que tu penses que Wireframe.cc soit difficile à manipuler, surtout si tu débutes 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, tu peux ajouter des commentaires, partager l’URL... à des membres de ton équipe. En effet, les collaborations sont possibles !

Les fonctionnalités de base sont disponibles en mode gratuit. Pour aller plus loin (par exemple, exporter tes travaux), tu peux 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).

Moqups

Te souviens-tu des outils no code dont je t’ai parlé ? Eh bien Moqups en fait partie. Avec lui, tu n’as besoin de manipuler quoi que ce soit. En effet, la fonction glisser-déposer peut tout faire. Moqups met également à ta 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 : tu peux jouer avec les couleurs pour bien distinguer les zones du futur site.

À partir de 13 $ par mois, tu as accès à des fonctionnalités encore plus avancées.

Wirefy

Celui-ci est quelque peu complexe, car tu ne pourras en tirer profit que si tu maîtrises 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. Tu en fais d’une pierre deux coups. Tu ne contentes pas de faire la maquette web, mais en même temps, tu codes directement le site en question.

Marvel

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 te seront débités pour aller plus loin (travail en équipe, plus de projets et de fonctionnalités...).

Whimsical

La bibliothèque de Whimscical est très complète, ce qui ne fait que simplifier le reste de ton travail : il ne te reste plus qu’à les insérer, les modifier... pour avoir les wireframes et prototypes adaptés à ton projet.

Hotgloo

À seulement 12 $ par mois (avec essai gratuit de 7 jours), tu as 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 ton projet en a accès (pourvu que tu leur donnes l’accès).

Maquette Web avec InVision 🤩

Tout risque de malentendu est évité avec InVision. En effet, tes é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.

Axure RP9

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.

Maquette web avec Adobe XD 🤩

Je n’ai plus besoin de te 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.

Balsamiq

Encore ici, tu peux travailler aisément avec les autres membres de ton é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. Assure-toi d’abord qu’il est adapté à tes projets, en faisant en essai gratuit de 30 jours.

Maquette web avec Photoshop 🤩

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

Pencil est complètement gratuit et pourtant, tu peux réaliser de bien de choses ! Par exemple, relier les pages entre elles. Tu te facilites également la vie, grâce à sa bibliothèque de modèles et d’éléments de base.

Maquette web avec Sketch 🤩

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, tu trouveras beaucoup de tutos sur la création de wireframes et de prototypes sur Sketch, sur la toile.

Origami Studio

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

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

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).

Maquette web : Justinmind

Justinmind est gratuit, mais limité. Pour avoir un logiciel plus avancé, il faudrait payer à partir de 19 $ par mois. Avec Justinmind, tu ne te limites pas à des simples wireframes ; il est également possible de créer des prototypes cliquables.

Maquette web : Flinto

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’oublie pas que tu as droit à, respectivement 15 et 30 jours d’essai gratuit, pour le Lite et le Flinto par mac.

Maquette web : Proto.io

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 tu t’occupes régulièrement, mais aussi de la taille de ton équipe, tu peux être amené à payer plus.

Maquette web : Principle

Si je devais le décrire en un seul mot, je dirais “rapide”. En seulement 5 minutes, tu es en effet à même de réaliser un prototype (évidemment, en fonction du projet). Seulement, il n’est disponible que sur Mac. Tu as 15 jours d’essai gratuit ; si tu envisages de continuer à l’utiliser, il te faut 99 $ par mois.

Maquette web avec Framer Studio 🤩

Framer Studio est un logiciel purement destiné aux professionnels. Si tu fais du webdesign depuis longtemps maintenant, et que tu peux te permettre un logiciel plus poussé, Framer Studio est une bonne alternative. Tu devras payer 129 $ (avec une version gratuite de 15 jours).

Une fois que tu as fini le wireframe sur Framer Studio, il ne te reste plus qu’à l’intégrer directement au format Sketch. Il te reste quand même les calques, lesquelles t’aideront à créer le prototype.

Maquette web avec Figma 🤩

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 tu débutes ou non, tu n’auras 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.

Utiliser des outils et logiciels : obligatoire ou non ?

Aucune loi ne t’oblige à utiliser des outils et logiciels de création de maquettes web et de prototypes. Mais crois-moi, par expérience, c’est la meilleure chose à faire.

• Avec des outils technologiques, tu es plus organisé. C’est vrai qu’il y en a ceux qui préfèrent travailler sur du papier (comme au bon vieux temps, et cela n’a rien de mauvais). Mais les logiciels et outils sont plus pratiques. Par exemple, quand tu enverras la maquette web à ton client, tu n’auras pas besoin de l’envoyer par la poste, ni même de le scanner avant de l’envoyer par mail.
• Comme tu as pu le voir dans certains outils et logiciels de création de maquettes web et prototypes, ils permettent un travail en équipe (que ce soit avec tes clients ou d’autres professionnels comme toi, ou qui interviennent dans le même domaine). Et nous savons tous très bien qu’un premier jet n’est pas forcément le bon. Les clients ont tout à fait le droit de refuser tes premières propositions, ou du moins, demander quelques modifications. Avec des outils, ce sera plus facile.
• Je reviens au “travail en équipe” dont je parle souvent. Avec un logiciel, tu es sûr de parler le même langage que les autres membres de ton équipe, et donc, la communication est facile.
• Tu gagnes aussi beaucoup de temps avec ces outils et logiciels, et le temps, c’est de l’argent. Je m’explique : au moment de créer la maquette web, tu auras tout de suite un aperçu de l’envergure du projet. Ainsi, tu peux déjà penser à la manière dont tu vas l’organiser pour être le plus optimale possible. Une bonne préparation de ce genre te permet d’avancer plus vite. En même temps, tu peux en profiter pour chiffrer le coût.
• Il est difficile de perdre de vue les maquettes web et prototypes réalisés avec des outils et logiciels dédiés, car les sites que tu créeras se feront sur un ordinateur également. De ce fait, les maquettes web et prototypes de serviront de base lors de la conception. C’est une manière de t’assurer que tu ne vas pas en “faire trop” lors de la conception à proprement parler, que tu ne vas pas franchir la limite et que tu resteras dans ce qui a été convenu.
• Enfin, un détail simple, mais qu’on ne peut pas négliger : la création de maquette web permet d’anticiper les contenus nécessaires pour le site.

Conclusion

A chacun sa préférence. Si j’adore Figma ou Sketch, cela ne veut pas forcément dire que tu vas les aimer. Donc, en fonction de cette liste, tu peux choisir celui qui te semble le mieux adapté à tes projets, mais aussi à ton budget. En tout cas, aucun de ces 28 n’est meilleur. Chacun d’entre eux l’est tout autant, à sa manière. A toi de voir !

Commentaire