Topics

Hallo! Ich bin Hasshi, UI-Designer bei Liberogic Inc.

Meine aktuelle Sorge besteht darin, dass ich bei der Erstellung einer neuen LP (Landingpage) für meinen Barrierefreiheitsdienst keine großen Fortschritte mache.

Zum Glück ist der CEO, der für die Gestaltung unserer Firmenwebsite zuständig ist, mit anderen Dingen sehr beschäftigt. Aber so kommen wir nicht weiter …

„Okay, lasst uns hier zumindest einen Rohentwurf erstellen, um dem Präsidenten die Überprüfung etwas zu erleichtern!“

Alles begann mit dieser Idee,Schnelle LP-Produktion mithilfe von KI (Gemini) und Design-Automatisierungstool (FigmaMake)Dieses Mal werde ich den gesamten Prozess und meine ehrlichen Gedanken aus der Sicht eines Designers mit Ihnen teilen!

Unser Ziel dieses Mal: ​​den Präsidenten dazu zu bringen, einige „rote Kommentare“ zum Entwurf abzugeben!

Es ist unmöglich, von Anfang an etwas Perfektes zu machen! Doch! Zunächst einmal ist es wichtig, etwas zu präsentieren, das der Präsident leicht kommentieren kann, das ist sicher!

Der komplette Prozess zum Erstellen einer superschnellen LP (sogar noch schneller, wenn Sie sich erst einmal daran gewöhnt haben!)

Hier ist die tatsächliche Zeiteinteilung für den Produktionsablauf, den wir dieses Mal ausprobiert haben: Der Teil, der am meisten Zeit in Anspruch nahm, war der „Wiederholungs“-Teil, bei dem es darum ging, die Genauigkeit des Designs zu verbessern.

1. 【analysieren】Gemini-sensei, was halten Sie von dieser LP?(15 Punkte)
2. [Textgenerierung]Lassen Sie den Landingpage-Text inklusive der Verbesserungen von Gemini erstellen(15 Punkte)
3. [Eingabeaufforderung erstellen]Lassen Sie Gemini den „Zauberspruch“ wirken, den Sie auf FigmaMake wirken möchten(5 Punkte)
4. [Designgenerierung]FigmaMake, ich habe es zuerst bestellt!(5 Punkte)
5. [Wiederholungsschleife]Verbesserung der Genauigkeit durch einen Zyklus aus Analyse und Generierung(1,5 Stunden)
6. Figma-isierungImportieren Sie mit dem Plugin „Html to Design“ in Figma(5 Punkte)
7. Figma-KorrekturenLetzte Anpassungen bei Layoutproblemen(30 Minuten)

Schauen wir uns nun jeden Schritt genauer an!

SCHRITT 1: [Analyse] Gemini-sensei, was halten Sie von dieser LP? (15 Minuten)

Zunächst lassen wir Gemini unsere vorhandenen Seiten zur Barrierefreiheit lesen und holen ehrliches Feedback ein.

[Beispiel einer Eingabeaufforderung für Zwillinge]

Bitte analysieren Sie die Zielseite zur Webzugänglichkeit unter der folgenden URL und listen Sie die Vor- und Nachteile auf.

Die Analyseergebnisse lagen innerhalb weniger Sekunden vor: „Es gibt keine Fallstudien oder Kundenreferenzen, daher ist es schwer, sich die konkreten Vorteile der Implementierung des Dienstes vorzustellen … Wow, das ist so treffend, dass es wirklich wehtut! Aber das hätte ich selbst nicht sagen können, also danke, Gemini!“ Sie konnten die Probleme, die ich vage geahnt hatte, präzise in Worte fassen.

Nun, zunächst einmal sollten wir die aktuelle Situation verstehen. Ich habe diese Seite erstellt, aber trotzdem werde ich Gemini-sensei bitten, mich auf alles hinzuweisen, was mir selbst nicht auffällt!

SCHRITT 2: [Textgenerierung] Lassen Sie Gemini LP-Text inklusive Verbesserungen erstellen (15 Minuten)

Wir kopieren und fügen die Analyseergebnisse aus SCHRITT 1 ein und bitten Sie, einen Text mit Verbesserungsvorschlägen zu verfassen.

[Beispiel einer Eingabeaufforderung für Zwillinge]

Erstellen Sie basierend auf den Ergebnissen der obigen Analyse einen Textstrukturvorschlag für die Landingpage zur Barrierefreiheit im Internet. (Ausgelassen) Bitte kennzeichnen Sie alle neu hinzugefügten Elemente deutlich als [Beispieltext].

