Examen Uizard : peut-il vraiment générer une interface utilisateur utilisable ?

Icône de temps de lecture 10 minute. lis


Les lecteurs aident à prendre en charge MSpoweruser. Nous pouvons recevoir une commission si vous achetez via nos liens. Icône d'info-bulle

Lisez notre page de divulgation pour savoir comment vous pouvez aider MSPoweruser à soutenir l'équipe éditoriale Plus d'informations

Vous recherchez une revue Uizard fiable ? Vous venez de le trouver !

J'ai utilisé cette plate-forme pour transformer des croquis en conceptions d'interface utilisateur entièrement fonctionnelles. Il prend également en charge une fonctionnalité d'invite à la conception, et bien plus encore.

Si cela vous semble un peu complexe, j'ai également préparé un court tutoriel pour vous aider à démarrer, alors continuez à lire et découvrez si Uizard répond bien à vos besoins.

Qu’est-ce qu’Uizard ?

Magicien est un Plateforme basée sur l'IA qui vous permet de créer une interface utilisateur (UI) dessins aussi vite que possible. En guise de saisie, vous pouvez utiliser diverses options et modèles, ainsi que vos idées (formulées dans des invites).

Maintenant, laissez-moi vous expliquer tout cela pour vous montrer comment la plateforme fonctionne dans la pratique :

Fonctionnalités

Vous trouverez ci-dessous les principales fonctionnalités d'Uizard et mon expérience avec elles :

Options de création

Options de création d'Uizard

Lorsque vous démarrez avec Uizard, la première question est comment voulez-vous que l’IA prenne en charge votre conception ?

Vous pouvez emprunter quatre chemins :

  1. Projet vierge – commencez avec rien et ayez l’IA entièrement sous votre contrôle.
  2. auto-designer – remplissez quelques invites et obtenez une conception d’IA générée à 100 %.
  3. Capture d'écran – téléchargez une image et transformez-la en un design modifiable.
  4. Modèle – choisir un design déjà existant et le retravailler.

Quel que soit votre choix, la principale raison pour laquelle on choisirait Uizard au lieu de Miro, par exemple, ce sont les fonctionnalités d'IA. C'est pourquoi je me concentrerai également davantage sur ceux-ci.

Fait amusant: Uizard a débuté en 2018 et est devenu partie intégrante de Miro Labs en 2024.

A Projet vierge vous amènera directement à l'éditeur. Aucune configuration ni invite de l'IA. Dans la section suivante, je parlerai davantage de l'éditeur lui-même puisque c'est la destination quel que soit le chemin emprunté.

