Velmont to projekt koncepcyjny serwisu dla marki nieruchomości premium działającej w Poznaniu. Powstał jako ćwiczenie z budowania cyfrowego wizerunku w branży, w której nie wystarczy pokazać metrażu, ceny i listy udogodnień. Strona miała sprzedawać sposób patrzenia na adres: przez architekturę, światło, charakter dzielnicy i styl życia.

Projekt obejmuje znacznie więcej niż pojedynczy landing page. Przygotowałem rozbudowaną stronę główną, katalog nieruchomości z filtrowaniem, indywidualne prezentacje ofert, przewodnik po poznańskich dzielnicach, podstrony lokalizacji, stronę o marce oraz demonstracyjny formularz kontaktowy.

Wszystkie oferty, ceny, adresy i dane kontaktowe mają charakter demonstracyjny. Velmont nie jest działającym biurem nieruchomości, dlatego w case study nie przypisuję projektowi fikcyjnych leadów, transakcji ani wzrostu sprzedaży.

Co chciałem pokazać

projektowanie serwisu premium bez korzystania z gotowego szablonu dla biura nieruchomości,
połączenie mocnego kierunku artystycznego z czytelną architekturą informacji,
opowiadanie o nieruchomości przez zdjęcia, kontekst i charakter lokalizacji,
katalog z filtrami działającymi przez parametry URL,
statycznie generowane podstrony ofert i dzielnic,
responsywny interfejs zaprojektowany od telefonu po duży desktop,
dostępność nawigacji, formularzy i animacji,
świadome zarządzanie obrazami, wideo i zasobami krytycznymi dla LCP,
techniczną bazę SEO dla lokalnego serwisu nieruchomości.

Status projektu: projekt koncepcyjny / portfolio. Dane ofertowe są fikcyjne, a formularz kontaktowy demonstruje walidację bez wysyłania i zapisywania danych.

Od marki do kompletnego doświadczenia

Punktem wyjścia nie była lista podstron, lecz pozycjonowanie marki. Velmont miał mówić spokojnie, selektywnie i bez typowej dla portali ogłoszeniowych presji. Zamiast komunikatów o „najlepszej okazji” czy wizualnego natłoku postawiłem na duże fotografie, zdecydowaną typografię i krótkie teksty skupione na jakości miejsca.

Strona główna rozpoczyna się pełnoekranowym hero z panoramą Poznania i hasłem „Miejsce ma znaczenie”. Dalej narracja przechodzi od filozofii marki przez wybrane nieruchomości i wyszukiwarkę, aż do dzielnic, usług oraz kontaktu. Każda sekcja ma własny rytm, ale pozostaje częścią jednego systemu.

Najważniejszym założeniem było utrzymanie równowagi między emocją a użytecznością. Fotografia i typografia budują charakter, natomiast CTA, filtry, ceny, parametry ofert i nawigacja pozostają czytelne oraz przewidywalne.

Kierunek wizualny: editorial zamiast portalu ogłoszeniowego

Interfejs czerpie z magazynów architektonicznych i katalogów marek premium, a nie z klasycznego układu serwisów ogłoszeniowych. Dzięki temu nieruchomość jest prezentowana jak przemyślany produkt, a nie kolejny rekord w tabeli.

System wizualny opiera się na kilku konsekwentnych decyzjach:

dużej typografii serif w nagłówkach,
neutralnej palecie kremów, piasku, czerni i przygaszonej bieli,
oszczędnej typografii sans-serif dla danych i nawigacji,
pełnoekranowych fotografiach oraz asymetrycznych siatkach,
cienkich liniach i subtelnych podziałach zamiast ciężkich kart,
dużej ilości pustej przestrzeni,
ograniczonej liczbie kolorów akcentowych,
animacjach, które wspierają rytm przewijania, ale nie dominują treści.

Nagłówki wykorzystują krój Cormorant Garamond, a teksty użytkowe Manrope. Oba fonty są ładowane przez next/font, dzięki czemu pozostają częścią procesu budowania aplikacji i nie wymagają osobnego żądania do zewnętrznego serwera Google Fonts.

Strona główna jako opowieść o marce

Home page nie kończy się na hero i kilku kartach. Został zaprojektowany jako pełna ścieżka od pierwszego wrażenia do konkretnego działania.

Po otwarciu użytkownik otrzymuje komunikat marki i dwa wyraźne kierunki: przeglądanie ofert albo rozmowę z doradcą. Kolejna sekcja wyjaśnia perspektywę Velmont, a wybrane nieruchomości pokazują jakość przygotowanej prezentacji.

W dalszej części umieściłem Property Finder, który pozwala rozpocząć wyszukiwanie od transakcji, lokalizacji, rodzaju nieruchomości, liczby pokoi i maksymalnej ceny. Formularz korzysta z metody GET, dlatego wybrane kryteria trafiają do adresu strony ofert. Taki URL można odświeżyć, skopiować lub wykorzystać jako punkt wejścia do konkretnej selekcji.

