Topics

Dit artikel is vorig jaar geschreven toen we de landingspagina aan het bouwen waren. Het is destijds geschreven, maar AI heeft zich zo snel ontwikkeld dat de inhoud nu alweer achterhaald is... Het is verbazingwekkend hoe snel AI zich ontwikkelt. Aangezien die ontwikkeling tegen 2026 nog verder zal versnellen, moeten ontwerpers hun werkwijze blijven aanpassen en op de hoogte blijven van de laatste ontwikkelingen, anders lopen ze achter... Het is werkelijk ongelooflijk. FigmaMake en Gemini3 kunnen nu zoveel meer. Ik hoop dat je dit artikel vluchtig doorleest en het beschouwt als het dagboek van een ontwerper die volop gebruikmaakt van AI, maar tegelijkertijd overweldigd is door de evolutie ervan. Ik heb ook aanvullende tekst (oftewel commentaar) toegevoegd aan de delen die ik heb toegevoegd, dus beschouw het als een soort aanvullend audiocommentaar.

Hallo!

Mijn naam is Hasshi en ik werk als UI-designer bij Liberogic Inc.

In mijn vorige artikel meldde ik enthousiast dat ik met FigmaMake en Gemini in slechts drie uur een ruwe versie van een landingspagina had gemaakt.

Dit is het resultaat van het voorgaande werk.

Zie het vorige artikel hier.

[Maak en gebruik FigmaMake: Deel 1] 3 uur met FigmaMake en Gemini! Een nieuwe generatie webproductieflow voor het maken van een ruwe landingspagina die het 'rode inkt'-proces voor drukke CEO's versnelt.

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

Dit artikel vormt het tweede deel daarvan.

Nadat ik verslag had uitgebracht aan de president, voelde ik me goed.

Hiermee kunnen we zelfs op de meest onredelijke verzoeken van de president in recordtijd reageren!

Met deze kwaliteit in 3 uur tijd valt er niets te klagen!

...Er was een tijd dat ik er ook zo over dacht, haha.

Ditmaal heb ik het met groot enthousiasme aan de president voorgelegd.

"Herziening van de hel"We zullen bezorgen ⭐️･:*+.\(( °ω° ))/.:+✨

Samenvattend,

Die prachtige lay-out die ik met FigmaMake had gemaakt, verdween spoorloos na de opmerking van de president.

Ik geloof dat dit zal blijven gebeuren, zelfs nu AI zich verder heeft ontwikkeld.

Les geleerd: FigmaMake is geweldig voor het maken van dashboards en wireframes, maar is misschien nog niet geschikt voor het creëren van emotionele landingspagina's.

Kunstmatige intelligentie (AI) heeft zich de laatste tijd razendsnel ontwikkeld en kan nu op allerlei manieren worden ingezet. Geweldig!

Presentatie van de president: De barrière van "het er goed uit laten zien"

Ik zat vol zelfvertrouwen toen ik de CEO het voorstel voor een landingspagina in SaaS-stijl liet zien dat ik de vorige keer had gemaakt, en dat was best goed gelukt.

President! Ik heb AI gebruikt om in een mum van tijd een conceptversie van die LP te maken! Wat vindt u van de structuur?

Wow, dat ging snel. (Kijkt naar het scherm)... Hmm, maar het is best moeilijk."

Is het te stijf? (Nee, het is een B2B-dienst die vertrouwen vereist, dus het is beter dat het zo georganiseerd is...)

Kun je het niet wat spannender maken, of het een grotere impact geven en het een scherpere uitstraling geven? Voeg ook wat beweging en decoratie toe om het er "mooier" uit te laten zien?

Daar is het."Zorg dat het er goed uitziet."

Dit is de instructie waar alle ontwerpers het meest bang voor zijn en die AI het moeilijkst begrijpt.

Ik krijg vaak te horen dat het er goed uitziet of dat het gehaast is gedaan. Het is belangrijk om de diepere betekenis van die woorden te begrijpen. We leven in een tijdperk waarin ontwerpers ook worden getest op hun communicatieve vaardigheden. Als iemand met zwakke communicatieve vaardigheden en een gevoel van onzekerheid, is dat lastig voor me, dus elke dag is een trainingssessie... (Als communicatieve vaardigheden zo belangrijk waren voor ontwerpers, had ik ze er al van jongs af aan meer in getraind... zucht.)

Bij de samenwerking met klanten verdiepen we ons in de psychologie en wensen van de ander, maar de directeur heeft het erg druk en weinig tijd om naar hen te luisteren.

