Découvrez 14 logiciels de wireframe gratuits et premium pour vous aider à créer les maquettes de votre projet.

Point de départ de la conception d’une interface ergonomique, nous allons voir pourquoi et quels sont les outils disponibles pour réaliser les maquettes et un prototype de votre idée de site internet ou d’application mobile.

Sommaire

N’hésitez pas à compléter cet article en partageant des outils complémentaires dans les commentaires.

Vous aimerez aussi : utilisez un logiciel de mind mapping gratuit pour organiser l’architecture, les fonctionnalités et définir les limites de votre projet.

Trouvez un webdesigner disponible

Trouvez gratuitement le prochain talent qui réalisera votre projet ou rejoindra votre équipe.

Qu’est ce qu’un Wireframe ?

Le wireframe (ou maquette fonctionnelle) est une representation graphique simplifiée de votre interface utilisateur qui permet de définir les zones, l’organisation générale de l’information et tous les éléments qui devront être présents dans chaque page de façon simple et percutante.

Source

Pourquoi créer des wireframes ?

Les wireframes permettent tout d’abord de gagner beaucoup de temps lors de la création de votre projet web. Pourquoi perdre des heures de travail à concevoir une interface trop chargée, inutile, ou mal organisée si c’est pour tout recommencer dès le premier retour de votre client ?

En créant une maquette, vous pouvez déjà produire une « base » sur laquelle évoluer et vous assurer de la conformité de votre réalisation avant de mettre la main à la pâte. C’est donc une belle économie de temps mais aussi d’argent pour vous et votre client.

Le wireframe permet également d’organiser votre temps de travail en le prévoyant à l’avance : vous serez capable de savoir quelles pages demanderont plus de travail ou, à l’inverse, quelles pages pourront être réalisées rapidement.

Enfin, le wireframe est un véritable canevas : simple, épuré, sans couleurs, il est un bon moyen pour vous d’organiser la racine de votre application ou de votre page, puis de savoir où votre créativité pourra s’exprimer sans en « faire trop ».

Qui doit créer le wireframe ? Pour qui ?

Le wireframe est généralement un travail de groupe. Dans le cadre d’un designer freelance recevant une demande de création de site web de la part d’une entreprise, c’est d’abord au client de spécifier ses attentes (quel médium, plutôt coloré ou épuré, très informatif ou plutôt objectif de conversions …). Ensuite, c’est au webdesigner de réaliser une première version de la maquette, de la transmettre au client et de la modifier en fonction de ses retours. 

Le wireframing et la conception de sites web ou d’application mobile demandent bien souvent le recours à plusieurs domaines d’expertise : le marketing, le developpement, la créa …

Quelles informations doivent figurer sur la maquette ?

Essayez de réaliser un document le plus synthétique possible. Pas la peine d’ajouter des textes travaillés et optimisés, indiquez simplement l’emplacement d’une ligne ou d’un bloc texte.

Il en va de même pour les images, vous pouvez les représenter par un simple rectangle gris. Le wireframe ne vise pas à présenter une version du site déjà travaillée, mais bien à représenter l’organisation générale de chaque page, élément par élément.

N’oubliez pas d’ajouter des éléments comme les boutons de réseaux sociaux, le menu, la barre de recherche ou les call to action. Pensez à bien mettre en avant le chemin de navigation de votre futur visiteur.

Il n’y a plus qu’à vous lancer ! Voici quelques solutions qui vous permettront de réaliser des wireframes facilement.

Les logiciels de Wireframe

Whimsical – Freemium

Un outil en ligne qui simplifie la création de wireframes et de prototype. L’outil est bien pensé et permet d’obtenir rapidement le rendu de votre projet avec des fonctionnalités intelligentes et une bibliothèque complète de composants.

Pencil – Gratuit

Pencil est un logiciel open-source 100% gratuit disposant d’une large bibliothèque de modèles et d’éléments de base pour un rendu précis et professionnel. Avec une navigation simple et intuitive, vous pouvez relier vos pages entre elles, et construire un wireframe parfait pour la représentation de la navigation de votre utilisateur sur le site ou l’application. Petit bémol, l’outil n’a pas été mis à jour ou n’a pas connu d’évolutions depuis 2013, ce qui ne nuit pourtant pas à son bon fonctionnement. Dispo sur Mac, Windows et Linux.

Wireframe.cc – Freemium