Następne sekcje prezentują poznańskie dzielnice, wyróżnioną rezydencję, zakres usług oraz końcowe CTA. Zamiast powtarzać ten sam układ kart, projekt zmienia skalę i kompozycję zdjęć, aby utrzymać tempo długiej strony.

Katalog ofert i filtrowanie po stronie serwera

Katalog pozwala filtrować demonstracyjne nieruchomości według:

dzielnicy,
rodzaju: apartament, penthouse, loft lub dom,
transakcji: kupno albo wynajem,
liczby pokoi,
maksymalnej ceny.

Parametry zapytania są parsowane i sprawdzane względem dozwolonych wartości. Nieprawidłowa dzielnica, typ lub cena nie są bezpośrednio przekazywane dalej do logiki aplikacji. Po walidacji Server Component filtruje kolekcję i renderuje wynik razem z komunikatem aria-live informującym o liczbie pasujących nieruchomości.

Celowo zachowałem klasyczny formularz GET. Filtry działają nawet bez budowania ciężkiej warstwy stanu po stronie klienta, a wynik ma własny, zrozumiały adres URL. Dla pustej selekcji przygotowałem osobny stan z wyjaśnieniem i możliwością powrotu do wszystkich ofert.

Prezentacja nieruchomości

Każda oferta ma indywidualną podstronę generowaną na podstawie sluga. Widok rozpoczyna się dużą fotografią, nazwą, dzielnicą, typem transakcji i ceną. Bezpośrednio pod hero znajduje się skrót najważniejszych parametrów: powierzchni, liczby pokoi, piętra i rodzaju transakcji.

Dalsza część podstrony łączy:

opis nieruchomości i krótką narrację sprzedażową,
galerię o zmiennych proporcjach,
listę udogodnień,
opis lokalizacji,
miejsca znajdujące się w pobliżu,
przejście do przewodnika po dzielnicy,
CTA prowadzące do formularza z wybraną ofertą,
powiązane nieruchomości z tej samej dzielnicy lub kategorii.

W projekcie przygotowałem dziesięć demonstracyjnych ofert. Dane są przechowywane w typowanej strukturze TypeScript, dzięki czemu tytuł, cena, parametry, galeria, udogodnienia i relacja z dzielnicą mają jeden spójny model.

Dzielnica jest częścią produktu

W komunikacji nieruchomości premium sam lokal nie wystarcza. Dlatego Velmont posiada osobną warstwę treści poświęconą sześciu dzielnicom Poznania: Jeżycom, Sołaczowi, Staremu Miastu, Grunwaldowi, Łazarzowi i Wildzie.

Każda lokalizacja ma własny opis charakteru, architektury oraz stylu życia. Podstrona dzielnicy łączy te informacje z pasującymi ofertami, a karta konkretnej nieruchomości prowadzi z powrotem do szerszego kontekstu miejsca.

Takie połączenie tworzy dwie naturalne ścieżki użytkownika. Można zacząć od parametrów nieruchomości albo od dzielnicy, w której chce się mieszkać. W realnym wdrożeniu ten model mógłby zostać rozbudowany o lokalne poradniki, dane komunikacyjne, szkoły, tereny zielone i treści wspierające lokalne SEO.

Responsywność projektowana jako osobny kontekst

Mobile nie jest pomniejszoną wersją desktopu. W hero zmienia się kadrowanie, wielkość typografii, pozycja treści i intensywność gradientu zapewniającego kontrast. Drugie CTA zostaje ukryte na najmniejszych ekranach, aby najważniejsze działanie zachowało odpowiednią wagę.

Nawigacja desktopowa zmienia się w pełnoekranowe menu mobilne z obsługą klawiatury. Otwarcie menu blokuje przewijanie dokumentu, fokus pozostaje wewnątrz dialogu, klawisz Escape zamyka panel, a po zamknięciu fokus wraca do przycisku.

Siatki kart, galerie ofert, parametry oraz formularze mają osobne układy dla telefonu, tabletu i desktopu. Zamiast ściskać szerokie tabele lub wielokolumnowe formularze, elementy przechodzą w czytelny, pionowy rytm.

Hero i Core Web Vitals na mobile

Najcięższym elementem pierwszej wersji hero było pełnoekranowe wideo MP4 o rozmiarze około 32 MB. Jednoczesne uruchomienie filmu i priorytetowego obrazu powodowało, że oba zasoby rywalizowały o transfer i dekodowanie podczas najważniejszego momentu ładowania strony.

Rozdzieliłem więc hero na dwie warstwy:

statyczny Server Component z treścią i obrazem LCP,
mały Client Component odpowiedzialny wyłącznie za opcjonalne wideo.

Na telefonach i tabletach film nie jest renderowany ani pobierany. Użytkownik otrzymuje responsywny wariant obrazu przetworzony przez next/image. Na desktopie wideo może zostać dołączone dopiero po zdarzeniu load i w czasie bezczynności przeglądarki, dzięki czemu nie konkuruje z krytycznym renderem.

Film pozostaje wyłączony również wtedy, gdy użytkownik korzysta z Save-Data, wolnego połączenia 2G albo systemowego ustawienia prefers-reduced-motion. Obraz zawsze znajduje się pod warstwą wideo i pozostaje bezpiecznym fallbackiem, jeśli autoplay jest niedostępny.

