Topics

Hallo! Ik ben Hasshi, UI-ontwerper bij Liberogic Inc.

Ik maak me de laatste tijd zorgen dat ik niet veel vooruitgang boek met het maken van een nieuwe LP (landingspagina) voor mijn toegankelijkheidsservice.

Gelukkig is de CEO, die verantwoordelijk is voor het ontwerp van onze bedrijfswebsite, enorm druk met andere zaken. Maar in dit tempo komen we niet verder...

"Oké, laten we in ieder geval een ruwe versie maken, zodat de president het wat makkelijker kan beoordelen!"

Het begon allemaal met dat idee,Snelle LP-productie met behulp van AI (Gemini) en ontwerpautomatiseringstool (FigmaMake)Deze keer deel ik het hele proces en mijn eerlijke mening vanuit het perspectief van een ontwerper!

Ons doel deze keer: de president zover krijgen dat hij een aantal 'rode opmerkingen' maakt over het ontwerp!

Het is onmogelijk om iets vanaf het begin perfect te maken! Jazeker! Ten eerste is het belangrijk om iets te presenteren waar de president makkelijk commentaar op kan geven, dat is zeker!

Het complete proces voor het razendsnel maken van een LP (nog sneller als je er eenmaal aan gewend bent!)

Dit is de daadwerkelijke tijdsindeling voor de productiestroom die we deze keer hebben uitgeprobeerd: Het onderdeel dat de meeste tijd in beslag nam, was het 'herhalings'-onderdeel, dat ging over het verbeteren van de nauwkeurigheid van het ontwerp.

1. 【analyseren】Gemini-sensei, wat vind je van deze LP?(15 punten)
2. [Tekstgeneratie]Laat Gemini de tekst van de landingspagina maken, inclusief de verbeteringen(15 punten)
3. [Promptcreatie]Laat Gemini de "magische spreuk" uitspreken die jij wilt uitspreken op FigmaMake(5 punten)
4. [Ontwerpgeneratie]FigmaMake, ik bestelde het als eerste!(5 punten)
5. [Herhaal lus]Verbetering van de nauwkeurigheid door een heen-en-weer-reis tussen analyse en generatie(1,5 uur)
6. [Figma-conversie]Importeren naar Figma met de Html naar Design plugin(5 punten)
7. [Figma-correctie]Laatste aanpassingen aan lay-outproblemen(30 punten)

Laten we nu eens nader naar elke stap kijken!

STAP 1: [Analyse] Gemini-sensei, wat vind je van deze LP? (15 minuten)

Eerst laten we Gemini onze bestaande toegankelijkheidspagina's lezen en krijgen we eerlijke feedback.

[Voorbeeld van een prompt voor Gemini]

Analyseer de landingspagina op webtoegankelijkheid via de onderstaande URL en benoem de voor- en nadelen.

De analyseresultaten kwamen binnen enkele seconden binnen: "Er zijn geen casestudy's of klantgetuigenissen, dus het is moeilijk om de specifieke voordelen van de implementatie van de service voor te stellen." Wauw, dat is zo accuraat dat het echt pijn doet! Maar het is iets wat ik zelf niet had kunnen zeggen, dus bedankt, Gemini!" Ze konden de problemen die ik vaag had aangevoeld, accuraat verwoorden.

Laten we eerst de huidige situatie eens bekijken. Ik heb deze pagina aangemaakt, maar ik laat Gemini-sensei sowieso alles aanwijzen wat ik zelf niet zie!

STAP 2: [Tekstgeneratie] Laat Gemini LP-tekst maken, inclusief verbeteringen (15 minuten)

We kopiëren en plakken de analyseresultaten van STAP 1 en vragen u om een ​​tekst te schrijven met suggesties voor verbeteringen.

[Voorbeeld van een prompt voor Gemini]

Maak op basis van de resultaten van de bovenstaande analyse een voorstel voor de tekststructuur van de landingspagina voor webtoegankelijkheid. (Weggelaten) Markeer alle nieuw toegevoegde elementen duidelijk als [Voorbeeldtekst].