Wireframe.cc vous permettra de créer des maquette à son image : percutantes et épurées. Avec très peu de fonctions disponibles, vous devrez aller à l’essentiel. Sa prise en main peut sembler un peu difficile, mais cette solution permet tout de même d’avoir un résultat professionnel en très peu de temps. Le travail d’équipe est facilité avec l’ajout de commentaires ou le partage par URL. Disponible en version gratuite. Il vous faudra cependant passer en version payante pour exporter vos travaux : comptez à partir de 16€ par mois.

MarvelApp – Freemium

MarvelApp est un outil en ligne qui vous permet de concevoir des wireframes et des prototypes directement dans votre navigateur. Il vous est également possible de synchroniser vos projets sur Dropbox ou encore les partager avec vos collaborateurs. Gratuit pour un utilisateur et un projet.

Moqups – Freemium

Avec sa bibliothèque d’éléments et de modèles configurables, Moqups est une application web facile d’utilisation et très complète. Autre avantage : Moqups est relié à Confluence et JIRA pour le travail en équipe. Cette solution permet également d’organiser vos wireframes en les reliant entre eux. Moqups existe en version gratuite, mais ses fonctionnalités y sont limitées, notamment l’export de brouillons en PDF ou jpg. Pour cela il faudra payer la version de base à partir de 13€ par mois.

Balsamiq – Payant

Balsamiq est l’un des outils les plus connus sur le marché du wireframing. Facile à prendre en main, il donne accès à une large librairie d’éléments de base (call to action, bloc de texte, image …) à déplacer sur votre surface de création par drag-and-drop. Très efficace, il permet donc de donner une bonne vue d’ensemble du résultat final désiré. On lui reprochera cependant son aspect un peu trop « dessin » avec des polices d’écritures un peu enfantines qui donnent un rendu peu professionnel. Cette application est disponible pour Windows, Mac et Linux avec un essai gratuit de 30 jours, puis à partir de 9$ par mois pour 2 projets simultanés. 

MockupFlow – Freemium

Une suite d’applications couvrant l’ensemble des étapes pour réaliser un site. De la création du sitemap, aux wireframes jusqu’a la mise en ligne du site. Dispose d’une offre gratuite pour un projet dans chaque app. Pour obtenir un nombre de projets illimités, vous devrez compter 19$ par mois.

Logiciels pour créer des prototypes

Origami – Gratuit

Crée par les designers de Facebook, Origami est un outil disponible sur Mac et iOs qui permet de réaliser des interfaces sans avoir à réaliser une seule ligne de code. Compatible avec Sketch, il permet de réaliser des wireframes très complets et visuels facilement grâce à une bibliothèques de ressources graphiques et une application intuitive. Petit bonus, c’est gratuit ! 

UIzard – en beta

Un outil complètement fou, encore en beta, mais qui devrait envoyer du lourd ! La promesse est très forte et permettra de faire gagner beaucoup de temps. Il permet de créer des prototypes Skecth (et du code) directement à partir de vos dessins de wireframes.

Invision – Freemium

J’ai utilisé cette application pour la création de Leadlist. C’est un outil de prototypage très puissant et pratique permettant d’animer vos maquettes, de simplifier les retours clients sur vos interfaces et de transférer toutes les informations indispensables aux intégrateurs pour reproduire le plus fidèlement possible les maquettes. Si vous utilisez Sketch, vous pouvez synchroniser vos maquettes et gagner un temps de dingue.

Sketch – Payant

Ce n’est pas le plus simple à utiliser de cette liste. Mais si vous êtes un professionnel du design d’interface et que vous ne connaissez pas ce logiciel, je vous le recommande. En plus d’être pensé pour les web designers, vous trouverez de nombreuses ressources pour créer vos wireframes et prototypes. C’est l’équivalent d’un mix du meilleur de Photoshop et d’Illustrator centré sur la création d’interfaces.

PrecursorApp – Freemium

PrecursorApp vous permet de réaliser des prototypes et les visualiser sur différents supports (tablettes incluses), en plus de vous permettre de les partager avec vos collaborateurs et ainsi créer un prototype à plusieurs. Dispose d’une version gratuite.

Justinmind – Freemium

Un outil tout en un permettant de créer des wireframes et des prototypes cliquables d’interfaces web et mobile. Dispose d’une version gratuite limitée. Sinon, comptez 19$ par mois pour l’utiliser.

Flinto – Payant

Payant après une période d’essai de 30 jours, Flinto vous permet de réaliser des prototypes d’applications Android et iOS de manière intuitive et en offrant une large palette d’options de personnalisation.