Wenn Sie einen konkreten Text wie „Beispiel einer Kundenreferenz: XXXX Co., Ltd.: Die Anfragen über die Website haben sich um das 1,5-fache erhöht!“ einfügen, wird Ihre Seite sofort zu einer Landingpage. Allein das gibt Ihnen das Gefühl, Ihre Arbeit gut gemacht zu haben.

Okay, ich gebe die Liste mit den Kritikpunkten, die ich erhalten habe, einfach an Gemini weiter und lasse sie etwas Cooles daraus machen. So kann man KI am besten nutzen! … Ups, ich muss sicherstellen, dass sie es als „[Beispieltext]“ markieren, damit ich später nicht verwirrt werde. Ich ziehe etwas voreilige Schlüsse …

SCHRITT 3: [Eingabeaufforderung erstellen] Lassen Sie Gemini einen „Zauberspruch“ auf FigmaMake wirken (5 Minuten)

Sie werden aufgefordert, den in SCHRITT 2 erstellten Textstrukturvorschlag und das Bild des Designs, das Sie erstellen möchten, bereitzustellen und eine englische Eingabeaufforderung für FigmaMake generieren zu lassen.

Sobald der Text fertig ist, geht es ans Design! Das macht am meisten Spaß! Aber vorher muss ich noch einen „Prompt“ für FigmaMake erstellen. Mein gebrochenes Englisch reicht nicht aus, um meine Botschaft rüberzubringen, also überlasse ich das Gemini-sensei. Ich zähle auf ihn!

SCHRITT 4: [Designgenerierung] FigmaMake, den Rest überlassen Sie uns! (5 Minuten)

Jetzt kopiere den Zauberspruch, füge ihn ein und drücke die Eingabetaste! … oder so ähnlich. Vielleicht bekomme ich auf Anhieb ein göttliches Design? … Vielleicht auch nicht. Oder vielleicht? Diese Aufregung ist ein bisschen wie Gacha und macht Spaß.

Kopieren Sie die generierte Eingabeaufforderung, fügen Sie sie ein und klicken Sie auf die Schaltfläche „Design generieren“. Diese wenigen Sekunden des Wartens sind überraschend nervenaufreibend. Und dann erscheint das erste Design.

Wow, es ist geschafft! Aber es ist noch etwas simpel... Wir werden weiterhin an Design und Formulierungen feilen.

Aber nun begann die eigentliche Action.

SCHRITT 5: [Wiederholungsschleife] Verbessern Sie die Genauigkeit, indem Sie zwischen Analyse und Generierung hin- und herwechseln (1,5 Stunden)

Von hier aus war es Zeit für ein Brainstorming mit der KI. Während wir uns das von FigmaMake generierte Design ansahen, berieten wir uns mit Gemini darüber, was wir verbessern wollten, und arbeiteten kontinuierlich an der Verbesserung der Eingabeaufforderungen.

„Oh nein, nicht da lang!“, murmelte ich lauter vor mich hin. Wahrscheinlich hallte meine Stimme durch das ganze Büro. Doch seltsamerweise gefiel mir diese Rallye immer besser.

Ja, beim ersten Versuch hat es nicht so gut geklappt! Ich wusste, dass es so kommen würde! Aber ich hatte noch etwas Hoffnung! Hier beginnt die eigentliche Action: ein Dreibeinrennen mit der KI. Ist es so, als wäre ich der Regisseur und Gemini der Trainer?

Und hier ist die endgültige Ausgabe

Es ist viel besser geworden als die erste Zeichnung. Es ist jedoch mühsam, unnötige Teile zu löschen oder hinzuzufügen (wahrscheinlich, weil die Anweisungen vom Japanischen ins Englische übersetzt werden, sodass die Absicht oft nicht richtig vermittelt wird ...).

Ich dachte, dass es unmöglich sein könnte, mit FigmaMake noch mehr zu tun, also griff ich auf die Methode der rohen Gewalt zurück, indem ich es in Figma-Daten konvertierte und dann Korrekturen vornahm.

SCHRITT 6: [Figmaize] Importieren in Figma mit dem Html to Design-Plugin (5 Minuten)

Sobald die Designrichtung bis zu einem gewissen Grad gefestigt ist, ist es an der Zeit, die Daten nach Figma zu übertragen. Die Schritte dazu sind unten aufgeführt.

1. Das von FigmaMake generierte Design wird zunächst als Webseite veröffentlicht.
2. Starten Sie das Figma-Plugin „Html to Design“.
3. Geben Sie die URL des veröffentlichten FigmaMake ein und führen Sie den Import aus!

Alles, was Sie tun müssen, ist das Plugin „HTML to Design“. Kopieren Sie die URL der in FigmaMake veröffentlichten Seite, fügen Sie sie ein und klicken Sie auf die Schaltfläche. Das ist alles, was Sie tun müssen, um die Webseite in eine Ebene in Figma umzuwandeln. Was für eine praktische Welt wir doch leben.

