Les 10 meilleurs outils filaires
Les meilleurs outils de wireframe vous permettent de clouer la conception de votre site Web ou de votre application dès le départ. En amenant toutes les parties prenantes à s'accorder sur le fonctionnement de votre interface utilisateur, l'adhésion se concrétise très tôt. Et c'est essentiel pour rationaliser votre processus et éviter les mauvais virages et les inversions en cours de route.
Certains des meilleurs outils filaires spécialement conçus pour le wireframing. Le choix de ceux-ci dépend en grande partie de la question de savoir si vous cherchez à créer quelque chose de rapide et approximatif, ou quelque chose de plus proche d'un prototype entièrement fonctionnel.
De l'autre côté de la médaille, certaines personnes ne veulent pas se soucier d'exporter leurs créations d'une application de wireframing dédiée vers une application de conception complète. Au lieu de cela, ils préfèrent construire leurs wireframes dans un logiciel de conception à usage général, afin de pouvoir tout développer sur une seule plate-forme du début à la fin.
Nous avons des recommandations dans les deux camps. Nous l'avons réduit à 10 des meilleurs outils de wireframing. Pour plus d'outils pratiques, consultez notre outils de conception web roundup, ou notre meilleurs ordinateurs portables pour la programmation .
Les meilleurs outils filaires
01. UXPin
Le meilleur outil filaire dans l'ensemble
Plate-forme: Navigateur Web | Essai gratuit: Oui | Prix: À partir de 19 $ par éditeur et par mois
Visitez le site Interface intuitive Lit les fichiers Sketch et PS Principaux outils de présentation Pas de version gratuiteUXPin est un outil de wireframing dédié qui possède une interface magnifiquement intuitive, avec des icônes claires et une solide bibliothèque d'éléments d'interface utilisateur que vous pouvez faire glisser et déposer dans vos wireframes, ainsi que des composants pour Bootstrap, Foundation, iOS et Android. Vous pouvez importer et exporter des fichiers vers Sketch et Photoshop, ce qui vous donne la possibilité de développer vos wireframes en prototypes complets plus loin sur la ligne.
Il existe également d'excellentes fonctionnalités de collaboration pour travailler sur vos wireframes avec d'autres, et des outils de présentation en direct de premier ordre pour montrer vos conceptions aux parties prenantes. Facile à prendre en main pour les débutants et doté d'outils avancés pour les plus expérimentés, UXPin est notre meilleur outil filaire dans l'ensemble.
02. Adobe XD
Le meilleur outil de conception complète pour le wireframing
Plate-forme: MacOS, Windows, Android, ioS | Essai gratuit: Non, mais version gratuite limitée | Prix: À partir de 9,98 £ par mois (application unique) ou 49,94 £ par mois dans le cadre de Creative Cloud
Revendeur recommandé Creative Cloud Toutes les applications 49,94 £ / mois Photographie créative en nuage 9,98 £ / mois Application unique Creative Cloud 19,97 £ / mois Visitez le site chez Adobe Intégration multiplateforme Creative Cloud Fonctionnalités avancées La version complète nécessite un abonnementLancé en tant que concurrent direct de Sketch,Adobe XDest un outil de conception vectoriel disponible pour Mac et Windows. Il est totalement interopérable avec d’autres outils Adobe tels que Photoshop et Illustrator, ainsi qu’avec des services tels que Adobe Fonts et Adobe Stock. Et il est fortement axé sur la simplification du processus d'esquisse des structures filaires pour les concepteurs; de la création de plans de site, d'organigrammes et de storyboards à la construction de prototypes fonctionnels.
Les fonctionnalités notables incluent une «grille de répétition» pour une conception rapide, une animation automatique, des déclencheurs vocaux et des outils de collaboration puissants. Vous pouvez essayer Adobe XD gratuitement, mais vous avez besoin d'un abonnement Creative Cloud pour accéder à la gamme complète des fonctionnalités.
03. Axure RP
Le meilleur outil filaire dédié pour les pros de l'UX
Plate-forme: MacOS, Windows | Essai gratuit : Oui | Prix: À partir de 25 $ (pro) par utilisateur et par mois
Visitez le site Construire des prototypes fonctionnels Fonctionnalités avancées Courbe d'apprentissage Peut-être exagéréAxure vous permet non seulement de créer des wireframes low-fi, mais également d'ajouter des fonctionnalités supplémentaires et de créer des structures haute fidélité. Vous pouvez l'utiliser pour créer des maquettes HTML interactives pour les sites Web et les applications, et afficher la conception de votre application sur votre téléphone avec une fonction de partage intégrée.
Utilisé par des organisations telles que Microsoft, Amazon et la BBC, ce logiciel comprend des fonctionnalités de remplacement des symboles, un mode d'inspection par les développeurs, des effets d'animation, le stockage et le partage dans le cloud, l'exportation CSS et la documentation. Un excellent choix pour les professionnels expérimentés de l'expérience utilisateur qui souhaitent confier leurs conceptions aux développeurs.
04. Maquettes Balsamiq
Le meilleur outil filaire pour les conceptions low-fi
Plate-forme: Mac, Windows, Linux, navigateur Web | Essai gratuit: Oui | Prix: À partir de 89 $ pour un utilisateur de bureau; à partir de 9 $ / mois pour la version web
Visitez le site Rapide à utiliser Garde les choses simples Petite courbe d'apprentissage Seulement des wireframes low-fiMaquettes Balsamiq rend très facile la prise en main et la création de wireframes, même si vous n'avez aucune expérience préalable. Nous le recommandons à tous ceux qui cherchent à créer un wireframe rapide et à faible fi, par opposition à un prototype poli.
Le logiciel propose plusieurs éléments de glisser-déposer, des boutons aux listes, chacun étant conçu comme un dessin à la main, et vous pouvez voir à quoi ressemblera votre image filaire sur différentes tailles d'écran. Avec des outils de collaboration et des tests utilisateur bien intégrés, c'est un excellent choix pour les non-techniciens et les équipes Lean UX.
05. Croquis
Outil de conception complet avec une forte concentration sur l'interface utilisateur
Plate-forme: Mac | Essai gratuit: Oui | Prix: 99 $
Vérifier Amazon Visitez le site Forte concentration sur l'interface utilisateur Interface intuitive légère Uniquement pour MacTandis que Esquisser n'est pas disponible pour Windows, si vous êtes un utilisateur Mac, cela vaut vraiment la peine d'envisager. Depuis son lancement en 2010, il a révolutionné l'ensemble du marché des outils de wireframing et de prototypage, et il reste aujourd'hui axé sur la conception de l'interface utilisateur et des vecteurs d'icônes. Légère et facile à utiliser, son interface est magnifiquement simple et intuitive.
Sketch est un excellent outil pour créer des wireframes simples, avec sa fonction Symbole vous permettant de répéter automatiquement des éléments dans votre mise en page. Il existe d'innombrables kits d'interface utilisateur tiers à télécharger si vous souhaitez créer un prototype complet. Et contrairement aux applications Adobe, il est disponible moyennant des frais uniques sans abonnement.
06. Photoshop
La norme de l'industrie pour la conception numérique
Plate-forme: Windows, Mac | Essai gratuit: Oui | Prix: À partir de 19,99 $ par mois dans le cadre d'Adobe Creative Cloud
Revendeur recommandé Creative Cloud Toutes les applications 49,94 £ / mois Photographie créative en nuage 9,98 £ / mois Application unique Creative Cloud 19,97 £ / mois Visitez le site chez Adobe Standard de l'industrie Intégration Creative Cloud Riche en fonctionnalités Manque de bibliothèques d'élémentsPhotoshopest la norme de l'industrie en matière de logiciels de conception en général. Il n'y a pas de fonctionnalités de wireframing spécifiques; il n'offre pas de bibliothèques d'éléments d'interface, par exemple. Mais il n'y a aucune raison que vous ne puissiez pas l'utiliser pour le wireframing. En effet, comme il est si bien intégré à d’autres outils et services Adobe tels que Adobe Fonts et Adobe Stock, vous pouvez très bien trouver que Photoshop est le meilleur outil filaire pour vous. Surtout si vous connaissez déjà le logiciel. Et il contient tellement de fonctionnalités que vous pouvez tout faire, de l'esquisse d'idées rapides au regroupement de divers éléments et calques pour créer un filaire robuste.
07. Justinmind
Le meilleur outil filaire et prototype pour les non-techniciens
Plate-forme: Mac OS, Windows | Essai gratuit: Non, mais version gratuite limitée | Prix: À partir de 19 $ / mois
Visitez le site Construire des prototypes fonctionnels Convient aux débutants Version gratuite Courbe d'apprentissageJustinmind est un autre outil qui vous permet de tout construire, des wireframes bruts aux prototypes fonctionnels, mais qui convient mieux aux non-techniciens qu'Axure RP. Il comprend une bibliothèque d'éléments d'interface utilisateur, des boutons et des formulaires aux formes génériques et une gamme de widgets pour iOS, SAP et Android.
Un style personnalisé est inclus, vous pouvez donc ajouter des coins arrondis, des images recadrées ou des dégradés de couleurs, ou importer des graphiques en les faisant glisser dans le navigateur. Les prototypes peuvent être exportés au format HTML. Il existe même une version limitée qui est gratuite pour toujours.
08. Wireframe.cc
Le meilleur outil filaire dans le navigateur
Plate-forme: Navigateur Web | Essai gratuit: Oui | Prix: À partir de 16 $ par mois
Visitez le site Garde les choses simples Supprime les distractions Rien à télécharger Manque de fonctionnalités (bien que volontairement)Il existe un dicton populaire dans les affaires connu sous le nom de principe KISS: 'Keep it simple, stupid'. Et si vous adoptez cette approche du wireframing, Wireframe.cc peut être le meilleur choix pour vous.
Cet outil basé sur un navigateur offre une interface simple pour esquisser vos wireframes et évite les barres d'outils et les icônes d'une application typique, donc rien ne vous ralentit. Il existe une palette de couleurs limitée pour vous aider à éviter cette avenue particulière de procrastination, et les éléments de l'interface utilisateur sont sensibles au contexte et n'apparaissent que lorsque vous en avez besoin.
09. Invision Studio
Logiciel de conception avec une forte collaboration et des fonctionnalités réactives
Plate-forme: Windows, Mac | Essai gratuit: Non, mais plan gratuit limité | Prix: À partir de 13 $ par mois
Visitez le site Facile à utiliser S'intègre à la version gratuite d'Invision Freehand Ne s'intègre pas à de nombreux outilsInvision Studio n'est peut-être pas aussi riche en fonctionnalités qu'Adobe XD, mais pour créer des wireframes, il a tout ce dont vous avez besoin. Il est particulièrement performant sur les fonctionnalités de conception réactive et s'intègre parfaitement à Invision Freehand pour une collaboration en temps réel avec d'autres.
L'interface est assez facile à apprendre et les icônes préchargées sont très élégantes et bien conçues. Avec des fonctionnalités pratiques telles que les commentaires, les transitions et la synchronisation du bureau, il s'agit d'un outil très performant pour tout construire, des wireframes low-fi aux prototypes complets.
10. InDesign
Outil de publication assistée par ordinateur idéal pour créer des wireframes
Plate-forme: Windows, Mac | Essai gratuit: Oui | Prix: À partir de 19,99 $ par mois dans le cadre d'Adobe Creative Cloud
Adobe InDesign CC 19,97 £ / mois Visitez le site chez Adobe Concevez des PDF interactifs Créez vos propres bibliothèques Intégration Creative Cloud Manque de bibliothèques d'élémentsAdobe InDesignest depuis longtemps le logiciel de publication assistée par ordinateur le plus populaire. Mais ces jours-ci, il ne se concentre plus uniquement sur la conception d'impression. La dernière version peut également être utilisée pour créer de jolis fichiers PDF interactifs, y compris des animations, des vidéos et des états d'objet. Et si les fonctions numériques d'InDesign sont principalement utilisées pour créer des livres électroniques, des brochures électroniques et des magazines électroniques, elles sont tout aussi capables de créer des wireframes et des maquettes. Le logiciel inclut également la possibilité de créer des bibliothèques d'éléments de page, de sorte que vous pouvez également créer des collections de graphiques d'interface utilisateur réutilisables.
Lire la suite:
- Les meilleurs créateurs de sites Web
- 11 graphiques étonnants Framework JavaScript
- Écrivez du code HTML plus rapidement
