KG Projekt — strona, na której dom powstaje przy scrollu
Architekt sprzedaje coś, czego jeszcze nie ma — dom istnieje tylko na wizualizacji. Strona krakowskiej pracowni KG Projekt robi z tego swoją największą zaletę: przy przewijaniu na pustej, zaśnieżonej działce składa się dom, a każda realizacja ma własną podstronę z wizualizacją, budową i efektem.
01 — Wyzwanie
Pokazać dom, którego jeszcze nie ma
KG Projekt od ponad 15 lat prowadzi inwestorów od pierwszego szkicu, przez fotorealistyczną wizualizację 3D, aż po prawomocne pozwolenie na budowę. Klient pracowni przychodzi z mapą działki i pytaniem: jak to będzie wyglądać?
Zwykła galeria zdjęć tu nie wystarczy — najmocniejszym materiałem pracowni są wizualizacje i to, jak blisko gotowy dom trzyma się obrazu sprzed budowy. Strona musiała opowiedzieć tę drogę: od pustej działki do domu z zapalonym światłem.
Drugi cel to Google. Ludzie szukają architekta w swojej okolicy — w Krakowie, Wieliczce, Mogilanach — więc każda realizacja powinna móc się wyświetlić na zapytanie z nazwą miejsca.
Materiał od klienta
Od wizualizacji do budowy
Wizualizacje 3D i zdjęcia z placów budowy — to z nich powstały podstrony realizacji.
02 — Proces
Od mapy działki do strony w sieci
Ta sama logika co w pracy architekta: najpierw analiza, potem koncepcja, dokumentacja i dopiero budowa.
-
01
Rozmowa i materiały
Wizualizacje, zdjęcia z budów, opinie
Przejrzeliśmy archiwum pracowni: wizualizacje, zdjęcia z budów i gotowych domów, opinie inwestorów z Google. Ustaliliśmy, które realizacje pokazać jako pierwsze i jak nazwać usługi tak, jak wpisują je ludzie w wyszukiwarkę.
- wybór realizacji
- nazwy usług
- opinie z Google
-
02
Kierunek wizualny
Monochrom, jak arkusz rysunku technicznego
Tusz i papier zamiast kolorów, cienka ramka wokół pierwszego ekranu jak obramowanie arkusza, współrzędne geograficzne i adres pracowni zapisane krojem maszynowym jak w tabelce rysunku. Szeroki, mocny krój nagłówków, a druga linia tytułu tylko obrysowana — „zanim powstanie”.
- monochrom
- ramka arkusza
- tabelka z metadanymi
-
03
Hero z klatek
Animacja pocięta na 89 obrazów
Animację budowy domu pociąłem na 89 klatek, które rysuje element canvas w rytm przewijania. Klatki ładują się kolejką po kilka naraz, a kadr jest przyklejony zwykłym CSS-owym sticky zamiast ciężkiego „pinowania” — na telefonach nie szarpie przy chowaniu paska adresu.
- canvas
- kolejka ładowania
- sticky zamiast pinu
-
04
Realizacje pod SEO lokalne
Każda budowa ma własny adres w sieci
Zamiast jednej galerii — osobna podstrona dla każdej realizacji: Kraków ul. Balanówka, Kraków ul. Dobrowolskiego, Wieliczka, Mogilany, Bibice, Oświęcim. Na każdej metryczka (lokalizacja, typ, rok, status) i trzy etapy: wizualizacja 3D, budowa, gotowy dom.
- podstrony lokalizacji
- metryczka
- 3 etapy
-
05
Panel treści
Nowa realizacja bez programisty
Pracownia dodaje realizacje sama: nazwa, metryczka, zdjęcia z każdego etapu, kolejność na liście, zapowiedzi „Wkrótce”. Podstrona i wpis w mapie witryny generują się automatycznie. Zapis i publikacja to dwa osobne kroki, żeby można było spokojnie przygotować wpis przed pokazaniem go światu.
- Sveltia CMS
- zapisz ≠ opublikuj
- instrukcja
-
06
SEO, RODO, start
Szybko mimo ciężkiej animacji
Pierwszy ekran ładuje się ze zwykłego zdjęcia, a klatki dociągają się w tle. Tytuły z nazwą miasta, dane strukturalne pracowni, mapa witryny z podstronami realizacji, baner cookies i polityka prywatności.
- LCP ze zdjęcia
- sitemap
- RODO
03 — Zobacz, jak to działa
Przewiń, a dom złoży się na działce
Przekodowany fragment hero: 30 z 89 klatek, ten sam canvas i ten sam sposób rysowania. Przewijaj stronę albo chwyć suwak — możesz też odtworzyć całość przyciskiem.
Dom gotowy
Zobacz swój dom,
zanim powstanie
Na stronie klienta animacja trwa przez cały pierwszy ekran i kończy się dokładnie wtedy, gdy wjeżdża sekcja o pracowni. Na słabszych telefonach dalej działa płynnie, bo przeglądarka podmienia tylko obraz w jednym elemencie — nic się nie przelicza.
Galeria sekcji
Portfolio, które ma strukturę
Zrzuty z działającej strony kgprojektarchitekci.pl — najedź, żeby przybliżyć.
04 — Szczegóły
Pierwszy ekran jak arkusz rysunku
- „Zanim powstanie” — tylko kontur
Druga linia tytułu jest obrysowana, nie wypełniona. Jak dom na rzucie, który dopiero ma się wypełnić. Typografia mówi to samo co animacja.
- Ramka arkusza
Cienka linia wokół całego kadru, jak obramowanie arkusza rysunku. Porządkuje pierwszy ekran i od razu ustawia ton: tu pracują ludzie od precyzji.
- Tabelka z metadanymi
Współrzędne pracowni, adres i staż zapisane krojem maszynowym — jak tabelka w rogu rysunku technicznego.
- Podpowiedź przewijania
Pionowy napis „scroll” sugeruje, że w pierwszym ekranie coś się wydarzy, zanim pojawi się kolejna sekcja.
- Telefon zawsze pod ręką
Numer pracowni w nagłówku, czytelny i klikalny na każdej podstronie.
- Jedno główne wezwanie
„Umów konsultację” jako jedyny pełny przycisk. Portfolio jest obok, ale jako link — żeby było jasne, co jest najważniejsze.
Cała strona
Od pierwszego ekranu do stopki
Strona główna pracowni od domu składanego z klatek, przez pracownię, usługi i proces, po stos realizacji, galerię i opinie inwestorów. Przewijaj — ramka jedzie razem ze stroną.
05 — Portfolio
Realizacje jako stos kart
Pięć rodzajów projektów — domy jednorodzinne, osiedla, przebudowy i inne — przewija się jak przekładane plansze. Każda ma duże zdjęcie w tle, krótki opis i trzy kadry jak przypięte do tablicy odbitki.
Kliknięcie prowadzi do podstrony konkretnej realizacji. Tam inwestor widzi porównanie, którego szuka: wizualizację 3D obok zdjęć z budowy i gotowego domu.
Proces pracowni w czterech krokach
„Od działki do pozwolenia” rozpisane jako cztery kolumny: rozmowa i analiza działki, koncepcja i wizualizacja, projekt i uzgodnienia, pozwolenie i budowa. Każdy krok kończy się listą tego, co inwestor dostaje do ręki.
Jasny proces odpowiada na najczęstsze pytanie przed pierwszym telefonem: „co się będzie działo i kiedy?”.
06 — Co dostała pracownia
Portfolio, które pracuje w Google
Pierwsze wrażenie, które się pamięta
Dom składany z klatek w hero — wizualizacja przestaje być obrazkiem, staje się historią.
Strona na każdą lokalizację
Każda realizacja to osobny adres z nazwą miejscowości — szansa na wyświetlenie w lokalnych wynikach.
Samodzielne dodawanie realizacji
Panel po polsku z instrukcją: zdjęcia, metryczka, kolejność, zapowiedzi. Podstrona tworzy się sama.
Szybkość mimo animacji
Zdjęcie w pierwszym ekranie, klatki w tle, sticky zamiast pinu. Płynnie także na telefonie.
Pytania
Strona dla architekta — najczęstsze pytania
Czy taka animacja nie spowalnia strony?
Nie, jeśli jest zrobiona dobrze. Pierwszy ekran wyświetla zwykłe zdjęcie, a klatki dociągają się w tle małymi porcjami. Animacja tylko podmienia obraz w jednym elemencie, więc przeglądarka nie musi przeliczać całej strony.
Czy mogę sam dodawać nowe realizacje?
Tak. W panelu dodajesz nazwę, lokalizację, zdjęcia z każdego etapu i opis — podstrona realizacji i wpis w mapie witryny generują się automatycznie.
Dlaczego każda realizacja ma osobną podstronę?
Bo ludzie szukają architekta „w okolicy”. Podstrona „Dom jednorodzinny — Wieliczka” ma szansę wyświetlić się na zapytanie z nazwą Wieliczki. Jedna zbiorcza galeria takiej szansy nie daje.
Ile kosztuje strona dla pracowni architektonicznej?
Strony zaczynają się od 1 500 zł netto, ale portfolio z animacją, podstronami realizacji i panelem to większy zakres — każdy projekt wyceniam indywidualnie. Zobacz cennik albo poproś o darmową wycenę.
Projektujesz domy? Pokażmy je, zanim powstaną.
Masz wizualizacje, zdjęcia z budów i realizacje w kilku miejscowościach? Zrobimy z nich portfolio, które sprzedaje i wyświetla się w Google.