Hogyan lesz az AI-ból kreatív designer?

Hogyan zökkenthetjük ki az AI-t a megszokott stílusjegyeiből, hogy valóban egyedi honlapot alkosson? Lépésről lépésre, képeken mutatjuk meg, hogyan jutunk túl az „AI-szagú” megoldásokon, és találunk saját karaktert egy weboldalnak.

Az elképzelésünk egyszerű volt: egy brief alapján az AI készít több különböző webdesigntervet. A felhasználó kiválasztja azt, amelyik a legjobban tetszik neki, majd némi finomítás után ebben a stílusban készül el a végső weboldal.

0. Kérjünk négy minél különbözőbb változatot

A legkézenfekvőbb megközelítés, hogy egyszerűen megkérjük erre az AI-t:

A csatolt brief alapján készíts négy, egymástól minél inkább különböző webdesign-változatot az Authentic Social Media Strategy landingoldalához.

Ezt meg is tettük. Ugyanazt a briefet adtuk oda, amelyet a későbbi lépések bemutatásához is használunk, a megközelítések kiválasztását pedig az AI-ra bíztuk. Nézzük meg, mit kaptunk:

Editorial, Bold, Studio és Workbook — négy terv ugyanarra a briefre. A képek azonos, 1440 px-es desktop-szélességgel készültek; a két fotó generált hangulatkép.

Négy különböző tervet kértünk, de túl sok alapvető döntés ugyanaz maradt. Az oldalak rendezettek, első pillantásra mégis ismerősek: kisebb a választási lehetőség, mint amekkorát a négy eltérő hangulat ígér.

Három hasonlóság különösen szembetűnő:

• Hasonló színvilág. Három változatban meghatározó a vajszínű alap; a sötét változatban is visszatér egy világos, zöldes-krémes felület. A hangsúlyszínek változnak, de az összhatás több helyen rokon.
• Hasonló nyitóképernyő. Három terven balra nagy cím, rövid magyarázat és gombok, jobbra kép vagy grafika. A lila változat eltér az elrendezésben, de ott is a hatalmas főcím vezeti a figyelmet. Ráadásul mind a négy címben megjelenik a dőlt kulcsszó.
• Szinte azonos menü és kezelőelemek. Ugyanott a logó, ugyanazok a menüpontok, jobbra a kiemelt gomb, sok helyen ugyanaz a nyilas megoldás. Ettől már az első pillanatban egy családba tartozónak érezzük őket.

Ha az a benyomásunk, hogy ilyen oldalt már sokszor láttunk, ezek az ismétlődő megoldások segítenek megérteni, miért. Nekünk a nagy ígérettel, hangsúlyos gombokkal és rendezett előnyblokkokkal dolgozó SaaS-cégek honlapjai jutottak eszünkbe róluk. A merész, egyedi tervek helyett túlságosan ismerős megoldásokat kaptunk, különböző hangulatokba öltöztetve.

Hogyan érhetjük el, hogy az AI már a kiinduló tervezési döntéseiben is más irányokat keressen?

1. Kezdjük elölről

Az LLM válaszát erősen befolyásolja a kontextus: a feladat leírása, a korábbi üzenetek és a rendelkezésére bocsátott anyagok. Innen jött az ötletünk: változtassunk azon, miből indul ki. Adjunk neki olyan új szempontot, amely kizökkentheti a megszokott megoldásaiból.

Ehhez feltöltöttem egy grafikai tankönyvet PDF-ben. A Graphic Design School többek között a kompozícióval, a tipográfiával, a színekkel, valamint a képek és a szöveg kapcsolatával foglalkozik. Ebből szerettünk volna minden változathoz más inspirációt beemelni a kontextusba.

A választást a véletlenre bíztuk. Arra kértem az AI-t, hogy egy script segítségével sorsoljon egy oldalszámot. Nézze meg alaposan a kiválasztott oldalt és annak környezetét, olvassa el a szöveget, és vizsgálja meg a szemléltető grafikákat is. Ha az oldal nem ad használható tervezési szempontot, sorsoljon újra.

