Biuro Nieruchomości - Strona internetowa biura nieruchomości z wyszukiwarką ofert

Wyzwanie

Biuro ma w ofercie wszystko: kawalerki w centrum, domy pod lasem, siedliska, działki nad jeziorem i grunty rolne. Na starej stronie te ogłoszenia wyglądały jednak tak samo, czyli jak blok tekstu z małym zdjęciem. Nie dało się zawęzić listy do mieszkań z trzema pokojami ani posortować ofert po cenie, a sprzedane nieruchomości mieszały się z aktualnymi. Do tego oferta kredytowa, karta rabatowa i wynajem billboardów ginęły w menu, choć to ważne usługi dodatkowe biura.

Projekt graficzny: spokojny, zaufany i lokalny

Kolory i typografia

Paleta wychodzi od błękitu z logo biura. Kolor marki pojawia się tylko w przyciskach, ikonach, cenach i wyróżnieniach, a resztę strony budują biel, bardzo jasny błękit w co drugiej sekcji i granatowa stopka. Nagłówki składamy elegancką szeryfową Playfair Display, a kluczowe słowa w nich wyróżnia kursywa w kolorze marki, np. „Nieruchomości w Przykładowie i okolicy”. Treść jest w kroju Inter, czytelnym w drobnych parametrach ofert i tabelach.

Logo

Logo jest proste i płaskie: niebieski kwadrat z zaokrąglonymi rogami i białym obrysem domu, obok mały napis „BIURO” i duże „Nieruchomości” tym samym szeryfowym krojem co nagłówki. Znak bez tekstu działa jako favicon i ikona na ekranie telefonu.

Hero z kolażem zdjęć

Pierwszy ekran łączy krótkie hasło z kolażem trzech zdjęć z ofert: krajobraz nad jeziorem, dom i wnętrze mieszkania. Mniejsze zdjęcia w białych ramkach nachodzą na większe, a wszystkie zachowują naturalne proporcje 4:3, więc nic nie jest brutalnie przycięte. Pod hasłem stoi duży rok rozpoczęcia działalności, a pod całością cztery kafle kategorii z liczbą aktualnych ofert.

Animacja procesu sprzedaży

Sekcja „Od pierwszej rozmowy do wydania kluczy” pokazuje pięć kroków transakcji. Obok nich rysuje się kreskowy domek, część po części: grunt, ściany, dach z kominem, okna i drzwi, a na końcu zapalone światło i dym z komina. Każdy krok dokłada jeden element, a animacja leci raz, gdy sekcja pojawi się na ekranie.

Funkcje, które pomagają kupującym i sprzedającym

• Lista ofert z filtrami bez przeładowania strony: zakładki kategorii, liczba pokoi, sortowanie po cenie i powierzchni oraz przełącznik „Pokaż sprzedane”. Wybrana kategoria zostaje w adresie, więc wynik można komuś wysłać.
• Karty ofert z plakietkami „Obniżka ceny”, „Nowa cena”, „Wstrzymana” i „Sprzedana”, ceną za metr i najważniejszymi parametrami w jednej linii.
• Strona oferty z prawdziwą galerią: strzałki, przesuwanie palcem, miniatury, licznik zdjęć i podgląd pełnoekranowy obsługiwany klawiaturą. Obok cena, tabela szczegółów, opiekun oferty i podobne nieruchomości.
• „Zapytaj o ofertę” z wypełnionym formularzem. Przycisk przenosi do kontaktu i od razu wpisuje numer oferty w wiadomość. „Umów wycenę” przełącza temat na sprzedaż.
• Kontakt na jednym ekranie: telefony do działu nieruchomości i kredytów, mapa ładowana dopiero przy przewinięciu, przycisk „Nawiguj” i krótki formularz z polem telefonu w polskim formacie.
• Podstrony usług dodatkowych: kredyty, karta rabatowa u lokalnych partnerów i wynajem billboardów z cennikiem.

SEO: oferty i usługi widoczne w lokalnych wynikach

• Osobne strony kategorii: mieszkania, domy i siedliska, działki i grunty oraz lokale i garaże, każda z własnym tytułem i opisem.
• Każda oferta ma własny adres i dane strukturalne ogłoszenia nieruchomości z ceną i dostępnością, a do tego okruszki nawigacji.
• Dane strukturalne biura nieruchomości z adresem, godzinami otwarcia i obsługiwanym obszarem, a na stronie kredytów sekcja FAQ oznaczona dla Google.
• Karty ofert są w kodzie HTML, a nie doczytywane skryptem, więc wyszukiwarka widzi wszystkie ogłoszenia. Mapa strony aktualizuje się przy każdej publikacji.
• Szybkie ładowanie: statyczny kod, zdjęcia w WebP w kilku rozmiarach i krótkie, czytelne adresy.

Efekt

Oferty da się wreszcie przeglądać tak, jak robi to kupujący: zawęzić, porównać i obejrzeć zdjęcia w dużym rozmiarze. Każde ogłoszenie kończy się prostą drogą do kontaktu z numerem oferty, a sprzedający od razu widzą, jak biuro prowadzi transakcję. Kredyty, karta rabatowa i billboardy dostały własne miejsce, więc nie giną już w menu.