Banani
Banani ist die beste KI, um hochwertige UI-Mockups für mobile und Web-Apps zu erstellen.
Nach der Beschreibung des gewünschten Bildschirms erstellt es 3 Designoptionen. Sie können diese nebeneinander auf der Leinwand ansehen und vergleichen.
Sobald die Designs erstellt sind, können Sie:
Ihre bevorzugte Option mit weiterführenden Textnachrichten iterieren
Designs nach Figma exportieren oder UI-Details direkt im Banani-Editor ändern
Es hat ein Feature, das ich bei anderen KI-Drahtgitter-Apps noch nicht gesehen habe – die Verbindung zu Ihrem Designsystewm!
Laden Sie Ihr Figma-UI-Kit oder Screenshots des Produkts hoch, und es wird Ihre Komponenten und Stile verwenden. Drahtgitter sehen im Einklang mit Layouts aus, die ich selbst erstellt habe.
Es hat eine große Referenzbibliothek (ähnlich wie Mobbin), um Bildschirme anderer Produkte zu finden, die Ihnen gefallen. Die KI verwendet ähnliche Muster oder Layouts.
Insgesamt kann es sowohl von professionellen Designern genutzt werden, um schnell verschiedene Drahtgitterideen zu entwickeln, als auch von Personen ohne Designerfahrung.
Uizard
Uizard positioniert sich als einfacher UI-Editor für Nichtdesigner mit KI im Hintergrund.
Wenn Sie das Projekt starten, kann es mehrere Bildschirme aus einer Textbeschreibung Ihrer App oder Website generieren.
Während des Tests habe ich es gebeten, eine Essenslieferungs-App im Stil von Airbnb zu gestalten, und es hat einen Startbildschirm mit einer Liste von Restaurants und Kategorien, einen Filterbildschirm mit allen grundlegenden Filteroptionen, eine Gerichtedetailseite und eine Kasse generiert.
Die Struktur und Layouts waren schön, der Editor hat sie automatisch mit realistischem Inhalt gefüllt und sogar einen klickbaren Prototyp mit Verbindungen zwischen den Bildschirmen erstellt.
Allerdings war ich mit der finalen UI nicht zufrieden. Es sah aus wie etwas, das ein Junior-Designer erstellen würde. Von harten und "dreckigen" Schatten bis hin zu seltsamen Randradien, die die Wahrnehmung der Bildschirme und Akzente stören. Oft generiert es wirklich kleine Elemente, die mindestens doppelt so groß sein sollten, wenn Sie möchten, dass Benutzer damit interagieren.
Es ist ziemlich gut, um Ihre Idee für interne Diskussionen zu veranschaulichen, aber Drahtgitter erfordern viel Nachbearbeitung und in einigen Fällen eine komplette Überarbeitung. Die finale UI sieht nicht wie etwas aus, das Sie direkt zur Entwicklung übergeben können.
Framer
Obwohl sich Framer als Werkzeug zur Entwicklung von Websites positioniert, kann es als eigenständiges Designwerkzeug verwendet werden. Ich war ziemlich beeindruckt von ihrem AI-Website-Mockup-Generator.
Um dies zu tun, müssen Sie, wie Sie vielleicht erwarten, eine Textaufforderung dazu verfassen, wie die Seite aussehen soll, und Details zum Unternehmen oder Produkt angeben. Es wird ein Layout und einige Stiloptionen generieren, die Sie ausprobieren können, bevor Sie andere Seiten erstellen. Zusätzlich zum Desktop-Design erstellt es automatisch Tablet- und Telefonversionen davon, was viel Zeit spart.
Farbschemata, Schriftkombinationen und -größen sehen wirklich gut aus und erfordern oft wenig bis keine Nachbearbeitung. 90% der Zeit müssen Sie nur einige Teile des Inhalts umschreiben, um es persönlicher zu machen und zu kommunizieren, was Sie möchten.
Mir ist aufgefallen, dass das Framer-Team eine Bibliothek der häufigsten Abschnitte von Landing Pages erstellt hat, und es versucht im Grunde genommen die beste Kombination für Ihren spezifischen Anwendungsfall zu finden.
Was mir nicht gefällt, ist, dass Framer AI aus irgendeinem Grund nicht den Stil vorheriger Seiten benutzt, wenn es neue entwirft, sodass Sie in den meisten Fällen diese Stile in die von ihm erstellten Layouts übernehmen müssen. Aber insgesamt kann ich es empfehlen, wenn Sie wenig Zeit haben und eine Landing Page gestalten (oder sogar starten) müssen.
Galileo AI
Haben Sie sich jemals gewünscht, dass GPT eine UI anstelle von Texten generiert? – Galileo AI ist im Grunde genommen genau das. Beschreiben Sie den Bildschirm in einer Nachricht und es wird 3 Varianten der Benutzeroberfläche im dribbble-ähnlichen Shots-Format erstellen. Insgesamt generiert es eine ziemlich saubere UI!
Mit dieser Sauberkeit kommen jedoch Einschränkungen. Es gibt keine Möglichkeit, die Schriftart zu ändern, außer aus einigen vordefinierten Schriftarten, und Designs verwenden keine Schatten. Alle Designs, die ich versucht habe zu erstellen, waren mehr oder weniger im gleichen ästhetischen Stil. Sie sehen daher oft eher wie mittel-fidele Drahtgitter aus und nicht wie hochfidele Mockups.
Andererseits können Sie die Kopievarianten, die Ihnen gefallen, in die Figma-Datei exportieren und dort die stilistischen Anpassungen vornehmen.
Es kann sowohl Desktop- als auch mobile Oberflächen generieren, aber um sie zu erhalten, müssen Sie einen neuen Nachrichtenthread erstellen. Die Chat-Oberfläche ist nett, aber ich würde es bevorzugen, wenn die Designs auf einer Leinwand wären, um die Varianten schneller zu vergleichen. Derzeit müssen Sie sie einzeln öffnen.
Zusammenfassung
KI kann Ihnen zusätzlichen Raum für wichtige Dinge geben, wie Benutzerforschung, die Sie vielleicht vorher verschoben haben. All diese Tools bieten eine Reihe von Optionen für verschiedene Phasen des UI-Design-Workflows. Ich ermutige Sie nachdrücklich, sie auszuprobieren!
