Une liste de sites ou d’applications performantes permettant d’élaborer des wireframes ou des prototypes, sous plusieurs formats d’écrans différents.
Le wireframe est une étape indispensable dans le métier d’un UX designer, cela consiste à élaborer des prototypes de l’interface finale. Il existe plusieurs niveaux de réalisation, du plus grossier ( zoning, croquis ) au plus élaboré ( UI, vrai contenu ) le wireframe nécessite des outils spécifiques pour chacune de ces étapes.
Les meilleurs sont payants, ce qui est normal, un service de qualité mérite une reconnaissance, mais si vous êtes UX designer et que les prototypes font normalement partie intégrante de votre travail, il est préférable de débourser un peu d’argent pour un des logiciels de votre choix, cela vous fera gagner un temps fou comparé aux solutions basiques, tels que Photoshop / Illustrator ou encore des services gratuits.
Une liste de 10 outils pour faire vos prototypes #wireframe #UX Cliquez pour tweeter1 / Axure, le photoshop du Wireframe
Axure, le logiciel de prototype de base, l’un des plus anciens, récemment traduit en Français, Axure constitue la référence en wireframe pour web et mobile. Il demande un petit peu de temps pour la prise en main, mais une fois acclimaté à l’interface, les possibilités d’interaction sont vraiment larges.
- Logiciel MAC / PC
- Version d’essai 30 jours
- Achat : $289 – $589
- Licence gratuite pour les étudiants / professeurs
Découvrez Axure
2 / MockingBird, le gratuit, facile à prendre en main
Mockingbird est gratuit et super facile à utiliser, pas besoin d’enregistrement, l’application est directement sur le web. Super pratique en cas de besoin de prototype rapide d’une interface. Les outils essentiels sont là, ils se gèrent en cliqué-déplacé et la taille de l’écran de fond est modulable à souhait ( toutes les tailles possibles ).
- Plateforme web ( safari / firefox / chrome )
- Version d’essai + Premium $9/mois – $85/mois
Découvrez Mockingbird
3 / WireframeCC, le spécialiste du prototype “basse définition”
WireframeCC est spécialisé dans le positionnement d’interface, sans aucune possibilité d’ajouter du vrai contenu. Idéal pour élaborer un prototype rapide et propre. Un système d’annotation bien pratique qui fait sa petite différence. L’interface est également très agréable et épurée, aucune barre d’outils gênante sur le coté.
- Plateforme web
- Gratuit version Freemium
- Premium $12/mois – $99/ mois
Découvrez WireframeCC
4 / Moqups, le bon compromis
Moqups est très complet et fonctionnel, accessible directement sur votre page web, un tas de fonctionnalités à disposition et facilement utilisables. Le système de partage et de Prévisualisation le différencie un peu des autres. De plus, l’équipe de moqups travail actuellement sur une nouvelle version beta.
- Plateforme web
- Gratuit version Freemium
- Premium $99 – $419
Découvrez Moqups
5 / UXpin, du prototype au design d’interaction
UXpin, l’outil professionnel basé sur le travail d’équipe, l’échange et l’interaction. Possibilité d’ajouter du vrai contenu et de pousser le graphisme de l’interface jusqu’à son état final. Vous pouvez également élaborer des sortes de tests incorporés dans le prototype afin de faire tester à vos utilisateurs le prototype directement via un lien web. Solution très complète et parfaite pour un UX designer. De plus l’équipe d’UX pin laisse à disposition des ressources gratuites centrées sur l’interface utilisateur.
- Plateforme web
- 30 jours d’essai version Freemium
- Premium $13,50/mois – $36/mois
Découvrez UXpin
6 / JustInMind, la finesse de l’exigence
JustInMind est le seul logiciel à faire des prototypes pour mobile, web et google Glass, oui oui, même si elles sont devenues inutiles, vous pouvez quand même designer des interfaces pour les fameuses lunettes connectées. L’application est extrêmement complète mais nécessite un peu de pratique afin d’obtenir des résultats probants. L’interface du logiciel est très proche de celle d’Adobe, donc on peut vite s’y familiariser. A utiliser dans la création de prototypes complexes et réalistes. Possibilité de créer un “site map” et de le visionner sur le mobile via une application.
- Logiciel
- 30 jours d’essai
- Premium $19/mois – $29/mois
- Licence perpétuelle $495
- Application mobile
Découvrez JustInMind
7 / InVision, le power point du prototype
InVision est surprenant de part sa hiérarchisation des projets / écrans, c’est simple et clair, on s’y retrouve facilement. L’ajout de collaborateur est rapide, le suivi d’activité est évident et la prévisualisation des projets est très intuitive. Recemment le format Apple watch a été ajouté, vous pouvez donc dorès déjà prototyper pour les montres.
- Plateforme web
- Gratuit
- Application mobile
Découvrez InVision
8 / Proto.io, parfait pour le design d’interaction
Protio.io est, à mon avis, surtout spécialisé dans l’interface mobile, plusieurs types de mobiles sont disponibles, mais le prototype pour écran d’ordinateur est également possible. Cette web application est remplie d’animations et d’interactions, c’est parfait pour impressionner un client lorsque vous voulez le plonger dans une utilisation réactive et réaliste. Egalement disponible en application mobile pour démonstration.
- Plateforme web
- 15 jours d’essai
- Prémium $24/mois – 160/mois
- Application mobile
Découvrez Protio.io
9 / Gliffy, le multifonction
Gliffy est vraiment l’outil complet en ligne, il peut autant servir à l’élaboration de wireframe, que de site map ou pour mettre en place la hiérarchie de l’information. Il est également possible de faire des diagrammes ou des écrans de présentations d’analyse. Il se proclame un peu multifonction, ce qui peut compliquer son utilisation, mais il reste néanmoins très complet.
- Plateforme web
- Gratuit avec version Freemium
- Prémium $3.99/mois – 7.99/mois
- Plugin
Découvrez Gliffy
10 / Crayon + Main, la gauche ou la droite
Le croquis ou le prototype fait main reste ( souvent ) la solution la plus adéquate et rapide dans les moments de créativités de intense ! Il est toujours possible de le retranscrire plus tard en détail sur machine afin de le rendre compréhensible aux yeux de tous, mais lorsque l’idée vient il faut réagir vite ! C’est pourquoi il ne figure pas sur cette liste des applications qui reprennent l’idée du “tracé main” ( comme balsamiq ou wireframesketcher ) avec des traits de crayon plus ou moins droits, autant le faire à la main dans ce cas… De plus vous pouvez découper et faire des sortes de collage pour interagir avec les écrans et pouvoir élaborer des tests primaires avec vos clients / utilisateurs.
11 / Framer, le spécialiste de l’interaction [BONUS avec SKETCH]
Framer est un puissant outil pour faire du design d’interaction, dans le même principe que inVision, il faut importer son interface (via sketch ou photoshop ) et ensuite le rendre interactif à l’aide d’un peu de code. L’importation de vidéo est également possible. Ce logiciel est vraiment complet dans son domaine, mais il nécessite un peu de maîtrise pour arriver à faire des mouvements vraiment fluides et intéressants. Il est en bonus car ce n’est pas vraiment du wireframe, et il faut mettre un peu la main dans le code.
- Logiciel sur mac uniquement
- Période d’essai
- Achat 74.20€
Découvrez Framer
Image by Shpëtim Ujkani
Et vous ? Vous utilisez quel outil pour faire vos wireframes ? Dites le dans les commentaires !
People reacted to this story.
N’oubliez pas 2 des outils de dernière génération : atomic.io et principle.cc; l’un est un outil en ligne avec plain de fonctionnalités avancées (import docs Sketch, Components, design d’interaction avancé ) et l’autre, app “standalone” hyper intégré avec Sketch aussi, et très très rapide pour concevoir des interactions.
Ops.. Ma faute j’ n’avais vu la date de publication ! 🙂
Good d’avoir enfin une vraie plateforme française d’UXers ! Mais en effet, à rajouter principle dans la liste pour son gros apport sur le prorotyping rapide d’interaction. Il y a quelques mois personne ne connaissait l’outil chez nous, mais depuis c’est devenu une référence. Fonctionne parfaitement avec Sketch