Homy, projekt koncepcyjny
Landing page biura nieruchomości zbudowany od zera jako pokaz warsztatu. Ruch sterowany przewijaniem, typografia w roli głównej, zero gotowych szablonów. Całość w czystym HTML, CSS i JavaScript - bez frameworka i bez buildera.
PageSpeed Insights · widok desktop
Po co to powstało
Homy nie było zleceniem. Zbudowałem tę stronę wyłącznie na własne potrzeby, żeby pokazać, w jakim stylu potrafię pracować, kiedy nikt nie ogranicza mnie gotowym logotypem, cudzymi zdjęciami ani szablonem odziedziczonym po poprzednim wykonawcy.
Branża nieruchomości nie jest tu przypadkowa. To jeden z najtrudniejszych tematów wizualnych: prawie każda strona w tej kategorii wygląda tak samo, bo opiera się na wyszukiwarce ofert i siatce zdjęć. Chciałem sprawdzić, ile da się z tego wycisnąć bez zmiany struktury, samą kompozycją, typografią i tempem, w jakim treść pojawia się na ekranie.
Zadanie takiej strony w realnym projekcie jest jedno: doprowadzić człowieka do zgłoszenia albo telefonu. Dlatego mimo rozbudowanej warstwy wizualnej całość jest ułożona jak lejek, a nie jak galeria. Każda sekcja odpowiada na jedno pytanie i przesuwa czytelnika o krok dalej.
Przewiń
Ekran obok przewija się razem z tekstem. Czytasz o sekcji, a strona sama do niej dojeżdża.
Zamiast zdjęcia domu na całą szerokość i napisu na środku, pierwszy ekran to kompozycja z tekstu. Nagłówek wchodzi partiami, w rytmie, który daje czas na przeczytanie, a nie wszystko naraz.
Nieruchomości pojawiają się jedna po drugiej wraz z przewijaniem. Ten sam zestaw danych co w typowej siatce, tylko podany w tempie, w którym oko nadąża, a każda pozycja dostaje swój moment.
Zanim padnie prośba o kontakt, strona odpowiada na pytanie, dlaczego akurat tu. Liczby, proces i konkret, wszystko w jednym ekranie, żeby nie trzeba było szukać po podstronach.
Ostatni ekran ma jeden cel i jeden przycisk. Bez trzech konkurencyjnych CTA, bez wyboru między kilkoma przyciskami naraz.
Z bliska
System
Im mniej elementów w systemie, tym trudniej zrobić stronę, która wygląda przypadkowo.
Ciepła biel zamiast czystego białego i przygaszona zieleń zamiast typowego dla branży granatu. Dwa drobne odejścia od standardu, po których strona przestaje wyglądać jak każda inna w tej kategorii.
Warsztat
GSAP ScrollTrigger odpala sekcje dokładnie wtedy, gdy wchodzą w kadr. Każdy efekt ma swój moment, żaden nie nachodzi na kolejny.
Wygładzony scroll, który spina animacje w jedną całość. Ładowany warunkowo, więc na telefonie nie dokłada narzutu.
Skala nagłówków zbudowana na clamp, więc tekst skaluje się płynnie zamiast skakać między punktami łamania.
Kolejność sekcji wynika ze ścieżki decyzji odwiedzającego, nie z tego, co ładnie wygląda obok siebie.
Ciężkie efekty wyłączone na dotyku. Nie uproszczona wersja strony, tylko inna decyzja o tym, co ma się ruszać.
Bez kreatora, bez motywu, bez wtyczek. Jeden plik HTML, jeden arkusz, jeden skrypt.
Telefon
Najprostszy sposób na stronę z animacjami, która nie tnie na telefonie, to wyłączyć na dotyku wszystko, co kosztuje. Efekty związane z kursorem, wygładzony scroll i cięższe przejścia nie mają tam sensu, bo nikt ich nie zobaczy, a procesor i tak za nie płaci.
Zostaje czyste wejście sekcji i pełna treść. Ten sam materiał, inna decyzja o tym, co ma się ruszać.
Uczciwie
Chcesz podobną stronę? Zobacz tworzenie stron internetowych, strony dla biur nieruchomości i landing page.
Podoba się ten styl?
Odpowiedz na kilka pytań o swoim pomyśle, a odpowiem z konkretną wyceną i terminem. Bez zobowiązań.
Wyceń projekt