NOVA Atelier

Šest projekata koji ne smeju da liče jedan na drugi.

Arhitektonski atelje se ne predstavlja sloganima nego radovima. Fotografija mora da nosi stranicu, a tekst da je prati bez buke. Problem je što većina sajtova ove vrste pretvori portfolio u mrežu sličica, pa posle tri projekta svi počnu da izgledaju isto.

Zadatak je bio da se napravi sistem u kome šest projekata deluju kao delovi istog rada, a da svaki i dalje ima sopstveni ritam. Uz to je trebalo pokriti i sve ostalo što jedan atelje traži: indeks projekata, stranicu o ateljeu, usluge, kontakt i pravne stranice.

Paleta izvedena iz materijala, ne iz trendova.

Boje su preuzete iz onoga čime atelje zaista radi: papir, mastilo, kamen i oksid. Nema čiste bele ni čiste crne, pa fotografije nikada ne udaraju u prazan kontrast. Tamne sekcije koriste isti sistem, samo sa zamenjenim kontekstualnim promenljivama.

• PismoInstrument Serif za naslove daje editorijalni, gotovo štampani ton. Inter Tight nosi tekst, labele i podatke.
• SkalaDevet tipografskih koraka na clamp() funkcijama. Sve se skalira neprekidno, bez skokova između telefona i velikog ekrana.
• MrežaDvanaest kolona sa marginama i razmacima koji rastu zajedno sa ekranom, umesto fiksnih tačaka preloma.

Jedan stil za trinaest stranica.

CSS je podeljen u osamnaest numerisanih blokova, od tokena do smanjenog kretanja. Svaka stranica sklapa se od istih atoma: sekcijsko zaglavlje sa indeksom, medijski blok sa natpisom, red nagrade, harmonika, dugme. Zbog toga studija slučaja i stranica o ateljeu izgledaju kao ista kuća, iako imaju potpuno različit sadržaj.

Tamna sekcija se dobija jednom klasom. Zaglavlje to prepoznaje i menja sopstveni kontrast u hodu, pa logo i navigacija ostaju čitljivi i preko svetle fotografije i preko crne pozadine.

Animacija koja ne sme da zaglavi sadržaj.

Otkrivanje pri skrolu radi preko IntersectionObserver-a, ali sa sigurnosnom mrežom u scroll petlji. Neki pregledači uspavaju observer u pozadinskoj kartici, pa se isti uslov proverava i drugim putem. Sadržaj nikada ne sme da ostane nevidljiv zato što animacija nije stigla da se pokrene.

• 01Prelaz između stranica. Veo se navuče pre navigacije, pa se sledeća stranica otvara bez belog treptaja.
• 02Prilagođeni kursor. Širi se nad medijem i preuzima natpis iz atributa, na primer "Studija".
• 03Paralaksa. Hero fotografije se pomeraju sporije od stranice, sa jačinom zadatom po elementu.
• 04Horizontalna galerija. Prevlačenje mišem i prstom, sa inercijom i bez spoljnih biblioteka.
• 05Sat u zaglavlju. Tačno vreme u Beogradu, sitan detalj koji atelje čini prisutnim.
• 06Smanjeno kretanje. Uz prefers-reduced-motion ceo sloj animacije se gasi, a sadržaj ostaje netaknut.

Ono što se vidi tek kada se koristi.

Kontakt forma proverava svako polje posebno, sa porukama o grešci na srpskom i čipovima za izbor usluge, umesto padajuće liste koju niko ne otvara. Traka o kolačićima pamti izbor i ne postavlja analitiku pre nego što je posetilac zaista prihvati.

Stranica sa pravnim tekstom ima sadržaj sa strane koji prati aktivni odeljak tokom skrola. Sve to su sitnice koje se ne primete dok rade, a odmah se primete kada ih nema.

Statički paket, spreman za lansiranje.

Ceo sajt je jedan CSS fajl, jedan JS fajl i trinaest HTML stranica. Bez framework-a, bez build koraka i bez spoljnih zavisnosti osim dva pisma. To znači da nema šta da se pokvari pri sledećem ažuriranju alata i da se sajt postavlja prevlačenjem foldera.