Vanwege de relatie tussen de president en de medewerkers kunnen de zaken soms wat verslappen en worden verzoeken soms met willekeurige woorden geformuleerd.

Vervolgens komen we in de fase waarin we allemaal samenwerken om de woorden van de drukke president te verwerken en te herformuleren.

Dit was slechts een excuus. Het was gewoon een excuus van mijn kant.

innerlijke stem(Wat bedoel je met "het ziet er goed uit"? Zelfs Gemini-sensei kan niet zo ver lezen! Kun je alsjeblieft stoppen met het geven van correctie-instructies met alleen maar onomatopeeën zoals "boem" en "zoef"?)

Dat gevoel is tot op de dag van vandaag niet veranderd.

FigmaMake versus de keiharde opmerkingen van de CEO

Vanaf dat moment begon de echte strijd.

Om het "goede gevoel" dat de president voor ogen heeft te belichamen, hebben we correcties aangebracht in de basis die in FigmaMake is gemaakt...

Hier komt de compatibiliteit van de tools in beeld.

FigmaMake genereert alleen"Logisch correcte webindeling"Een prachtige kaderindeling gemaakt met Auto Layout.

Dit is nog een verbazingwekkend aspect van de evolutie van AI. Als je nu een tekst genereert met dezelfde prompt, is de nauwkeurigheid behoorlijk goed. Je kunt de vooruitgang van AI echt voelen (zie de bijgevoegde afbeelding hieronder).

Het is prachtig, leerzaam en makkelijk te gebruiken als sjabloonthema.

Het verzoek van de president echter

"Laten we wat textuur aan de achtergrond toevoegen!" "Laten we elementen buiten de randen laten doorlopen." "Wat dacht je van diagonale spleten?"

zoals,Een emotionele decoratie die alle logica tart.Alleen.

Telkens wanneer ik een decoratieve afbeelding probeer toe te voegen aan de data die door FigmaMake is gegenereerd, begint Auto Layout te gillen en stort de hele lay-out in elkaar.

Innerlijke stem (Oh nee! Toen ik die achtergrondafbeelding toevoegde, verschoof het onderste gedeelte ook! FigmaMake, het is niet jouw schuld, je hebt gelijk. Maar ik kan nog steeds niet volledig aan de eisen van de CEO voldoen...!)

De leegte die ontstaat doordat je het met de hand moet namaken.

"Maak de marges hier kleiner!" "Maak de knopen beweeglijker!"

Ze komen één voor één binnen.Demonencommentaar (in rood)Om dit probleem op te lossen, heb ik met tegenzin de door FigmaMake gegenereerde Auto Layout uitgeschakeld, de gegenereerde componenten gedemonteerd en ze handmatig opnieuw gerangschikt.

Enkele uren later was er op het scherm niets meer over danDe ontwerpgegevens zijn compleet anders en lijken in de verste verte niet op FigmaMake.

En hier is het eerste ontwerp na diverse aanpassingen. Het ontwerp is compleet anders dan het eerste ontwerp.

Hoewel alle bestaande elementen automatisch worden opgemaakt, wordt de automatische opmaak bij het kopiëren van FigmaMake naar Figma om de een of andere reden voor sommige onderdelen geannuleerd, waardoor je de automatische opmaak opnieuw moet uitvoeren.

Ik besefte dat het veel tijd zou kosten om het te repareren.

Innerlijke gedachten (Hè? Was het niet sneller geweest om dit vanaf het begin gewoon met de hand in Photoshop of Figma te doen...? Wat was er toch met mijn razendsnelle drie uur...?)

Ik voelde een leegte toen ik me dit 's avonds laat op kantoor realiseerde. En toen was het mijn senior collega die me een energiedrankje gaf.

Senior: "Ik ga naar huis, want ik ben klaar met werken!"

De oudere man rent ervandoor. Hij gaat me niet helpen...

Conclusie: Sterke en zwakke punten van FigmaMake

Na al dat gedoe met het oplossen van de problemen, heb ik de eigenschappen van de tool FigmaMake leren kennen.

Bij verkeerd gebruik zal het de hoeveelheid werk die nodig is om correcties aan te brengen juist vergroten.

✅ Waar FigmaMake goed in is (=het is supersnel klaar)

• Beheerscherm, dashboard-UI, app-scherm, enz.
  • Een overzichtelijke rasterindeling, formulieren, tabellen, enzovoort, komen het best tot hun recht.
  • Het creëert direct een logische structuur, waardoor je iets van zulke hoge kwaliteit kunt maken dat je het direct zou kunnen gebruiken voor SaaS-beheerschermen (hoewel er natuurlijk wel wat aanpassingen nodig zijn).