Wanneer je specifieke tekst toevoegt, zoals "Klantgetuigenis: XXXX Co., Ltd.: Aantal aanvragen via de website 1,5 keer toegenomen!", lijkt het meteen meer op een landingspagina. Alleen dit al geeft je het gevoel dat je je werk goed hebt gedaan.

Oké, ik geef de lijst met kritiekpunten die ik heb ontvangen gewoon aan Gemini en laat ze er iets cools van maken. Dit is de beste manier om AI te gebruiken! ... Oeps, ik moet ervoor zorgen dat ze het markeren als "[Voorbeeldtekst]", zodat ik later niet in de war raak. Ik trek nogal snel conclusies...

STAP 3: [Maak een prompt] Laat Gemini een "magische spreuk" uitspreken om op FigmaMake uit te spreken (5 minuten)

U wordt gevraagd om het tekststructuurvoorstel dat u in STAP 2 hebt gemaakt, en de afbeelding van het ontwerp dat u wilt maken, aan te leveren. Ook wordt er een Engelse opdrachtprompt voor FigmaMake gegenereerd.

Zodra de tekst klaar is, is het tijd om te ontwerpen! Dat is het leukste gedeelte! Maar daarvoor moet ik eerst een "prompt" voor FigmaMake maken. Mijn gebrekkige Engels is niet goed genoeg om mijn punt duidelijk te maken, dus ik laat dit over aan Gemini-sensei. Ik reken op hem!

STAP 4: [Design Generation] FigmaMake, laat de rest aan ons over! (5 minuten)

Kopieer en plak nu de magische spreuk en druk op Enter! ...of dat zeg je tenminste. Misschien krijg ik in één keer een goddelijk ontwerp? ...Misschien niet. Of misschien wel? Deze spanning is een beetje zoals gacha en het is leuk.

Kopieer en plak de gegenereerde prompt en klik op de knop 'Ontwerp genereren'. Deze paar seconden wachten zijn verrassend zenuwslopend. En dan verschijnt het eerste ontwerp.

Wauw, het is klaar! Maar het is nog steeds een beetje simpel... We blijven het ontwerp en de tekst aanpassen.

Maar goed, hier begon het echte werk.

STAP 5: [Herhaal lus] Verbeter de nauwkeurigheid door heen en weer te schakelen tussen analyse en generatie (1,5 uur)

Vanaf hier was het tijd om te brainstormen met de AI. Terwijl we het door FigmaMake gegenereerde ontwerp bekeken, overlegden we met Gemini over wat we wilden verbeteren en werkten we gestaag aan het verbeteren van de prompts.

"Oh nee, niet op die manier!" mompelde ik luider in mezelf. Mijn stem galmde waarschijnlijk door het hele kantoor. Maar vreemd genoeg begon ik steeds meer van deze bijeenkomst te genieten.

Ja, het ging niet meteen goed in de eerste poging! Ik wist dat het zou lukken! Maar ik had nog hoop! Hier begint de echte actie, een driebenige race met de AI. Is het alsof ik de regisseur ben en Gemini de coach?

En hier is het eindresultaat

Het is een stuk beter geworden dan de eerste tekening. Het is echter lastig om onnodige delen te wissen of toe te voegen (waarschijnlijk omdat de instructies vanuit het Japans naar het Engels vertaald zijn, waardoor de bedoeling vaak niet goed overkomt...).

Ik dacht dat het onmogelijk zou zijn om nog meer te doen met FigmaMake, dus ik greep naar de brute-force-methode: ik zette het om in Figma-gegevens en voerde vervolgens correcties door.

STAP 6: [Figmaize] Importeren in Figma met de Html naar Design plugin (5 minuten)

Zodra de ontwerprichting enigszins is vastgelegd, is het tijd om de gegevens over te zetten naar Figma. De stappen staan ​​hieronder vermeld.

1. Het door FigmaMake gegenereerde ontwerp wordt eerst gepubliceerd als webpagina.
2. Start de Figma plugin "Html naar ontwerp".
3. Voer de URL van de gepubliceerde FigmaMake in en voer de import uit!

