Сайт агентства аренды недвижимости ОАЭ
О проекте
Приятно, когда клиенты возвращаются. Ещё приятней осознавать, что решения от 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, что позволило ускорить загрузку страниц с большим количеством фотографий.
- Предоставили широкие возможности для самостоятельного редактирования контента.
Наполнение контентом
Когда административная панель была полностью готова к работе, отдел контента приступил к наполнению страниц, а именно:
- генерации и переводу описаний объектов,
- загрузке фотографий апартаментов и вилл,
- подготовке цепляющих заголовков и вдохновляющих текстов для главной страницы и т. п.
В итоге клиент получил полностью готовый к запуску сайт, которым легко и просто управлять самостоятельно, заполняя нужные поля: добавлять новые объекты, редактировать существующий контент и создавать страницы с индивидуальными подборками под каждого клиента.
Адаптивность
Большое внимание мы уделили мобильной версии сайта, так как аренда недвижимости в ОАЭ часто осуществляется с телефона. Учитывая особенности небольшого сенсорного экрана смартфонов и планшетов нам удалось сохранить общую концепцию: органично разместить и заанимировать все элементы.
По секрету скажем, что над воспроизведением анимаций и поэкранного скролла пришлось изрядно попотеть. Но этот результат стоил усилий разработчика: в эффектности и плавности взаимодействий мобильная версия нисколько не уступает десктопной.
Выводы
В результате сотрудничества дизайнеров, контент-менеджеров и разработчиков мы получили изысканный и красивый продукт с простой админкой и лёгким управлением.
Сегодня сайт не только предлагает вниманию пользователей перечень своих предложений. Благодаря удобной форме обратной связи он собирает информацию от посетителей как полноценный лендинг:
Комментарии