Veebidisainerite töölauale on jõudnud tehisintellekt, astudes rambivalgusesse ja muutes disainerite töö märgatavalt lihtsamaks. Veebimekoos eestvedaja Ines toob siin postituses välja kolm peamist UI/UX-i (kasutajaliidese/kasutajakogemuse) disaini teemadega seotud tehisaru tööriista, mis teda veebilehtede loomisel on palju abistanud.
Need kolm peamist AI abimeest on muutnud veebilehtede loomise protsessi kiiremaks, tõhusamaks ja isegi lõbusamaks.
Bolt.new: sinu isiklik veebidisaini võlur
Kujuta ette, et sul on tööriist, mis suudab ideed silmapilkselt visuaalseks veebileheks muuta. Täpselt nii teeb bolt.new. See on nagu ChatGPT veebidisaineritele, võimaldades kirjeldada oma visiooni lihtsas keeles ja seejärel vaadata, kuidas tehisaru selle ellu äratab.
Selle kasutamiseks pole vaja arendusoskusi, kuid need tulevad kasuks, et saaksid veelgi täpsemalt käsklust sõnastada ja tehtud koodi ise üle vaadata ning vajadusel kohandada.
Bolt.new mäletab ka eelnevaid sõnumeid ühe vestluse jooksul ning annab koodipõhise lahenduse koos seletuse ja visuaalse eelvaatega. Minu jaoks on kõige olulisem eelvaade, mida saab vaadata "Preview" nupust.
- Kirjuta lihtsalt, mida soovid luua: näiteks "futuristlik maandumisleht veebiteenustele lilla ja punase värvipaletiga".
- Bolt.new genereerib koodipõhise lahenduse koos seletuse ja visuaalse eelvaatega, mida saate "Preview" nupust vaadata.
- Tööriist on ideaalne kiireks prototüüpimiseks ja ideede visualiseerimiseks, säästes tundidepikkusest käsitsi disainimisest.
- Võimalik on tulemus ka otse "laivi" panna (deploy).
Tasuta plaanil on kasutamiseks piiratud arv token'eid, nii et sel juhul soovitan luua kohe võimalikult detailse käskluse, et hiljem ei peaks palju muudatusi tegema.
Lisaks laseb platvorm vaadata tulemust "responsive'i" kujul, et saaksid veenduda, kas ka mobiilivaates oleks kõik nii, nagu soovid.
Väikese boonusena lisan ma käsklusesse, et tulemus valmiks Reacti (JavaScripti teek) komponentidena, mis teeb disaini veidi moodsamaks ja lisab ka juurde animatsioone. See küll ei lisa pilte (seda peab ise tegema), kuid kasutab valmis ikoone omaenda teegist.
Veebilehe sisu jaoks andsin konteksti, mida ChatGPT leidis, kui lasin tal tutvuda oma veebisaidiga veebimekoos.ee.
Pildigeneraatorid: lõputu inspiratsiooniallikas
Kui oled kunagi tundnud, et inspiratsioon on otsas, siis AI pildigeneraatorid on heaks päästerõngaks. Olgu selleks DALL-E 3, Midjourney, Leonardo.ai või mõni muu tuntud variant – need on vaid mõned näited tööriistadest, mis suudavad tekstikirjeldustest luua kenasid visuaale.
Miinuseks on nendel lahendustel see, et teenused genereerivad tavaliselt ainult ühe pildi ega loo järjepidevalt mitut sarnast varianti. Seetõttu on pildigeneraatorid kasulikumad üldise lehestiili leidmiseks või mõne teatud sektsiooni kujundamiseks.
Kuna tehisintellekt võib tekitada kirjavigu, siis lõpptulemust ei saa enamasti 1:1 kasutada, vaid peab ise järgi jäljendama.
Näiteks kasutasin DALL-E 3 jaoks järgmist käsklust:
"Tee (avalehe/muu lehe) UX/UI disain. Näita (mida avalehel visuaalselt soovid näha, näiteks siin on üks matkamisega seotud teenus). Pane juurde (CTA, pealkiri, teenused/tooted). Tee see (nimeta värvid või stiil, näiteks soojad värvid ja pruun minimaalse stiiliga). Pane pildil läpaka ekraan otsevaatesse 16:9."
Kui sooviksin saada veebilehe arvutivaadet, siis oleks parem pildi resolutsiooniks määrata maastikuformaat (Landscape, näiteks 16:9). Telefonirakenduse jaoks aga oleks juba targem küsida portreeformaati (9:16).
Lisaks rõhutan oma käskluses ka kasutatavat seadet, millel näidata ning otsevaadet, kuna selleta proovib pildigeneraator mahutada disaini tervele pildile, mis tuleb tihti halvasti välja.
Keelemudelid kui isiklikud kasutajakogemuse testijad
Kui soovid teada, mida kasutajad sinu veebilehest tegelikult arvavad, siis sellised keelemudelid nagu ChatGPT võivad väga hästi kehastuda klientideks ja anda väärtuslikku tagasisidet.
Mulle meeldib kõige kergemal kujul kasutajamugavust testida ja täiendada selliste keelemudelite abil, millel on nägemisvõime (näiteks ChatGPT, Claude, Gemini jne). Tihti on see funktsioon aga tasuta kasutajate jaoks piiratud.
Võttes näitena kõige tuntuma ChatGPT ning kasutades ChatGPT 03-mini-high mudelit, saab arukamaid vastuseid, kuna see mudel kasutab rohkem "mõtlemise ahelat" (chain-of-thought) ja vastab kiirelt.
Kui näitan tehisarule enda tehtud veebilahendust arvuti- kui ka telefonivaatest ning palun kehastuda kliendiks, kes soovib antud teenust või toodet, siis saan käskluse tulemusel teada, mis meeldib, mis häirib ja mis võiks parem olla.
Näiteks ütlesin ChatGPT-le nii:
"Tegu on personaalsete kingituste e-poega. Tegelen hetkel menüüga, nii et siin on menüü arvuti- ja mobiilivaates. Kujuta ette, et oled klient, kes tuli siia kingitust otsima. Kas menüü on piisavalt arusaadav, et leida, mida vajad? Kas miski häirib ja miks?"
Keskendusin siin konkreetselt lehe menüüle nii arvuti- kui ka mobiilivaates. Vastavalt tagasisidele teen muudatusi, mis kaua aega ei võta ja näitan tehisarule tulemust uuesti.
Üks väike trikk, mida mulle meeldib kasutada, on hinnangu küsimine 10 punkti skaalal. Kui tehisaru annab näiteks esimesel korral 6/10 punkti, siis pärast muudatusi võin uuesti küsida ja vaadata, kas hinnang tõuseb ning mis selle põhjuseks on, et saaksin ka ise samaaegselt õppida.
Muidugi on tehisintellekti arvamus ainult abistav tööriist, kuid lõplik arvamus tuleks lasta teha ikka päris kasutajatel.
Tehisaru tööriistad on muutnud veebidisaini maastikku, neid tööriistu saab kasutada targalt ja lasta samal ajal oma loovusel lennata. Kindlasti aitab see kokku hoida aega ning leida inspiratsiooni.