Ezután fogalmazza meg, milyen designelvet talált, és hogyan alkalmazná azt a briefre. Ez az elv legyen a készülő design fő szervező gondolata: befolyásolja az elrendezést, a képhasználatot vagy a tartalom bemutatását.

Ugyanahhoz a briefhez így négy különböző kiindulópontot kaptunk:

• Aszimmetria: eltérő súlyú kép és szöveg, tudatosan kibillentett, mégis egyensúlyban tartott kompozíció.
• Struktúra és szabadság: közös rácshoz igazodó elemek, amelyeken belül szabadabb képi megoldások jelenhetnek meg.
• Költői képi kommunikáció: hangulatok és asszociációk közvetítik az üzenetet, atmoszférikus fényhullámokkal.
• Szöveg mint kép: a betűk maguk is képi elemmé válnak; itt a „YOU” szó kapott anyagszerű, térbeli megjelenést.

Ezek köré szervezve készültek el a következő designok:

Az előző próbálkozáshoz képest a változatosság és a kreativitás növekedése érezhető. Az új négyesben mind a négy irány saját központi metaforát kapott. A kék változat rácsszerkezete és a „YOU” képpé alakított betűi a kompozíciót is formálják.

Ennek ellenére továbbra is fellelhetők az AI kézjegyei: hasonló menüstruktúra, levegős, sokszor vonalakkal és apró címkékkel tagolt szakaszok, dőlt betűk a főcímben, valamint a címek felett megjelenő apró kiegészítő szövegek.

2. AI kézjegyek célzott eltávolítása

Az AI segítségével összeírtuk, milyen jellegzetességek ismétlődnek a négy designban. Nyolc területet azonosítottunk: a figyelmi hierarchiát, a tipográfiai hangsúlyokat, a képi jelentést, a képalkotás módját, a kompozíciót, a színrendszert, a történetvezetést és a felületi megoldásokat.

Mindegyik visszatérő kézjegyhez alternatív megoldásokat kerestünk. Például az óriási főcím helyett személyes levél vagy kipróbálható feladat indíthatná az oldalt; egyetlen központi metaforakép helyett képsor vagy böngészhető példagyűjtemény mutathatná be az ajánlatot. Így született egy dokumentum, amelyben minden azonosított kézjegy mellett ott szerepeltek a lehetséges alternatívái.

Ezt a dokumentumot visszaadtuk az AI-nak, és ismét bevontuk a véletlent. Mind a négy korábbi változathoz két módosítandó kézjegyet sorsoltattunk, majd mindegyikhez egy alternatív megoldást is. Arra figyeltünk, hogy a különböző designok ne ugyanazokat az alternatívákat kapják: ha ugyanaz a kézjegy több tervnél is előkerült, más-más megoldással váltsuk ki.

Ezután két ágon folytattuk a munkát, ugyanazokkal a kiválasztott kézjegyekkel és alternatívákkal:

• Radikális bontás: azt kértük, hogy az AI bátran bontsa meg a kisorsolt kézjegyekre épülő megoldásokat. Ha ehhez az egész kompozíciót szét kell szednie, tegye meg. Ebben az ágban teret adtunk annak is, hogy a design átmenetileg szétesőbb legyen, ha ez segít kiszabadulni a megszokott szerkezetből.
• Minimális beavatkozás: itt csak annyit változtasson az eredeti terven, amennyi ahhoz szükséges, hogy a kiválasztott kézjegyek ne legyenek egyértelműen felismerhetők. Ami már működik, azt lehetőleg őrizze meg.

Mindkét ág ugyanabból az eredeti designból indult. Így egymás mellett tudtuk megnézni, mire jutunk a megszokott megoldások radikális lebontásával, és mire a célzott, kis változtatásokkal.

3. A kézjegyek radikális kiirtása

A bontás két lépésből állt: megneveztük a kézjegyet, amelyet el szeretnénk távolítani, majd meghatároztuk azt az új irányt vagy működési módot, amely a helyére léphet.

Így a virágos oldalból személyes levél lett. A kék változat középpontjába egy kipróbálható stratégiai döntés került. A fényhullámos irány rajzos történetté alakult, a nagy „YOU” feliratra épülő terv pedig böngészhető példatárrá változott.

