Topics

Dieser Artikel entstand letztes Jahr, als wir die Landingpage erstellten. Er wurde damals verfasst, aber die KI hat sich so rasant weiterentwickelt, dass der Inhalt bei einer heutigen Veröffentlichung veraltet ist. Es ist erstaunlich, wie schnell sich KI entwickelt. Da sich diese Entwicklung bis 2026 voraussichtlich noch beschleunigen wird, müssen Designer ihre Arbeitsweise anpassen und sich stets auf dem Laufenden halten, sonst bleiben sie auf der Strecke. Es ist wirklich beeindruckend. FigmaMake und Gemini3 können heute so viel mehr. Ich hoffe, Sie überfliegen diesen Artikel einfach und betrachten ihn als Tagebuch eines Designers, der KI intensiv nutzt, aber gleichzeitig von ihrer rasanten Entwicklung überwältigt ist. Ich werde in den hinzugefügten Abschnitten auch ergänzende Texte (Kommentare) einfügen, sodass Sie diese quasi als zusätzlichen Audiokommentar betrachten können.

Hallo!

Mein Name ist Hasshi und ich arbeite als UI-Designer bei Liberogic Inc.

In meinem vorherigen Artikel berichtete ich voller Begeisterung, dass ich mit FigmaMake und Gemini in nur drei Stunden einen ersten Entwurf einer Landingpage erstellt hatte.

Dies ist das Ergebnis der vorangegangenen Arbeiten.

Den vorherigen Artikel finden Sie hier.

[Erstellen und verwenden wir es mit FigmaMake: Teil 1] FigmaMake und Gemini in 3 Stunden! Ein Web-Produktionsablauf der neuen Generation zum Erstellen einer groben Zielseite, der den „Red Ink“-Prozess für vielbeschäftigte CEOs beschleunigt

https://www.liberogic.jp/topics/20250723-figmamake/

Dieser Artikel ist die zweite Hälfte davon.

Nach dem Bericht an den Präsidenten fühlte ich mich gut.

Damit können wir selbst auf unvernünftige Forderungen des Präsidenten in Rekordzeit reagieren!

Bei dieser Qualität in nur 3 Stunden gibt es absolut nichts zu beanstanden!

...Es gab eine Zeit, da habe ich auch so gedacht, lol

Diesmal reichte ich es dem Präsidenten mit großer Begeisterung ein.

"Höllenrevision"Wir liefern ⭐️･:*+.\(( °ω° ))/.:+✨

Um zusammenzufassen,

Das wunderschöne Layout, das ich mit FigmaMake erstellt hatte, verschwand nach der Äußerung des Präsidenten spurlos.

Ich glaube, dass dies auch weiterhin der Fall sein wird, selbst nachdem sich die KI weiterentwickelt hat.

Erkenntnis: FigmaMake eignet sich hervorragend für die Erstellung von Dashboards und Wireframes, ist aber möglicherweise nicht für die Erstellung emotionaler Landingpages geeignet.

Künstliche Intelligenz hat sich in letzter Zeit rasant weiterentwickelt und kann mittlerweile auf vielfältige Weise eingesetzt werden. Es ist erstaunlich!

Präsentation des Präsidenten: Die Hürde „Es muss gut aussehen“

Ich war voller Zuversicht, als ich dem CEO den von mir beim letzten Mal erstellten Vorschlag für eine Landingpage im SaaS-Stil präsentierte, der ziemlich gut gelungen war.

Präsident! Ich habe mithilfe von KI in Rekordzeit einen ersten Entwurf des LP erstellt! Was halten Sie von der Struktur?

Wow, das ging schnell. (Blickt auf den Bildschirm)... Hmm, aber es ist ziemlich schwierig.

Ist es zu steif? (Nein, es handelt sich um eine B2B-Dienstleistung, die Vertrauen erfordert, daher ist es besser, so organisiert zu sein...)

Könntest du es nicht spannender gestalten, ihm mehr Wirkung und eine markantere Note verleihen? Und könntest du etwas Bewegung und Dekoration hinzufügen, damit es „schöner“ aussieht?

Da ist es ja."Sorg dafür, dass es gut aussieht."

Dies ist die Anweisung Nummer eins, die alle Designer am meisten fürchten und die die KI am schwersten zu verstehen hat.

Ich höre oft Sätze wie „Das sieht gut aus“ oder „Das wirkt etwas gehetzt“. Es ist wichtig, die tiefere Bedeutung dieser Worte zu verstehen. Wir leben in einer Zeit, in der Designer auch auf ihre Kommunikationsfähigkeiten geprüft werden. Da ich selbst nicht gut kommunizieren kann und mich unsicher fühle, fällt mir das schwer, deshalb ist jeder Tag ein Training… (Wenn Kommunikationsfähigkeiten für Designer so wichtig wären, hätte ich sie schon in jungen Jahren besser gefördert… seufz.)

Bei der Arbeit mit Klienten versuchen wir, die Psychologie des anderen und seine Wünsche genauer zu verstehen, aber der Präsident ist sehr beschäftigt und hat nicht viel Zeit, ihnen zuzuhören.

