Сайт-каталог для агенцтва
«Авангард Нерухомасць»

Сайт можна падзяліць на 4 часткі:

• карпаратыўная частка: расказ пра агенцтва і супрацоўнікаў, кантакты, водзывы кліентаў, вакансіі; пытанні і адказы таксама змясцілі сюды;
• пасадачныя старонкі ключавых паслуг: «Прадаўцу», «Пакупніку», «Абмен»;
• тэматычныя артыкулы;
• і каталог аб'ектаў — самая крутая частка сайта. Ёй мы прысвяцім большую частку расказу.

Распрацоўку прататыпаў мы пачалі толькі праз пару тыдняў пасля старту праекта. Увесь гэты час каманда агенцтва працавала над кантэнтам. Не магу сказаць, што мы прымалі актыўны ўдзел у напісанні кантэнту, але пару слушных парад далі.

Думаю, выраз «памалу разганяліся, але потым хутка беглі» будзе справядлівай характарыстыкай этапа праектавання ды і праекта ўвогуле. Працаваць з якасным кантэнтам на руках было прадуктыўна і прыемна.

Мы разумелі, што праца над праектам будзе працягвацца больш за чатыры месяцы, а атрымліваць профіт кліент жадаў ужо зараз. Таму вырашылі падзяліць праект на этапы і спачатку запусціць пасадачную старонку асноўнай паслугі — продаж нерухомасці.

Даціскаем формай тэст-драйву паслугі.

Расказ здаецца лагічным — пераходзім да дызайну. Так, наперакор логіцы мы не прадоўжылі праектаванне астатніх старонак сайта, а перайшлі да дызайну пасадачнай, каб, як казалі раней, запусціць яе максімальна хутка.

Але ў нашым расказе пра дызайн трошкі пазней, зараз прадоўжым пра праектаванне.

Няхай вас не здзіўляе, што за праектаванне галоўнай старонкі ўзяліся толькі зараз. Найбольш частымі пунктамі уваходу на сайт будуць менавіта пасадачныя старонкі паслуг.

З цікавага: формы «Прадаць» і «Купіць» на першым экране маюць розную логіку. Першая з'яўляецца двухкрокавай формай зваротнай сувязі, якая дазваляе атрымаць даныя наведвальніка, другая — фільтрам, пасля прымянення якога наведвальнік прызямляецца ў каталозе аб’ектаў, адфільтраваных па адпаведнаму крытэрыю.

Пад галерэяй размясцілі загаловак. Далей — тып аб'екта і адрас. Адрас служыць спасылкай для «пераезду» да карты з адзначаным на ёй аб’ектам. Пад імі — характарыстыкі аб'екта, дапоўненыя іконкамі для лепшай візуалізацыі.

У правы слупок старонкі вынеслі кошт аб'екта і квадратнага метра. Пад імі — кантакты агента і агенцтва. Ніжэй — кнопкі дабаўлення ў выбранае, шарынга ў сацыяльных сетках і друку.

У канцы старонкі прапаноўваем варыянты працягу шляху: падпісацца на аб'екты ці перайсці да падобных аб'ектаў.

Фон выбралі белы. У якасці асноўнага колеру ўзялі фірменны — ён добра кантрастуе з белым фонам. Дадатковы колер — шэры і яго адценні.

Для формаў выбралі кантрасны шэры фон — ён добра іх вылучае з астатніх блокаў старонкі.

Удзялілі ўвагу дробязям:

• падтрымалі іконкамі 2 блока пераваг;
• прапрацавалі фонавыя патэрны;
• зрабілі нестандартны прэв'ю відэа-роліка.

Вырашылі абыграць лагатып у блоку «тэст-драйв паслугі»: рыцар, які ўстройвае тэст-драйв каня. Але атрымалася хутчэй вульгарна, а не забаўна. У выніку адмовіліся ад задумкі.

Не чакаючы дызайну астатніх старонак, адправілі лэндынг «Прадаўцу» ў вёрстку, пазней — запраграмавалі формы. Вылілі, настроілі інструменты аналітыкі і запусцілі кантэкстную рэкламу. Сайт ужо пачаў прыносіць лідаў.