FigmaMake gestartet

Veröffentlichen Sie zunächst FigmaMake. Klicken Sie auf „Veröffentlichen“ und der Status ändert sich in „Veröffentlicht“.

Starten Sie das Figma-Plugin „Html to Design“, geben Sie die URL des von Ihnen veröffentlichten FigmaMake ein und importieren Sie es!

Starten Sie das Plugin und fügen Sie die soeben erhaltene URL ein. Klicken Sie anschließend auf die Schaltfläche „Importieren“ – fertig!

Nach einigen Minuten wird das Ausgabedesign auf Figma angezeigt.

Ändern Sie abschließend den öffentlichen Status in privat

Wenn Sie die Schritte abgeschlossen haben, machen Sie die Veröffentlichung des Beitrags rückgängig, um ihn wieder in den privaten Zustand zu versetzen.

Anliegen

Derzeit gibt es keine Funktionen zum Festlegen eines Kennworts für den öffentlichen Status oder zum Erstellen einer Entwicklungsumgebung. Wenn Sie es also zum Erneuern einer Unternehmenswebsite verwenden, müssen Sie auf Informationslecks achten.

Grundsätzlich glaube ich nicht, dass es Auswirkungen hat, wenn Sie Inhalte erstellen, die auf Ihr eigenes Unternehmen beschränkt sind, oder wenn Sie einen Rohentwurf mit Dummy-Informationen erstellen. Daher denke ich, dass es am besten ist, es je nach Projekt zu verwenden (verwenden Sie es niemals für Projekte, die keine externe Verteilung zulassen).

Ok, das sieht schon ganz gut aus! Jetzt ist es Zeit, mein Heimatrevier, Figma, zu präsentieren! Tut mir leid, dass ich dich warten ließ, Kumpel!

SCHRITT 7: [Figma-Korrektur] Letzte Anpassungen an Layoutproblemen (30 Minuten)

Die neu importierten Daten sind noch nicht ganz ausgereift, weisen mysteriöse Gruppierungen und überquellende Textfelder auf und lassen viel Raum für Verbesserungen.

Von hier an geht es um stetige Überarbeitungsarbeit: das automatische Layout erneut ausführen, unzusammenhängende Elemente zu Komponenten zusammenfügen, die Gesamtränder anpassen … Dieser kleine Aufwand verbessert die Qualität des Designs erheblich und macht es zu einem „richtigen Rohentwurf“.

Hier ist das fertige Produkt

Die Granularität des Designs nimmt ab, je weiter man auf der LP nach unten geht, aber ich bin nicht sicher, ob dies nur ein unvermeidbarer Aspekt der KI ist oder ob meine Anweisungen schlecht sind … Ich werde weiterhin mit verschiedenen Optionen experimentieren.

Importieren, und... Ja, das Layout ist lebendiger und wilder als erwartet! Das ist das Ergebnis der harten Arbeit der KI. Jetzt ist es an der Zeit, meine Liebe zu zeigen, indem ich es schön aufräume.

Zusammenfassung: Was ich bei der Erstellung gelernt habe: Die wichtigsten Punkte des „AI Collaborative Design“

Durch diesen Produktionsablauf wurde mir klar, dass KI kein „Zauberstab“, sondern ein „hervorragender Partner“ ist.

• Der zeitsparende Effekt der Erstellung eines Rohentwurfs ist enorm:Das geht viel schneller, als einen Kompositionsplan von Grund auf neu zu erstellen.
• Der Schlüssel liegt in der Versuch-und-Irrtum-Schleife:Das Erstellen guter Designs erfordert Geduld und wiederholten Dialog mit der KI.
• Der letzte Schliff:Die Qualität hängt davon ab, dass der Designer nicht einfach blind akzeptiert, was die KI geschaffen hat, sondern es mit Absicht fertigstellt.

Übrigens, als ich dem Präsidenten diesen Entwurf schüchtern zeigte ...„Oh, das ist interessant! Das wird es einfacher machen, die Diskussion voranzubringen! Allein einen Ausgangspunkt zu haben, macht einen riesigen Unterschied, danke!“Das sagen sie.

Jaaaaaa! Die Mühe hat sich gelohnt...! Das Bier schmeckt heute Abend gut!

Das ist alles für jetzt! Der eigentliche LP-Teil wird als zweite Hälfte veröffentlicht, nachdem der Präsident seine roten Zahlen hinzugefügt hat!

Warum versuchen Sie nicht, in Zusammenarbeit mit KI neue Designs zu erstellen?