Aufgrund des Verhältnisses zwischen dem Präsidenten und den Angestellten kann es schon mal etwas lockerer zugehen, und Anfragen werden dann mitunter in willkürlichen Worten formuliert.

Dann kommt die Phase, in der wir alle zusammenarbeiten, um die Worte des vielbeschäftigten Präsidenten zu verarbeiten und neu zu interpretieren.

Das war nur eine Ausrede. Es war nur eine Ausrede von mir.

innere Stimme(Was soll das heißen: „Es sieht gut aus“? Selbst Gemini-Sensei kann nicht so weit lesen! Könnten Sie bitte aufhören, Korrekturanweisungen nur mit lautmalerischen Wörtern wie „Boom“ und „Wusch“ zu geben?)

Dieses Gefühl hat sich auch jetzt nicht geändert.

FigmaMake vs. die vernichtenden Kommentare des CEOs

Von da an begann der eigentliche Kampf.

Um das vom Präsidenten gewünschte „gute Gefühl“ zu verkörpern, nehmen wir Korrekturen an der in FigmaMake erstellten Basis vor…

Hier kommt die Werkzeugkompatibilität ins Spiel.

FigmaMake generiert nur"Logisch korrektes Web-Layout"Ein wunderschönes Box-Layout, erstellt mit Auto Layout.

Das ist ein weiterer erstaunlicher Aspekt der KI-Entwicklung. Wenn man heute mit derselben Eingabeaufforderung einen Text generiert, ist die Genauigkeit ziemlich gut. Man kann den Fortschritt der KI deutlich spüren (siehe beigefügtes Bild unten).

Es ist schön, lehrreich und einfach als Vorlagenthema zu verwenden.

Die Bitte des Präsidenten

„Lasst uns dem Hintergrund etwas Struktur verleihen!“ „Lasst uns Elemente über die Ränder hinausragen lassen.“ „Wie wäre es mit diagonalen Schlitzen?“

wie zum Beispiel,Emotionale Dekoration, die der Logik trotzt.Nur.

Jedes Mal, wenn ich versuche, ein dekoratives Bild in die von FigmaMake generierten Daten einzufügen, fängt Auto Layout an zu schreien und das gesamte Layout bricht zusammen.

Innere Stimme (Oh nein! Als ich das Hintergrundbild hinzugefügt habe, hat sich auch der untere Bereich verschoben! FigmaMake, du bist nicht schuld, du hast recht. Aber ich kann die Anforderungen des CEOs trotzdem nicht vollständig erfüllen...!)

Die Leere, die entsteht, wenn man es von Hand nachbilden muss

„Verringert die Ränder hier!“ „Macht die Knöpfe wackeliger!“

Geben Sie einen nach dem anderen einDämonenkommentar (rot)Um dieses Problem zu lösen, habe ich widerwillig das von FigmaMake erstellte Auto Layout deaktiviert, die generierten Komponenten zerlegt und sie manuell neu angeordnet.

Ein paar Stunden später war nur noch Folgendes auf dem Bildschirm zu sehen:Die Designdaten sind völlig anders und ähneln FigmaMake nicht einmal.

Und hier ist der erste Entwurf nach diversen Änderungen. Das Design unterscheidet sich komplett vom ersten Entwurf.

Obwohl alle vorhandenen Elemente automatisch angeordnet sind, wird beim Kopieren von FigmaMake nach Figma aus irgendeinem Grund die automatische Anordnung für einige Teile abgebrochen, sodass man die automatische Anordnung erneut durchführen muss.

Mir wurde klar, dass die Reparatur viel Zeit in Anspruch nehmen würde.

Innere Gedanken (Hä? Wäre es nicht schneller gegangen, das gleich von Anfang an in Photoshop oder Figma von Hand zu machen...? Was war denn mit meinen blitzschnellen drei Stunden los...?)

Als mir das spät abends im Büro klar wurde, überkam mich ein Gefühl der Leere. Und dann war es mein älterer Kollege, der mir einen Energydrink gab.

Senior: „Ich gehe nach Hause, weil ich mit der Arbeit fertig bin!“

Der Ältere stürmt davon. Er wird mir nicht helfen...

Fazit: Stärken und Schwächen von FigmaMake

Nach diesem ganzen Ärger mit der Fehlersuche lernte ich die Eigenschaften des Tools FigmaMake kennen.

Wird es an der falschen Stelle eingesetzt, erhöht es sogar den Aufwand, der für Korrekturen erforderlich ist.

✅ Was FigmaMake gut kann (=es ist super schnell fertig)

• Management-Bildschirm, Dashboard-Benutzeroberfläche, App-Bildschirm usw.
  • Saubere Rasterlayouts, Formulare, Tabellen usw. sind von optimaler Qualität.
  • Es erzeugt sofort eine logische Struktur, sodass Sie etwas von so hoher Qualität erstellen können, dass Sie denken werden, es könnte direkt für SaaS-Management-Bildschirme verwendet werden (obwohl natürlich einige Anpassungen erforderlich sind).
