Accentsconagua
Share
Jetons un coup d'œil à certains outils de prototypage disponibles aujourd'hui pour les concepteurs Web, sans ordre particulier:
Déduire les idées destinées aux parties prenantes et aux clients peut sembler simple au début, mais lorsque les choses se compliquent, nous avons besoin d'outils pour accélérer le processus de retour d'informations. Le web devient de plus en plus compliqué pour les concepteurs front-end, avec des requêtes toujours plus interactives. Des actions telles que glisser et glisser ne sont que la partie visible de l'iceberg. Le véritable art du prototypage est de comprendre comment tout le puzzle s'emboîte..
Par définition, un «prototype» est un échantillon préliminaire conçu pour tester des concepts spécifiques. Un prototype est utilisé pour évaluer et améliorer un système afin de mieux comprendre le projet dans son ensemble. Nous travaillons tous quotidiennement sur des projets et certains sont beaucoup plus complexes que d'autres, mais quand est-il temps d'appeler à un outil d'aide pour aider à la chaîne alimentaire de rétroaction?
Certains diront que le code est beaucoup plus rapide au début, mais il y a des moments où il est préférable de passer du temps à utiliser un prototype plutôt que de passer du temps à concevoir quelque chose qui risque de tomber rapidement à l'eau. Le prototypage invite à des commentaires sur l'interaction et le placement. Il s'agit d'une structure filaire interactive qui permet aux clients de mieux comprendre comment le projet s'intègre pour leurs utilisateurs..
D'autres fois, le prototypage avant le codage peut être bénéfique pour le projet en identifiant tous les cas extrêmes qui auraient pu être manqués..
Lorsque nous nous demandons où cela s’inscrit dans le paysage actuel, nous pouvons certainement attribuer la demande sans cesse croissante du travail cinématographique. Les interfaces deviennent des organismes vivants avec un contenu interactif. Des interactions simples peuvent être coupées pour expliquer verbalement, mais dans d'autres contextes, il est utile de comprendre comment une interaction peut être déclenchée. De plus en plus de clients exigent de voir la preuve des concepts avant de signer. Plus que jamais, il est important de savoir où se tourner quand le besoin de prototype devrait apparaître.
Avec autant d'outils disponibles sur le marché, lequel devriez-vous utiliser? Nous allons jeter un coup d'oeil.
EncadreurFramer associe la familiarité du montage visuel à la flexibilité du code, offrant un flux de travail transparent, complété par la prévisualisation du périphérique, le contrôle de version et le partage simpliste. Une application qui permet de créer de nouveaux modèles d'interaction afin de créer des applications révolutionnaires. Extrayez les données de votre API préférée, capturez les entrées des utilisateurs réels à tester et travaillez avec les utilisateurs réels et leurs commentaires. Importez des graphiques directement depuis Sketch, Photoshop ou Figma.
Bien que Framer puisse sembler être utilisé strictement pour les applications mobiles, il peut également être exploité pour des projets autres que des applications, ou utilisé en tant que bibliothèque autonome. Lorsque vous utilisez la bibliothèque Framer JS seule, vous évitez complètement l'EDI. Il s’agit essentiellement d’un framework JavaScript open source pour le prototypage rapide. Définissez des animations et des interactions avec filtres, physique du printemps, effets 3D et plus encore. Bien que CoffeeScript ne soit pas requis, les documents utilisent CoffeeScript ainsi que l’IDE.
Il faut savoir que Framer n'est pas destiné à être utilisé pour créer des animations prêtes pour la production..
@UXDesignDad @framer Salut André! Framer est un outil de prototypage pour Mac. Donc, pas d'applications de production 😁
- Krijn Rijshouwer (@krijnrijshouwer) 2 février 2017
Parce que Framer a son propre concept de couches et est assez lourd en termes de code, vous ne pouvez pas l'utiliser dans des choses DOM simples (existantes) comme vous le feriez avec GreenSock. En fait, il place sa propre toile dans le DOM et toutes les animations sont exécutées à l'intérieur de cette toile..
Adobe XDDessinez, réutilisez et remixez des illustrations vectorielles et raster pour créer des structures filaires, des dispositions d'écran, des prototypes interactifs et des éléments prêts à la production, le tout à partir de la même application. Utilisez des outils puissants tels que Repeat Grid spécialement conçu pour XD, ainsi que des outils de calque, de symboles et de crayon pour la conception UX. Ajoutez des interactions en utilisant diverses animations pour créer des transitions entre les tableaux d’art afin de simuler le flux de votre application / site Web..
Les clients peuvent commenter directement vos prototypes lorsque vous les partagez directement et visualiser les conceptions en temps réel sur des appareils réels. Les dessins peuvent être ajustés et mis à jour automatiquement sur toutes les plateformes. Basculez facilement entre le wireframing, le design visuel, le design d'interaction, le prototypage, la prévisualisation et le partage, le tout en un seul outil puissant.
Bien que XD soit toujours un produit bêta, il reste à voir s’il restera stable dans un avenir proche. Vous pouvez en savoir plus sur les fonctionnalités publiées ici pour rester informé des modifications et améliorations à venir. Nous avons même publié une série de 15 articles contenant tous les outils essentiels dont vous aurez besoin pour commencer à concevoir et à créer des prototypes avec Adobe XD:
Adobe After EffectsAfter Effects n'est pas spécifiquement un outil de prototypage pour les sites Web et les applications (bien que vous puissiez toujours vous en tirer), mais il aide le mouvement de prototype pour ceux qui recherchent un moyen de compiler ou de créer des animations pour les clients. Créez des graphiques animés pour la vidéo ou créez des effets d'animation pour le Web. Voici un excellent article sur Tuts + de Charles Yeager:
Consultez également cette série de dix articles sur Tuts + intitulée Bienvenue dans After Effects..
Adobe Animate CCAdobe Animate est une évolution de Flash Professional. C'est un outil qui inclut des fonctionnalités telles que des lignes de temps, des images clés, de nombreuses options d'exportation, la prise en charge de bibliothèques JavaScript tierces, des ajustements de la position de l'appareil photo et bien plus encore. Bien que le programme soit davantage destiné aux animateurs, il ne faut pas croire que vous ne pouvez pas l’utiliser pour d’autres besoins. N'oubliez pas que les outils font tout ce que vous désirez et ne sont limités que par votre imagination. Utilisez-le pour les wireframes de sites Web, les tests d'animation pour les applications, etc. Vous pouvez lire sur le fonctionnement interne d’Adobe Animate dans cet article de votre chef:
Prototype d'artisanatConstruisez des prototypes hi-fi avec vos vrais fichiers de conception. Craft fait partie de la famille Invision. une entreprise qui acquiert de nombreux outils (tels que Macaw et Easee) à partir d'entités extérieures.
Craft Prototype est un ensemble d'outils puissant qui vous permet de concevoir avec des données réelles en créant des guides de style en un clic. Avec prototype, vous pouvez faire le travail correctement à partir de Sketch; tout dans un espace. Avec la mise en miroir en temps réel sur votre téléphone, vous pouvez tester les prototypes de conception immédiatement. Lorsque vous êtes prêt à partager, vous pouvez publier votre travail directement sur Invision pour obtenir un retour instantané des clients et des parties prenantes. Il vous permet même de prototyper avec une plus grande fidélité avec le mouvement, vous donnant ainsi une chronologie pour ajuster visuellement en utilisant des images clés. Générez du code HTML et CSS, du code swift natif et de la documentation pour votre développeur. Regardez cette courte vidéo expliquant Craft 2.0 Preview - Prototype in Sketch on Vimeo.
PrincipePrinciple facilite la conception d'interfaces utilisateur animées et interactives. Que vous conceviez le flux d'une application multi-écrans, ou de nouvelles interactions et animations, Principle vous permet de créer des designs qui ont une apparence et une sensation étonnantes. L’application ressemble beaucoup à l’interface utilisateur de Sketch, qui comprend d’autres aspects familiers de l’alignement, de la création de tableaux artistiques et de connexions d’écran, ainsi que des aperçus en temps réel. Cliquez sur les calques d'animation pour plonger plus profondément dans les images clés et ajuster les courbes d'accélération personnalisées comme vous le feriez dans d'autres outils d'animation. Principle vous donne la liberté d’expérimenter sans vous limiter à des transitions prédéfinies. Vous pouvez également importer des planches d’art de Sketch..
L'application Principle Mirror pour iOS permet aux autres utilisateurs d'afficher vos conceptions sur leur appareil. Lors de la conception, vous pouvez interagir instantanément en connectant votre appareil à l'ordinateur ou en exportant une application Mac autonome pour que d'autres le voient..
AtomiqueAtomic est une application Web qui s’intègre à Sketch, vous permettant d’importer des conceptions à partir de là ou de n’importe où de votre choix. Intégrer des dessins dans Atomic est simple. utilisez le puissant plugin Sketch ou ajoutez des éléments de votre outil de création préféré.
Atomic intègre des outils de dessin et de mise en page permettant de concevoir à partir de rien ou de développer des conceptions importées. Liez rapidement vos conceptions en utilisant une gamme de gestes et de transitions pour mobile ou ordinateur de bureau. Utilisez du CSS personnalisé pour appliquer des styles supplémentaires et exportez également votre CSS pour le partager avec d'autres développeurs. En savoir plus sur les fonctionnalités d'Atomic sur leur site web.
ProtoCréez des animations sophistiquées pour n'importe quel modèle de conception d'interaction avec la timeline facile à utiliser avec Proto. L'application est livrée avec un ensemble complet de bibliothèques d'interface utilisateur telles que iOS9, Material Design, Windows 10 et plus. Les dessins peuvent être importés à l'aide du plug-in Sketch ou Photoshop. les importer en couches et synchronisé avec Dropbox. Exportez directement les ressources de l'interface utilisateur. Prévisualisez les prototypes dans le navigateur ou les appareils à l'aide de l'application proto pour IOS ou Android. Partagez avec les clients ou les membres de l'équipe pour collaborer et générer des commentaires. Proto s'intègre aux principaux outils de test des utilisateurs pour obtenir des commentaires et des informations puissants.
En savoir plus sur ses fonctionnalités sur le site Web de Proto.
JustinMindJustinMind est un produit basé sur une application qui permet de transformer de simples maquettes en prototypes interactifs pour iOS et Android et de créer des structures filaires Web et mobiles. Tirez parti des bibliothèques d'interface utilisateur prédéfinies, intégrez du HTML et des documents dans tout ce que vous voulez. Les comptes payants permettent à plusieurs utilisateurs d'interagir simultanément avec le même prototype, ce qui permet d'obtenir des retours sans effort. Il possède même une vaste bibliothèque de widgets préexistants adaptés au modèle de périphérique sélectionné pour votre projet. Des éléments tels que des boutons interactifs, des cases à cocher, des listes et même des dispositions de parallaxe sont à votre disposition..
Si vous débutez avec cet outil, il contient de super tutoriels et des vidéos guidées pour tous, du débutant à l'expert. Bien qu'il offre un plan gratuit pour les capacités de partage de navigateur, vous devez passer à un compte payant pour une collaboration entre les membres de votre équipe. Avec JustinMind Prototyper, vous pouvez importer des images de tout outil de conception ou directement de votre navigateur Web et les transformer en prototypes Web captivants et attrayants avec l’outil «hotspot d’image». Exportez votre prototype vers un document HTML entièrement fonctionnel et rendez-le facilement accessible à tout navigateur Web..
Origami est construit et utilisé par les concepteurs de Facebook et a été utilisé pour créer des applications telles que Instagram, Messenger et Paper. Copiez n'importe quoi dans Sketch et collez des calques natifs dans Origami Studio. Ajustez rapidement, ajoutez un comportement et animez une propriété de calque sans revenir en arrière. L'outil offre aux concepteurs un éventail de gestes et d'animations de transition communs aux modèles d'interface utilisateur..
Origami offre des fonctionnalités utiles pour le prototypage interactif ainsi que des plugins pour Sketch et Photoshop, ainsi qu'une bibliothèque de documentation complète avec forums..
Il existe une fonctionnalité «Exporter vers le code» qui vous permet de convertir votre conception visuelle en exemples de code écrits pour iOS, Android ou Web. Vous ne pouvez pas partager directement des prototypes avec des utilisateurs opérant sur des périphériques autres que le vôtre, mais vous pouvez prévisualiser vos prototypes avec Origami Live, disponible pour Android et iOS. Consultez les didacticiels pour plus d'informations sur le site Web Origami.
FlintoFlinto pour Mac est un outil basé sur une application qui vous permet de créer de tout, des simples prototypes à insertion directe aux prototypes complets avec interactions. Il n'y a pas de programmation ou de calendrier; c'est un outil de prototypage pour les concepteurs. Placez les objets et les composants où vous le souhaitez. Les transitions peuvent être simples ou complexes, et les transitions sont réutilisables. Vous avez un contrôle précis sur chaque couche, y compris l’atténuation du printemps ou de la réduction de Bézier cubique.
Utilisez le «concepteur de comportement» pour créer des micro-interactions qui existent dans un seul écran. C'est parfait pour des choses comme les effets de boutons, les commutateurs à bascule, les animations en boucle et les animations basées sur le défilement.
L'ajout de zones de défilement sur vos écrans est également facile. sélectionnez des calques et cliquez sur le bouton «Groupe de défilement». Vous pouvez modifier diverses options, créer des groupes de défilement de pagination, imbriquer des groupes de défilement et même créer des animations à base de défilement..
Toutes les modifications que vous apportez dans Flinto pour Mac peuvent être testées immédiatement dans la fenêtre d'aperçu ou sur votre iPhone ou iPad connecté au WiFi via l'application gratuite iOS Viewer..
L'application de lecteur iOS de Flinto est gratuite dans l'App Store et peut être téléchargée par quiconque. Vous pouvez donc envoyer vos fichiers Flinto à ceux avec qui vous souhaitez partager des informations..
WebflowWebflow est une autre application Web s'exécutant directement dans les dernières versions de Chrome et Safari. Cela signifie qu'il est actuellement optimisé dans ces navigateurs, mais le code produit prend en charge plusieurs navigateurs..
«Construisez des sites Web dynamiques et réactifs sans écrire de code. Lancez-vous en un clic et profitez de l'hébergement sur le Web le plus rapide et le plus fiable. Exportez du code propre et sémantique à transmettre aux développeurs. ”
Webflow est fortement axé sur les animations Web, les interactions et la conception Web réactive. Interactions 2.0 arrive bientôt et offrira plus de contrôle sur les animations et les interactions entre les points de rupture (souvent un concept exprimé avec douleur par les concepteurs) et, bien sûr, sur la facilité de création visuelle par rapport à un proxy de code..
Pour vous donner un aperçu des possibilités de Webflow, consultez cette démonstration en direct qui peut également être visualisée dans Webflow ou consultez le code produit dans cette démonstration de CodePen. Il est également avantageux de goûter à l'interface utilisateur dans cette vidéo..
La qualité du code produit est sémantique, lisible et facile à utiliser si vous exportez et utilisez-le en externe ou si vous le transmettez à un développeur. Voici quelques démos présentant le code produit..
Actuellement, Interactions V1 est disponible et Interactions 2.0 inclura davantage de personnalisations avec des animations de type parallaxe et une interactivité intégrée de manière visuelle. animations basées sur la position du curseur / live-scroll. Webflow espère lancer la version bêta très bientôt, Interactions 2.0 constituera donc une partie importante de l'interface et une raison importante pour l'utilisation de Webflow par de nombreux concepteurs et développeurs..
Merci à Waldo Broodryk de Webflow qui a pris le temps de répondre à beaucoup de mes questions et de partager ses démos et connaissances.
L'éditeur basé sur navigateur de Marvel vous permet de relier toutes vos conceptions, d'ajouter des gestes et des transitions pour que votre prototype se sente comme une véritable application ou un site Web. Créez des prototypes pour iPhone, iPad, ordinateur de bureau, Apple TV, Apple Watch et Android.
Marvel propose des fonctionnalités telles que la collaboration, les commentaires, ainsi que la conception dans votre navigateur avec «Canvas». Vous pouvez également ajouter des images à l'aide de Photoshop, Sketch ou un stylo et du papier. Les utilisateurs peuvent cliquer et faire glisser pour créer des points chauds interactifs sur les conceptions qui réagissent lorsqu'ils sont cliqués ou touchés. Marvel est livré avec d'autres fonctionnalités intéressantes comme un plugin Sketch et même un outil iOS. L'application iOS inclut maintenant Canvas (mentionné précédemment), l'outil de conception rapide de Marvel qui vous permet de créer des maquettes d'applications à partir de rien. Cette application comprend également Iconfinder et Unsplash, qui vous fournissent une base de données épique de plus d'un million de photos et d'icônes à intégrer à vos conceptions..
Marvel propose également des fonctionnalités telles que les rôles des utilisateurs, l'organisation du projet à l'aide de dossiers, la synchronisation des conceptions de Google Drive, des options d'intégration vidéo et audio de YouTube, Spotify, Vimeo et SoundCloud..
Placeit: générateur de maquettePlaceit est un générateur de maquette; un outil en ligne qui vous permet d'intégrer vos propres conceptions (conceptions d'interface utilisateur, logos, autres éléments de marque) dans des environnements de présentation. Par exemple, vous pouvez créer une application que vous souhaitez placer dans un iPhone sur une table basse ou superposer votre logo sur la chemise d'un modèle..
Peut-être aimeriez-vous même que vos dessins soient intégrés à des vidéos comme celle-ci:
Interface utilisateur intégrée à Placeit - vidéo de stockAvec près de 3 000 modèles en attente, Placeit répondra à toutes vos attentes.
Peu importe l'outil que vous décidez d'utiliser, choisissez celui qui vous convient le mieux et celui avec lequel vous vous sentez le plus à l'aise. Laissez un commentaire ci-dessous si vous avez déjà utilisé l'un des outils mentionnés pour aider les autres utilisateurs à décider quel outil utiliser. J'espère que cet article vous aidera à mieux comprendre et à prendre une décision éclairée au moment de choisir.
Un merci tout particulier à ces personnes pour leur contribution, le partage de leurs connaissances et leurs opinions au cours de mes recherches:
