Banani
Banani est le meilleur outil d'IA pour générer des maquettes UI haute fidélité d'applications mobiles et web.
Après avoir décrit l'écran désiré, il crée 3 options de design que vous pouvez visualiser et comparer côte à côte sur la toile.
Une fois les designs générés, vous pouvez :
Iterer votre option préférée avec des messages de suivi
Exporter les designs vers Figma ou modifier les détails de l'UI directement dans l'éditeur Banani
Il a une fonctionnalité que je n'ai pas vue dans d'autres applications de filaire AI – connexion à votre système de design !
Téléchargez votre kit UI Figma ou des captures d'écran du produit, et il utilisera vos composants et styles. Les filaires sont alignés avec les designs que j'ai créés moi-même.
Il dispose d'une grande bibliothèque de référence (similaire à Mobbin), pour trouver des écrans d'autres produits que vous aimez. L'IA utilisera des modèles ou des mises en page similaires.
Dans l'ensemble, il peut être utilisé à la fois par des designers professionnels pour rapidement proposer différentes idées de wireframes et par des personnes sans expérience en design.
Uizard
Uizard se positionne comme un éditeur UI simple pour non-designers, avec une IA en coulisse.
Lorsque vous démarrez le projet, il peut générer plusieurs écrans à partir d'une description textuelle de votre application ou site web.
Lors des tests, je lui ai demandé de concevoir une application de livraison de nourriture dans le style d'Airbnb, et il a généré un écran d'accueil avec une liste de restaurants et de catégories, un écran de filtres avec toutes les options de filtrage de base, une page de détails de plat et un processus de commande.
La structure et les mises en page étaient bonnes, l'éditeur a automatiquement rempli avec du contenu réaliste et a même créé un prototype cliquable avec des connexions entre les écrans.
Cependant, je n'étais pas satisfait de l'UI finale. Cela ressemblait à quelque chose qu'un jeune designer créerait, avec des ombres dures et "sales" et des rayons de bord étranges qui ruinent la perception des écrans et des accents. Souvent, il génère des éléments vraiment petits qui devraient être au moins 2 fois plus grands si vous voulez que les utilisateurs puissent interagir avec eux.
C'est assez bon pour illustrer votre idée pour des discussions internes, mais les wireframes nécessitent beaucoup de post-édition et parfois une refonte complète. L'UI finale ne ressemble pas à quelque chose que vous pouvez immédiatement transmettre pour le développement.
Framer
Bien que Framer se positionne comme un outil pour développer des sites Web, il peut aussi être utilisé comme un outil de design autonome. J'ai été impressionné par leur générateur de maquettes de sites web AI.
Pour ce faire, comme vous vous en doutez, vous devez rédiger une invitation textuelle sur l'apparence de la page, et préciser des détails sur l'entreprise ou le produit. Il générera une mise en page et quelques options de styles que vous pouvez essayer avant de passer à la création d'autres pages. En plus de la conception desktop, il crée automatiquement des versions tablette et téléphone, ce qui économise beaucoup de temps.
Les palettes de couleurs, les combinaisons de polices et les tailles sont vraiment bien et nécessitent souvent peu ou pas de post-édition. 90% du temps, vous devez seulement réécrire certaines parties du contenu pour les rendre plus personnelles et exprimer ce que vous voulez.
J'ai remarqué que l'équipe Framer a créé une bibliothèque des sections les plus courantes des landing pages, et elle essaie essentiellement de trouver la meilleure combinaison pour votre cas d'utilisation spécifique.
Ce que je n'aime pas, c'est que pour une raison quelconque l'IA de Framer n'utilise pas le style des pages précédemment créées lors de la conception de nouvelles, donc dans la plupart des cas, vous devrez déplacer ces styles vers les mises en page qu'elle créé. Mais dans l'ensemble, je peux le recommander quand vous avez un temps limité et que vous devez concevoir (ou même lancer) une page de destination.
Galileo AI
Avez-vous déjà voulu que GPT génère une UI au lieu de textes ? – Galileo AI est essentiellement cela. Décrivez l'écran dans un message et il générera 3 variantes de l'interface au format shots semblable à Dribbble. Dans l'ensemble, cela génère une UI assez propre !
Avec cette propreté viennent cependant des limitations. Il n’y a aucun moyen de changer la police à part quelques polices prédéfinies, les designs n'utilisent pas d'ombres. Tous les designs que j'ai essayé de faire étaient plus ou moins dans les mêmes esthétiques. Ils ressemblent donc souvent à des wireframes de moyenne fidélité, plutôt qu'à des maquettes haute fidélité.
D'un autre côté, vous pouvez exporter les variantes qui vous plaisent dans le fichier Figma et y faire la mise en forme.
Il peut générer des interfaces à la fois desktop et mobiles, mais pour les obtenir, vous devez créer un nouveau thread de messages. L'interface de chat est agréable, mais je préférerais de loin que les designs soient sur la toile, pour comparer plus rapidement les variantes. Pour l'instant, vous devez les ouvrir une par une.
Résumé
L'IA peut vous offrir un espace supplémentaire pour faire des choses importantes, comme la recherche utilisateur, que vous auriez pu reporter. Tous ces outils offrent une gamme d'options pour différentes étapes du flux de travail de design UI. Je vous encourage vivement à les essayer !
