• Principal / L'informatique

12 meilleurs outils de prototypage

Page 1 sur 2: Page 1

• Page 1
• Page 2

Le prototypage est une partie essentielle de tout processus de conception numérique. Cela nous aide à simuler nos conceptions, à explorer différents expériences utilisateurs , et testez les parcours et les flux d'utilisateurs au sein de nos projets. L'époque de l'impression et de la fourniture de dessins PDF est révolue.

Il y a beaucoup de outils de conception web autour, mais les outils de prototypage ont vraiment pris leur envol ces dernières années. Avec ces outils de prototypage, vous serez prêt à relever tous les défis de conception auxquels vous pourriez être confronté, que vous souhaitiez créer quelque chose de beau ou de technique à partir d'une idée. Quel que soit le prototype, il est important de tester et de jouer avec votre interface afin de pouvoir valider l'expérience.

La plupart de ces outils ont un prix mais certains donnent un accès gratuit pour un seul projet ou des pages limitées, vous permettant de trouver la bonne application pour votre projet.

Si vous recherchez spécifiquement des outils de wireframing, consultez notre liste des meilleurs outils filaires disponible.

Illustration principale: Newton Ribeiro

01. Proto.io

Prix: À partir de 24 $ / mois (essai gratuit)

Avantages:

• Enregistrer les tests utilisateurs
• Prototypes partageables
• Application mobile disponible
• Prend en charge le prototypage VR
• Modules complémentaires disponibles

Les inconvénients:

• Pas génial pour une utilisation hors ligne

Proto.io est un candidat incroyable pour la création de prototypes réalistes, des idées brutes jusqu'aux conceptions à part entière. L'outil offre également de nombreuses possibilités pour vos projets, notamment la création d'animations détaillées et d'animations vectorielles personnalisées.

C'est certainement l'un des pionniers lorsque vous évaluez des outils pour vous aider à créer vos prototypes. Avec Proto.io, démarrer un projet est aussi simple que vous le souhaitez. Avec seulement une idée approximative esquissée, vous pouvez vous lancer immédiatement et commencer à utiliser des ressources prédéfinies pour faire évoluer votre concept rapidement.

Une fois que vous êtes satisfait de vos idées, celles-ci peuvent être transformées en structures filaires plus raffinées et présentables pour une validation et une réflexion plus poussées. La prochaine étape importante qui suit vous permet de peaufiner la conception de vos prototypes afin qu'ils soient aussi fidèles que possible au résultat final.

Proto.io est un outil Web et est livré avec une multitude de modules complémentaires et de fonctionnalités, notamment l'importation de fichiers Sketch et Photoshop, le prototypage VR, les bibliothèques d'interface utilisateur et même l'enregistrement d'écran pour les tests utilisateur. Cela peut vraiment aider si vous effectuez une transition vers et à partir d'autres applications.

En fin de compte, vous devrez prendre un certain temps pour vous familiariser avec cet outil. Il est possible d'en faire beaucoup et il existe un grand nombre d'options et d'éléments de menu avec lesquels jouer. Une fois que vous aurez appris votre chemin, ce sera difficile à ranger. La perspective de créer des animations détaillées en fait vraiment un excellent outil à utiliser et le moyen idéal d'exécuter vos idées de la manière la plus réaliste possible.

02. Adobe XD CC 2018

Prix : 9,99 $ / mois | 9,98 £ / mois
Essayez un essai gratuit : nous | Royaume-Uni

Avantages:

• Ajoutez des interactions en quelques clics
• Nettoyer l'interface utilisateur
• Exécutez et exportez des prototypes pour des tests faciles
• Créez des prototypes avec très peu de restrictions

Les inconvénients:

• Les options d'animation sont limitantes

Adobe XD offre le meilleur environnement pour les projets numériques sous Adobe Nuage créatif collection d'outils de conception. Bien que si vous êtes un utilisateur adepte d'Adobe et que vous débutez avec XD, vous ne trouverez peut-être pas l'interface très familière au début, mais elle se compare aux autres outils de pointe. C'est un saut si vous concevez dans Photoshop depuis un certain temps. Cependant, cela en vaut la peine si vous êtes un grand fan d'Adobe.