Het enige wat je hoeft te doen is de plugin "Html to Design" te gebruiken. Kopieer en plak de URL van de pagina die je in FigmaMake hebt gepubliceerd en klik op de knop. Dat is alles wat nodig is om de webpagina om te zetten naar een laag in Figma. Wat leven we toch in een handige wereld.

FigmaMake gelanceerd

Publiceer eerst FigmaMake. Klik op Publiceren en de status verandert in Gepubliceerd.

Start de Figma-plugin "Html to Design", voer de URL in van de FigmaMake die u hebt gepubliceerd en importeer deze!

Start de plugin en plak de URL die je zojuist hebt gevonden. Klik vervolgens op de knop Importeren en je bent klaar!

Na een paar minuten wordt het ontwerp op Figma weergegeven.

Verander ten slotte de openbare status naar privé

Zodra u de stappen hebt voltooid, maakt u de publicatie van het bericht ongedaan om het weer privé te maken.

Zorgen

Momenteel zijn er geen functies om een ​​wachtwoord in te stellen voor de openbare status of om een ​​ontwikkelomgeving te creëren. Als u de status wilt gebruiken om een ​​bedrijfswebsite te vernieuwen, moet u dus oppassen voor informatielekken.

Ik denk niet dat het invloed heeft als je content creëert die alleen voor je eigen bedrijf is bedoeld, of als je een ruwe opzet maakt met dummy-informatie. Ik denk dat het het beste is om het te gebruiken, afhankelijk van het project (gebruik het nooit voor projecten die geen externe distributie toestaan).

Oké, dit begint er al aardig goed uit te zien! Nu is het tijd om mijn eigen terrein, Figma, te betreden! Sorry dat ik je heb laten wachten, maat!

STAP 7: [Figma-correctie] Laatste aanpassingen aan lay-outproblemen (30 minuten)

De nieuw geïmporteerde gegevens zijn nog niet helemaal helder, met mysterieuze groeperingen en overlappende tekstvakken. Er is dus nog genoeg ruimte voor verbetering.

Vanaf hier is het een kwestie van voortdurend revisiewerk: de automatische lay-out opnieuw uitvoeren, losse elementen opnieuw samenstellen tot componenten, de algemene marges aanpassen... Deze kleine inspanning verbetert de kwaliteit van het ontwerp aanzienlijk en verandert het in een "goede ruwe schets".

Hier is het eindproduct

De granulariteit van het ontwerp neemt af naarmate je verder in de LP komt, maar ik weet niet zeker of dit een onvermijdelijk aspect van de AI is of dat mijn instructies slecht zijn... Ik blijf experimenteren met verschillende opties.

Importeren, en... Ja, de lay-out is levendiger en wilder dan ik had verwacht! Nou, dat is het resultaat van het harde werk van de AI. Nu is het tijd om mijn waardering te tonen door het netjes op te ruimen.

Samenvatting: Wat ik heb geleerd van het maken ervan: de belangrijkste punten van 'AI-samenwerkingsontwerp'

Wat ik door deze productiestroom heb geleerd, is dat AI geen 'toverstaf' is, maar een 'uitstekende partner'.

• Het maken van een ruwe schets bespaart enorm veel tijd:Het is veel sneller dan helemaal vanaf nul beginnen met het maken van een compositieplan.
• De sleutel is de trial-and-error-lus:Om goede ontwerpen te maken heb je geduld en herhaaldelijke dialoog met AI nodig.
• De finishing touch:Kwaliteit hangt ervan af dat de ontwerper niet klakkeloos accepteert wat de AI heeft gecreëerd, maar dat hij het met aandacht afrondt.

Trouwens, toen ik dit concept voorzichtig aan de president liet zien..."Oh, dat is interessant! Dit maakt het makkelijker om de discussie verder te brengen! Alleen al een startpunt maken maakt een enorm verschil, dank je wel!"Dat zeggen ze.

Jaaaaa! Het was de moeite waard...! Het bier smaakt vanavond lekker!

Dat was het voor nu! Het LP-gedeelte zelf verschijnt als tweede helft, nadat de president zijn rode inkt heeft toegevoegd!

Waarom probeert u niet eens nieuwe ontwerpen te maken in samenwerking met AI?