Od praznog placa do prve večere: sajt za graditelja luksuznih kuća

Ovaj projekat je sajt za Structiv, studio iz šire oblasti Dalasa koji projektuje i gradi kuće po meri. Sajt počinje praznim placem koji se za petnaest sekundi pretvara u gotovo imanje. Zatim se skroluje u stranu kroz sedam ekrana: crteže, osvetljenje, enterijer, proces, kalkulator cene i sam studio. U svakom koraku sam radio uz AI. Ispod je video, a ako vam je draže da čitate, tekst sledi.

Play video

Video prati izradu redom. Ovaj tekst je više o razmišljanju: zašto sajt počinje filmom, zašto se skroluje u stranu i šta sam izbacio kad je sve proradilo u pregledaču.

Četiri pitanja pre bilo kakvog dizajna

Zadatak se svodio na četiri stvari koje sajt mora da uradi:

1. Da za nekoliko sekundi objasni da jedan tim radi sve: projektovanje, gradnju i enterijer, sve do predaje ključeva.
2. Da deluje vrhunski i da se pamti, a da ne liči na oglas za nekretnine.
3. Da odgovori na ono što klijente brine pre gradnje: koliko će koštati, koliko će trajati i ko je odgovoran?
4. Da dovede prave upite, a onima kojima budžet ili potrebe ne odgovaraju pomogne da to sami vide, pre nego što iko potroši vreme na poziv.

Postojala je i jedna stvarna kuća oko koje je sve trebalo da se gradi. Svaka slika i svaki ekran morali su da prikazuju tu istu kuću: isti krov, iste prozore, isti prilaz.

Prva tačka je bila najvažnija. „Jedan tim, od početka do kraja“ lako je reći i lako je preskočiti. To kaže svaki graditelj. Zato sam želeo da posetioci to vide kako se dešava, umesto da pročitaju.

Jedna rečenica, devet kadrova

Ideja: sajt otvoriti jednim neprekidnim kadrom, prazan plac koji polako postaje dom u kom neko zaista živi. Bez rezova i bez skakanja između projekata, samo jedna kuća, jedna kamera i rad jednog tima.

Pre nego što sam napravio ijednu sliku, razložio sam taj put na devet kadrova:

Svaki red ima svoj zadatak. Prvi red započinje gradnju: prazan plac, bager, temelj. Drugi red kući daje oblik: konstrukcija, fasada, gotova kuća. Treći red prelazi sa gradnje na život: kroz ulazna vrata, porodica na sofi, pa gore u vazduh, na celo imanje.

Taj poslednji red je smisao filma. Sajt graditelja lako bi mogao da stane na „gotovoj kući“. Ali klijent ne kupuje zgradu, kupuje dan useljenja. Zato film pre kraja ulazi unutra.

Kad je knjiga snimanja bila gotova, napravio sam slike za svaki kadar. To je trajalo mnogo krugova generisanja i odbacivanja, a merilo nije bilo da li jedan kadar lepo izgleda. Stavio sam ceo set jedan pored drugog i pitao se: da li je očigledno da je to ista kuća u različitim fazama? Da li su prozori na istom mestu? Da li prilaz zavija isto? Lep kadar koji kvari kontinuitet išao je u kantu, jer bi film držao celinu samo ako svaki kadar vodi u sledeći.

Na sajtu film nosi malo podataka uživo: brojač dana od Day 001 do Day 412 i oznaku trenutne faze (plac i temelj, konstrukcija, omotač, pejzaž i završni radovi). Uvodni naslov je „Every estate starts as dirt.“, a završni „From first dig to first dinner.“ Kad se kamera smiri na pogledu iz vazduha, na kući se pojavi pet tačaka (krovni prozor, bazen, prilazni plato, maslinjak, kamena fasada), i svaka otvara malu karticu sa detaljem.

Zašto u stranu, i zašto tehnički crteži

Za ostatak sajta želeo sam da samo pregledanje deluje kao kretanje putem, korak po korak. Zato se skroluje horizontalno, jedan ceo ekran odjednom.

Ideja koja je sve povezala došla je iz sveta samog klijenta. Arhitekte kuću predaju kao komplet crteža: A-00, A-01, A-02 i tako dalje. Zato je svaki ekran postao jedan list, numerisan od A-00 do A-06, a prelazak na sledeći ekran deluje kao okretanje na sledeći crtež. Tipografija, tanke linije, topla boja papira i jedan bronzani akcenat proizlaze iz te ideje.

Pre bilo kakvog vizuelnog dizajna, svakom listu sam dao jedan zadatak:

Redosled je levak. Prva četiri lista privlače pažnju i grade poverenje, sledeća dva odgovaraju na praktična pitanja, i tek tada sajt traži poziv. Ako nastavite da skrolujete posle poslednjeg lista, vraćate se na prazan plac. Priča o jednoj završenoj kući postaje poziv da se započne sledeća.

Tekst koji zvuči kao graditelj

Pre naslova postavio sam nekoliko pravila za tekst. Kratko i izjavno. Brojevi gde god je moguće: dani, kvadratne stope, meseci. I bez „dream home“, „luxury living“ ili „world-class“. Takve fraze čine da sajt zvuči kao reklama, a ova publika je videla dovoljno reklama.

Naslovi su na kraju postali jednostavne izjave, svaka iznosi tvrdnju koju njen list zatim pokazuje:

• Designed in-house. Built by the same hands. (Projektovano kod nas. Izgrađeno istim rukama.)
• Light is a material. (Svetlo je materijal.)
• Finished by the team that framed it. (Završio je tim koji je podigao konstrukciju.)
• A simpler, faster path to an exceptional home. (Jednostavniji, brži put do izuzetne kuće.)
• What will your home cost? (Koliko će vaša kuća koštati?)
• One team. From dirt to dinner. (Jedan tim. Od zemlje do večere.)

