20 logiciels pour créer vos wireframes et prototypes animés

Découvrez 20 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.

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.

Qu’est ce qu’un Wireframe ?

Pourquoi créer des wireframes de site internet ?

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 du site internet ?

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

Whimsical est 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.

Prix : version gratuite / version payante à partir de 12 $ par mois

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

Prix : à 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.

Prix : version gratuite / version payante à partir de 9 € par mois

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.

Prix : version gratuite / version payante à partir de 16 € 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.

Prix : à partir de 9 $ par mois

MockFlow – Freemium

Mockflow est une suite d’applications couvrant l’ensemble des étapes pour réaliser un site. De la création du sitemap, aux wireframes jusqu’à la mise en ligne du site. MockFlow dispose d’une offre gratuite pour un projet dans chaque app.

Prix : version gratuite / version payante à partir de 14 $ par mois

UXPin – Payant

UXPin est un outil de wireframe doté d’une interface élégante et intuitive, avec des icônes lisibles et une bibliothèque complète d’éléments que vous pouvez ajouter facilement à vos wireframes à l’aide d’un simple glisser-déposer. L’outil propose également des composants pour Bootstrap, iOS, Android ou Foundation. Enfin, vous pouvez exporter vos fichiers vers Sketch ou Photoshop, afin de créer des prototypes plus poussés.

Prix : à partir de 19 $ par mois

Mockplus – Freemium

Avec une bibliothèque de plus de 3 000 icônes, composants et templates, Mockplus est un outil idéal pour créer rapidement des wieframes de qualité. Ces derniers supportent iOS et Android et fonctionnent avec tous types d’appareils, qu’il s’agisse d’un ordinateur de bureau ou d’un mobile. La version gratuite propose un nombre d’utilisateurs et de projets limité, mais reste une option très intéressante.

Prix : version gratuite / version payante à partir de 5,95 $ par mois

Logiciels pour créer des prototypes

Figma – Freemium

Figma est un outil en ligne puissant pour créer des wireframes et des prototypes de vos applications. Il ressemble globalement à Sketch et permet de collaborer à plusieurs. Je l’ai utilisé dernièrement sur différents projets, c’est un outil puissant, assez simple à utiliser si on à l’habitude de Sketch.

Prix : version gratuite / version payante à partir de 12 $ par mois

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 !

Invision – Freemium

InVision 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 énormément de temps.

Prix : version gratuite / version payante à partir de 4 $ par mois

Adobe XD – Freemium

Adobe XD est un outil très complet qui permet la création de prototypes animés. Nous l’avons utilisé pour la création du nouveau design du BlogDuWebdesign est j’ai bien apprécié la partie collaboration de l’outil avec à l’éco système Adobe. On peut facilement ajouter des commentaires sur les maquettes, suivre l’avancement ou encore simulé une navigation à travers les différents éléments.

Prix : 11,99 € par mois

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. Sketch est l’équivalent d’un mix du meilleur de Photoshop et d’Illustrator centré sur la création d’interfaces.

Prix : à partir de 9 $ par mois

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.

Prix : version gratuite / version payante à partir de 10 $ par mois

Framer – Freemium

Framer est un outil en ligne conçu pour la création de prototypes. Il propose un large choix de composants qui peuvent être ajoutés simplement à votre wireframe, grâce à une interface très intuitive. Si Framer possède plusieurs formules payantes, sa version gratuite assez généreuse en termes de fonctionnalités, bien qu’elle soit limitée à 3 projets maximum.

Prix : version gratuite / version payante à partir de 19 $ par mois