KonceptProjekt koncepcyjny · pracownia architektury
Osnowa: strona pracowni architektury z cięciami jak w filmie.
To projekt pokazowy ALUK, nie zlecenie. Pracownia „Osnowa” nie istnieje. Wymyśliłem ją, żeby opowiedzieć o architekturze obrazem: wideo, cięciami i rysunkiem. Bez ani jednej karty z ikoną. Strona działa na osnowa.madebyaluk.pl. Taką stronę dla prawdziwej firmy wyceniam indywidualnie, po rozmowie i darmowym szkicu. Jak wyceniam.
01Założenia
Co zobaczysz na stronie.
Pracownia ma kilkanaście projektów i jasny manifest. Jej klient ogląda portfolio jak film. Chce zobaczyć bryłę, światło i detal, nie listę usług. Strona ma dać ten seans i doprowadzić do kontaktu.
Założenie: ciemne tło i duże litery jak w magazynie. Własne kadry i wideo zamiast zdjęć z banku. Jedna długa strona. Plan i proces pokazują warsztat, nie tylko efekt.
01Wideo i obrysowany tytuł.
Na starcie pawilon we mgle, w pętli, pod nazwą pracowni. Wideo rusza po załadowaniu strony. Gdy telefon go nie odtworzy, widać zdjęcie.
02Projekty cięte jak w filmie.
Ta część zostaje na ekranie przez kilka przewinięć. Cztery projekty zmieniają się twardym cięciem, bez przenikania. Obok licznik 01/04 i pasek postępu. Jak w filmie o architekturze.
03Manifest i rysujący się plan.
Manifest pojawia się wiersz po wierszu. Niżej rzut budynku rysuje się kreską, gdy przewijasz. Obok zapalają się cztery kroki pracy.
04Spacer po budynku i nagrody.
Mały kadr wideo rośnie do pełnego ekranu. Przy nagrodach zdjęcie idzie za kursorem i zmienia się przy każdym wierszu. Na telefonie ten efekt jest wyłączony.
02Prawdziwa strona
Jak zrobię to u Ciebie.
Prezentacja to zwykły HTML. Biblioteka animacji ładuje się z zewnętrznego serwera. Twoją stronę buduję tak, żeby łatwo było ją zmieniać i utrzymać.
Bez bazy danych
Strona bez formularzy nie potrzebuje bazy. Buduję ją w Astro, animacje w GSAP. Ruszają dopiero, gdy wczytają się fonty.
Wideo pod kontrolą
Wideo na starcie waży poniżej 1,5 MB. Najpierw widać zdjęcie, wideo rusza po głównej treści. Spacer po budynku ładuje się, gdy do niego dojdziesz.
Ruch z wyłącznikiem
Gdy ktoś wyłączył animacje w systemie, projekty są zwykłą listą zdjęć. Wszystko czyta się bez JavaScriptu.
Telefon osobno
Sekcje zostają na ekranie krócej. Zdjęcie za kursorem jest wyłączone, plan rysuje się szybciej. Sprawdzam na ekranie 390 px przed oddaniem.
03Zastosowanie
Dla kogo jest ten styl?
Ten układ jest dla firm, których produkt się ogląda. Bryła, wnętrze, kadr. Gdy klient szuka terminu, ceny albo telefonu, ten sam seans przeszkadza.
Ten styl pasuje
- pracownie architektury i wnętrz, studia projektowe, fotografowie
- deweloperzy premium: widoki, plany, wideo z drona
- studia z portfolio, które wolą zdjęcie za kursorem niż siatkę miniatur
Tu radzę inaczej
- usługi lokalne i remonty: jedna strona, formularz, mapa, opinie
- hotele i gastronomia z ruchem z telefonu: delikatne wejścia tak, długie sekcje nie
- strony z dużą ilością treści do przeszukania
Fakty: tylko to, co zmierzyłem
Marka jest wymyślona. Nie ma sprzedaży ani zapytań, więc ich nie podaję.- Waga przy pierwszym wejściu (1600×1000, po ekranie ładowania)
- 3,88 MB
- Biblioteki animacji
- GSAP + Lenis
04Kontakt
Taka strona dla Twojej marki?
Napisz, co projektujesz i jakie masz zdjęcia. Powiem wprost, czy taki styl ma sens w Twojej branży. Potem dostaniesz zakres, termin i cenę.
- Szkic jest bezpłatny i do niczego nie zobowiązuje
- Raty 30%, 40% i 30%, pierwsza dopiero po akceptacji szkicu
- Domena i hosting na Ciebie, 30 dni poprawek po starcie
Zacznij od darmowego szkicu
Kilka zdań o firmie wystarczy, resztę dopytam. Odpisuję osobiście, tego samego dnia.
Zamów darmowy szkic Umów rozmowę online