Cet outil vous permet de créer des conceptions et des prototypes haute fidélité avec très peu de restrictions. Il fera certainement toujours partie de l'arsenal des projets les plus visuels. Il est très orienté vers la conception et est très facile à utiliser avec des fonctionnalités vraiment intéressantes pour rendre le processus de conception plus efficace et plus satisfaisant.

Il existe deux modes pour votre toile: ce sont Design et Prototype. Une fois que vous avez créé un ensemble d'interfaces et de plans de travail, vous pouvez commencer à dessiner des relations entre les éléments cliquables et les pages. Vous pouvez choisir entre des styles de transition tels que le glissement, la poussée et la dissolution. XD vous permet ensuite d'exécuter et d'exporter des prototypes afin que vous puissiez les tester et les montrer aux clients.

Meilleures offres Adobe Creative Cloud du jour AdobeRevendeur recommandé Creative Cloud Toutes les applications 49,94 £ / mois Vue à Adobe Photographie créative en nuage 9,98 £ / mois Vue à Adobe Application unique Creative Cloud 19,97 £ / mois Vue à Adobe

03. Axure

Prix: À partir de 29 $ / mois

Avantages:

• Idéal pour les sites et les idées complexes
• Excellente gestion des données dynamiques
• Logique conditionnelle
• Capable d'exporter sous forme de fichiers HTML
• Très fonctionnel

Les inconvénients:

• Pas idéal pour le prototypage de designs haute fidélité

Axure a réussi à se forger une réputation comme l'un des meilleurs outils de wireframing du marché, et le choix parfait lorsqu'il s'agit de traiter des projets plus complexes nécessitant des données dynamiques. Avec Axure, vous pouvez vraiment concentrer votre attention sur la maquette de projets à la fois plus techniques et nécessitant plus d'attention en matière de structure et de données.

Bien que ce ne soit pas nécessairement le premier choix pour prototyper une conception haute fidélité, il est néanmoins excellent pour faire passer rapidement les grands projets / plates-formes logicielles à travers les concepts filaires de première étape.

Un avantage majeur d'Axure est qu'il gère très bien le contenu dynamique, vous permettant de le changer et de le modifier en fonction de certains parcours ou interactions de l'utilisateur. Ceci est réalisé grâce à une combinaison de logique conditionnelle et de manipulation de pages, de blocs de contenu ou de texte en définissant des variables et des paramètres.

Mais le potentiel de ce que vous pouvez faire avec Axure ne s’arrête pas là. C'est une excellente option pour visualiser des organigrammes et des diagrammes, ce qui est juste la chose pour vous aider à articuler certains des parcours les plus techniques que vous pourriez rencontrer.

Et en parlant des aspects techniques d'un projet, Axure devrait être en tête de votre liste d'achats pour aborder les aspects techniques de la conception, ainsi que les plates-formes basées sur les données ou dynamiques, où la conception est une simple refonte esthétique à la fin. La fonction avant la forme vient à l'esprit.

04. Studio Origami

Prix: Libérer

Origami a été développé à l'origine par Facebook pour aider l'équipe à créer et à concevoir des produits. Maintenant, il est disponible gratuitement: vous pouvez vous inscrire en tant que développeur Apple, puis télécharger et installer Xcode avec Quartz Composer pour que Origami s'exécute sur un Mac.

Cet outil nécessite plus de travail à installer que les autres options de prototypage. Cependant, une fois qu'il est installé, vous pouvez commencer à créer des concepts de conception qui simulent le défilement, les tapotements, les balayages et les liens de page. La documentation, les didacticiels et les vidéos pratiques d'Origami facilitent la mise en route.

Les dessins Sketch et Photoshop peuvent être importés dans Origami, et les calques de votre projet seront préservés, prêts à être liés, animés et transformés selon les besoins. Origami n'est pas non plus centré sur la conception mobile: vous pouvez concevoir des sites Web réactifs et simuler des fonctionnalités telles que la saisie de texte, la caméra FaceTime et le glisser-déposer OS X.

Vous pouvez exporter vos composants prototypes (y compris les animations) en un seul clic, afin que les ingénieurs puissent copier et coller dans le projet. Origami comprend un outil de présentation qui vous permet d'ajouter un arrière-plan personnalisé à votre conception, de l'afficher en plein écran et de simuler différents appareils.