L' auto-designer l'expérience commence par fournir (jusqu'à 300 caractères) description de votre projet. Ici, il est important de ne pas être trop précis (donc la limite de caractères) puisque cette option fonctionne mieux lorsqu'elle dispose de liberté. Il existe des exemples rapides qui peuvent vous aider à vous y retrouver.

Une fois que vous avez terminé, vous devrez choisir entre les méthodes suivantes pour générer le design :

  • Capture d'écran
  • Prompt
  • URL
  • Trousse de marque

L' Capture d'écran est l'une des options dont vous disposez, en combinaison avec ou sans Autodesigner.

Avec Autodesigner, vous pouvez continuer avec l'invite textuelle, mais également fournir une URL pour votre projet. Si vous souhaitez un design répétitif et une reconnaissance de marque, vous pouvez opter pour Brand Kit.

Enfin, en commençant par un Modèle vous donne un avantage de tête et vous amène à l'éditeur.

Éditeur avancé

Éditeur avancé Uizard

Enfin, nous avons atteint le point qui compte vraiment : Éditeur Uizard. Même si cela peut sembler écrasant à première vue, c'est très convivial pour les débutants.

Quelle que soit l'approche que vous choisissez lors de la création de la conception initiale, il est probable que vous souhaitiez changer quelque chose. Ici le Discussion avec le concepteur automatique est sous le feu des projecteurs.

Après avoir eu trois boutons sur l’écran, j’ai demandé au bot d’en ajouter un de plus. Un instant plus tard, j'ai eu l'aperçu et j'ai pu remplacez-le directement sur l'interface de l'application. À quel point cela est cool?

Exemple d'éditeur avancé Uizard

Comme je l'ai noté plus tôt, l'accent est mis sur les fonctionnalités d'IA, mais je mentionnerai quand même quelques extras pratiques.

Ceux-ci incluent des modèles pour divers éléments (cartes, calendriers, boutons, etc.), des formes avec n'importe quelle icône que vous pouvez imaginer et divers styles de texte qui rendent la conception très facile.

Il y a un Galerie d'images que vous pouvez inclure dans vos créations. Uizard est intégré à Unsplash et Giphy afin que vous puissiez utiliser les ressources directement à partir de là. Bien entendu, vous pouvez également télécharger vos propres images.

Cependant, ce qui a retenu mon attention, c'est Génération d'images IA fonctionnalité. Vous pouvez choisir plusieurs styles, et voici comment cela s'est passé pour moi :

J'ai choisi de générer un logo adapté à l'application de maquette de livraison de nourriture que je conçois.

Exemple 2 de l'éditeur avancé Uizard

Les résultats étaient corrects et le fait de pouvoir continuer à générer et à placer des résultats sur la toile sans quitter l'environnement était génial.

Si vous recherchez un générateur d'images IA orienté logo, consultez mon Examen de l'IA du logo.

Icônes, boutons et formulaires sont également disponibles en quelques clics. Ils sont bien organisés dans la barre latérale gauche et obtenir les bons visuels est facile.

Pour recréer des perspectives similaires sur plusieurs conceptions, vous pouvez utiliser le Trousse de marque. Les couleurs, les polices et les modèles sont les éléments de base qui sont ensuite utilisés dans les projets.

Options magiques

Les options magiques sont le dernier et l'élément le plus précieux que l'on puisse trouver dans l'éditeur Uizard.

Outre quelques raccourcis bien placés pour les nouveaux projets, la génération d'images dans le chat et autres, une valeur supplémentaire y est offerte.

Le plus populaire est le Scanner filaire. Vous dessinez un croquis de ce à quoi il devrait ressembler, vous en téléchargez une photo et le modèle d'IA s'occupe du reste.

Après avoir sélectionné l'option appareil mobile, j'ai téléchargé la photo en scannant le code QR avec mon téléphone.

Exemple magique de l'éditeur avancé Uizard

Le meilleur, c'est que mon croquis n'est pas seulement devenu une image du design potentiel. Chaque élément existe séparément et est entièrement modifiable.

Bien sûr, ce n’est pas parfait, mais c’est un excellent point de départ, notamment pour les prototypes. Notez également que mon croquis est loin d’être un chef-d’œuvre et qu’il m’a fallu moins de 30 secondes pour le créer.

Pour ceux qui ne sont pas à l'aise avec l'écriture, il y a aussi un Assistant de texte. Vous pouvez créer instantanément des variantes de vos copies pour le CTA, les descriptions et tout autre élément textuel que vous envisagez d'utiliser.

Si tu veux offrir une belle présentation à propos de votre travail, vous souhaiterez peut-être également utiliser le Mode filaire. Il transforme tous les éléments en 'dessinée à la main' illustrations, supprimant toute distraction potentielle.

En parlant de présentations, quelque chose de très cool s'annonce !

Prototypes interactifs

Prototypes interactifs Uizard

Jusqu'à présent, vous avez constaté que vous pouvez créer sans effort divers designs et écrans, et même les présenter sous forme de wireframes dessinés à la main. Eh bien, et s’ils pouvaient être fonctionnels ?

C'est là qu'interviennent les prototypes interactifs !

Tous les éléments de votre conception se voient automatiquement attribuer une sorte de 'logique.' Lorsque vous cliquez sur le bouton Inscription, vous devez par exemple accéder à la page d'inscription. Le processus complet peut désormais être présenté sans codage.

Cela rend le brainstorming, l’idéation et le pitch beaucoup plus efficaces. Toi (couplé à avec l'aide de l'IA) peut transformer des idées et des croquis en un design.

Plus tard, vous apportez les corrections nécessaires, ajustez en conséquence, et tout à coup vous avez un prototype pour votre prochain grand produit !

Vous pouvez afficher tous les écrans à la fois dans le Aperçu option. L'option Aperçu par défaut permet l'interactivité que je suis si heureux de vous montrer. Continuez à lire pendant que je parcours le processus complet dans la section tutoriel de cette revue !

Gabarits

Modèles pratiques Uizard

Si vous souhaitez passer encore plus rapidement de l'idée à la présentation interactive, vous pouvez utiliser Modèles Uizard.

Il y a un (presque sans fin) liste de modèles divisés par l'appareil auquel ils sont destinés (ordinateur de bureau, mobile et tablette.)

Vous pouvez utiliser la fonction de recherche pour trouver diverses solutions prédéfinies pour votre prochain projet. Tous ces éléments sont entièrement modifiable, comme tout le reste jusqu'à présent.

Si vous souhaitez encore plus de personnalisation, vous pouvez créez vos propres modèles.

Il existe plusieurs modèles gratuits que vous pouvez utiliser, mais la majorité sont payants. Bien que vous puissiez les acheter séparément, la meilleure solution consiste à souscrire au forfait Pro. Plus d’informations sur les prix dans un instant.

Options de collaboration et d'exportation

Options de collaboration Uizard

Tu serais heureux de te connaître peut partager n'importe quel projet que vous créez avec des collaborateurs. Il existe deux ensembles d'autorisations : Créateur ou spectateur.

Les créateurs peuvent participer à la collaboration en temps réel, tandis que les spectateurs peuvent simplement voir sans pouvoir modifier.

Si vous devez exporter un projet (ne pas l'utiliser de manière interactive), vous avez plusieurs options.

Vous pouvez obtenir images dans différentes résolutions (ennuyeux pour les développeurs) ou exporter le code (idéal pour les développeurs.) Uizard prend actuellement en charge Réagir et CSS comme langages pour le code.

Cependant, chaque fois que vous en avez l'occasion, vous devriez effectivement utiliser le Prototypes interactifs option comme la meilleure façon de présenter votre travail. Lisez la section ci-dessous pour découvrir comment !

Comment utiliser Uizard

Si vous débutez dans l'utilisation de l'IA pour la conception d'interface utilisateur, je suis là pour vous aider. Suivez le guide ci-dessous pour commencer en un rien de temps !

  1. Se diriger vers Magicien et appuyez sur la Inscription .
    Inscription au tutoriel Uizard
  2. Remplissez les détails nécessaires et appuyez sur le bouton Créer un compte .
    Vous pouvez également utiliser un compte Google ou Microsoft pour vous inscrire.
    Inscription au tutoriel Uizard
  3. Acceptez les conditions et terminez le court métrage Processus d'embarquement.
    Intégration du didacticiel Uizard
  4. Sélectionnez le Générer avec Autodesigner option.
    Option de conception automatique du didacticiel Uizard
  5. Choisissez le dispositif, Le type votre invite, et frapper Continuer.
    L'invite doit être simple, claire et contenir moins de 300 caractères.
    Appareil et invite du didacticiel Uizard
  6. Sélectionnez le méthode de saisie de style.
    Je vais y aller avec Prompt.
    Invite de méthode de saisie du didacticiel Uizard
  7. Maintenant, choisissez parmi Options disponibles, et frappez le Générer mon projet .
    J'ai utilisé des exemples disponibles à partir du bouton Essayer des exemples.
    Invite de saisie de style didacticiel Uizard
  8. (Optionnel) Effectuez n'importe quel les changements que vous jugez appropriés à la conception générée.
  9. (Optionnel) Pour utiliser l'une des fonctionnalités de Magic, sélectionnez la magie dans la barre latérale gauche et la bonne option pour vos projets.
    Options magiques du didacticiel Uizard
    Les scanners de capture d'écran et de wireframe sont également cachés ici !
  10. Frappe le Aperçu bouton pour voir le prototype interactif de votre conception !
    Bouton d'aperçu du didacticiel Uizard

Jetez un coup d'œil au Page d'aperçu de TripPlanr pour voir à quoi ressemble ma sortie. Ce n'est peut-être pas juste de l'appeler le mien, puisque je n'ai apporté aucune modification, mais le point ici n'est pas le contenu, mais l'interactivité de la présentation.

Remarque : Encore une fois, tous les éléments sont modifiables, tout comme les relations entre eux. Pour créer des résultats significatifs qui méritent d'être présentés, vous devrez passer du temps à les ajuster à vos besoins.

Prix

Tarification Uizard

Uizard est une plateforme par abonnement avec quatre forfaits différents :

  • Gratuit (0 $)
  • Pro (à partir de 19 $/utilisateur/mois)*
  • Entreprise (à partir de 39 $/utilisateur/mois)**
  • Entreprise (tarification personnalisée)

*Vous pouvez économiser 40 % si vous choisissez d'être facturé annuellement pour le forfait Pro.
**Le plan Business est uniquement disponible pour une facturation annuelle.

L' Plan gratuit offre juste assez de liberté pour tester toutes les fonctionnalités disponibles. Avec cela, vous pouvez avoir jusqu'à 3 générations d'IA par mois. Vous pouvez avoir jusqu'à 2 projets publics et utilise 10 modèles gratuits. Pour les tâches d'IA, vous pourrez utiliser uniquement le modèle Autodesigner 1.5.

Une fois que vous avez fini d'expérimenter et de tester, il est temps de vous abonner au Plan pro. Avec lui, vous pouvez avoir jusqu'à 500 générations d'IA/mois avec accès au dernier modèle Autodesigner 2.0.

Vous pourrez également exporter des conceptions sous forme de code React ou CSS et avoir jusqu'à 100 projets (avec une option pour les garder privés.) Les abonnés Pro ont accès à tous les modèles.

L' Le business plan vous offre tous les avantages du plan Pro, avec quelques mises à niveau. Pour commencer, vous pouvez avoir 10 fois plus de générations d'IA (5,000) par mois. Les générations seront également plus rapides.

Un kit de marque personnalisé est disponible pour une meilleure reconnaissance de la marque de vos projets. Vous obtiendrez également un accompagnement prioritaire et des projets illimités sur votre compte.

Si vous avez besoin d'encore plus, je vous suggère de contacter l'équipe commerciale d'Uizard et de parler du Plan d'entreprise.

Il y a un Fenêtre de remboursement de 14 jours. Tout ce que vous avez à faire est de contacter le support Uizard par e-mail pour le faire, conformément aux conditions d'utilisation d'Uizard.

Pas d'essai gratuit pour les forfaits payants est disponible, ce qui est raisonnable compte tenu d’une option gratuite assez généreuse.

Examen Uizard – Verdict

D'une manière générale, Uizard peut en effet générer une interface utilisateur utilisable. C'est bien sûr si vous recherchez des designs minimalistes et simplistes (ce que fait de toute façon la majorité de nos jours.) Si votre projet est complexe, vous pouvez toujours utiliser Uizard comme aide secondaire, mais je ne le recommanderais pas comme outil principal.

Je conclurai mon examen d'Uizard en soulignant qu'il permet de passer de l'idée à la présentation en un éclair.

Attention cependant ! Ne licenciez pas encore vos concepteurs UI/UX. Si vous souhaitez proposer des solutions significatives, vous aurez besoin d’une vaste expertise humaine qu’aucun outil d’IA ne possède (encore.)

Forum des utilisateurs

Messages 0