Matejek – strona internetowa dewelopera

proces i budowa strony wizerunkowej dla Spółki z wyszukiwarką mieszkań
O projekcie

Matejek sp. z o.o – Krakowski deweloper zajmujący się kompleksową realizacją projektów z zakresu budownictwa mieszkalnego oraz komercyjnego. Spółka ma za sobą kilka dużych inwestycji mieszkaniowych na terenie Krakowa : Zacisze Kordiana I , Zacisze Kordiana II, Zacisze Kordiana III, Wzgórze Krzemionki, Radzikowskiego 104, Apartamenty w Parku Lotników.

matejek_apartamenty_w_parku_lotnikow
Nasze zadanie

Postawiono przed nami zadanie zbudowania nowej wizerunkowej strony internetowej dla firmy zawierającej kompletne informacje o Spółce oraz zbiór wszystkich inwestycji aktualnych i zrealizowanych. Dodatkowo mieliśmy za zadanie przedstawić w formie timeline / osi czasu / historii firmy zawierającej poszczególne najważniejsze etapy rozwoju i inwestycji. Bardzo ważnym elementem było również utworzenie i wdrożenie wyszukiwarki mieszkań dostępnych w aktualnych inwestycjach Spółki Matejek importujących dane i listę z stron docelowych inwestycji / obecnie inswestycja w Parku Lotników /.

animowana_prezentacja_strony_internetowej_matejek

Proces projektowy strony internetowej i najważniejszych elementów UX/UI

Projektując stronę internetową mieliśmy na uwadze łatwy dostęp do wyszukiwarki dostępnej z każdego miejsca strony internetowej. W tym celu guzik umożliwiający wyszukiwanie umieśliliśmy na pasku menu, które jednocześnie podróżuje za użytkowikiem. Aby jeszcze bardziej uprościć procedurę wyszukiwania mieszkań panel wyszukiwarki jest dostępny na tej samej podstronie na której znajduje się użytkownik w mechanizmie lightbox bez potrzeby realizowania docelowej podstrony wyszukiwarki. Dopiero z tego miejsca po uzupełnieniu parametrów użytkownik przechodzi do importowanej z innych stron inwestycji listy wyników wyszukiwań.

menu_strony_internetowej_matejek_wyszukiwarka
Wyszukiwarka inwestycji dostępna
na podstronach oraz w formie
panelu w systemie lightbox
panel wyszukiwarki na stronie matejek
Stylistyka typu minimal,
wyraziste mocne i kontrastowe kolory

Przyjęliśmy kolorystykę kontrastową bazując w dużej mierze na czerni, bieli i czerwieni z logotypu spółki Matejek. Każdą podstronę inwestycji, o firmie czy kontakt ( kontynuując motyw ciemnego tła ze strony głównej ) rozpoczynamy właśnie od sekcji ciemnej prezchodząc kolejno w kontastową z modułem wyszukiwarki / w przypadku podstorn inwestycji / lub tekstowym.

zastosowany_font_i_kolory_w_projekcie_strony
Proste i równe kształty
historia firmy w formie osi czasu - timeline
matejek_historia_firmy_os_czasu
Proste i równe podziały layoutu na kolumny

W podstronie kontakt ze względu na dużą liczbę działów firmy rozwiązaniem które zastosowaliśmy to podział na dwie kolumny. Lewa kolumna zawiera dane firmy oraz podstawowy kontakt, guzik ‘jak do nas dojechać’ kierujący użytkownika z jego adresu do siedziby firmy ( po kliknięciu użytkownik otrzymuje w nowej karcie trasę wyznaczoną za pomocą Google Maps). Prawa kolumna stanowi formularz kontaktowy.

podstrona_kontakt_matejek_dane_oddzialow_firmy
podstrona_ofirmie_responsywne_uklady
Responsywność

sekcje i elementy układające się pod sobą w układzie blokowym

Jasny przekaz dla odbiorcy

legenda i mapa Google z inwestycjami dopasowana kolorystycznie do strony

mapa_inwestycji_deweloper_krakow_matejek
strona_www_matejek_krakow
Podziel się ;)