En tant que solution de prototypage gratuite, Origami a beaucoup à offrir. Cependant, l'un des inconvénients est qu'il ne permet pas encore à vos clients ou à votre équipe de conception de commenter directement le projet ou l'historique des versions.

05. Webflow

• Prix: À partir de 12 $ / mois (essai gratuit)

La conception de prototypes est rapide et transparente avec Webflow, mais là où cet outil brille vraiment, c'est lorsque votre prototype est terminé. Vous pouvez transformer votre prototype fini en un site prêt pour la production d'un simple clic.

Récemment, Webflow a introduit une nouvelle fonctionnalité qui change la donne: un CMS pour vos prototypes. Le CMS de Webflow est entièrement visuel, vous permettant de créer des sites puissants et dynamiques sans écrire une seule ligne de code. Une autre fonctionnalité particulièrement utile est sa capacité à créer un blog en utilisant votre concept de prototype de page de blog.

Si vous êtes un concepteur indépendant et que vous avez des difficultés à trouver un développeur pour transformer vos conceptions en sites de production, Webflow peut être fait pour vous. Vous pouvez même configurer des comptes d'utilisateurs ou désigner un administrateur pour gérer le contenu, et vos clients pourront apporter visuellement des modifications.

Alternativement, il est facile d'exporter le prototype en code. Le code propre et sémantique de Webflow peut faire économiser à vos ingénieurs des heures de nettoyage de code.

Webflow est fourni avec des modèles de site et des composants Web qui peuvent être glissés et déposés dans votre prototype. Celles-ci accélèrent le processus de prototypage, car elles vous évitent d'avoir à recréer les ressources de conception couramment utilisées.

Si à tout moment vous êtes bloqué et avez besoin d'aide, vous pouvez consulter la documentation détaillée de Webflow ou regarder ses cours vidéo pratiques utiles. Et bien sûr, si vous utilisez Webflow pour la première fois, cette prise en charge aidera à minimiser la courbe d'apprentissage.

Webflow est réactif par nature, les mises en page de votre site Web seront donc optimisées pour tous les appareils: ordinateur de bureau, mobile et tablette. Si cela ne suffisait pas, vous pouvez concevoir des animations qui fonctionneront sur les appareils mobiles et tous les navigateurs modernes. Et cela ne s'arrête toujours pas là: Webflow a une extensibilité intégrée, ce qui facilite la connexion de vos prototypes en direct à Slack, MailChimp, Google Drive et plus de 400 autres services.

06. Esquisser

Prix: 99 $ / année (essai gratuit)

Avantages:

• Interface utilisateur épurée
• Très flexible en termes de fonctionnalité
• Des prototypes faciles à construire
• Créer des symboles et des actifs réutilisables
• Modules complémentaires disponibles
• Partagez facilement votre prototype

Les inconvénients:

• Les options d'animation sont limitantes

Sketch est une application très appréciée de la communauté des designers. Il est simple à utiliser et vous offre tout ce dont vous avez besoin pour créer de belles interfaces. Jusqu'à récemment, Sketch s'appuyait sur des extensions tierces pour prototyper avec InVision, mais il fournit désormais un environnement qui lui est propre.

En utilisant des plans de travail prédéfinis, vous pouvez démarrer avec Sketch assez rapidement avec très peu d'effort; commencez simplement à charger dans les graphiques ou tapez. La conception dans cet outil est simple et agréable.

L'une des fonctionnalités qui fonctionne très bien dans Sketch est la façon dont il gère les symboles. C'est une manière élégante de conditionner des objets d'interface petits ou même de grande taille et de les réutiliser encore et encore. Avec vos symboles, vous pouvez également les éditer de manière non déconstructive. Par exemple, vous pouvez avoir un élément de bouton emballé dans un symbole qui utilise du texte, une icône et une bordure. Vous pouvez réutiliser le symbole autour de votre conception et modifier l'élément textuel si nécessaire. Si vous modifiez le symbole à la source, vous pouvez changer des éléments tels que le style et la couleur de la police et cela mettra à jour tous vos symboles autour de votre conception. Très soigné et souvent un gain de temps considérable.