• Erster Drahtgitter- und Strukturplan
  • Wenn Sie sich in der Phase befinden, in der Sie prüfen, ob Elemente fehlen oder überflüssig sind, kann LP durchaus verwendet werden (bevor das Design vollständig entwickelt ist).
  • Es ist außerdem sehr nützlich, da es Ihnen ermöglicht, verschiedene Muster zu erstellen, während Sie die Anforderungen ausarbeiten.
  • Es war äußerst nützlich, um die Wünsche des Kunden zu verbalisieren, ihnen vor Ort eine Form zu geben und das Image zu verfeinern.

❌ Wofür FigmaMake nicht gut ist (= manuelle Nachbearbeitung erforderlich)

• Erstellung von visuellen Elementen für die Landingpage
  • Mir gelingt es immer noch nicht gut, ansprechende Designs mit "Verzierungen" und "dekorativen Elementen" zu gestalten.
  • Die generierte Benutzeroberfläche ist übersichtlich und benutzerfreundlich. Sie können Dekorationen wie Farbverläufe und Muster hinzufügen, aber ohne klare Anweisungen könnte das fertige Produkt veraltet wirken.
  • Es braucht Zeit, die Genauigkeit der Eingabeaufforderungen beim Erstellen eines Designs zu verbessern.
• Die Verkörperung der vagen Nuance von „fühlt sich gut an“
  • Dies erfordert nach wie vor die Übersetzungsfähigkeiten menschlicher Designer.
  • Wenn ich die Eingabeaufforderungen öfter nutze, denke ich, dass ich sie reibungsloser und mit präziseren Anweisungen erstellen kann (das kann ich im Moment noch nicht).

Zusammenfassend lässt sich sagen: Dennoch war es ein hervorragender Ausgangspunkt.

Also,Es war schwierig, die von FigmaMake generierten Daten unverändert für die „LP-Produktion auf der Grundlage vager Anweisungen des Präsidenten“ zu verwenden.Ist.

Wie ich jedoch in meinem vorherigen Artikel schrieb, war es definitiv hilfreich, „in drei Stunden von einem leeren Blatt Papier zu einem groben Entwurf zu gelangen und den Präsidenten von meinen Wünschen zu überzeugen“. Früher hätte dies viel Zeit in Anspruch genommen, und es hätte lange gedauert, bis die Arbeit vorangekommen wäre.

Außerdem wurde der Wunsch nach etwas „Fröhlichem und Erfrischendem“ geäußert.Meinungen entstanden nur, weil es einen Ausgangspunkt gab.Das war's also (positives Denken).

Was ich diesmal gelernt habe

• FigmaMake ist ein Profi in der Erstellung von "Strukturen".
• Bei der Dekoration werden die Fähigkeiten des Designers auf die Probe gestellt.
• Es gibt noch keine KI, die auf das „gute Gefühl“ des Präsidenten reagieren kann.

Beim nächsten Mal werde ich mich wieder an FigmaMake versuchen und die Benutzeroberfläche unseres internen Verwaltungstools überarbeiten. (Wenn es sich um eine Admin-Oberfläche handelt, bin ich sicher, dass sie hervorragend aussehen wird!)

Bezüglich der Änderungen am LP-Design...

Ja, ich werde diese Arbeit weiterhin fleißig von Hand erledigen!

Und wo wir gerade von der Entwicklung der KI sprechen… Hier ist das Design, das mit denselben Vorgaben wie beim Erstellen des ersten Artikels generiert wurde.

Die Qualität der ersten Generation hat sich in nur wenigen Monaten sprunghaft verbessert, was ziemlich überraschend ist.

Der explosionsartige Anstieg der Genauigkeit ist ziemlich beängstigend. Heutzutage möchte ich mich täglich mit Design beschäftigen, um mit der Entwicklung der KI Schritt halten zu können.

UndHier ist die fertige Webseite.

Das LP selbst ist WCAG2.2AA-konform.Und das tue ich.
Lighthouse schneidet ebenfalls sehr gut ab (es braucht etwas Zeit, aber probieren Sie es aus! Manchmal erreichen Sie sogar die volle Punktzahl!).
Und auf geheimnisvolle WeiseMehrsprachige Unterstützung！
Für mehrsprachige Unterstützung lesen Sie bitte diesen Artikel.Schaut es euch bitte auch an!
Browserübersetzung ist heutzutage Standard, aber es ist super praktisch, eine Übersetzungsseite kostengünstig nutzen zu können, ohne wechseln zu müssen!

Was denken Sie?
Findest du nicht auch, dass es ganz gut geworden ist?🎵

Ich habe vieles geschrieben, aber ich finde, dass mir ein erster Entwurf sehr geholfen hat, den Arbeitsaufwand zu reduzieren! Früher hätte ich viel Zeit mit der Texterstellung verbracht und anschließend alles ins Design einarbeiten und den Inhalt ändern müssen. Das hat mir viel Arbeit erspart. Wenn ich das nächste Mal KI einsetze, werde ich darauf achten, vorher konkrete Vorschläge zu generieren. Zur Belohnung habe ich mir ein Bier gegönnt.