Nézzük meg az eredményeket:

A radikális bontás után a tervek tényleg jelentősen megváltoztak. A designok viszont kissé kuszának tűntek, ezért futtattunk rajtuk még egy kört.

Újraépítés kritikai visszajelzések alapján

Megkértük az AI-t, hogy indítson egy külön kritikusi agentet. A kritikus a design desktop- és mobilképei alapján fogalmazzon meg konkrét észrevételeket, tegyen javítási javaslatokat, és pontozza az eredményt egy tízes skálán. Minden értékelés friss kontextusban történjen: a kritikus ne lássa a forráskódot, a korábbi magyarázatokat és az előző pontszámokat.

A javítás menete egy ismételhető kör: az AI dolgozza át a tervet a visszajelzések alapján, majd kérjen újabb véleményezést. A célként kitűzött küszöb legalább 8 pont a 10-ből; amíg ezt nem éri el, újabb kritika és célzott javítás következhet.

A kritika alapján történő újraépítést mind a négy designnál elvégeztük. Az alábbi képeken ezek eredménye látható:

A négy design az újraépítés után. A megőrzött, ezt követő értékelésben 7,4–7,7 pontot kaptak: a 8/10-es cél elérését ennél a négyesnél még nem igazolják az eredmények.

4. Másik út: minimálisan szükséges változtatások

A másik ágban ugyanazokat a kiválasztott szokásokat próbáltuk módosítani, a lehető legkisebb beavatkozással.

A virág és a terrakotta színvilág megmaradt; főként a tipográfiai hangsúlyok változtak. A kék–lime változat meglévő rácsába került a kipróbálható példa. A sötét irány megőrizte a hangulatát, de rajzos képet kapott. A negyedikben továbbra is a „YOU” szerepelt, kisebb képi hangsúllyal és közvetlenebb tartalommal.

Ezekben a verziókban ténylegesen csökkent a felismerhető AI-kézjegyek száma, de még megmaradt néhány ismétlődő fogás. Ezért kértünk még egy tisztítást: kikerültek a szükségtelen címkék, számozások, ismétlődő szlogenek, statisztikasávok és fölösleges tartalmi blokkok.

A képek finomítása

A képi ötlet és az oldalba illesztése két külön tervezési feladatnak bizonyult. Egy jó generált kép is hathat beillesztett téglalapként, ha a háttere, kerete vagy elhelyezése elszigeteli a tartalomtól.

Ezért megkértük az AI-t, hogy játsszon a képek hátterével, ahol indokolt, akár tüntesse is el, és figyeljen arra, hogy a képek jobban illeszkedjenek az oldal tartalmába.

Íme a képek integrálása utáni négyes:

5. Felhasználói visszajelzés beépítése

Megmutattuk a felhasználónak a két ágon elkészült kétszer négy változatot, és megkérdeztük: van-e köztük olyan, amely megihlette, de még nem egészen az, amit szeretne? Olyan, amelyen néhány módosítással lényegesen javítani lehetne?

Az első iránynál a személyes levél működött, de a sötét környezet túl domináns volt. A felhasználó világosabb felületet, a szöveghez jobban kapcsolódó virágot, középre szervezett címeket és néhány kézírásos részletet kért.

A másodiknál a szerkezet tetszett, de az összhatás túl technológiai volt a témához. Ezt a minimális változtatásokkal készült ágból vittük tovább, lágyabb színvilág és lekerekítettebb formák felé.

A harmadik és negyedik iránynál a felhasználó egy-egy már elkészült változatot választott ki.

Az AI ezek alapján finomította az első két designt. Íme a felhasználói visszajelzések után összeállt négyes:

A végső választásban egyszerre volt szerepe a briefnek, a kritikai észrevételeknek és a felhasználó ízlésének. Ezzel a folyamattal a kezdeti, egyszerű kéréshez képest jóval változatosabb, egyedibb és kevésbé „AI-szagú” megoldásokat kaptunk.

Ezt a folyamatot beépítettük a honlapkészítő mentoringba is. Ha te is hasonlóan egyedi honlapot szeretnél készíteni, próbáld ki egy rövid brief beküldésével!