Dodatkowo usunąłem priorytetowe ładowanie zdjęć ofert znajdujących się kilka ekranów poniżej hero. W wygenerowanym HTML jedynym obrazem preładowywanym na stronie głównej jest właściwy kandydat LCP.

Nie podaję tutaj wyniku Lighthouse jako stałej cechy projektu. Takie wyniki zależą od środowiska testowego, hostingu i wersji aplikacji. Case study opisuje konkretne decyzje implementacyjne, które ograniczają transfer i konkurencję o zasoby na urządzeniach mobilnych.

Dostępność i zachowanie interfejsu

Warstwa wizualna nie powinna utrudniać obsługi strony. Dlatego projekt uwzględnia między innymi:

link pomijający nawigację i prowadzący do głównej treści,
widoczne style focus-visible,
semantyczne nagłówki, listy, formularze i opisy danych,
etykiety przypisane do pól formularzy,
komunikaty błędów połączone przez aria-describedby,
aria-live dla liczby wyników i statusu formularza,
dialog mobilnego menu z kontrolą fokusu,
zatrzymanie oraz skrócenie animacji przy prefers-reduced-motion,
alternatywne opisy fotografii istotnych dla treści.

Animacje wejścia sekcji korzystają z IntersectionObserver i są uruchamiane tylko wtedy, gdy element zbliża się do viewportu. Po pokazaniu element przestaje być obserwowany. Dla osób ograniczających ruch warstwa reveal nie jest aktywowana.

Formularz kontaktowy jako uczciwe demo

Formularz kontaktowy prezentuje kompletny interfejs walidacji dla imienia, adresu e-mail, opcjonalnego telefonu, tematu rozmowy, wiadomości i zgody. Błędy są pokazywane przy odpowiednich polach, a poprawne uzupełnienie wyświetla komunikat sukcesu.

Nie podłączyłem formularza do serwera pocztowego, ponieważ projekt nie reprezentuje działającej firmy. Informacja o demonstracyjnym charakterze znajduje się bezpośrednio przy przycisku i w treści zgody. Wpisane dane nie są wysyłane ani zapisywane.

To ważny detal całego projektu: fikcyjna marka może demonstrować rozwiązanie, ale nie powinna udawać działającej organizacji zbierającej prawdziwe zapytania.

SEO i rendering

Projekt korzysta z App Routera w Next.js 16. Strony ofert i dzielnic mają dynamiczne metadane budowane z danych konkretnego rekordu, natomiast główne podstrony posiadają własne tytuły i opisy.

Podstrony szczegółowe są statycznie generowane na podstawie przygotowanych slugów. Dzięki temu serwer może dostarczyć gotowy HTML z treścią, zamiast czekać na pobranie danych przez JavaScript w przeglądarce. Plik robots.txt pozwala na indeksację i definiuje zasady dla robota Google.

W rzeczywistym wdrożeniu kolejnym etapem byłoby podłączenie CMS lub systemu ofertowego, dodanie mapy witryny, canonicali, danych strukturalnych dla organizacji i ofert oraz automatycznej rewalidacji po zmianie nieruchomości.

Stack technologiczny

Next.js 16 – App Router, Server Components, statyczne generowanie i optymalizacja obrazów,
React 19 – interaktywne menu, formularz i obsługa stanu,
TypeScript – typowane modele ofert, dzielnic i filtrów,
Tailwind CSS 4 – responsywny design system i kompozycja widoków,
next/image – responsywne źródła, lazy loading i kontrola zasobów LCP,
next/font – lokalne dostarczanie Manrope i Cormorant Garamond,
IntersectionObserver – nawigacja reagująca na hero i animacje reveal,
Vercel-ready architecture – statyczne strony i produkcyjny build bez osobnego backendu.

Co pokazuje ten projekt

Velmont pokazuje moje podejście do serwisu premium, w którym design nie jest osobną warstwą doklejoną do gotowej struktury. Marka, treść, model danych, routing i wydajność zostały zaprojektowane jako jeden system.

Najważniejszy nie jest tu pojedynczy efekt wizualny, lecz konsekwencja całego doświadczenia:

strona główna buduje pozycjonowanie marki,
katalog pomaga przejść od inspiracji do kryteriów,
karta oferty prezentuje dane i emocjonalny kontekst,
dzielnice rozszerzają nieruchomość o styl życia,
mobile zachowuje charakter projektu bez pobierania zbędnego wideo,
techniczna architektura daje dobrą bazę pod dalszą rozbudowę.

To przykład projektu dla branży, w której standardowy szablon może pokazać listę ofert, ale nie zawsze potrafi zbudować rozpoznawalny, wiarygodny język marki.

Potrzebujesz serwisu, który prezentuje nieruchomości jak markę, a nie jak kolejny katalog ogłoszeń? Porozmawiajmy o architekturze, treści i kierunku wizualnym projektu.

Velmont – koncepcyjny serwis nieruchomości premium w Next.js

Galeria