Сайт агентства оренди нерухомості ОАЕ
Про проєкт
Приємно, коли клієнти повертаються. Ще приємніше усвідомлювати, що рішення від Webnauts рухають бізнес уперед і мотивують клієнтів удосконалювати свій продукт разом з нами.
Мова йде про проєкт у сфері елітної нерухомості Sezavi. Результатом нашої першої співпраці став простий та привабливий сайт на WordPress.
Читайте також:
Сайт агентства нерухомості в ОАЕ
На цей раз клієнт дозрів до безкомпромісного рішення, і чекав від нашої команди дивовижний сайт luxury-сегменту з адмін-панеллю, що легко налаштовується. За своєю структурою сайт мав виглядати як лендинг, але з окремою сторінкою-каталогом вілл та апартаментів.
Ми вирішили це завдання у декілька етапів:
- спроєктували унікальний та естетичний дизайн, орієнтований на клієнтів із високим рівнем достатку;
- забезпечили захопливий користувальницький досвід за допомогою анімацій;
- створили тонко налаштовувану адмінку з унікальною фічею;
- оптимізували сайт для різних типів пристроїв;
- наповнили готові сторінки якісним контентом.
Чим ми керувалися та за допомогою яких інструментів реалізували проєкт, читайте далі в нашому кейсі.
Дизайн
Головна сторінка
Особливу увагу ми приділили першому екрану з його анімаціями. Треба сказати, що він зазнав силу-силенну варіацій. За словами нашого дизайнера, підсумковій версії першого екрану передували варіанти макетів «Фінал», «Остаточний фінал» і «Ну точно остаточний».
Ось варіанти першого екрану на початку робіт:
А так виглядає його остаточна анімована версія:
Дизайн першого екрану досить не простий, але все ж таки нам вдалося домогтися легкості та повітряності за допомогою білого кольору. Відчуття достатку вільного простору додає грамотно структурована інформація про агентство, дубайські околиці та можливості елітного відпочинку у вигляді плавного слайд-шоу.
Нам вдалося досягти ідеального балансу між наочністю та інформативністю: типографіка, фото та інші елементи дизайну ніби линуть у невагомому візуальному середовищі. Все це справляє враження елегантності та вишуканості, як і просив клієнт:
Сторінки вілл та апартаментів
Зручності користувачів і конверсії сайту сприяє кнопка переходу на список нерухомості. Вона зафіксована разом із верхнім меню сайту і завжди доступна при прокручуванні сторінки:
Ми вирішили відійти від звичайної картки товару з коротким описом та оформити кожну віллу у вигляді окремої сторінки. Коли відвідувач потрапляє на неї, то ніби мандрує майбутніми апартаментами. Яскраві фото та короткі описи знайомлять з усією необхідною інформацією цікавим і зручним способом:
На завершення опису відвідувачам пропонується зв’язатися з менеджером:
Окрема сторінка з пропозиціями для клієнта
Коли клієнт звертається до компанії з проханням підібрати для нього підхожі варіанти для проживання, менеджер може легко сформувати для нього добірку пропозицій прямо в адмінці сайту:
У підсумку клієнт отримує індивідуальне посилання на добірку апартаментів у вигляді окремої вебсторінки:
Створення сторінки з індивідуальною добіркою вілл за 1 хвилину
Припустимо, що менеджер Sezavi отримав запит від клієнтки Юлії на добірку вілл в районі Палм Джумейри з басейном, 2 гаражами, 4 спальнями та ванними кімнатами. Завдяки вбудованому конструктору можна буквально за хвилину створити сторінку з пропозиціями в рамках заданого стилю сайту.
Індивідуальний підхід та оперативність менеджерів приємно дивують будь-якого клієнта. А в умовах високої конкуренції у сфері real state відіграють вирішальну роль: поки інші менеджери лише починають обробку замовлення, клієнт Sezavi у цей час вже проглядає персональну пропозицію.
Давайте подивимося, як відбувається процес формування індивідуальної добірки:
Верстка та анімація
Тільки серйозні технології здатні перетворити елегантні дизайн-рішення на м’яку чудову презентацію:
- Nuxt 3 — фреймворк, за допомогою якого було написано проєкт;
- useFetch — технологія в Nuxt 3 для роботи з бекендом сайту;
- Pinia — бібліотека для роботи зі сховищем даних.
Яскравості та динамічності сторінкам надають окремі інтерактивні елементи, заанімовані за допомогою таких інструментів:
- Splide — бібліотека для створення ефектних слайдерів;
- FullPage.js — бібліотека для створення поекранного скролла;
- GSAP — бібліотека для створення анімацій.
Адміністрування
Для втілення всіх задуманих функцій під час розробки серверної частини сайту були використані наступні інструменти:
- мова програмування PHP 8.2;
- PHP-фреймворк з використанням архітектурної моделі MVC Laravel 10;
- технологія Docker для запуску сайту на сервері.
Наші розробники успішно втілили в життя кілька унікальних завдань з розробки адмінки, а саме:
- Реалізували функцію індивідуальної добірки вілл та апартаментів. Тепер менеджери можуть за лічені хвилини зібрати персональну сторінку з окремим посиланням під чіткі запити покупця:
- Інтегрували сайт із клієнтською CRM, щоб заявки одразу йшли до адміністратора.
- Налагодили підвантаження відгуків з Google:
Так відгуки відображаються на сайті:
- Розробили інтерактивну мапу з відображенням кожного об’єкта за власними координатами:
- Автоматизували конвертацію всіх зображень у міру завантаження в легкий і прийнятний для Google формат webp. Це дозволило прискорити завантаження сторінок з великою кількістю фотографій:
- Надали широкі можливості самостійного редагування контенту.
Наповнення контентом
Коли адміністративна панель була повністю готова до роботи, відділ контенту приступив до наповнення сторінок, а саме:
- генерації та перекладу описів об’єктів,
- завантаження фотографій апартаментів та вілл,
- підготовки зачіпних заголовків і наснажливих текстів для головної сторінки тощо.
Як наслідок клієнт отримав повністю готовий до запуску сайт, яким легко та просто керувати самостійно, заповнюючи потрібні поля: додавати нові об’єкти, редагувати наявний контент і створювати сторінки з індивідуальними добірками під кожного клієнта.
Адаптивність
Велику увагу ми приділили мобільній версії сайту. З огляду на особливості невеликого сенсорного екрана смартфонів та планшетів нам вдалося зберегти загальну концепцію: органічно розмістити та заанімувати всі елементи.
По секрету скажемо, що над відтворенням анімацій і поекранного скроллу довелося неабияк попітніти. Але цей результат коштував зусиль розробника: в ефектності та плавності взаємодій мобільна версія анітрохи не поступається десктопній.
Висновки
В результаті співпраці дизайнерів, контент-менеджерів і розробників ми отримали вишуканий і гарний продукт з простою адмінкою та легким управлінням.
Сьогодні сайт пропонує до уваги користувачів не тільки перелік своїх пропозицій. Завдяки зручній формі зворотного зв’язку він збирає інформацію від відвідувачів як повноцінний лендинг:
Комментарии