Novi sajt je na mreži. Prepravka uz AI trajala je nedelju dana, uz nekoliko promena plana usput. Ispod je video, a ako vam je draže da čitate, kratka verzija sledi.
Play videoMalo konteksta: sedam godina sam radio kao produkt menadžer i zapravo ne znam baš da programiram. Ali poslednje tri godine pravim projekte uz pomoć AI-ja, a ovaj sajt je jedan od njih.
Šta nije valjalo
Stari sajt je bio aktivan više od godinu dana. I dalje mi se dopadao, ali neke stvari su počele da mi smetaju:
- Hero sekcija. Dosadio mi je efekat u pozadini. Hteo sam da ja budem deo dizajna i da sajt dobije više ličnosti.
- Projekti. Imao sam zid projekata i izdvojenu sekciju, ali da biste saznali išta više, morali ste da kliknete dalje, a učitavanje nije izgledalo sjajno.
- Usluge. Nabrajale su moje veštine, ali klijent bez tehničkog predznanja i dalje bi mogao da se pita šta zapravo mogu da uradim za njega.
- Ono što je falilo. Želeo sam blog i prijavu na mejling listu.
Plan je, dakle, bio: odrediti izgled, osmisliti ponovo projekte i usluge, pa dodati nove funkcije.
Potraga za izgledom
Počeo sam od referenci: sajtova, slika, rasporeda, svega što mi je zapelo za oko. Jedan pravac koji sam hteo da isprobam bio je realističan lik. Mnogo sajtova koristi crtane 3D likove; hteo sam da vidim šta još AI može.
Isprobao sam nekoliko koncepata: crtanu 3D verziju sebe, sebe kako sedim u vodi, samo lik bez scene i snimak odozgo okružen ogledalima. Ogledala su izgledala odlično kao fotografija, ali bi zbog svih tih odraza bilo teško zadržati lik doslednim kad krene da se pomera.
Izabrao sam stvarnu osobu koja stoji na oblacima, scenu koja ne bi mogla da postoji.
Kako da statična slika oživi
Poslao sam koncept Claude-u i podelili smo scenu na slojeve: oblaci u pokretu pozadi, ime JACK MIAO u sredini, ja ispred, a navigacija i tekst na vrhu.
Za lik je ideja bila da napravim snimke na zelenom platnu na kojima gledam gore, dole, levo i desno, i da se smenjuju prema položaju miša, tako da izgleda kao da pratim vaš kursor. Zeleno platno omogućava da lik čisto stane između ostalih slojeva.
Hteo sam i prelaz na izlazu iz hero sekcije, kao da propadate kroz oblake i izlazite ispod njih. Prvo sam pokušao da napravim oblake u Blenderu, ali su posle nekoliko krugova i dalje bili daleko od koncepta. Umesto da jurim plaćenu scenu sa oblacima, prešao sam na video.
Claude je napravio spisak potrebnih materijala i napisao promptove za video na osnovu originalnog prompta za koncept. Povezao sam Claude sa Higgsfieldom preko API-ja, generisao probne snimke i, kad je pravac proradio, renderovao finalne verzije u 4K. Usledilo je mnogo vraćanja unazad: ispravljanje grešaka u slici, postavljanje snimaka na stranicu, provera, ponovno generisanje.
Projekti: pad kroz nebo
Ova sekcija je zahtevala najviše pokušaja. Bela pozadina sa projektima na rotirajućem cilindru. Plavo nebo. Oblaci u pokretu. Ništa nije delovalo kako treba.
Prekretnica je bila slika sa Pinteresta: padobranac u položaju slobodnog pada, tačno u sredini rama. To mi je dalo priču: na vrhu sajta stojim na oblacima, skrolujete naniže kroz njih, a u sekciji projekata jedna figura pada kroz nebo.
Isti postupak: promptovi sa Claude-om, snimci iz Higgsfielda, doterivanje na stranici. Spisak projekata sam skratio na mali izbor.
Jedan deo plana se nije ostvario. Nameravao sam da uklonim stranice sa detaljima projekata, a na kraju sam ih zadržao. Manje projekata na stranici, ali i dalje možete da kliknete i pogledate izbliza.
Usluge: reći jasno
Cilj je bio jednostavan: da bude odmah jasno u čemu mogu da pomognem. Pokreta ima dovoljno na ostatku sajta, pa su ovde usluge prosto napisane jednostavnim rečima.
Da bi se priča nastavila, generisao sam verziju sebe kako visim na balonima i animirao je da lebdi tamo-amo iza teksta. Tekst objašnjava, a lik povezuje ovu sekciju sa ostatkom.
Blog, prijava i poslednja promena plana
Blog i prijava na mejling listu su u poređenju s tim prošli glatko. Claude je napravio oboje, a rezultat upravo čitate.
U podnožju sam poslednji put promenio pravac. Prva ideja je bio taster tastature koji lebdi na nebu i otvara formular za upit o projektu. Napravljen u kodu, nije imao pravi izgled. Modelovan u Blenderu, bio je bliže, ali i dalje ne sasvim.
Zato sam ga zamenio nečim lakšim za izvođenje: prozorom koji lebdi na nebu, a kroz njega se vidim kako radim. Time se niz zaokružio: stojim na oblacima, padam kroz nebo, lebdim na balonima, i na kraju pogled na mesto gde radim.
Iza kulisa sam još unapredio zaštitu od botova, ažurirao API endpointe i promenio način na koji se sajt objavljuje. To se ne vidi na stranici, pa ću o tome nekom drugom prilikom.
Šta sam naučio
Neke ideje su stigle do kraja. Oblaci u Blenderu, rotirajući zid projekata i taster nisu, a svaka je pre toga prošla kroz nekoliko pokušaja. Ponekad sam menjao način izrade, a ponekad samu ideju.
To je zapravo bio ceo proces: dovesti ideju do tačke kad može da se vidi, proveriti kako stvarno funkcioniše i odlučiti da li nastaviti ili probati nešto drugo. AI čini taj krug dovoljno brzim da se za nedelju dana ponovi mnogo puta.
Proskrolujte sajt od vrha, a ako želite da vidite šta ću sledeće napraviti, prijavite se ispod.