Старонкі «Пакупніку» і «Абмен» запазычылі элементы старонкі «Прадаўцу», і на іх дызайн спатрэбілася не шмат часу.

Найбольш цікавым кавалкам працы на гэтым этапе была візуалізацыя аб’ектаў на карце. Для гэтага выкарыстоўвалі інтэграцыю з Яндэкс.Картамі. Пра яе і раскажам падрабязней.

У асноўным варыянце адлюстравання на дэсктопных прыладах карыстальнік бачыць пліткі аб’ектаў у адной частцы экрана і карту з меткамі аб’ектаў — у другой. Блокі звязаны паміж сабой: пры ховеры на плітку рэагуе адпаведная метка на карце. Пры кліку па метцы з’яўляецца поп-ап, аналагічны плітцы ў паменшаным маштабе.

Блізка размешчаныя друг да друга аб’екты аб'ядналі ў кластэры. Пры кліку з’яўляецца поп-ап з пэйджарам, які дазваляе пераключацца паміж аб’ектамі ўнутры кластэра.

Чэкбокс «Шукаць аб’екты ў бачнай вобласці карты» дазваляе хутка фільтраваць аб’екты па геаграфічнай прыкмеце: адзначаны чэкбокс пакідае ў плітцы толькі тыя аб’екты, якія бачныя на карце.

У залежнасці ад жадання карыстальнік можа разгарнуць пліткі ці карту на ўвесь экран.

Адразу пасля загрузкі старонкі наведвальнік можа карыстацца галерэяй пры дапамозе стрэлак на клавіятуры.

Адным з пажаданняў заказчыка было адлюстраванне фатаграфій аб’ектаў у максімальным памеры. Для гэтага нам прыйшлося кастамізаваць галерэю: па кліку на фатаграфію адкрываецца разгорнутая галерэя. Мы максімальна спрасцілі элементы кіравання і схавалі панэль з фатаграфіямі прадпрагляду. Панэль з’яўляецца толькі пры навядзенні на яе. Так мы змаглі «разгарнуць» фатаграфіі практычна на ўвесь экран.

Шорткоды

Для тэкставых старонак рэалізавалі ўстаўку пэўных кантэнтных блокаў праз шорткоды. Напрыклад, дабавіць галерэю, відэа-плэер ці блок водзываў можна адным клікам.

Пакетная загрузка фатаграфій і малюнкаў

У прынцыпе, нічога асаблівага. У галерэю кожнага аб’екта, як правіла, загружаецца больш за 10 фатаграфій. Загружаць кожную паасобку было б той яшчэ прыемнасцю.

Рэалізавалі пакетную загрузку: адміністратар можа выбраць на лакальным камп'ютэры і загрузіць усе фатаграфіі аб’екта разам. Ці можа загрузіць іх праз drag & drop: перацягнуць фатаграфіі ў пэўную вобласць старонкі рэдагавання аб’екта.

Выбраныя аб’екты

На сайце адсутнічае механізм рэгістрацыі/аўтарызацыі. Пры гэтым прысутнічае магчымасць дабаўлення аб’ектаў у выбранае.

Рэалізавалі функцыянал праз кукі — дадзеныя, якія захоўваюцца ў браўзеры карыстальніка. Калі карыстальнік вярнецца на сайт агенцтва, то ён знойдзе выбраныя аб’екты, якія ён дабаўляў на працягу апошніх 12 месяцаў.

Падобныя аб’екты

Алгарытм фарміравання падобных аб’ектаў па характарыстыкам і кошту ў картачцы аб’екта ўлічвае 3 крытэрыя, кожнаму з якіх аддаецца пэўны прыярытэт. Дадаткова прадугледзелі фарміраванне «рэзервовага» спіса падобных аб’ектаў, калі ў каталозе не знайшлося аб’ектаў, якія адпавядаюць асноўным крытэрыям.