List Elevation je najjasniji primer pokazivanja umesto tvrdnje. Leva polovina je crtež precrtan sa fotografije, liniju po liniju, a desna polovina je gotova kuća. Povucite razdelnik i crtež postaje zgrada. Posle toga naslov ne mora mnogo da ubeđuje.

Kalkulator odgovara na najteže pitanje

Pitanje koje ljudi najnerado postavljaju graditelju je „koliko?“. Zato je dobilo svoj list.

Pet unosa: kvadratura, nivo opreme, status placa, broj spratova, i bazen sa prostorom za boravak napolju. Rezultat je raspon, a ne jedan broj: sa podrazumevanim vrednostima $3.8M–$4.6M i 14–18 meseci, podeljeno na projektovanje, gradnju i enterijer. Ispod stoji rečenica da je raspon okviran za oblast Dalasa i da konačna cena dolazi posle obilaska placa.

Nekoliko odluka je ovde bilo bitno:

• Raspon, a ne ponuda. Jedan broj deluje kao obećanje koje niko ne može da održi pre nego što vidi plac. Raspon je pošten i i dalje koristan.
• Bez imejla. Procena je tu da posetiocima pomogne da odluče, ne da ih uhvati. Ako im odgovara, dugme odmah ispod rezultata otvara formular za konsultacije sa već popunjenom procenom.
• Filtrira koliko i prodaje. Neko ko se nada kući od milion dolara za trideset sekundi sazna da ovo nije pravi studio, i to je dobar ishod za obe strane. To je bila četvrta tačka zadatka.

Iza njega je jedna jednostavna formula (veličina × cena za nivo opreme, plus fiksni iznosi za bazen ili rušenje postojeće kuće), sa svim brojevima u jednoj datoteci. Kad klijent želi da promeni cenu, to je jedna izmena.

List Process u istom duhu odgovara na pitanje „koliko traje“. Dve vremenske linije na istoj skali: tradicionalni put, gde projektovanje, dozvole, tender, gradnja i završni radovi idu jedno za drugim tokom 18–24 meseca, i projektuj-izgradi, gde se faze preklapaju i završavaju za 12–16. Razlika se vidi pre nego što pročitate ijednu reč.

Od koncepata do pravog pregledača

Pre razvoja napravio sam detaljne koncept-slike svakog lista, da proverim da li fotografije, tipografija i boje rade zajedno i da li je ritam dobar. Zatim sam sve pretvorio u dizajn sistem u Claude Designu, a dizajn, zadatak i beleške za razvoj predao Claude Codeu.

Prva verzija je stigla otprilike do 80%. Struktura i glavni vizuali odgovarali su planu. Ali bilo je dovoljno nekoliko sekundi korišćenja da se oseti šta nije u redu: skrolovanje je imalo čudnu inerciju, prelazak između ekrana je zastajkivao, a deo tipografije nije bio onakav kakav sam želeo.

Koncept-slike ništa od toga ne mogu da pokažu. One se ne skroluju. Zato je sledeća faza bila o tome kakav je osećaj koristiti sajt, a dobar deo posla bio je oduzimanje:

• Jedan ekran po potezu. Tačped nastavlja da šalje skrol događaje i kad podignete prste, pa je jedan jak potez mogao da preskoči dva ekrana. Sada pokret pomera tačno jedan ekran, a lagani pomak se vraća nazad.
• Film se pušta sam. U početku je skrolovanje premotavalo film. Zvuči pametno, ali je ritam priče prepuštalo zglobu posetioca, i većina ljudi je ili žurila ili zaglavila. Sada se pušta sam, skraćen na petnaest sekundi, a tačke se pojavljuju kad se završi.
• Manje ukrasa sa crteža. Prva verzija je imala lenjir napretka, pečat na svakom listu, mrežu koja prelazi preko ekrana između listova i brojke preko filma. Svaki od njih je bio u konceptu, a zajedno su bili buka. Izbacio sam ih. Ideja crteža opstaje u strukturi, tipografiji i boji papira, i jača je zato što je tiša.
• Telefoni imaju svoj raspored. Skrolovanje u stranu je ideja za desktop. Na telefonu se listovi slažu vertikalno, petlja postaje dugme „Back to the beginning“, a ko je uključio smanjenje animacija vidi fotografiju iz vazduha sa dugmetom za puštanje filma.

Šta nosim u sledeći projekat

1. Pronađite jednu rečenicu koju klijent mora da prenese. Ovde je to bilo „jedan tim, od početka do kraja“, a film, struktura i veći deo teksta izrasli su iz nje.
2. Knjiga snimanja pre generisanja. Devet skica je odredilo šta svaki trenutak treba da kaže, pa su slike imale pravac umesto da se biraju jedna po jedna.
3. Vizuale procenjujte kao celinu. Kontinuitet je važniji od bilo kog pojedinačnog lepog kadra.
4. Dajte svakom ekranu jedno pitanje na koje odgovara, i poređajte ih redom kojim bi ih klijent postavio.
5. Očekujte da pregledač promeni plan. Koncept određuje izgled; osećaj se vidi tek kad možete da skrolujete, a rešenje je često da se nešto ukloni.

Ekrane i ceo film možete da vidite na stranici projekta Structiv, ili sami isprobajte sajt uživo.

Koji deo biste voleli da detaljnije obradim: film o gradnji, horizontalno skrolovanje ili tok rada od Claude Designa do Claude Codea? Napišite mi u komentarima na YouTubeu, a ispod se prijavite da dobijete sledeći tekst.