En ce qui concerne le prototypage, vous pouvez dessiner des relations entre les objets sur votre canevas et vos pages. Ces relations vous fourniront des liens entre vos pages que vous pourrez commencer à connecter et vous permettront de simuler les parcours de vos utilisateurs lorsqu'ils naviguent sur votre site. Dans Sketch, vous pouvez également partager vos prototypes avec un lien unique et apporter des mises à jour au projet en cas de besoin.

Sketch est un favori pour beaucoup et vaut vraiment le coup d'œil. C’est un outil de conception très propre et polyvalent. Il existe un certain nombre d'extensions disponibles pour cela qui aident à rendre le processus de conception encore plus rapide ou plus facile.

07. Encadreur

Prix: 15 $ / mois (essai gratuit)

Framer est l'un des outils de prototypage les plus populaires. Il est basé sur le principe qu'avec le code, il est possible de prototyper n'importe quoi, ce qui entraîne des conceptions novatrices et révolutionnaires.

Bien que cela puisse être vrai, le langage de codage propriétaire de l'outil pour la conception et l'animation de prototypes pourrait être un obstacle. Il y a ceux qui peuvent ne pas voir la récompense à la fin de la courbe d'apprentissage abrupte, en particulier pour une langue qui ne peut pas être utilisée en dehors de Framer.

Cependant, pour ceux qui veulent relever le défi, la documentation du langage de codage de Framer est très bien structurée, avec de nombreux exemples pour montrer comment le langage fonctionne. Il existe des vidéos pratiques, ainsi que des cours sur Udemy et O'Reilly.

Cette approche est particulièrement utile pour les concepteurs novices en matière de codage. Il offre une vue de première main sur la flexibilité et la puissance du code. De plus, l'application Mac de Framer est bien conçue et fournit des aperçus en direct lorsque vous écrivez du code, ce qui est encourageant pour ceux qui écrivent du code pour la première fois.

Cela ne veut pas dire que ce n'est pas bon pour les concepteurs ayant une expérience en codage qui préfèrent écrire du HTML / CSS pour prototyper leurs conceptions. Framer n'est peut-être que l'outil que vous recherchiez: vous ne serez pas limité par les outils de glisser-déposer d'autres applications. De plus, comme Framer utilise du code pour créer des prototypes, vous pouvez incorporer des données en temps réel dans votre prototype, à partir de sources telles que Twitter et Parse.

Comme d'autres outils, Framer prend en charge les projets Sketch et Photoshop, et préservera également les calques de votre conception. Un autre avantage est que, contrairement à la plupart des autres outils, vous pouvez également importer des fichiers After Effects. Lorsque vous êtes prêt à partager votre prototype, Framer peut générer une URL qui peut être partagée avec vos clients. Ces URL partageables peuvent être ouvertes sur les appareils mobiles pour des aperçus en direct. Framer vous permet également de prototyper VR.

08. Vectr

Prix: Libérer

Vous pouvez concevoir vos prototypes sur les applications Web ou de bureau de Vectr pour Mac et Windows, ce qui est impressionnant étant donné que l'application est gratuite. Les prototypes restent synchronisés, que vous travailliez sur le bureau ou le navigateur Web, vous permettant de travailler dès que vous êtes prêt et vous garantissant d'avoir toujours accès aux dernières modifications.

Les prototypes Vectr peuvent être partagés avec une URL et intégrés dans des applications comme Slack pour une collaboration puissante. En prime, ceux avec qui vous partagez vos maquettes peuvent les annoter et les modifier.

Pour le moment, Vectr n'est pas aussi riche en fonctionnalités que de nombreuses autres options, mais cela ne devrait pas vous empêcher de vous familiariser avec lui. Une feuille de route pour l'application a été publiée, détaillant une liste impressionnante de fonctionnalités prévues. Ceux-ci incluent: des applications de bureau entièrement hors ligne, plus de plates-formes, un contrôle de version intégré, un marché des actifs de conception intégré, une édition collaborative complète, des effets d'image, des plugins, des maquettes cliquables, des outils de rétroaction et d'annotation intégrés et des applications de bureau hors ligne .

Lisez la suite pour 5 autres excellents outils de prototypage ...

• 1
• deux

Page actuelle: Page 1

Page suivante Page 2