Les meilleurs outils de wireframing pour votre application
Publié: 2018-03-23Nous vous avons dressé une liste d' outils de wireframing qui peuvent vous aider à rendre la création de votre application ou de votre site Web moins intimidante. Si vous recherchez un excellent outil de prototype , nous avons également inclus quelques suggestions pour ceux-ci.
Créer une nouvelle application ou un site Web est un exploit respectable que peu de gens accompliront dans leur vie. Cela ne signifie pas que vous devriez renoncer à le faire, mais plutôt que vous devriez rechercher et tout comprendre avant de plonger la tête la première. De nombreux novices ont du mal à comprendre la différence entre un wireframe, un prototype et des maquettes, donc cet article est là pour vous aider à comprendre chacun.
INDICE
QU'EST-CE QU'UN WIREFRAME ?
LES MEILLEURS OUTILS DE WIREFRAMING DE 2018
QU'EST-CE QU'UN PROTOTYPE ?
LES MEILLEURS OUTILS DE PROTOTYPAGE DE 2018
CRÉEZ DES MAQUETTES DE VOTRE PRODUIT
QU'EST-CE QU'UN WIREFRAME ?
Vous avez une idée géniale pour une nouvelle application ou un nouveau site Web, mais comment commencez-vous à en faire un produit réel ? Avec un wireframe ! Il s'agit de la première étape du processus de planification, il est donc important de ne pas la sauter.
Bases filaires
Avant de prendre des décisions de conception majeures, votre application ou votre site Web aura d'abord besoin d'une mise en page fonctionnelle qui a du sens. C'est là que le wireframe entre en jeu. La plupart des gens commencent par faire un croquis dessiné à la main de ce à quoi ils veulent que leur application ou leur site Web ressemble. L'étape suivante consiste à transformer ce croquis en une mise en page ou un plan numérique qui semble plus organisé et professionnel.
Votre wireframe devra communiquer la structure de base de la page sans inclure d'éléments de conception ou de contenu réel.
Travailler sur le wireframe avant de commencer à embellir quoi que ce soit vous permettra de détecter toute erreur de convivialité qui serait pénible à gérer plus tard. À ce stade, il est plus important de s'assurer que les éléments inclus ont du sens et sont fonctionnels, en particulier pour votre public cible. Si vous essayez d'attirer l'attention des investisseurs, un wireframe les aidera également à comprendre votre produit beaucoup plus facilement. En fait, ne pas avoir au moins un wireframe prêt peut faire perdre très rapidement l'intérêt des investisseurs. Les éléments qui sont inclus dans un wireframe ont tendance à être des boîtes pour les titres, des boutons, des zones de texte et des zones d'image.
Filaire vs maquette
Il est facile de confondre un wireframe avec une maquette car ils contiennent des éléments très similaires. Cependant, lorsque vous travaillez avec une équipe de développeurs, de concepteurs et d'investisseurs, vous devrez comprendre ce qui les distingue.
Pour commencer, un wireframe est utilisé pour organiser le contenu et les fonctionnalités de votre application , mais de manière très simple. Considérez-le comme un aperçu qui montre la structure de base de ce qui sera inclus dans votre application. Une fois que vous aurez commencé à ajouter d'autres éléments, tels que des couleurs, des icônes, des images, des polices et des photos, cela commencera à se transformer en maquette.
Une maquette fournit une représentation de fidélité moyenne de votre application ou de votre site Web en cours de développement. C'est une représentation beaucoup plus réaliste de la forme de votre application. Considérez cette étape du processus comme ajoutant un peu de substance à votre structure filaire ou lui donnant un peu plus de vie.
LES MEILLEURS OUTILS DE CÂBLAGE
BALSAMIQ
MOCKPLUS
MOQUPS
WIREFRAME.CC
MOCKFLOW
BALSAMIQ
Disponible pour tous les systèmes d'exploitation car il est basé sur le Web.
Principales caractéristiques : Balsamiq est un outil de création de structures filaires hautement recommandé qui permet aux utilisateurs de créer des structures filaires pour les applications de bureau, les applications mobiles, les sites Web, les fenêtres de dialogue, les applications Web, les applications pour tablette, etc. La création de votre wireframe via Balsamiq est similaire au dessin sur un tableau blanc, et le programme vous permet également de glisser-déposer des éléments d'interface utilisateur, d'obtenir des commentaires sur les croquis de votre équipe, de réviser les conceptions et d'affiner votre travail en temps réel.
Prix : Le prix de cet outil variera en fonction d'un certain nombre de situations. Vous pouvez commencer par un essai gratuit de 30 jours, mais après cela, vous devrez payer des frais mensuels ou annuels en fonction de la plateforme que vous choisissez. Par exemple, la version cloud vous coûtera 9 $ par mois ou 90 $ par an pour un maximum de deux projets. La version de bureau vous coûtera 89 $ pour une licence mono-utilisateur.
Bonus : Balsamiq propose des cours gratuits disponibles via Udemy et Skillshare pour vous aider à apprendre à utiliser leur produit et à en tirer les meilleurs résultats.
MOCKPLUS
Disponible pour Mac OS, Windows, Android et iOS.
Principales caractéristiques : Étant donné que les projets peuvent être liés au stockage en nuage, MockPlus permet à toute une équipe de collaborer facilement sur un seul projet. Les utilisateurs peuvent commenter directement le projet et le marquer pour que les autres puissent le voir. Vous pouvez également envoyer des e-mails de notification à votre équipe pour rester en contact avec les changements. La meilleure partie est que vous pouvez faire tout cela sans codage ni programmation, il est donc plus facile de se concentrer sur le travail devant vous.
Tarification : Il existe une option gratuite disponible pour les utilisateurs uniques qui comprend des produits illimités, bien qu'elle soit limitée à d'autres égards. Après cela, le prix ira de 199$ par an pour un particulier à 2999$ par an pour une entreprise. Vous pouvez également acheter une licence, qui ira de 399 $ pour un seul utilisateur à 5999 $ pour une entreprise (30 utilisateurs).
Bonus : le plus gros avantage de MockPlus est qu'il permet aux développeurs de créer des wireframes plus rapidement grâce aux outils qu'ils ont conçus pour accélérer le processus.
MOQUPS
Disponible pour tous les systèmes d'exploitation car il est basé sur le Web.
Principales caractéristiques : Moqups est une plate-forme Web qui peut être utilisée pour créer des structures filaires pour les applications Web et les applications mobiles pour iOS, Android et Bootstrap. Étant donné que la plate-forme est basée sur le Web, vous avez la possibilité de vous connecter et de travailler de n'importe où. La plate-forme n'est pas seulement destinée aux wireframes, vous pouvez également créer des diagrammes et des prototypes. Vous pouvez facilement faire glisser et déposer des éléments, utiliser leurs kits de pochoirs, choisir parmi différentes polices, sélectionner des objets et faire glisser et déposer vos propres images dans tout ce sur quoi vous travaillez.
Tarification : Comme la plupart des outils de wireframing, Moqups propose un essai gratuit. Après cela, le prix dépendra d'un certain nombre de facteurs. Par exemple, un abonnement annuel qui comprend des projets, des objets, du stockage et des commentaires illimités coûtera 13 $ par mois pour un seul utilisateur et 19 $ par mois pour une équipe créative (3 personnes). Vous devrez contacter Moqups directement pour obtenir un devis pour un compte Enterprise.
Bonus : si vous appartenez à une ONG, une école ou une organisation à but non lucratif, Moqups vous offrira un compte Premium sans frais.
WIREFRAME.CC
Disponible sur tous les systèmes d'exploitation car il est basé sur le Web.
Caractéristiques principales : Wireframe.CC est considéré comme l'un des outils filaires les plus basiques disponibles. Ce n'est pas nécessairement une mauvaise chose, surtout si vous êtes débutant. En fait, en raison de sa conception simple, les développeurs peuvent trouver plus facile de se concentrer sur leur travail à accomplir. Ce programme Web peut être utilisé pour créer des fenêtres de navigateur filaires, des applications mobiles ou des applications pour tablettes.
Tarification : Wireframe.CC offre un essai gratuit de 7 jours et un compte de base gratuit. Après cela, il vous en coûtera 16 $ par mois ou 144 $ par an pour un usage unique, 439 $ par mois ou 390 $ par an pour trois utilisateurs, ou 99 $ par mois ou 990 $ par an pour une entreprise (utilisateurs illimités).
Bonus : la simplicité de ce programme rend difficile la distraction et la procrastination. En fait, les éléments de l'interface utilisateur n'apparaîtront en tant qu'options qu'en cas de besoin.
MOCKFLOW
Disponible en tant qu'application de bureau pour Mac OS et Windows ou en tant qu'application Web.
Caractéristiques principales : Ce programme peut être utilisé pour concevoir des applications Web, des applications mobiles, des interfaces et des logiciels, entre autres options. Ils proposent des packs de composants pour l'interface de votre choix afin de vous faciliter la tâche. MockFlow propose également des fonctionnalités de collaboration qui permettent à tous les membres de votre équipe de voir les changements en temps réel tout en vous permettant également de faire des commentaires annotés pour que tout le monde puisse les voir. Vous pouvez exporter vos fichiers dans un grand nombre de formats, notamment DOC, PDF et HTML.
Tarification : Un compte de base, qui inclut un utilisateur et un projet maximum dans chaque outil, est gratuit. Un compte premium pour un utilisateur coûte 14 $ par mois. Son seul inconvénient est les restrictions de partage. Un pack d'équipe pour trois utilisateurs coûte 29 $ par mois, mais vous pouvez ajouter des utilisateurs à ce compte moyennant des frais supplémentaires. Un compte d'entreprise n'a pas de limite en termes d'utilisateurs et vous coûtera 160 $ par mois.
Bonus : L'un des avantages de l'utilisation de MockFlow est leur MockStore, qui vend des modèles d'interface utilisateur pour toutes sortes d'interfaces. Si vous ne vous sentez pas inspiré, vous pouvez parcourir leur boutique pour trouver des idées ou même acheter un modèle.
QU'EST-CE QU'UN PROTOTYPE ?
Un prototype n'est pas encore tout à fait le produit fini, mais il devrait lui être très similaire en termes d'apparence et de fonctionnalité générale. Ce prototype haute fidélité de votre application ou de votre site Web doit être utilisé pour tester votre produit et obtenir des commentaires des utilisateurs pour vous aider à résoudre les problèmes qui pourraient survenir.
Principes de base des prototypes
Un prototype arrive généralement à la fin du processus de conception et agit comme un pont vers le produit final. À ce stade, les concepteurs pourront présenter leur travail et l'utiliser pour obtenir des commentaires utiles. Le prototype ne doit pas seulement inclure des éléments de conception, il doit également démontrer comment le projet fonctionnera une fois terminé.
Un prototype peut ne pas inclure toutes les animations et interactions du projet final, mais il doit pouvoir démontrer comment l'application se déroulera. Vous permettant de tester ses performances.
Vous pouvez demander aux utilisateurs de le tester et de vous faire part de leurs commentaires afin d'améliorer l'expérience utilisateur. Vous pouvez avoir l'impression d'utiliser une vraie application, mais un prototype n'est qu'un ensemble d'images connectées les unes aux autres. Ces types de prototypes, les prototypes interactifs, sont idéaux car vous pouvez voir la conception finie tout en interagissant avec elle. La création d'un bon prototype interactif peut prendre du temps et coûter de l'argent, mais l'investissement en vaut vraiment la peine.
LES MEILLEURS OUTILS DE PROTOTYPAGE
PROTO.IO
MARVELAPP
PROTT
AXURE RP
INVISION
PROTO.IO
Disponible pour Mac OS et Windows.
Principales caractéristiques : le slogan de Proto.io est : « Des prototypes qui semblent réels », et avec raison. Leur produit permet aux concepteurs de créer des prototypes haute fidélité aussi proches que possible de la réalité. Il peut être utilisé pour créer des prototypes pour les applications mobiles ainsi que les applications Web. Leur outil d'enregistrement d'écran permet à votre équipe de voir exactement comment votre public interagit avec le prototype, et le mode hors ligne vous permet d'interagir avec le prototype sans connexion Internet, tout cela sans avoir à écrire une seule ligne de code.
Tarification : Vous pouvez commencer votre expérience Proto.io avec un essai gratuit de 15 jours, puis avoir la possibilité d'obtenir un compte gratuit, bien que ce soit assez limité. Les comptes payants vont de 24 $ par mois (abonnement annuel pour un utilisateur qui comprend 5 projets) à 160 $ par mois (abonnement annuel, 10 utilisateurs et comprend 30 projets actifs).
Bonus : certains de leurs outils les plus récents incluent des animations vectorielles que vous pouvez importer vous-même ou choisir dans leur bibliothèque d'animations vectorielles. Ils ont également récemment introduit une bibliothèque de composants VR qui vous permet d'intégrer facilement des images à 360°.
MARVELAPP
Disponible sous forme d'application Web pour Mac OS, iOS, Android et Windows.
Principales caractéristiques : MarvelApp est une excellent outil de prototype pour les concepteurs ayant une expérience minimale. Son interface simple peut sembler assez basique, mais cela fait partie de son attrait. Non seulement c'est un bon point de départ pour les nouveaux designers, mais il offre également les résultats professionnels que recherchent les designers plus expérimentés. Marvel facilite le suivi des changements, des nouveaux commentaires et des progrès grâce à la possibilité d'importer votre équipe depuis Slack ou Asana. Bien qu'il s'agisse d'une application, vous pouvez l'utiliser pour créer des prototypes pour le Web ou le mobile.
Tarification : MarvelApp est disponible gratuitement pour un seul utilisateur et comprend deux projets. Leurs abonnements payants commencent à 12 $ par mois pour un seul utilisateur, des projets illimités, des prototypes protégés par mot de passe et la possibilité de télécharger vos prototypes.
Bonus : MarvelApp fonctionne sur tous les appareils iOS, ce qui signifie que vous pouvez visualiser rapidement et facilement votre travail sur votre iPhone, iPad, Apple Watch et même Apple TV.
PROTT
Disponible sous forme d'application iOS et Android.
Fonctionnalités clés : Travailler sur une application mobile pour créer un prototype peut sembler un peu limité, mais Prott prouve que ce n'est pas nécessaire. En fait, cette plate-forme regorge de fonctionnalités et d'outils qui peuvent être utilisés pour créer des maquettes d'interface utilisateur, des prototypes de logiciels de bureau, des mises en page de sites Web, des wireframes interactifs et des prototypes. Si vous travaillez avec une grande équipe, Prott facilite le partage des modifications avec eux et l'obtention de commentaires en temps réel.
Tarification : Prott propose un essai gratuit qui se transforme en abonnement gratuit une fois la période de 30 jours terminée. Cette option est pour un seul utilisateur et un seul projet. Leurs plans payants commencent à 19 $ par mois pour un seul utilisateur, trois projets, des écrans illimités et des réviseurs illimités.
Bonus : La plateforme Prott vous permet de laisser des commentaires n'importe où sur le projet, vous aidant à communiquer avec votre équipe beaucoup plus facilement et clairement. Les membres de votre équipe peuvent répondre directement à vos commentaires, en veillant à ce que rien ne se perde en cours de route.
AXURE RP
Disponible pour Mac et Windows.
Principales caractéristiques : Axure RP est considéré comme l'un des outils de prototypage les plus complets , il n'est donc pas surprenant de voir combien d'utilisateurs ils ont. Bien qu'il s'agisse d'une interface très complète, c'est une meilleure option pour ceux qui ont une bonne expérience. Une autre raison pour laquelle il est si bien connu dans l'industrie est qu'il existe depuis longtemps et qu'il s'agit de l'outil sur lequel la plupart des concepteurs ont appris leurs compétences au début des années 2000. Il convient de mentionner que vous aurez besoin de connaissances en codage pour obtenir ce dont vous avez besoin de cet outil.
Tarification : Vous pouvez commencer avec un essai gratuit de 30 jours. Après cela, les abonnements commencent au niveau Pro pour 29 $ par mois par utilisateur et atteignent 99 $ par mois par utilisateur au niveau Entreprise. Les licences perpétuelles commencent à 49 $ par mois et par utilisateur, mais ne sont pas disponibles au niveau Enterprise.
Bonus : Axure RP offre aux concepteurs le plus d'options par rapport aux autres outils de prototypage. Bien que son interface offre le plus de fonctionnalités, elle se fait au prix d'un système plus compliqué. Une fois maîtrisé, Axure RP vous donnera d'excellents résultats.
INVISION
Disponible sur tous les systèmes d'exploitation car il est basé sur le Web.
Caractéristiques principales : InVision est un outil bien connu et très apprécié dans l'industrie qui permet aux concepteurs de créer des prototypes pour le Web, iOS et Android. Cette plate-forme a été conçue pour les grandes équipes, la collaboration est donc un jeu d'enfant. Il est assez facile à utiliser, il vous suffit de télécharger vos fichiers de conception et d'y ajouter des éléments tels que des animations, des gestes et des transitions. Le résultat final est un prototype fiable et de haute fidélité.
Prix : InVision propose un plan gratuit qui comprend un prototype actif, après quoi les plans payants commencent à 15 $ par mois pour trois prototypes pour un seul utilisateur. Un abonnement d'équipe pour cinq utilisateurs et qui comprend des prototypes illimités coûtera 100 $ par mois.
Bonus : InVision a récemment publié son très attendu Studio, qui prétend être "l'outil de conception d'écran le plus puissant au monde". Ce nouvel outil espère simplifier le processus entre la conception et la création de prototypes fonctionnels. La meilleure partie est que c'est gratuit!
CRÉEZ DES MAQUETTES DE VOTRE PRODUIT
Une fois que votre prototype est prêt et que vous êtes revenu pour résoudre tous les problèmes que vous avez rencontrés au cours du processus de test, vous vous rapprochez probablement d'une date de lancement. Mais, avant de mettre en ligne, assurez-vous que vous disposez des bons outils pour commercialiser correctement votre application ou votre site Web . L'utilisation de maquettes qui montrent à quoi ressemble votre nouvelle application ou votre nouveau site Web sur de vrais appareils peut aider à attirer davantage l'attention sur elle.
Qu'est-ce qu'une maquette ?
Nous avons déjà discuté de la différence entre un wireframe et une maquette , mais le type de maquette dont nous parlons ici est quelque chose de complètement différent. Ce type de maquette arrive à la fin, une fois que votre application ou votre site Web est prêt à être mis en ligne. Ce sont essentiellement des photos que vous pouvez personnaliser avec des images ou des captures d'écran de votre produit final. Par exemple, vous pouvez prendre une capture d'écran de votre application et la déposer sur l'écran d'un iPhone X.
Les maquettes sont importantes car elles peuvent être utilisées pour commercialiser et promouvoir votre application ou votre site Web. Ils peuvent également être utilisés lors de la création de captures d'écran de votre application pour l'App Store ou le Play Store. Les maquettes de Placeit sont faciles à utiliser et sont disponibles dans une vaste gamme. Vous pouvez trouver toutes sortes de maquettes, y compris des maquettes d'iPhone, des maquettes d'iPad, des maquettes de MacBook, des maquettes de navigateur et des maquettes Android.
Présentez votre travail sur une maquette
Vous êtes probablement ravi de terminer enfin le projet sur lequel vous avez travaillé si dur pendant si longtemps. Nous savons qu'il ne vous reste probablement pas beaucoup d'argent pour la publicité, c'est là que les maquettes de Placeit entrent en jeu. Ils sont faciles à utiliser, produisent de superbes images de votre produit et sont très abordables ! Peu importe ce que vous faites la promotion, une application iPhone, une application iPad ou un nouveau site Web, Placeit a les dernières maquettes de gadgets qui vous couvrent !
Si vous avez apprécié cet article, essayez cette liste de 10 outils d'optimisation de l'App Store ou consultez 7 conseils pour promouvoir votre application.