Ovog puta radio sam brend ramen restorana. Logotip sa mačkom, vizuelni identitet, sajt i objavljivanje: sve sam uradio uz AI. Kad otvorite sajt, prvo vas dočeka mačka koja jede ramen. Ispod su jelovnik, priča o restoranu, lokacija i radno vreme, na japanskom, kineskom i engleskom. Ispod je video, a ako vam je draže da čitate, tekst sledi.
Play videoŽelim da pokažem kako jedan lik nosi ceo projekat: kako smo mačku izabrali iz gomile predloga, a zatim je pretvorili u izgled lokala, ambalažu i animaciju u kojoj jede rezance na vrhu sajta.
Zadatak
Posao je bio da osmislim novi vizuelni identitet za ramen restoran, sa mačkom kao glavnim likom, a zatim da taj identitet prenesem na sajt.
Sam sajt je jednostavan. Posetioci treba da upoznaju restoran, pogledaju jelovnik i pronađu adresu i radno vreme. A od prvog dana morao je da bude na tri jezika: japanskom, kineskom i engleskom.
Jelovnik ima dosta jela (ramen sa supom, aburasoba bez supe, dodaci, meni), pa je deo posla bio da ga rasporedim tako da se lako pregleda.
Kad je to bilo jasno, prvo pitanje je bio lik. Kako zapravo treba da izgleda ova mačka?
Od referenci do mačke blesavog pogleda
Prvo sam skupio reference mačaka u mnogo različitih stilova, da vidim šta mi se dopada pre nego što izaberem pravac.
Zatim sam izabrane slike poslao AI alatu i napisao: pravim brend ramen restorana sa mačkom kao zaštitnim likom; na osnovu ovih referenci napravi nekoliko predloga logotipa.
U ovoj fazi namerno ne postavljam previše ograničenja. Mačka, ramen, okvirni stil, i prostor za istraživanje. Ako mi se u nekom krugu ništa ne dopadne, tražim nove predloge ili menjam reference. Kolekcija koju vidite u videu nastala je tako, krug po krug.
Svaka mačka ima malo drugačiju siluetu, izraz lica i način na koji je povezana sa ramenom. Dok sam birao, postavljao sam dva pitanja:
- Da li se ova mačka lako pamti?
- Da li će funkcionisati i van logotipa, na jelovniku, ambalaži i sajtu?
Izabrali smo ovu crnu mačku. Deluje pomalo zbunjeno, i upravo zbog tog izraza sam želeo da nastavim s njom.
Kako jedna mačka postaje brend
Sledeći korak bio je da od logotipa razvijem ceo vizuelni identitet.
Zadržao sam celu mačku, ali sam izdvojio i njene oči kao jednostavan jednobojni znak. Tako svaki materijal ima dve opcije: cela mačka gde ima mesta, ili samo oči gde nema, a lik se i dalje prepoznaje.
Oko ta dva elementa generisao sam tablu lokala, svetleću reklamu, jelovnik, kesu za poneti i posuđe.
Kad se sve stavi jedno pored drugog, brzo se vidi odgovor na pravo pitanje: može li ova mačka da nosi ceo brend i da li svi ovi delovi deluju kao celina? (Da bude jasno, ovo su prikazi kako se identitet primenjuje, a ne fotografije gotovog lokala.)
Prvo plan sajta, zatim dizajn sistem
Pre bilo kakvog dizajna isplanirao sam strukturu. Sajt ima jednu stranicu sa četiri dela, odozgo nadole:
- Hero sekcija, da mačka bude prvo što zapamtite
- Jelovnik
- O nama
- Lokacija, sa mapom i radnim vremenom
Zatim priprema: novi repozitorijum na GitHubu, lokalni folder za projekat i novi Design System u Claude Designu.
Uneo sam opis projekta i dodao materijale brenda: logotip, mačku i prikaze primene. U opisu sam naveo šta je na sajtu, koja tri jezika treba podržati i kako želim da se materijali koriste. Sve što je do tada urađeno postalo je osnova za ovaj korak.
Dobio sam prilično kompletan dizajnerski dokument: opšti stil, ključne detalje i pravila za projekat. Od tog trenutka izrada je mogla da prati njega.
Predaja dizajna Claude Codeu
Kad je dizajn bio gotov, kliknuo sam Share, izabrao slanje u Claude Code, lokalni režim sa odgovarajućim fajlovima, i kopirao prompt za predaju koji mi je dao.
Zatim nova sesija, sa radnim direktorijumom u tom lokalnom projektu. Nalepio sam prompt za predaju i adresu GitHub repozitorijuma, i dodao svoje napomene: struktura od jedne stranice, tri jezika i kako koristiti materijale brenda.
Ispod haube, ovo je Next.js sajt izvezen kao obični statički fajlovi, sa GSAP-om i Lenisom za animacije pri skrolovanju. Svaki jezik ima svoju adresu (/ja/, /zh/, /en/), a ceo jelovnik je u jednom fajlu, gde svako jelo ima naziv na sva tri jezika.
Prva verzija je po stilu bila blizu, a struktura je pratila plan. Ali niže na stranici mnogo toga je falilo: jelovnik je bio samo tekst, a lokacija i radno vreme prazni. Videlo se kako će sajt izgledati. Sada je svakom delu trebao pravi sadržaj i materijali brenda.
Kako je mačka počela da jede ramen
Počeo sam od hero sekcije. To je prvo što svako vidi i mesto gde sam najviše želeo da mačka pokaže karakter. Želeo sam da se pomera: mačka koja zaista jede ramen.
Zato sam hero podelio na tri sloja: tekst, pozadinu i mačku. Ovako razdvojena, mačka može da se animira zasebno, dok tekst i pozadina ostaju potpuno mirni.
Zatim sam generisao dve slike mačke u malo drugačijim pozama, kao prvi i poslednji kadar animacije u petlji.
Claudeu sam dao slojeve, opisao kako mačka treba da se kreće i gde će se naći na stranici, i zatražio da pozove Higgsfield i napravi animaciju. U praksi su to dva kratka klipa: jedan ide od poze A do poze B, drugi se vraća od B do A. Pušteni jedan za drugim, prave petlju. Oba su generisana na ravnoj plavoj pozadini, da bi mačka mogla čisto da se izdvoji, uz nekoliko kadrova pretapanja na svakom spoju.
Ali prvi i poslednji kadar ne garantuju dobru petlju. Gledajte stvarni pokret, naročito trenutak kad se klip završi i vrati na početak. Tu se vidi da li petlja teče glatko ili se lomi.
Evo verzije koja je završila na sajtu:
Na stranici se pušta sa providnom pozadinom preko hero sekcije, a dok se ne učita, prikazuje se statična slika. U poređenju sa prvobitnom statičnom verzijom, sajt odjednom ima svoj karakter. Ovo mi je omiljeni deo celog projekta: lik koji smo izabrali na samom početku konačno se pomera na sajtu.
Isti trik se kasnije ponovio i u podnožju: mačka koja viri sa donje ivice stranice, sa istom slikom kao prvim i poslednjim kadrom, pa se petlja sama zatvara.
Popunjavanje ostatka
Posle hero sekcije prolazio sam kroz ostale delove jedan po jedan. Pomaže mi da razdvojim zahteve: prvo jelovnik, pa lokacija, svaki put pokazujući tačno mesto i šta treba promeniti, pa se vratim na stranicu da pogledam.
Svaki jezik treba proveriti posebno. Isti naslov na drugom jeziku postaje duži ili kraći, pa osim teksta treba pratiti prelome redova, raspored jelovnika, dugmad i navigaciju.
A pre objavljivanja, proverite posebno računar i telefon. Jelovnik mora da bude lako čitljiv, a praktične stvari kao što su mapa i radno vreme lako dostupne. To gosti zaista koriste.
Objavljivanje na Railwayu
Za hosting sam izabrao Railway, koji mi je jednostavan za početak. Claudeu sam dao adresu Railwayevog vodiča za objavljivanje i zatražio da po njemu objavi ovaj projekat. Delove koji traže vas, poput izbora projekta, autorizacije naloga i podešavanja, uradio sam sam kako su se pojavljivali.
Kad je sajt objavljen, otvorite pravu adresu i prođite kroz njega ponovo. Proverite da li se stranice i slike učitavaju, da li se animacija pušta, i da li rade promena jezika i glavni linkovi. To što sajt radi lokalno ne znači da radi i objavljena verzija.
Šta sve povezuje
Kad pogledam unazad, od prvih referenci mačaka do logotipa, materijala brenda i sajta koji sada može da se poseti, ključ je bio da koraci ostanu povezani:
- Na početku istražujte široko. Neka AI isproba mnogo pravaca u fazi koncepta.
- Odlučite se za jedan lik. Kad je mačka izabrana, svaki materijal je građen oko nje.
- Predajte materijale uz jasan opis. I dizajn sistem i izrada krenuli su od onoga što je urađeno pre njih.
- Pregledajte stvarni rezultat, deo po deo, dok ne bude kako treba.
Više o gotovom brendu i celu početnu stranicu možete da vidite na stranici projekta Neko Ramen.
AI je učestvovao u svakoj fazi ovog projekta. Ja sam najviše birao pravac, pisao zahteve i procenjivao da li svaki rezultat odgovara brendu.
Koji deo biste voleli da detaljnije obradim: dizajn brenda, izradu sajta ili animaciju mačke? Napišite mi u komentarima na YouTubeu, a ispod se prijavite da dobijete sledeći tekst.