• Initieel wireframe en structuurplan
  • Als je je in de fase bevindt van "controleren of er elementen ontbreken of overbodig zijn", kan LP prima worden gebruikt (voordat het ontwerp volledig is uitgewerkt).
  • Het is ook erg handig omdat je hiermee verschillende patronen kunt creëren bij het uitwerken van de vereisten.
  • Het was buitengewoon nuttig om de wensen van de klant te verwoorden, ze ter plekke vorm te geven en het beeld te verfijnen.

❌ Waar FigmaMake niet goed in is (= handmatig werk vereist)

• Het creëren van visuele elementen voor de landingspagina (LP).
  • Ik ben nog steeds niet goed in het maken van ontwerpen die aantrekkelijk zijn met "versieringen" en "decoratieve elementen".
  • De gegenereerde gebruikersinterface is overzichtelijk en gebruiksvriendelijk. Je kunt decoraties zoals verlopen en patronen toevoegen, maar als je geen duidelijke instructies geeft, kan het eindproduct eruitzien alsof het uit de jaren 2010 komt.
  • Het kost tijd om de nauwkeurigheid van de aanwijzingen te verbeteren bij het maken van een ontwerp.
• De belichaming van de vage nuance van "voelt goed".
  • Dit vereist nog steeds de vertaalvaardigheden van menselijke ontwerpers.
  • Als ik de prompts vaker gebruik, denk ik dat ik ze vloeiender en met preciezere instructies kan maken (dat lukt me nu nog niet).

Samenvatting: Desondanks was het een uitstekend uitgangspunt.

Dus,Het was lastig om de door FigmaMake gegenereerde data direct te gebruiken voor "LP-productie op basis van vage instructies van de president".is.

Zoals ik echter in mijn vorige artikel schreef, was het absoluut nuttig om "binnen drie uur van een blanco vel naar een ruwe schets te gaan en de president te overtuigen van mijn wensen". Voorheen zou dit veel tijd hebben gekost en zou het lang hebben geduurd voordat het werk daadwerkelijk vooruitgang boekte.

Er was ook een verzoek om iets "vrolijks en verfrissends".Meningen ontstonden alleen omdat er een uitgangspunt was.Dus dat is het (positief denken).

Wat ik deze keer heb geleerd

• FigmaMake is een expert in het creëren van "structuren".
• Decoratie is het gebied waar de vaardigheden van de ontwerper echt op de proef worden gesteld.
• Er bestaat nog geen AI die kan reageren op het "goede gevoel" van de president.

De volgende keer ga ik FigmaMake weer eens proberen, dit keer om de gebruikersinterface van onze interne beheertool te vernieuwen. (Als het een beheerdersscherm is... dan zal het vast een succes worden!)

Wat betreft wijzigingen in het LP-ontwerp...

Ja, ik zal hard blijven werken aan dit werk, ook met de hand!

En nu we het toch over de evolutie van AI hebben... Hier is het ontwerp dat is gegenereerd met dezelfde prompts als bij het maken van het eerste artikel.

De kwaliteit van de eerste generatie is in slechts enkele maanden tijd enorm verbeterd, wat behoorlijk verrassend is.

De explosieve toename in nauwkeurigheid is behoorlijk angstaanjagend. Tegenwoordig wil ik elke dag design bestuderen, zodat ik de ontwikkelingen in AI niet misloop.

EnHier is de voltooide website.

De LP zelf voldoet aan de WCAG2.2AA-richtlijnen.En dat doe ik ook.
Lighthouse scoort ook hoog (het kost wat tijd, maar probeer het eens! Soms haal je de maximale score!).
En op mysterieuze wijze,Meertalige ondersteuning！
Voor meertalige ondersteuning kunt u dit artikel raadplegen.Bekijk het ook eens!
Browservertaling is tegenwoordig de norm, maar het is superhandig om tegen lage kosten een vertaalsite te kunnen gebruiken zonder van browser te hoeven wisselen!

Wat vind je ervan?
Vind je niet dat het er best mooi uit is komen te zien?🎵

Ik heb van alles geschreven, maar ik denk dat het hebben van een concept in gedachten me enorm heeft geholpen om minder werk te verzetten! Voorheen zou ik veel tijd hebben besteed aan de schrijffase, en dan moest ik het nog vormgeven en de inhoud aanpassen, wat me nu veel werk heeft bespaard. De volgende keer dat ik AI gebruik, zorg ik ervoor dat ik goede prompts genereer voordat ik begin. Ik heb mezelf ook nog een biertje getrakteerd als beloning.